General-AI-Platform-Web-Client/src/core/plugin/LayerPlugin.ts

/*
 * @Author: 秦少卫
 * @Date: 2023-06-15 23:23:18
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-08-06 17:29:53
 * @Description: 图层调整插件
 */

import { fabric } from "fabric";
import Editor from "../core";
type IEditor = Editor;

class LayerPlugin {
  public canvas: fabric.Canvas;
  public editor: IEditor;
  static pluginName = "LayerPlugin";
  static apis = ["up", "upTop", "down", "downTop"];
  constructor(canvas: fabric.Canvas, editor: IEditor) {
    this.canvas = canvas;
    this.editor = editor;
  }

  _getWorkspace() {
    return this.canvas.getObjects().find(item => item.id === "workspace");
  }

  _workspaceSendToBack() {
    const workspace = this._getWorkspace();
    workspace && workspace.sendToBack();
  }

  up() {
    const actives = this.canvas.getActiveObjects();
    if (actives && actives.length === 1) {
      const activeObject = this.canvas.getActiveObjects()[0];
      activeObject && activeObject.bringForward();
      this.canvas.renderAll();
      this._workspaceSendToBack();
    }
  }

  upTop() {
    const actives = this.canvas.getActiveObjects();
    if (actives && actives.length === 1) {
      const activeObject = this.canvas.getActiveObjects()[0];
      activeObject && activeObject.bringToFront();
      this.canvas.renderAll();
      console.log(this);
      this._workspaceSendToBack();
    }
  }

  down() {
    const actives = this.canvas.getActiveObjects();
    if (actives && actives.length === 1) {
      const activeObject = this.canvas.getActiveObjects()[0];
      activeObject && activeObject.sendBackwards();
      this.canvas.renderAll();
      this._workspaceSendToBack();
    }
  }

  downTop() {
    const actives = this.canvas.getActiveObjects();
    if (actives && actives.length === 1) {
      const activeObject = this.canvas.getActiveObjects()[0];
      activeObject && activeObject.sendToBack();
      this.canvas.renderAll();
      this._workspaceSendToBack();
    }
  }

  contextMenu() {
    const activeObject = this.canvas.getActiveObject();
    if (activeObject) {
      return [
        {
          text: "图层管理",
          hotkey: "❯",
          subitems: [
            {
              text: "上一个",
              hotkey: "key",
              onclick: () => this.up()
            },
            {
              text: "下一个",
              hotkey: "key",
              onclick: () => this.down()
            },
            {
              text: "置顶",
              hotkey: "key",
              onclick: () => this.upTop()
            },
            {
              text: "置底",
              hotkey: "key",
              onclick: () => this.downTop()
            }
          ]
        }
      ];
      // return [{ text: '复制', hotkey: 'Ctrl+V', disabled: false, onclick: () => this.clone() }];
    }
  }

  destroy() {
    console.log("pluginDestroy");
  }
}

export default LayerPlugin;