@opentiny/fluent-editor 4.0.0-alpha.8 → 4.0.0-beta.0

package/es/modules/flow-chart/modules/context-menu.es.js

@@ -0,0 +1,184 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import "../../../config/index.es.js";
+import { I18N } from "../../i18n.es.js";
+import { registerFlowChartI18N } from "../i18n/index.es.js";
+import { CHANGE_LANGUAGE_EVENT } from "../../../config/editor.config.es.js";
+class FlowChartContextMenuHandler {
+  constructor(quill, blot) {
+    __publicField(this, "texts");
+    __publicField(this, "lang");
+    this.quill = quill;
+    this.blot = blot;
+    const i18nModule = this.quill.getModule("i18n");
+    registerFlowChartI18N(I18N);
+    this.lang = i18nModule.options.lang;
+    this.texts = this.resolveTexts();
+    this.quill.emitter.on(CHANGE_LANGUAGE_EVENT, (lang) => {
+      this.lang = lang;
+      this.texts = this.resolveTexts();
+      this.updateContextMenuItems();
+    });
+  }
+  getText(key) {
+    return this.texts[key];
+  }
+  resolveTexts() {
+    return {
+      copy: I18N.parserText("flowChart.contextMenu.copy", this.lang),
+      cut: I18N.parserText("flowChart.contextMenu.cut", this.lang),
+      paste: I18N.parserText("flowChart.contextMenu.paste", this.lang),
+      deleteContent: I18N.parserText("flowChart.contextMenu.deleteContent", this.lang),
+      deleteNode: I18N.parserText("flowChart.contextMenu.deleteNode", this.lang),
+      deleteEdge: I18N.parserText("flowChart.contextMenu.deleteEdge", this.lang)
+    };
+  }
+  updateContextMenuItems() {
+    if (!this.blot.contextMenu) return;
+    const menuItems = this.blot.contextMenu.querySelectorAll(".ql-flow-chart-context-menu-item");
+    if (menuItems.length > 0) {
+      Array.from(menuItems).forEach((item) => {
+        const text = item.getAttribute("data-text-key");
+        if (text && this.texts[text]) {
+          item.textContent = this.texts[text];
+        }
+      });
+    }
+  }
+}
+const contextMenuHandlers = /* @__PURE__ */ new WeakMap();
+function initContextMenu(blot, quill) {
+  blot.contextMenu = document.createElement("div");
+  blot.contextMenu.className = "ql-flow-chart-context-menu";
+  blot.contextMenu.style.position = "fixed";
+  blot.contextMenu.style.background = "white";
+  blot.contextMenu.style.borderRadius = "4px";
+  blot.contextMenu.style.boxShadow = "0 2px 10px rgba(0,0,0,0.1)";
+  blot.contextMenu.style.padding = "5px 0";
+  blot.contextMenu.style.zIndex = "1000";
+  blot.contextMenu.style.display = "block";
+  blot.contextMenu.style.visibility = "visible";
+  blot.contextMenu.style.opacity = "1";
+  blot.contextMenu.style.width = "120px";
+  blot.contextMenu.style.height = "auto";
+  blot.domNode.appendChild(blot.contextMenu);
+  const handler = new FlowChartContextMenuHandler(quill, blot);
+  contextMenuHandlers.set(blot, handler);
+  if (blot.flowChart) {
+    blot.flowChart.on("node:contextmenu", (event) => {
+      const { data, e } = event;
+      e.preventDefault();
+      e.stopPropagation();
+      blot.currentElement = { type: "node", data };
+      showNodeContextMenu(blot, handler, e.clientX, e.clientY);
+    });
+    blot.flowChart.on("edge:contextmenu", (event) => {
+      const { data, e } = event;
+      e.preventDefault();
+      e.stopPropagation();
+      blot.currentElement = { type: "edge", data };
+      showEdgeContextMenu(blot, handler, e.clientX, e.clientY);
+    });
+  }
+  const hideMenu = () => {
+    if (blot.contextMenu) {
+      blot.contextMenu.style.display = "none";
+      blot.currentElement = null;
+    }
+  };
+  blot.flowChart.on("blank:click", hideMenu);
+  document.addEventListener("click", (e) => {
+    if (blot.contextMenu && !blot.contextMenu.contains(e.target)) {
+      hideMenu();
+    }
+  });
+}
+function showNodeContextMenu(blot, handler, x, y) {
+  clearContextMenu(blot);
+  addContextMenuItem(blot, handler.getText("copy"), "copy", () => handleCopy(blot));
+  addContextMenuItem(blot, handler.getText("deleteContent"), "deleteContent", () => handleDeleteContent(blot));
+  addContextMenuItem(blot, handler.getText("deleteNode"), "deleteNode", () => handleDeleteNode(blot));
+  showContextMenu(blot, x, y);
+}
+function showEdgeContextMenu(blot, handler, x, y) {
+  clearContextMenu(blot);
+  addContextMenuItem(blot, handler.getText("deleteContent"), "deleteContent", () => handleDeleteContent(blot));
+  addContextMenuItem(blot, handler.getText("deleteEdge"), "deleteEdge", () => handleDeleteEdge(blot));
+  showContextMenu(blot, x, y);
+}
+function clearContextMenu(blot) {
+  if (blot.contextMenu) {
+    blot.contextMenu.innerHTML = "";
+  }
+}
+function showContextMenu(blot, x, y) {
+  if (blot.contextMenu) {
+    blot.contextMenu.style.display = "block";
+    blot.contextMenu.style.left = `${x}px`;
+    blot.contextMenu.style.top = `${y}px`;
+  }
+}
+function addContextMenuItem(blot, text, textKey, onClick) {
+  const item = document.createElement("div");
+  item.className = "ql-flow-chart-context-menu-item";
+  item.textContent = text;
+  item.setAttribute("data-text-key", textKey);
+  item.style.padding = "5px 15px";
+  item.style.cursor = "pointer";
+  item.style.whiteSpace = "nowrap";
+  item.addEventListener("click", onClick);
+  item.addEventListener("mouseenter", () => {
+    item.style.background = "#f5f5f5";
+  });
+  item.addEventListener("mouseleave", () => {
+    item.style.background = "white";
+  });
+  blot.contextMenu.appendChild(item);
+}
+function handleCopy(blot) {
+  if (blot.currentElement && blot.currentElement.type === "node") {
+    const nodeId = blot.currentElement.data.id;
+    blot.flowChart.cloneNode(nodeId);
+  }
+  hideContextMenu(blot);
+}
+function handleDeleteContent(blot) {
+  if (blot.currentElement) {
+    if (blot.currentElement.type === "node") {
+      const node = blot.currentElement.data;
+      blot.flowChart.updateText(node.id, "");
+    } else if (blot.currentElement.type === "edge") {
+      const edge = blot.currentElement.data;
+      blot.flowChart.updateText(edge.id, "");
+    }
+    blot.data = blot.flowChart.getGraphData();
+    blot.domNode.setAttribute("data-flow-chart", JSON.stringify(blot.data));
+  }
+  hideContextMenu(blot);
+}
+function handleDeleteNode(blot) {
+  if (blot.currentElement && blot.currentElement.type === "node") {
+    blot.flowChart.deleteNode(blot.currentElement.data.id);
+    blot.data = blot.flowChart.getGraphData();
+    blot.domNode.setAttribute("data-flow-chart", JSON.stringify(blot.data));
+  }
+  hideContextMenu(blot);
+}
+function handleDeleteEdge(blot) {
+  if (blot.currentElement && blot.currentElement.type === "edge") {
+    blot.flowChart.deleteEdge(blot.currentElement.data.id);
+    blot.data = blot.flowChart.getGraphData();
+    blot.domNode.setAttribute("data-flow-chart", JSON.stringify(blot.data));
+  }
+  hideContextMenu(blot);
+}
+function hideContextMenu(blot) {
+  if (blot.contextMenu) {
+    blot.contextMenu.style.display = "none";
+  }
+}
+export {
+  initContextMenu
+};
+//# sourceMappingURL=context-menu.es.js.map

package/es/modules/flow-chart/modules/context-menu.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.es.js","sources":["../../../../../src/modules/flow-chart/modules/context-menu.ts"],"sourcesContent":["import type FluentEditor from '../../../core/fluent-editor'\nimport type FlowChartPlaceholderBlot from '../formats/flow-chart-blot'\nimport { CHANGE_LANGUAGE_EVENT } from '../../../config'\nimport { I18N } from '../../../modules/i18n'\nimport { registerFlowChartI18N } from '../i18n/index'\n\nclass FlowChartContextMenuHandler {\n  private texts: Record<string, string>\n  private lang: string\n  getText(key: keyof Record<string, string>): string {\n    return this.texts[key]\n  }\n\n  constructor(private quill: FluentEditor, private blot: FlowChartPlaceholderBlot) {\n    const i18nModule = this.quill.getModule('i18n') as I18N\n    registerFlowChartI18N(I18N)\n    this.lang = i18nModule.options.lang\n    this.texts = this.resolveTexts()\n    this.quill.emitter.on(CHANGE_LANGUAGE_EVENT, (lang: string) => {\n      this.lang = lang\n      this.texts = this.resolveTexts()\n      this.updateContextMenuItems()\n    })\n  }\n\n  resolveTexts() {\n    return {\n      copy: I18N.parserText('flowChart.contextMenu.copy', this.lang),\n      cut: I18N.parserText('flowChart.contextMenu.cut', this.lang),\n      paste: I18N.parserText('flowChart.contextMenu.paste', this.lang),\n      deleteContent: I18N.parserText('flowChart.contextMenu.deleteContent', this.lang),\n      deleteNode: I18N.parserText('flowChart.contextMenu.deleteNode', this.lang),\n      deleteEdge: I18N.parserText('flowChart.contextMenu.deleteEdge', this.lang),\n    }\n  }\n\n  updateContextMenuItems() {\n    if (!this.blot.contextMenu) return\n\n    const menuItems = this.blot.contextMenu.querySelectorAll('.ql-flow-chart-context-menu-item')\n    if (menuItems.length > 0) {\n      Array.from(menuItems).forEach((item) => {\n        const text = item.getAttribute('data-text-key')\n        if (text && this.texts[text as keyof Record<string, string>]) {\n          item.textContent = this.texts[text as keyof Record<string, string>]\n        }\n      })\n    }\n  }\n}\n\nconst contextMenuHandlers = new WeakMap<FlowChartPlaceholderBlot, FlowChartContextMenuHandler>()\n\nexport function initContextMenu(blot: FlowChartPlaceholderBlot, quill: FluentEditor): void {\n  blot.contextMenu = document.createElement('div')\n  blot.contextMenu.className = 'ql-flow-chart-context-menu'\n  blot.contextMenu.style.position = 'fixed'\n  blot.contextMenu.style.background = 'white'\n  blot.contextMenu.style.borderRadius = '4px'\n  blot.contextMenu.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)'\n  blot.contextMenu.style.padding = '5px 0'\n  blot.contextMenu.style.zIndex = '1000'\n  blot.contextMenu.style.display = 'block'\n  blot.contextMenu.style.visibility = 'visible'\n  blot.contextMenu.style.opacity = '1'\n  blot.contextMenu.style.width = '120px'\n  blot.contextMenu.style.height = 'auto'\n  blot.domNode.appendChild(blot.contextMenu)\n\n  const handler = new FlowChartContextMenuHandler(quill, blot)\n  contextMenuHandlers.set(blot, handler)\n\n  if (blot.flowChart) {\n    blot.flowChart.on('node:contextmenu', (event: any) => {\n      const { data, e } = event\n      e.preventDefault()\n      e.stopPropagation()\n      blot.currentElement = { type: 'node', data }\n      showNodeContextMenu(blot, handler, e.clientX, e.clientY)\n    })\n\n    blot.flowChart.on('edge:contextmenu', (event: any) => {\n      const { data, e } = event\n      e.preventDefault()\n      e.stopPropagation()\n      blot.currentElement = { type: 'edge', data }\n      showEdgeContextMenu(blot, handler, e.clientX, e.clientY)\n    })\n  }\n\n  const hideMenu = () => {\n    if (blot.contextMenu) {\n      blot.contextMenu.style.display = 'none'\n      blot.currentElement = null\n    }\n  }\n\n  blot.flowChart.on('blank:click', hideMenu)\n  document.addEventListener('click', (e) => {\n    if (blot.contextMenu && !blot.contextMenu.contains(e.target as Node)) {\n      hideMenu()\n    }\n  })\n}\n\nfunction showNodeContextMenu(blot: FlowChartPlaceholderBlot, handler: FlowChartContextMenuHandler, x: number, y: number): void {\n  clearContextMenu(blot)\n\n  addContextMenuItem(blot, handler.getText('copy'), 'copy', () => handleCopy(blot))\n  addContextMenuItem(blot, handler.getText('deleteContent'), 'deleteContent', () => handleDeleteContent(blot))\n  addContextMenuItem(blot, handler.getText('deleteNode'), 'deleteNode', () => handleDeleteNode(blot))\n\n  showContextMenu(blot, x, y)\n}\n\nfunction showEdgeContextMenu(blot: FlowChartPlaceholderBlot, handler: FlowChartContextMenuHandler, x: number, y: number): void {\n  clearContextMenu(blot)\n\n  addContextMenuItem(blot, handler.getText('deleteContent'), 'deleteContent', () => handleDeleteContent(blot))\n  addContextMenuItem(blot, handler.getText('deleteEdge'), 'deleteEdge', () => handleDeleteEdge(blot))\n\n  showContextMenu(blot, x, y)\n}\n\nfunction clearContextMenu(blot: FlowChartPlaceholderBlot): void {\n  if (blot.contextMenu) {\n    blot.contextMenu.innerHTML = ''\n  }\n}\n\nfunction showContextMenu(blot: FlowChartPlaceholderBlot, x: number, y: number): void {\n  if (blot.contextMenu) {\n    blot.contextMenu.style.display = 'block'\n    blot.contextMenu.style.left = `${x}px`\n    blot.contextMenu.style.top = `${y}px`\n  }\n}\n\nfunction addContextMenuItem(blot: FlowChartPlaceholderBlot, text: string, textKey: string, onClick: () => void): void {\n  const item = document.createElement('div')\n  item.className = 'ql-flow-chart-context-menu-item'\n  item.textContent = text\n  item.setAttribute('data-text-key', textKey)\n  item.style.padding = '5px 15px'\n  item.style.cursor = 'pointer'\n  item.style.whiteSpace = 'nowrap'\n  item.addEventListener('click', onClick)\n  item.addEventListener('mouseenter', () => {\n    item.style.background = '#f5f5f5'\n  })\n  item.addEventListener('mouseleave', () => {\n    item.style.background = 'white'\n  })\n  blot.contextMenu!.appendChild(item)\n}\n\nfunction handleCopy(blot: FlowChartPlaceholderBlot): void {\n  if (blot.currentElement && blot.currentElement.type === 'node') {\n    const nodeId = blot.currentElement.data.id\n    blot.flowChart.cloneNode(nodeId)\n  }\n  hideContextMenu(blot)\n}\n\nfunction handleDeleteContent(blot: FlowChartPlaceholderBlot): void {\n  if (blot.currentElement) {\n    if (blot.currentElement.type === 'node') {\n      const node = blot.currentElement.data\n      blot.flowChart.updateText(node.id, '')\n    }\n    else if (blot.currentElement.type === 'edge') {\n      const edge = blot.currentElement.data\n      blot.flowChart.updateText(edge.id, '')\n    }\n    blot.data = blot.flowChart.getGraphData()\n    blot.domNode.setAttribute('data-flow-chart', JSON.stringify(blot.data))\n  }\n  hideContextMenu(blot)\n}\n\nfunction handleDeleteNode(blot: FlowChartPlaceholderBlot): void {\n  if (blot.currentElement && blot.currentElement.type === 'node') {\n    blot.flowChart.deleteNode(blot.currentElement.data.id)\n    blot.data = blot.flowChart.getGraphData()\n    blot.domNode.setAttribute('data-flow-chart', JSON.stringify(blot.data))\n  }\n  hideContextMenu(blot)\n}\n\nfunction handleDeleteEdge(blot: FlowChartPlaceholderBlot): void {\n  if (blot.currentElement && blot.currentElement.type === 'edge') {\n    blot.flowChart.deleteEdge(blot.currentElement.data.id)\n    blot.data = blot.flowChart.getGraphData()\n    blot.domNode.setAttribute('data-flow-chart', JSON.stringify(blot.data))\n  }\n  hideContextMenu(blot)\n}\n\nfunction hideContextMenu(blot: FlowChartPlaceholderBlot): void {\n  if (blot.contextMenu) {\n    blot.contextMenu.style.display = 'none'\n  }\n}\n"],"names":[],"mappings":"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"}

package/es/modules/flow-chart/modules/control-panel.es.js

@@ -0,0 +1,286 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import "../../../config/index.es.js";
+import { I18N } from "../../i18n.es.js";
+import { registerFlowChartI18N } from "../i18n/index.es.js";
+import { lineIcon, contractIcon, screenTypeIcon, fitIcon, zoomInIcon, zoomOutIcon, forwardIcon, backIcon, polyLineIcon, bezierIcon, screenReduceIcon } from "../icons.es.js";
+import { CHANGE_LANGUAGE_EVENT } from "../../../config/editor.config.es.js";
+class FlowChartControlPanelHandler {
+  constructor(quill, blot) {
+    __publicField(this, "texts");
+    __publicField(this, "lang");
+    this.quill = quill;
+    this.blot = blot;
+    const i18nModule = this.quill.getModule("i18n");
+    registerFlowChartI18N(I18N);
+    this.lang = i18nModule.options.lang;
+    this.texts = this.resolveTexts();
+    this.quill.emitter.on(CHANGE_LANGUAGE_EVENT, (lang) => {
+      this.lang = lang;
+      this.texts = this.resolveTexts();
+      this.updateControlPanelTexts();
+    });
+  }
+  getText(key) {
+    return this.texts[key];
+  }
+  resolveTexts() {
+    return {
+      exportTitle: I18N.parserText("flowChart.controlPanel.exportTitle", this.lang),
+      zoomOutTitle: I18N.parserText("flowChart.controlPanel.zoomOutTitle", this.lang),
+      zoomInTitle: I18N.parserText("flowChart.controlPanel.zoomInTitle", this.lang),
+      fitTitle: I18N.parserText("flowChart.controlPanel.fitTitle", this.lang),
+      backTitle: I18N.parserText("flowChart.controlPanel.backTitle", this.lang),
+      forwardTitle: I18N.parserText("flowChart.controlPanel.forwardTitle", this.lang),
+      setEdgeTypeTitle: I18N.parserText("flowChart.controlPanel.setEdgeTypeTitle", this.lang),
+      panelStatusTitle: I18N.parserText("flowChart.controlPanel.panelStatusTitle", this.lang),
+      screenTypeTitle: I18N.parserText("flowChart.controlPanel.screenTypeTitle", this.lang)
+    };
+  }
+  updateControlPanelTexts() {
+    const controlItems = this.blot.domNode.querySelectorAll(".ql-flow-chart-control-item");
+    const controlItemMap = {
+      "zoom-out": "zoomOutTitle",
+      "zoom-in": "zoomInTitle",
+      "fit": "fitTitle",
+      "back": "backTitle",
+      "forward": "forwardTitle",
+      "set-edge-type": "setEdgeTypeTitle",
+      "panel-status": "panelStatusTitle",
+      "screen-type": "screenTypeTitle"
+    };
+    controlItems.forEach((item) => {
+      const controlType = item.dataset.controlType;
+      if (controlType && controlItemMap[controlType] && this.texts[controlItemMap[controlType]]) {
+        item.title = this.texts[controlItemMap[controlType]];
+      }
+    });
+  }
+}
+const controlPanelHandlers = /* @__PURE__ */ new WeakMap();
+const DISABLED_OPACITY = "0.5";
+const ENABLED_OPACITY = "1";
+function createControlPanel(blot, quill) {
+  const controlPanel = document.createElement("div");
+  controlPanel.className = "ql-flow-chart-control";
+  const controlRightUpPanel = document.createElement("div");
+  controlRightUpPanel.className = "ql-flow-chart-right-up-control";
+  const handler = new FlowChartControlPanelHandler(quill, blot);
+  controlPanelHandlers.set(blot, handler);
+  const zoomOutBtn = createControlItem("zoom-out", handler.getText("zoomOutTitle"), () => handleZoomOut(blot));
+  const zoomInBtn = createControlItem("zoom-in", handler.getText("zoomInTitle"), () => handleZoomIn(blot));
+  const resetBtn = createControlItem("fit", handler.getText("fitTitle"), () => handleResetZoom(blot));
+  const backBtn = createControlItem("back", handler.getText("backTitle"), () => handleUndo(blot));
+  const forwardBtn = createControlItem("forward", handler.getText("forwardTitle"), () => handleRedo(blot));
+  const setEdgeTypeBtn = createControlItem("set-edge-type", handler.getText("setEdgeTypeTitle"), () => handleSetEdgeType(blot));
+  const panelStatusBtn = createControlItem("panel-status", handler.getText("panelStatusTitle"));
+  const screenTypeBtn = createControlItem("screen-type", handler.getText("screenTypeTitle"), () => handleScreenTypeBtn(blot));
+  const updateButtonState = (historyData) => {
+    if (!historyData.data) {
+      backBtn.style.opacity = DISABLED_OPACITY;
+      backBtn.style.cursor = "not-allowed";
+      forwardBtn.style.opacity = DISABLED_OPACITY;
+      forwardBtn.style.cursor = "not-allowed";
+      return;
+    }
+    const isUndoAvailable = historyData.data.undoAble || historyData.data.undos.length < 0;
+    const isRedoAvailable = historyData.data.redoAble || historyData.data.redos.length > 0;
+    if (backBtn) {
+      backBtn.style.opacity = isUndoAvailable ? ENABLED_OPACITY : DISABLED_OPACITY;
+      backBtn.style.cursor = isUndoAvailable ? "pointer" : "not-allowed";
+    }
+    if (forwardBtn) {
+      forwardBtn.style.opacity = isRedoAvailable ? ENABLED_OPACITY : DISABLED_OPACITY;
+      forwardBtn.style.cursor = isRedoAvailable ? "pointer" : "not-allowed";
+    }
+  };
+  updateButtonState(blot.flowChart.history);
+  blot.flowChart.on("history:change", (data) => {
+    updateButtonState(data);
+  });
+  setTimeout(() => {
+    const controlLeftUpPanel = blot.domNode.querySelector(".lf-dndpanel");
+    controlLeftUpPanel.append(setEdgeTypeBtn);
+  }, 0);
+  controlRightUpPanel.append(panelStatusBtn);
+  blot.domNode.appendChild(controlRightUpPanel);
+  controlPanel.append(zoomOutBtn, zoomInBtn, resetBtn, screenTypeBtn, backBtn, forwardBtn);
+  blot.domNode.appendChild(controlPanel);
+}
+function handleUndo(blot) {
+  if (blot.flowChart) {
+    blot.flowChart.undo();
+  }
+}
+function handleRedo(blot) {
+  if (blot.flowChart) {
+    blot.flowChart.redo();
+  }
+}
+function handleZoomIn(blot) {
+  if (blot.flowChart) {
+    blot.flowChart.zoom(true);
+  }
+}
+function handleZoomOut(blot) {
+  if (blot.flowChart) {
+    blot.flowChart.zoom(false);
+  }
+}
+function handleResetZoom(blot) {
+  if (blot.flowChart) {
+    blot.flowChart.resetZoom();
+  }
+}
+function createControlItem(iconClass, title, onClick, disabled = false) {
+  const controlItem = document.createElement("div");
+  controlItem.className = "ql-flow-chart-control-item";
+  controlItem.title = title;
+  controlItem.dataset.controlType = iconClass;
+  controlItem.style.cursor = disabled ? "not-allowed" : "pointer";
+  const iconMap = {
+    "back": backIcon,
+    "forward": forwardIcon,
+    "zoom-out": zoomOutIcon,
+    "zoom-in": zoomInIcon,
+    "fit": fitIcon,
+    "screen-type": screenTypeIcon,
+    "panel-status": contractIcon,
+    "set-edge-type": lineIcon
+  };
+  const icon = document.createElement("i");
+  icon.innerHTML = iconMap[iconClass] || "";
+  controlItem.appendChild(icon);
+  if (!disabled) {
+    controlItem.addEventListener("click", onClick);
+  }
+  return controlItem;
+}
+function handleSetEdgeType(blot) {
+  const controlLeftUpPanel = blot.domNode.querySelector(".lf-dndpanel");
+  if (!controlLeftUpPanel) return;
+  let edgeTypePanel = controlLeftUpPanel.querySelector(".ql-flow-chart-edge-panel");
+  if (!edgeTypePanel) {
+    edgeTypePanel = document.createElement("div");
+    edgeTypePanel.className = "ql-flow-chart-edge-panel";
+    edgeTypePanel.style.display = "flex";
+    edgeTypePanel.style.justifyContent = "space-around";
+    edgeTypePanel.style.flexWrap = "nowrap";
+    edgeTypePanel.style.width = "auto";
+    edgeTypePanel.style.minWidth = "100%";
+    edgeTypePanel.style.padding = "8px";
+    edgeTypePanel.style.boxSizing = "border-box";
+    edgeTypePanel.style.position = "absolute";
+    edgeTypePanel.style.top = "170px";
+    controlLeftUpPanel.appendChild(edgeTypePanel);
+    const edgeTypes = [
+      {
+        name: "line",
+        displayName: "直线",
+        icon: lineIcon
+      },
+      {
+        name: "polyline",
+        displayName: "折线",
+        icon: polyLineIcon
+      },
+      {
+        name: "bezier",
+        displayName: "贝塞尔曲线",
+        icon: bezierIcon
+      }
+    ];
+    edgeTypes.forEach((edgeType) => {
+      const edgeItem = document.createElement("div");
+      edgeItem.className = "ql-flow-chart-edge-item";
+      edgeItem.style.padding = "8px";
+      edgeItem.style.cursor = "pointer";
+      edgeItem.style.textAlign = "center";
+      const edgeIcon = document.createElement("div");
+      edgeIcon.className = `ql-flow-chart-edge-type-icon`;
+      edgeIcon.style.width = "24px";
+      edgeIcon.style.height = "24px";
+      edgeIcon.style.margin = "0 auto";
+      if (edgeType.icon) {
+        edgeIcon.innerHTML = edgeType.icon;
+      }
+      edgeItem.appendChild(edgeIcon);
+      edgeItem.addEventListener("click", () => {
+        const { edges = [] } = blot.flowChart.getSelectElements();
+        if (edges.length > 0) {
+          edges.forEach((edge) => {
+            blot.flowChart.changeEdgeType(edge.id, edgeType.name);
+          });
+          blot.data = blot.flowChart.getGraphData();
+          blot.domNode.setAttribute("data-flow-chart", JSON.stringify(blot.data));
+        }
+        edgeTypePanel.style.display = "none";
+      });
+      edgeTypePanel.appendChild(edgeItem);
+    });
+  } else {
+    edgeTypePanel.style.display = "flex";
+    edgeTypePanel.style.justifyContent = "space-around";
+    edgeTypePanel.style.flexWrap = "nowrap";
+  }
+  const handleOutsideClick = (e) => {
+    let setEdgeTypeBtn = null;
+    const controlItems = controlLeftUpPanel.querySelectorAll(".ql-flow-chart-control-item");
+    controlItems.forEach((item) => {
+      const iconEl = item.querySelector("i");
+      if (iconEl && iconEl.className.includes("set-edge-type")) {
+        setEdgeTypeBtn = item;
+      }
+    });
+    if (!edgeTypePanel.contains(e.target) && (!setEdgeTypeBtn || !setEdgeTypeBtn.contains(e.target))) {
+      edgeTypePanel.style.display = "none";
+      document.removeEventListener("click", handleOutsideClick);
+    }
+  };
+  document.removeEventListener("click", handleOutsideClick);
+  setTimeout(() => {
+    document.addEventListener("click", handleOutsideClick);
+  }, 0);
+}
+function handleScreenTypeBtn(blot) {
+  const screenTypeBtn = blot.domNode.querySelector('[data-control-type="screen-type"]');
+  if (!screenTypeBtn || !blot.domNode) return;
+  const flowChartContainer = blot.domNode;
+  const isFullscreen = flowChartContainer.style.position === "fixed";
+  if (isFullscreen) {
+    const originalPosition = flowChartContainer.getAttribute("data-original-position");
+    const originalWidth = flowChartContainer.getAttribute("data-original-width");
+    const originalHeight = flowChartContainer.getAttribute("data-original-height");
+    if (originalWidth && originalHeight) {
+      flowChartContainer.style.position = originalPosition;
+      flowChartContainer.style.width = originalWidth;
+      flowChartContainer.style.height = originalHeight;
+      flowChartContainer.style.zIndex = "0";
+    }
+    const iconElement = screenTypeBtn.querySelector("i");
+    if (iconElement) {
+      iconElement.innerHTML = screenTypeIcon;
+    }
+  } else {
+    flowChartContainer.setAttribute("data-original-position", flowChartContainer.style.position || "");
+    flowChartContainer.setAttribute("data-original-width", flowChartContainer.style.width || "");
+    flowChartContainer.setAttribute("data-original-height", flowChartContainer.style.height || "");
+    flowChartContainer.style.position = "fixed";
+    flowChartContainer.style.top = "0";
+    flowChartContainer.style.left = "0";
+    flowChartContainer.style.width = "100vw";
+    flowChartContainer.style.height = "100vh";
+    flowChartContainer.style.zIndex = "100";
+    const iconElement = screenTypeBtn.querySelector("i");
+    if (iconElement) {
+      iconElement.innerHTML = screenReduceIcon;
+    }
+  }
+  blot.flowChart.resize();
+  blot.flowChart.translateCenter();
+}
+export {
+  createControlPanel
+};
+//# sourceMappingURL=control-panel.es.js.map

package/es/modules/flow-chart/modules/control-panel.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-panel.es.js","sources":["../../../../../src/modules/flow-chart/modules/control-panel.ts"],"sourcesContent":["import type FluentEditor from '../../../core/fluent-editor'\nimport type FlowChartPlaceholderBlot from '../formats/flow-chart-blot'\nimport { CHANGE_LANGUAGE_EVENT } from '../../../config'\nimport { I18N } from '../../../modules/i18n'\nimport { registerFlowChartI18N } from '../i18n'\nimport { backIcon, bezierIcon, contractIcon, fitIcon, forwardIcon, lineIcon, polyLineIcon, screenReduceIcon, screenTypeIcon, zoomInIcon, zoomOutIcon } from '../icons'\n\nclass FlowChartControlPanelHandler {\n  private texts: Record<string, string>\n  private lang: string\n  getText(key: keyof Record<string, string>): string {\n    return this.texts[key]\n  }\n\n  constructor(private quill: FluentEditor, private blot: FlowChartPlaceholderBlot) {\n    const i18nModule = this.quill.getModule('i18n') as I18N\n    registerFlowChartI18N(I18N)\n    this.lang = i18nModule.options.lang\n    this.texts = this.resolveTexts()\n    this.quill.emitter.on(CHANGE_LANGUAGE_EVENT, (lang: string) => {\n      this.lang = lang\n      this.texts = this.resolveTexts()\n      this.updateControlPanelTexts()\n    })\n  }\n\n  resolveTexts() {\n    return {\n      exportTitle: I18N.parserText('flowChart.controlPanel.exportTitle', this.lang),\n      zoomOutTitle: I18N.parserText('flowChart.controlPanel.zoomOutTitle', this.lang),\n      zoomInTitle: I18N.parserText('flowChart.controlPanel.zoomInTitle', this.lang),\n      fitTitle: I18N.parserText('flowChart.controlPanel.fitTitle', this.lang),\n      backTitle: I18N.parserText('flowChart.controlPanel.backTitle', this.lang),\n      forwardTitle: I18N.parserText('flowChart.controlPanel.forwardTitle', this.lang),\n      setEdgeTypeTitle: I18N.parserText('flowChart.controlPanel.setEdgeTypeTitle', this.lang),\n      panelStatusTitle: I18N.parserText('flowChart.controlPanel.panelStatusTitle', this.lang),\n      screenTypeTitle: I18N.parserText('flowChart.controlPanel.screenTypeTitle', this.lang),\n    }\n  }\n\n  updateControlPanelTexts() {\n    const controlItems = this.blot.domNode.querySelectorAll('.ql-flow-chart-control-item')\n\n    const controlItemMap: Record<string, string> = {\n      'zoom-out': 'zoomOutTitle',\n      'zoom-in': 'zoomInTitle',\n      'fit': 'fitTitle',\n      'back': 'backTitle',\n      'forward': 'forwardTitle',\n      'set-edge-type': 'setEdgeTypeTitle',\n      'panel-status': 'panelStatusTitle',\n      'screen-type': 'screenTypeTitle',\n    }\n\n    controlItems.forEach((item) => {\n      const controlType = (item as HTMLElement).dataset.controlType\n      if (controlType && controlItemMap[controlType] && this.texts[controlItemMap[controlType]]) {\n        (item as HTMLElement).title = this.texts[controlItemMap[controlType]]\n      }\n    })\n  }\n}\n\nconst controlPanelHandlers = new WeakMap<FlowChartPlaceholderBlot, FlowChartControlPanelHandler>()\n\nconst DISABLED_OPACITY = '0.5'\nconst ENABLED_OPACITY = '1'\nexport function createControlPanel(blot: FlowChartPlaceholderBlot, quill: FluentEditor): void {\n  // 中间的控制面板\n  const controlPanel = document.createElement('div')\n  controlPanel.className = 'ql-flow-chart-control'\n  // 右上的控制面板\n  const controlRightUpPanel = document.createElement('div')\n  controlRightUpPanel.className = 'ql-flow-chart-right-up-control'\n\n  const handler = new FlowChartControlPanelHandler(quill, blot)\n  controlPanelHandlers.set(blot, handler)\n  const zoomOutBtn = createControlItem('zoom-out', handler.getText('zoomOutTitle'), () => handleZoomOut(blot))\n  const zoomInBtn = createControlItem('zoom-in', handler.getText('zoomInTitle'), () => handleZoomIn(blot))\n  const resetBtn = createControlItem('fit', handler.getText('fitTitle'), () => handleResetZoom(blot))\n  const backBtn = createControlItem('back', handler.getText('backTitle'), () => handleUndo(blot))\n  const forwardBtn = createControlItem('forward', handler.getText('forwardTitle'), () => handleRedo(blot))\n  const setEdgeTypeBtn = createControlItem('set-edge-type', handler.getText('setEdgeTypeTitle'), () => handleSetEdgeType(blot))\n  const panelStatusBtn = createControlItem('panel-status', handler.getText('panelStatusTitle'))\n  const screenTypeBtn = createControlItem('screen-type', handler.getText('screenTypeTitle'), () => handleScreenTypeBtn(blot))\n\n  const updateButtonState = (historyData: any) => {\n    if (!historyData.data) {\n      backBtn.style.opacity = DISABLED_OPACITY\n      backBtn.style.cursor = 'not-allowed'\n      forwardBtn.style.opacity = DISABLED_OPACITY\n      forwardBtn.style.cursor = 'not-allowed'\n      return\n    }\n    const isUndoAvailable = historyData.data.undoAble || historyData.data.undos.length < 0\n    const isRedoAvailable = historyData.data.redoAble || historyData.data.redos.length > 0\n\n    if (backBtn) {\n      backBtn.style.opacity = isUndoAvailable ? ENABLED_OPACITY : DISABLED_OPACITY\n      backBtn.style.cursor = isUndoAvailable ? 'pointer' : 'not-allowed'\n    }\n\n    if (forwardBtn) {\n      forwardBtn.style.opacity = isRedoAvailable ? ENABLED_OPACITY : DISABLED_OPACITY\n      forwardBtn.style.cursor = isRedoAvailable ? 'pointer' : 'not-allowed'\n    }\n  }\n  updateButtonState(blot.flowChart.history)\n  blot.flowChart.on('history:change', (data: any) => {\n    updateButtonState(data)\n  })\n\n  setTimeout(() => {\n    const controlLeftUpPanel = blot.domNode.querySelector('.lf-dndpanel') as HTMLElement | null\n    controlLeftUpPanel.append(setEdgeTypeBtn)\n  }, 0)\n  controlRightUpPanel.append(panelStatusBtn)\n  blot.domNode.appendChild(controlRightUpPanel)\n  controlPanel.append(zoomOutBtn, zoomInBtn, resetBtn, screenTypeBtn, backBtn, forwardBtn)\n  blot.domNode.appendChild(controlPanel)\n}\n\nfunction handleUndo(blot: FlowChartPlaceholderBlot): void {\n  if (blot.flowChart) {\n    blot.flowChart.undo()\n  }\n}\n\nfunction handleRedo(blot: FlowChartPlaceholderBlot): void {\n  if (blot.flowChart) {\n    blot.flowChart.redo()\n  }\n}\n\nfunction handleZoomIn(blot: FlowChartPlaceholderBlot): void {\n  if (blot.flowChart) {\n    blot.flowChart.zoom(true)\n  }\n}\n\nfunction handleZoomOut(blot: FlowChartPlaceholderBlot): void {\n  if (blot.flowChart) {\n    blot.flowChart.zoom(false)\n  }\n}\n\nfunction handleResetZoom(blot: FlowChartPlaceholderBlot): void {\n  if (blot.flowChart) {\n    blot.flowChart.resetZoom()\n  }\n}\n\nfunction createControlItem(iconClass: string, title: string, onClick?: () => void, disabled = false) {\n  const controlItem = document.createElement('div')\n  controlItem.className = 'ql-flow-chart-control-item'\n  controlItem.title = title\n  controlItem.dataset.controlType = iconClass\n  controlItem.style.cursor = disabled ? 'not-allowed' : 'pointer'\n\n  const iconMap: Record<string, string> = {\n    'back': backIcon,\n    'forward': forwardIcon,\n    'zoom-out': zoomOutIcon,\n    'zoom-in': zoomInIcon,\n    'fit': fitIcon,\n    'screen-type': screenTypeIcon,\n    'panel-status': contractIcon,\n    'set-edge-type': lineIcon,\n  }\n\n  const icon = document.createElement('i')\n  icon.innerHTML = iconMap[iconClass] || ''\n  controlItem.appendChild(icon)\n\n  if (!disabled) {\n    controlItem.addEventListener('click', onClick)\n  }\n\n  return controlItem\n}\n\nfunction handleSetEdgeType(blot: FlowChartPlaceholderBlot): void {\n  const controlLeftUpPanel = blot.domNode.querySelector('.lf-dndpanel') as HTMLElement | null\n  if (!controlLeftUpPanel) return\n  let edgeTypePanel = controlLeftUpPanel.querySelector('.ql-flow-chart-edge-panel') as HTMLElement\n  if (!edgeTypePanel) {\n    edgeTypePanel = document.createElement('div')\n    edgeTypePanel.className = 'ql-flow-chart-edge-panel'\n    edgeTypePanel.style.display = 'flex'\n    edgeTypePanel.style.justifyContent = 'space-around'\n    edgeTypePanel.style.flexWrap = 'nowrap'\n    edgeTypePanel.style.width = 'auto'\n    edgeTypePanel.style.minWidth = '100%'\n    edgeTypePanel.style.padding = '8px'\n    edgeTypePanel.style.boxSizing = 'border-box'\n    edgeTypePanel.style.position = 'absolute'\n    edgeTypePanel.style.top = '170px'\n    controlLeftUpPanel.appendChild(edgeTypePanel)\n\n    const edgeTypes = [\n      {\n        name: 'line',\n        displayName: '直线',\n        icon: lineIcon,\n      },\n      {\n        name: 'polyline',\n        displayName: '折线',\n        icon: polyLineIcon,\n      },\n      {\n        name: 'bezier',\n        displayName: '贝塞尔曲线',\n        icon: bezierIcon,\n      },\n    ]\n\n    edgeTypes.forEach((edgeType) => {\n      const edgeItem = document.createElement('div')\n      edgeItem.className = 'ql-flow-chart-edge-item'\n      edgeItem.style.padding = '8px'\n      edgeItem.style.cursor = 'pointer'\n      edgeItem.style.textAlign = 'center'\n\n      const edgeIcon = document.createElement('div')\n      edgeIcon.className = `ql-flow-chart-edge-type-icon`\n      edgeIcon.style.width = '24px'\n      edgeIcon.style.height = '24px'\n      edgeIcon.style.margin = '0 auto'\n      if (edgeType.icon) {\n        edgeIcon.innerHTML = edgeType.icon\n      }\n\n      edgeItem.appendChild(edgeIcon)\n\n      edgeItem.addEventListener('click', () => {\n        const { edges = [] } = blot.flowChart.getSelectElements()\n        if (edges.length > 0) {\n          edges.forEach((edge) => {\n            blot.flowChart.changeEdgeType(edge.id, edgeType.name)\n          })\n          blot.data = blot.flowChart.getGraphData()\n          blot.domNode.setAttribute('data-flow-chart', JSON.stringify(blot.data))\n        }\n\n        edgeTypePanel.style.display = 'none'\n      })\n      edgeTypePanel.appendChild(edgeItem)\n    })\n  }\n  else {\n    edgeTypePanel.style.display = 'flex'\n    edgeTypePanel.style.justifyContent = 'space-around'\n    edgeTypePanel.style.flexWrap = 'nowrap'\n  }\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    let setEdgeTypeBtn: HTMLElement | null = null\n    const controlItems = controlLeftUpPanel.querySelectorAll('.ql-flow-chart-control-item')\n    controlItems.forEach((item) => {\n      const iconEl = item.querySelector('i')\n      if (iconEl && iconEl.className.includes('set-edge-type')) {\n        setEdgeTypeBtn = item as HTMLElement\n      }\n    })\n    if (!edgeTypePanel.contains(e.target as Node)\n      && (!setEdgeTypeBtn || !setEdgeTypeBtn.contains(e.target as Node))) {\n      edgeTypePanel.style.display = 'none'\n      document.removeEventListener('click', handleOutsideClick)\n    }\n  }\n\n  document.removeEventListener('click', handleOutsideClick)\n  setTimeout(() => {\n    document.addEventListener('click', handleOutsideClick)\n  }, 0)\n}\n\nfunction handleScreenTypeBtn(blot: FlowChartPlaceholderBlot): void {\n  const screenTypeBtn = blot.domNode.querySelector('[data-control-type=\"screen-type\"]') as HTMLElement | null\n  if (!screenTypeBtn || !blot.domNode) return\n\n  const flowChartContainer = blot.domNode\n  const isFullscreen = flowChartContainer.style.position === 'fixed'\n\n  if (isFullscreen) {\n    const originalPosition = flowChartContainer.getAttribute('data-original-position')\n    const originalWidth = flowChartContainer.getAttribute('data-original-width')\n    const originalHeight = flowChartContainer.getAttribute('data-original-height')\n    if (originalWidth && originalHeight) {\n      flowChartContainer.style.position = originalPosition\n      flowChartContainer.style.width = originalWidth\n      flowChartContainer.style.height = originalHeight\n      flowChartContainer.style.zIndex = '0'\n    }\n    const iconElement = screenTypeBtn.querySelector('i')\n    if (iconElement) {\n      iconElement.innerHTML = screenTypeIcon\n    }\n  }\n  else {\n    flowChartContainer.setAttribute('data-original-position', flowChartContainer.style.position || '')\n    flowChartContainer.setAttribute('data-original-width', flowChartContainer.style.width || '')\n    flowChartContainer.setAttribute('data-original-height', flowChartContainer.style.height || '')\n    flowChartContainer.style.position = 'fixed'\n    flowChartContainer.style.top = '0'\n    flowChartContainer.style.left = '0'\n    flowChartContainer.style.width = '100vw'\n    flowChartContainer.style.height = '100vh'\n    flowChartContainer.style.zIndex = '100'\n    const iconElement = screenTypeBtn.querySelector('i')\n    if (iconElement) {\n      iconElement.innerHTML = screenReduceIcon\n    }\n  }\n  blot.flowChart.resize()\n  blot.flowChart.translateCenter()\n}\n"],"names":[],"mappings":"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"}