class HighLight {
    public Name = 'highLight';
    public cell = {
        row: 0,
        column: 0,
    };
    
    public bootstrap() {
        // 创建一个容器节点
        this.container = new Group();
        // 将其添加到 Feature 图层
        this.layer.add(this.container);
        // 监听 mouseDown 事件
        this.mouseDownEvent = global.mousedown.event(this.onMouseDown);
    }
    
    public updated() {
        this.paint();
    }
    
    public addActivedEvents() {
        // 绑定滚动事件
        this.scrollEvent = global.scroll.event(this.onScroll);
    }
    
    public removeActivedEvents() {
        this.scrollEvent?.dispose();
    }
    
    public destroy() {
        this.container?.destroy();
        this.removeActivedEvents();
    }
    
    private onMouseDown(param: IMouseDownParam) {
        const { x, y } = param;
        // 根据点击的 x、y 坐标点获取当前触发的单元格
        this.cell = this.getCell(x, y);
        // 绘制
        this.paint();
        // 只有在鼠标点击之后，才需要绑定滚动等事件，避免不必要的开销
        this.addActivedEvents();
    }
    
    private onScroll(delta: IDelta) {
        const { deltaX, deltaY } = delta;
        // 根据滚动的 delta 值更新高亮背景的位置
        const position = this.container.position();
        this.container.x(position.x + deltaX);
        this.container.y(position.y + deltaY);
    }
    
    /**
     * 绘制背景高亮
     */
    private paint() {
        // 根据单元格获取对应的位置和宽高信息
        const cellRect = this.getCellRect(this.cell);
        // 创建一个矩形
        const rect = new Rect({
            fill: 'red',
            x: cellRect.x,
            y: cellRect.y,
            width: cellRect.width,
            height: cellRect.height,
        });
        // 将矩形加入到父节点
        this.container.add(rect);
    }
}

// 所有的 feature
const features: IFeature[] = [
  [Search, { requiredEdit: false }],
  [Selector, { requiredEdit: false, canUseInServer: true }],
  [RecordHover, { requiredEdit: false, canUseInServer: true }],
  [ToolTip, { requiredEdit: false }],
  [Scroller, { requiredEdit: false, canUseInServer: true }],
];

class FeatureCanvas {
    public bootstrap() {
        // 安装 feature 插件
        this.installFeatures(features);
    }
    
    /**
     * 安装 features
     * @param features
     */
    public installFeatures(features: IFeature[]) {
        features.forEach((feature) => {
            const [FeatureConstructor, featureSetting] = feature;
            // 获取配置项
            const { requiredEdit, canUseInServer = false } = featureSetting;
            // 检查是否具有相关权限
            if (
                (requiredEdit && !this.canEdit()) ||
                (!canUseInServer && this.isServer())
            ) {
                return;
            }
     
            const featureInstance = new FeatureConstructor(this);
            featureInstance.bootstrap();
            this.features[name] = featureInstance;
        });
    }
}

(this.getFeature('highLight') as HighLight).cell;

const highLight = this.getFeature('highLight') as HighLight;

highLight.cell = {
    row: 100,
    column: 100,
};
highLight.paint();

import { makeObservable, observable, action } from 'mobx';

class Model {
  public count = 0;

  public constructor() {
    // 将 count 设置为可观察属性
    makeObservable(this, {
      count: observable,
      increment: action,
    });
  }

  public increment() {
    this.count++;
  }
}

import { observer, watch } from 'utils/reactive';

@observer()
class XXXFeature {
  private title = new KonvaText();
  
  /*
   * 监听 model.count，如果发生变化，将自动调用 refresh 方法
   */
  @watch('count')
  public refresh(count: number) {
    this.title.text(`${count}`);
  }
}

import get from 'lodash/get';
import { autorun } from 'mobx';

// 监听装饰器，在这里是用于拦截目标类，去注册 watcher 的监听
export const observer =
  () =>
  <T extends new (...args: any[]) => any>(Constructor: T) =>
    class extends Constructor {
      public constructor(...args: any[]) {
        super(...args);
        // 取出所有的 $watchers，遍历执行，触发 Mobx 的依赖收集
        Constructor.prototype?.$watchers?.forEach((watcher) => watcher(this, this.model));
      }
    };

// 观察装饰器，用于观察 Model 中某个属性变化后自动触发 watcher
export const watch = (path: string) =>
  function (_target: unknown, _propertyKey: string, descriptor: PropertyDescriptor) {
  
    if (!_target.$watchers) {
      _target.$watchers = [];
    }
    
    // 将 autorun 挂载到 $watchers 上面，方便之后执行
    _target.$watchers.push((context: unknown, model: Model) => {
      // 使用 autorun 触发依赖收集
      autorun(() => {
        const result = get(model, path);
        descriptor.value.call(context, result);
      });
    });

    return descriptor;
  };