mce 0.14.1 → 0.14.3

package/dist/index.js

@@ -1,5 +1,5 @@
-import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, IN_BROWSER, clamp, assets, TimelineNode, Transform2D, DEG_TO_RAD, render, Animation, IN_MAC_OS } from "modern-canvas";
-import { reactive, computed, watch, markRaw, ref, warn, shallowRef, onBeforeUnmount, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle, toDisplayString, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, readonly, toRef, onMounted, useId, onDeactivated, onActivated, onScopeDispose, useModel, useTemplateRef, withDirectives, vShow, vModelText, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withCtx, withModifiers, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, isRef, h, useSlots } from "vue";
+import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, IN_BROWSER, clamp, assets, TimelineNode, Transform2D, DEG_TO_RAD, render, customNodes, Animation, IN_MAC_OS } from "modern-canvas";
+import { reactive, computed, watch, markRaw, ref, warn, shallowRef, onBeforeUnmount, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle, toDisplayString, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, readonly, toRef, onMounted, useId, onDeactivated, onActivated, onScopeDispose, useModel, useTemplateRef, withDirectives, vShow, vModelText, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withCtx, withModifiers, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, h, isRef, useSlots } from "vue";
 import { useFileDialog, useEventListener, isClient, onClickOutside, useDebounceFn, useResizeObserver as useResizeObserver$1, useLocalStorage, useImage } from "@vueuse/core";
 import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeElement, normalizeTextContent, normalizeCRLF, isEqualObject } from "modern-idoc";
 import { saveAs } from "file-saver";
@@ -530,14 +530,14 @@ function initYElement(yMap, element = {}, parentId, regenId = false) {
     yChildrenIds
   };
 }
-function iElementToYElements(element, parentId, regenId = false) {
+function iElementToYNodes(element, parentId, regenId = false) {
   const results = [];
-  const yElement = new Y.Map();
-  const { normalized, yChildrenIds } = initYElement(yElement, element, parentId, regenId);
+  const yNode = new Y.Map();
+  const { normalized, yChildrenIds } = initYElement(yNode, element, parentId, regenId);
   const id = normalized.id;
-  results.push({ id, element: yElement });
+  results.push({ id, node: yNode });
   normalized.children?.forEach((iChild) => {
-    const result = iElementToYElements(iChild, id, regenId);
+    const result = iElementToYNodes(iChild, id, regenId);
     yChildrenIds.push([result[0].id]);
     results.push(...result);
   });
@@ -547,7 +547,7 @@ class Doc extends Model {
   _yChildren;
   _yChildrenIds;
   root = reactive(new Node$1());
-  nodeMap = /* @__PURE__ */ new Map();
+  _nodeMap = /* @__PURE__ */ new Map();
   get meta() {
     return this.root.meta;
   }
@@ -615,8 +615,8 @@ class Doc extends Model {
           }
           break;
         case "delete":
-          this.nodeMap.get(key)?.remove();
-          this.nodeMap.delete(key);
+          this._nodeMap.get(key)?.remove();
+          this._nodeMap.delete(key);
           break;
       }
     });
@@ -625,21 +625,21 @@ class Doc extends Model {
     super.reset();
     this._yChildren.clear();
     this._yChildrenIds.delete(0, this._yChildrenIds.length);
-    this.nodeMap.clear();
+    this._nodeMap.clear();
     this.undoManager.clear();
     this.indexeddb?.clearData();
     return this;
   }
-  _addElement(element, options = {}) {
+  _addNode(node, options = {}) {
     const { parentId, index, regenId } = options;
-    const yNodes = iElementToYElements(element, parentId, regenId);
-    yNodes.forEach((result) => this._yChildren.set(result.id, result.element));
-    const nodeMap = yNodes.map((result) => this._getOrCreateNode(result.element));
-    const first = nodeMap[0];
+    const yNodes = iElementToYNodes(node, parentId, regenId);
+    yNodes.forEach((result) => this._yChildren.set(result.id, result.node));
+    const _nodeMap = yNodes.map((result) => this._getOrCreateNode(result.node));
+    const first = _nodeMap[0];
     let parent;
     let childrenIds;
     if (parentId && parentId !== this.root.id) {
-      parent = this.nodeMap.get(parentId);
+      parent = this._nodeMap.get(parentId);
       childrenIds = this._yChildren.get(parentId)?.get("childrenIds");
     } else {
       parent = this.root;
@@ -656,20 +656,16 @@ class Doc extends Model {
     }
     return first;
   }
-  addElement(element, options) {
-    return this.transact(() => {
-      return this._addElement(element, options);
-    });
+  addNode(node, options) {
+    return this.transact(() => this._addNode(node, options));
   }
-  addElements(elements, options) {
-    return this.transact(() => {
-      return elements.map((element) => this._addElement(element, options));
-    });
+  addNodes(nodes, options) {
+    return this.transact(() => nodes.map((element) => this._addNode(element, options)));
   }
   set(source) {
     const { children = [], meta = {}, ...props } = source;
     this.reset();
-    this.addElements(children);
+    this.addNodes(children);
     this.setProperties(props);
     this._yProps.clear();
     for (const key in props) {
@@ -678,8 +674,8 @@ class Doc extends Model {
     this._yProps.set("meta", new Y.Map(Object.entries(meta)));
     return this;
   }
-  _deleteElement(id) {
-    const node = this.nodeMap.get(id);
+  _deleteNode(id) {
+    const node = this._nodeMap.get(id);
     const yNode = this._yChildren.get(id);
     if (!yNode || !node) {
       return;
@@ -692,14 +688,17 @@ class Doc extends Model {
         parentChildrenIds.delete(index);
       }
     }
-    yNode.get("childrenIds").forEach((id2) => this._deleteElement(id2));
+    yNode.get("childrenIds").forEach((id2) => this._deleteNode(id2));
     node.remove();
   }
-  deleteElement(id) {
-    this.transact(() => this._deleteElement(id));
+  deleteNode(id) {
+    this.transact(() => this._deleteNode(id));
+  }
+  getNode(id) {
+    return this._nodeMap.get(id);
   }
-  moveElement(id, toIndex) {
-    const node = this.nodeMap.get(id);
+  moveNode(id, toIndex) {
+    const node = this._nodeMap.get(id);
     if (!node) {
       return;
     }
@@ -801,7 +800,7 @@ class Doc extends Model {
         if (action.insert) {
           const ids = Array.isArray(action.insert) ? action.insert : [action.insert];
           ids.forEach((id, index) => {
-            let child = this.nodeMap.get(id);
+            let child = this._nodeMap.get(id);
             const cb = (child2) => {
               node.moveChild(child2, retain + index);
             };
@@ -809,7 +808,7 @@ class Doc extends Model {
               cb(child);
             } else {
               setTimeout(() => {
-                child = this.nodeMap.get(id);
+                child = this._nodeMap.get(id);
                 child && cb(child);
               }, 0);
             }
@@ -853,7 +852,7 @@ class Doc extends Model {
   }
   _getOrCreateNode(yNode) {
     const id = yNode.get("id");
-    let node = this.nodeMap.get(id);
+    let node = this._nodeMap.get(id);
     if (!node) {
       this.undoManager.addToScope(yNode);
       node = reactive(
@@ -864,7 +863,7 @@ class Doc extends Model {
         })
       );
       this._proxyNode(node, yNode);
-      this.nodeMap.set(id, node);
+      this._nodeMap.set(id, node);
     }
     return node;
   }
@@ -897,6 +896,8 @@ const _0_context = defineMixin((editor) => {
   renderEngine.value.start();
   const drawboardDom = ref();
   const drawboardAabb = ref({ left: 0, top: 0, width: 0, height: 0 });
+  const drawboardPointer = ref();
+  const drawboardContextMenuPointer = ref();
   const doc = ref(new Doc());
   const root = computed(() => doc.value.root);
   const nodes = ref([]);
@@ -908,7 +909,6 @@ const _0_context = defineMixin((editor) => {
   });
   const textSelection = ref();
   const hoverElement = ref();
-  const drawboardPointer = ref();
   const state = ref();
   function setCursor(mode) {
     renderEngine.value.input.setCursor(mode);
@@ -978,9 +978,10 @@ const _0_context = defineMixin((editor) => {
     hoverElement,
     drawboardDom,
     drawboardAabb,
+    drawboardPointer,
+    drawboardContextMenuPointer,
     state,
     setCursor,
-    drawboardPointer,
     getGlobalPointer,
     parseAnchor,
     isNode,
@@ -1066,6 +1067,7 @@ const _0_font = defineMixin((editor, options) => {
 });
 const en = {
   "cancel": "Cancel",
+  "create": "Create",
   "constrainToAxis": "Constrain to axis",
   "loading": "Loading",
   "drawing": "Drawing",
@@ -1104,6 +1106,7 @@ const en = {
   "saveAs:pdf": "Save as PDF",
   "saveAs:pptx": "Save as PPTX",
   "saveAs:json": "Save as JSON",
+  "addSubNode": "Add sub node",
   "edit": "Edit",
   "undo": "Undo",
   "redo": "Redo",
@@ -1132,6 +1135,8 @@ const en = {
   "panels:layers": "Open layers panel",
   "panels:timeline": "Open timeline panel",
   "panels:statusbar": "Open statusbar panel",
+  "panels:nodeCreator": "Open node creator panel",
+  "nodeCreator": "Create node",
   "toolbelt": "Toolbelt",
   "msaa": "MSAA",
   "pixelate": "Pixelate",
@@ -1166,6 +1171,7 @@ const en = {
 };
 const zhHans = {
   "cancel": "取消",
+  "create": "创建",
   "constrainToAxis": "约束到轴",
   "loading": "加载中...",
   "drawing": "绘制中...",
@@ -1205,6 +1211,7 @@ const zhHans = {
   "saveAs:pdf": "另存为 PDF",
   "saveAs:pptx": "另存为 PPTX",
   "saveAs:json": "另存为 JSON",
+  "addSubNode": "添加子节点",
   "edit": "编辑",
   "undo": "撤销",
   "redo": "重做",
@@ -1233,6 +1240,8 @@ const zhHans = {
   "panels:layers": "打开图层面板",
   "panels:statusbar": "打开状态栏面板",
   "panels:timeline": "打开时间线面板",
+  "panels:nodeCreator": "打开节点创建面板",
+  "nodeCreator": "创建节点",
   "toolbelt": "工具腰带",
   "msaa": "抗锯齿",
   "pixelate": "像素化",
@@ -2284,7 +2293,33 @@ const _3_view = defineMixin((editor) => {
     on("setDoc", onViewMode);
   };
 });
-const _4_0_text = defineMixin((editor) => {
+const _4_0_node = defineMixin((editor) => {
+  const {
+    doc,
+    selection
+  } = editor;
+  function addNode(value, options = {}) {
+    const {
+      parent,
+      index,
+      active,
+      regenId
+    } = options;
+    const node = doc.value.addNode(value, {
+      parentId: parent?.id,
+      index,
+      regenId
+    });
+    if (active) {
+      selection.value = [node];
+    }
+    return node;
+  }
+  Object.assign(editor, {
+    addNode
+  });
+});
+const _4_1_text = defineMixin((editor) => {
   const {
     isElement,
     config,
@@ -2620,7 +2655,7 @@ const _4_2_element = defineMixin((editor) => {
     const elements = doc.value.transact(() => {
       const values = isArray ? value : [value];
       const elements2 = values.map((element) => {
-        const el = doc.value.addElement(element, {
+        const el = doc.value.addNode(element, {
           parentId: parent?.id,
           index: offsetIndex,
           regenId
@@ -2764,13 +2799,13 @@ const _4_2_element = defineMixin((editor) => {
     if (id === selection.value[0]?.id) {
       selection.value = [];
     }
-    doc.value.deleteElement(id);
+    doc.value.deleteNode(id);
   }
   function updateElement(id, properties) {
     getElement(id)?.setProperties(properties);
   }
   function getElement(id) {
-    return doc.value.nodeMap.get(id);
+    return doc.value.getNode(id);
   }
   function resizeElement(element, scaleX, scaleY, options = {}) {
     scaleX = Math.abs(scaleX);
@@ -2841,7 +2876,7 @@ const _4_3_frame = defineMixin((editor) => {
     element.style.width ||= rootAabb.value.width;
     element.style.height ||= rootAabb.value.height;
     const index = toIndex ?? (currentFrameIndex.value > -1 ? currentFrameIndex.value + 1 : frames.value.length - 1);
-    doc.value.addElement(element, { index });
+    doc.value.addNode(element, { index });
     setCurrentFrame(index);
     emit("addFrame", index);
   }
@@ -2849,7 +2884,7 @@ const _4_3_frame = defineMixin((editor) => {
     const page = root.value.children[index];
     if (!page)
       return;
-    doc.value.addElement(page.toJSON(), {
+    doc.value.addNode(page.toJSON(), {
       index: index + 1,
       regenId: true
     });
@@ -2859,7 +2894,7 @@ const _4_3_frame = defineMixin((editor) => {
     const id = root.value.children[fromIndex]?.id;
     if (!id)
       return;
-    doc.value.moveElement(id, toIndex);
+    doc.value.moveNode(id, toIndex);
     frameThumbs.value.splice(
       toIndex,
       0,
@@ -2875,7 +2910,7 @@ const _4_3_frame = defineMixin((editor) => {
     const id = root.value.children[index]?.id;
     if (!id)
       return;
-    doc.value.deleteElement(id);
+    doc.value.deleteNode(id);
     frameThumbs.value.splice(index, 1);
     setCurrentFrame(index);
     emit("deleteFrame", index);
@@ -3352,7 +3387,8 @@ const mixins = [
   _2_export,
   _2_load,
   _3_view,
-  _4_0_text,
+  _4_0_node,
+  _4_1_text,
   _4_2_element,
   _4_3_frame,
   _4_4_doc,
@@ -3609,11 +3645,11 @@ const _delete = definePlugin((editor) => {
     ]
   };
 });
-const _hoisted_1$m = {
+const _hoisted_1$n = {
   key: 0,
   class: "mce-drawing__tip"
 };
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "Drawing",
   setup(__props) {
     const {
@@ -3631,7 +3667,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           top: `${unref(drawboardPointer).y}px`
         })
       }, [
-        unref(activeDrawingTool)?.name ? (openBlock(), createElementBlock("div", _hoisted_1$m, toDisplayString(unref(t)(unref(activeDrawingTool).name)), 1)) : createCommentVNode("", true)
+        unref(activeDrawingTool)?.name ? (openBlock(), createElementBlock("div", _hoisted_1$n, toDisplayString(unref(t)(unref(activeDrawingTool).name)), 1)) : createCommentVNode("", true)
       ], 4)) : createCommentVNode("", true);
     };
   }
@@ -3643,7 +3679,7 @@ const _drawingTool = definePlugin((editor) => {
   return {
     name: "mce:drawingTool",
     components: [
-      { name: "drawing", type: "overlay", component: _sfc_main$C }
+      { name: "drawing", type: "overlay", component: _sfc_main$D }
     ],
     commands: [
       { command: "setActiveDrawingTool", handle: (val) => setActiveDrawingTool(val) }
@@ -3700,7 +3736,7 @@ const ComponentIcon = defineComponent({
     };
   }
 });
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "Icon",
   props: {
     disabled: Boolean,
@@ -4282,7 +4318,7 @@ const defaultHoverStrategy = (context) => {
   }
   return element.findAncestor(cb);
 };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "Frame",
   props: {
     "modelValue": { required: true },
@@ -4350,7 +4386,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "Frames",
   setup(__props) {
     const {
@@ -4358,7 +4394,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     } = useEditor();
     return (_ctx, _cache) => {
       return openBlock(true), createElementBlock(Fragment, null, renderList(unref(frames), (frame, key) => {
-        return openBlock(), createBlock(_sfc_main$A, {
+        return openBlock(), createBlock(_sfc_main$B, {
           key,
           "model-value": frame
         }, null, 8, ["model-value"]);
@@ -4375,7 +4411,7 @@ const _frame = definePlugin((editor) => {
   return {
     name: "mce:frame",
     components: [
-      { type: "overlay", component: _sfc_main$z }
+      { type: "overlay", component: _sfc_main$A }
     ],
     drawingTools: [
       {
@@ -4567,8 +4603,8 @@ const _history = definePlugin((editor) => {
     ]
   };
 });
-const _hoisted_1$l = ["data-name"];
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$m = ["data-name"];
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "Hover",
   setup(__props) {
     const {
@@ -4588,7 +4624,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           borderRadius: `${(unref(hoverElement).style.borderRadius ?? 0) * unref(camera).zoom.x}px`,
           ...unref(boundingBoxToStyle)(hoverElementObb.value)
         })
-      }, null, 12, _hoisted_1$l)) : createCommentVNode("", true);
+      }, null, 12, _hoisted_1$m)) : createCommentVNode("", true);
     };
   }
 });
@@ -4596,7 +4632,7 @@ const _hover = definePlugin(() => {
   return {
     name: "mce:hover",
     components: [
-      { type: "overlay", component: _sfc_main$y }
+      { type: "overlay", component: _sfc_main$z }
     ]
   };
 });
@@ -5001,16 +5037,18 @@ const _layerPosition = definePlugin((editor) => {
     ]
   };
 });
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "Btn",
   props: {
-    active: { type: Boolean }
+    active: { type: Boolean },
+    icon: { type: Boolean }
   },
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["mce-btn", {
-          "mce-btn--active": __props.active
+          "mce-btn--active": __props.active,
+          "mce-btn--icon": __props.icon
         }])
       }, [
         renderSlot(_ctx.$slots, "default")
@@ -5018,9 +5056,9 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$k = { class: "mce-layer__name" };
-const _hoisted_2$b = { class: "mce-layer__action" };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _hoisted_1$l = { class: "mce-layer__name" };
+const _hoisted_2$c = { class: "mce-layer__action" };
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceLayer",
     inheritAttrs: false
@@ -5090,7 +5128,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       const node = props.node;
       if (isFrame(node)) {
         return "$frame";
-      } else if (node.children.length) {
+      } else if (node.children.filter(isElement).length) {
         return "$group";
       } else if (isElement(node)) {
         if (node.foreground.isValid() && node.foreground.image) {
@@ -5109,47 +5147,45 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     }
     function onClickContent(e) {
       selecting.value = true;
-      if (isElement(props.node)) {
-        if (e.shiftKey) {
-          const _nodes = [
-            ...selection.value.filter((v) => !v.equal(props.node)),
-            props.node
-          ];
-          let min;
-          let max;
-          _nodes.forEach((el) => {
-            const index = nodeIndexMap.get(el.id);
-            if (index !== void 0) {
-              min = min === void 0 ? index : Math.min(min, index);
-              max = max === void 0 ? index : Math.max(max, index);
+      if (e.shiftKey) {
+        const _nodes = [
+          ...selection.value.filter((v) => !v.equal(props.node)),
+          props.node
+        ];
+        let min;
+        let max;
+        _nodes.forEach((el) => {
+          const index = nodeIndexMap.get(el.id);
+          if (index !== void 0) {
+            min = min === void 0 ? index : Math.min(min, index);
+            max = max === void 0 ? index : Math.max(max, index);
+          }
+        });
+        if (min !== void 0 && max !== void 0) {
+          let _selection = nodes.value.slice(min, max + 1);
+          const result = new Set(_selection.map((node) => node.id));
+          const parents = /* @__PURE__ */ new Set();
+          _selection.forEach((node) => node.parent && parents.add(node.parent));
+          parents.forEach((parent) => {
+            if (parent.children.every((ch) => result.has(ch.id))) {
+              const ids = new Set(parent.children.map((ch) => ch.id));
+              _selection = [
+                ..._selection.filter((v) => !ids.has(v.id)),
+                parent
+              ];
             }
           });
-          if (min !== void 0 && max !== void 0) {
-            let _selection = nodes.value.slice(min, max + 1);
-            const result = new Set(_selection.map((node) => node.id));
-            const parents = /* @__PURE__ */ new Set();
-            _selection.forEach((node) => node.parent && parents.add(node.parent));
-            parents.forEach((parent) => {
-              if (parent.children.every((ch) => result.has(ch.id))) {
-                const ids = new Set(parent.children.map((ch) => ch.id));
-                _selection = [
-                  ..._selection.filter((v) => !ids.has(v.id)),
-                  parent
-                ];
-              }
-            });
-            selection.value = _selection;
-          }
-        } else if (e.ctrlKey || e.metaKey) {
-          const filtered = selection.value.filter((v) => !v.equal(props.node));
-          if (filtered.length !== selection.value.length) {
-            selection.value = filtered;
-          } else {
-            selection.value = [...filtered, props.node];
-          }
+          selection.value = _selection;
+        }
+      } else if (e.ctrlKey || e.metaKey) {
+        const filtered = selection.value.filter((v) => !v.equal(props.node));
+        if (filtered.length !== selection.value.length) {
+          selection.value = filtered;
         } else {
-          selection.value = [props.node];
+          selection.value = [...filtered, props.node];
         }
+      } else {
+        selection.value = [props.node];
       }
       nextTick().then(() => {
         selecting.value = false;
@@ -5185,12 +5221,10 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       hovering.value = false;
     }
     function onContextmenu(e) {
-      if (isElement(props.node)) {
-        if (!selection.value.some((v) => v.equal(props.node))) {
-          selection.value = [props.node];
-        }
-        exec("openContextMenu", e);
+      if (!selection.value.some((v) => v.equal(props.node))) {
+        selection.value = [props.node];
       }
+      exec("openContextMenu", e);
     }
     function onInputBlur() {
       editing.value = false;
@@ -5225,7 +5259,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             class: "mce-layer__expand",
             onClick: onClickExpand
           }, [
-            props.node.children.length ? (openBlock(), createBlock(unref(_sfc_main$B), {
+            props.node.children.length ? (openBlock(), createBlock(unref(_sfc_main$C), {
               key: 0,
               icon: "$arrowRight"
             })) : createCommentVNode("", true)
@@ -5239,9 +5273,9 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
               class: "mce-layer__thumbnail",
               onDblclick: onDblclickThumbnail
             }, [
-              createVNode(unref(_sfc_main$B), { icon: thumbnailIcon.value }, null, 8, ["icon"])
+              createVNode(unref(_sfc_main$C), { icon: thumbnailIcon.value }, null, 8, ["icon"])
             ], 32),
-            createElementVNode("div", _hoisted_1$k, [
+            createElementVNode("div", _hoisted_1$l, [
               withDirectives(createElementVNode("input", {
                 ref_key: "inputDom",
                 ref: inputDom,
@@ -5258,42 +5292,45 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                 style: normalizeStyle({ visibility: editing.value ? "hidden" : void 0 })
               }, toDisplayString(editValue.value || props.node.name || props.node.id), 5)
             ]),
-            createElementVNode("div", _hoisted_2$b, [
-              props.root ? (openBlock(), createBlock(_sfc_main$x, {
+            createElementVNode("div", _hoisted_2$c, [
+              props.root ? (openBlock(), createBlock(_sfc_main$y, {
                 key: 0,
+                icon: "",
                 class: normalizeClass(["mce-layer__btn", {
                   "mce-layer__btn--hide": !hovering.value && !unref(isLock)(props.node)
                 }]),
                 onClick: _cache[1] || (_cache[1] = ($event) => unref(setLock)(props.node, !unref(isLock)(props.node)))
               }, {
                 default: withCtx(() => [
-                  createVNode(unref(_sfc_main$B), {
+                  createVNode(unref(_sfc_main$C), {
                     icon: unref(isLock)(props.node) ? "$lock" : "$unlock"
                   }, null, 8, ["icon"])
                 ]),
                 _: 1
               }, 8, ["class"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                createVNode(_sfc_main$x, {
+                createVNode(_sfc_main$y, {
+                  icon: "",
                   class: normalizeClass(["mce-layer__btn", {
                     "mce-layer__btn--hide": !hovering.value && !unref(isLock)(props.node)
                   }]),
                   onClick: _cache[2] || (_cache[2] = withModifiers(($event) => unref(setLock)(props.node, !unref(isLock)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$B), {
+                    createVNode(unref(_sfc_main$C), {
                       icon: unref(isLock)(props.node) ? "$lock" : "$unlock"
                     }, null, 8, ["icon"])
                   ]),
                   _: 1
                 }, 8, ["class"]),
-                createVNode(_sfc_main$x, {
+                createVNode(_sfc_main$y, {
+                  icon: "",
                   class: normalizeClass(["mce-layer__btn", {
                     "mce-layer__btn--hide": !hovering.value && unref(isVisible)(props.node)
                   }]),
                   onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(setVisible)(props.node, !unref(isVisible)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$B), {
+                    createVNode(unref(_sfc_main$C), {
                       icon: unref(isVisible)(props.node) ? "$visible" : "$unvisible"
                     }, null, 8, ["icon"])
                   ]),
@@ -5315,9 +5352,9 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$j = { class: "mce-layers" };
-const _hoisted_2$a = { class: "mce-layers__wrapper" };
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _hoisted_1$k = { class: "mce-layers" };
+const _hoisted_2$b = { class: "mce-layers__wrapper" };
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "Layers",
   setup(__props) {
     const {
@@ -5365,9 +5402,9 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$j, [
-        createElementVNode("div", _hoisted_2$a, [
-          createVNode(_sfc_main$w, {
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+        createElementVNode("div", _hoisted_2$b, [
+          createVNode(_sfc_main$x, {
             root: true,
             node: unref(root),
             opened: true
@@ -5381,7 +5418,7 @@ const _layers = definePlugin(() => {
   return {
     name: "mce:layers",
     components: [
-      { name: "layers", type: "panel", position: "float", component: _sfc_main$v }
+      { name: "layers", type: "panel", position: "float", component: _sfc_main$w }
     ]
   };
 });
@@ -5410,19 +5447,19 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$u = {};
-const _hoisted_1$i = {
+const _sfc_main$v = {};
+const _hoisted_1$j = {
   class: "mce-made-with",
   href: "https://github.com/qq15725/mce",
   target: "_blank"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("a", _hoisted_1$i, [..._cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("a", _hoisted_1$j, [..._cache[0] || (_cache[0] = [
     createElementVNode("div", null, "MADE WITH", -1),
     createElementVNode("div", null, "MCE", -1)
   ])]);
 }
-const MadeWith = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render]]);
+const MadeWith = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render]]);
 const _madeWith = definePlugin((editor) => {
   const {
     config,
@@ -5440,7 +5477,7 @@ const _madeWith = definePlugin((editor) => {
     ]
   };
 });
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -5556,9 +5593,9 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$h = ["onMouseenter"];
-const _hoisted_2$9 = ["onClick"];
-const _hoisted_3$9 = {
+const _hoisted_1$i = ["onMouseenter"];
+const _hoisted_2$a = ["onClick"];
+const _hoisted_3$a = {
   key: 0,
   class: "mce-list-item__checked"
 };
@@ -5575,7 +5612,7 @@ const _hoisted_7$3 = {
   key: 3,
   class: "mce-list-item__append"
 };
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceMenu"
   },
@@ -5656,7 +5693,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_MceMenu = resolveComponent("MceMenu");
-      return openBlock(), createBlock(_sfc_main$t, {
+      return openBlock(), createBlock(_sfc_main$u, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isActive.value = $event),
@@ -5702,8 +5739,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                     ]]),
                     onClick: (e) => onClickItem(item, index, e)
                   }, [
-                    hasPrepend.value ? (openBlock(), createElementBlock("div", _hoisted_3$9, [
-                      item.checked ? (openBlock(), createBlock(unref(_sfc_main$B), {
+                    hasPrepend.value ? (openBlock(), createElementBlock("div", _hoisted_3$a, [
+                      item.checked ? (openBlock(), createBlock(unref(_sfc_main$C), {
                         key: 0,
                         icon: "$check"
                       })) : createCommentVNode("", true)
@@ -5721,13 +5758,13 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                     ])) : createCommentVNode("", true),
                     item.children?.length || _ctx.$slots.append ? (openBlock(), createElementBlock("div", _hoisted_7$3, [
                       renderSlot(_ctx.$slots, "append", { item }),
-                      item.children?.length ? (openBlock(), createBlock(unref(_sfc_main$B), {
+                      item.children?.length ? (openBlock(), createBlock(unref(_sfc_main$C), {
                         key: 0,
                         icon: "$arrowRight"
                       })) : createCommentVNode("", true)
                     ])) : createCommentVNode("", true)
-                  ], 10, _hoisted_2$9)
-                ], 40, _hoisted_1$h))
+                  ], 10, _hoisted_2$a)
+                ], 40, _hoisted_1$i))
               ], 64);
             }), 128)),
             opened.value > -1 && __props.items?.[opened.value]?.children?.length ? (openBlock(), createBlock(_component_MceMenu, {
@@ -5778,7 +5815,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "ContextMenu",
   props: {
     "modelValue": { type: Boolean },
@@ -5793,6 +5830,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     const {
       drawboardDom,
       drawboardAabb,
+      drawboardContextMenuPointer,
       contextMenu,
       exec,
       getKbd,
@@ -5801,7 +5839,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       registerCommand,
       unregisterCommand
     } = useEditor();
-    const model = useModel(__props, "modelValue");
+    const isActive = useModel(__props, "modelValue");
     const position = useModel(__props, "position");
     const menuRef = useTemplateRef("menuTplRef");
     onBeforeMount(() => {
@@ -5810,15 +5848,24 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     onBeforeUnmount(() => {
       unregisterCommand("openContextMenu");
     });
+    watch(isActive, (isActive2) => {
+      if (!isActive2) {
+        drawboardContextMenuPointer.value = void 0;
+      }
+    });
     function updateLocation() {
       menuRef.value?.updateLocation();
     }
-    function onContextmenu(e) {
-      e.preventDefault();
-      model.value = true;
+    function onContextmenu(event) {
+      event.preventDefault();
+      isActive.value = true;
       position.value = {
-        x: e.clientX,
-        y: e.clientY
+        x: event.clientX,
+        y: event.clientY
+      };
+      drawboardContextMenuPointer.value = {
+        x: event.clientX - drawboardAabb.value.left,
+        y: event.clientY - drawboardAabb.value.top
       };
       updateLocation();
     }
@@ -5836,10 +5883,10 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$s, {
+      return openBlock(), createBlock(_sfc_main$t, {
         ref: "menuTplRef",
-        modelValue: model.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+        modelValue: isActive.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
         offset: 10,
         class: "mce-context-menu",
         target: position.value,
@@ -5871,7 +5918,8 @@ const _menu = definePlugin((editor, options) => {
     textSelection,
     config,
     exporters,
-    pluginsComponents
+    pluginsComponents,
+    isElement
   } = editor;
   const {
     customContextMenu
@@ -5900,6 +5948,9 @@ const _menu = definePlugin((editor, options) => {
     disabled: !hasSelected.value,
     children: [...exporters.values()].filter((v) => Boolean(v.copyAs)).map((v) => ({ key: `copyAs:${v.name}` }))
   }));
+  const nodeMenu = computed(() => [
+    { key: "addSubNode" }
+  ]);
   const editMenus1 = computed(() => [
     { key: "copy", disabled: !hasSelected.value },
     copyAsMenu.value.children.length && copyAsMenu.value,
@@ -6070,8 +6121,10 @@ const _menu = definePlugin((editor, options) => {
         return [
           ...editMenus1.value
         ];
-      } else {
+      } else if (selection.value.filter(isElement).length > 0) {
         return [
+          ...nodeMenu.value,
+          { type: "divider" },
           ...editMenus1.value,
           { type: "divider" },
           ...objectMenu1.value,
@@ -6084,6 +6137,12 @@ const _menu = definePlugin((editor, options) => {
           { type: "divider" },
           exportMenu.value
         ];
+      } else {
+        return [
+          ...nodeMenu.value,
+          { type: "divider" },
+          ...editMenus1.value
+        ];
       }
     } else {
       return [
@@ -6106,7 +6165,7 @@ const _menu = definePlugin((editor, options) => {
   return {
     name: "mce:menu",
     components: [
-      { type: "overlay", component: _sfc_main$r }
+      { type: "overlay", component: _sfc_main$s }
     ]
   };
 });
@@ -6170,6 +6229,135 @@ const _new = definePlugin((editor) => {
     ]
   };
 });
+const _hoisted_1$h = { class: "mce-node-creator" };
+const _hoisted_2$9 = { class: "mce-node-creator__tree" };
+const _hoisted_3$9 = { class: "mce-node-creator__actions" };
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  __name: "NodeCreator",
+  props: {
+    "isActive": { type: Boolean },
+    "isActiveModifiers": {}
+  },
+  emits: ["update:isActive"],
+  setup(__props) {
+    const {
+      t,
+      addNode,
+      selection
+    } = useEditor();
+    const isActive = useModel(__props, "isActive");
+    const activeNodeName = ref();
+    const exclude = /* @__PURE__ */ new Set([
+      "RenderTarget",
+      "Window",
+      "DrawboardEffect"
+    ]);
+    function buildInheritanceTree(classMap) {
+      const nodes = /* @__PURE__ */ new Map();
+      for (const [name, ctor] of classMap.entries()) {
+        if (exclude.has(name)) {
+          continue;
+        }
+        nodes.set(name, { ctor, name, children: [] });
+      }
+      const ctorToName = /* @__PURE__ */ new Map();
+      for (const [name, ctor] of classMap.entries()) {
+        ctorToName.set(ctor, name);
+      }
+      const roots = [];
+      for (const [, node] of nodes.entries()) {
+        const parentCtor = Object.getPrototypeOf(node.ctor.prototype)?.constructor;
+        if (parentCtor && ctorToName.has(parentCtor)) {
+          const parentName = ctorToName.get(parentCtor);
+          const parentNode = nodes.get(parentName);
+          parentNode.children.push(node);
+        } else {
+          roots.push(node);
+        }
+      }
+      return roots;
+    }
+    const tree = computed(() => buildInheritanceTree(customNodes));
+    function cancel() {
+      isActive.value = false;
+    }
+    function create() {
+      isActive.value = false;
+      const name = activeNodeName.value;
+      if (name) {
+        addNode({
+          name,
+          meta: {
+            inCanvasIs: name
+          }
+        }, {
+          parent: selection.value[0],
+          active: true
+        });
+      }
+    }
+    function Node2(props = {}) {
+      const { indent = 0, node } = props;
+      return [
+        h("div", {
+          class: [
+            "mce-node-creator__node",
+            activeNodeName.value === node.name && "mce-node-creator__node--active"
+          ],
+          style: {
+            "--indent-padding": `${indent * 16}px`
+          },
+          onClick: () => activeNodeName.value = node.name
+        }, node.name),
+        ...node.children.map((node2) => {
+          return h(Node2, { node: node2, indent: indent + 1 });
+        })
+      ];
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+        createElementVNode("div", _hoisted_2$9, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(tree.value, (node, index) => {
+            return openBlock(), createBlock(Node2, {
+              key: index,
+              node
+            }, null, 8, ["node"]);
+          }), 128))
+        ]),
+        createElementVNode("div", _hoisted_3$9, [
+          createVNode(_sfc_main$y, { onClick: cancel }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("cancel")), 1)
+            ]),
+            _: 1
+          }),
+          createVNode(_sfc_main$y, { onClick: create }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("create")), 1)
+            ]),
+            _: 1
+          })
+        ])
+      ]);
+    };
+  }
+});
+const _node = definePlugin((editor) => {
+  const {
+    registerConfig,
+    config
+  } = editor;
+  registerConfig("nodeCreator", false);
+  return {
+    name: "mce:node",
+    components: [
+      { name: "nodeCreator", type: "panel", position: "float", component: _sfc_main$r }
+    ],
+    commands: [
+      { command: "addSubNode", handle: () => config.value.nodeCreator = true }
+    ]
+  };
+});
 const _open = definePlugin((editor) => {
   const {
     openFileDialog,
@@ -9751,19 +9939,17 @@ class Path2D extends CompositeCurve {
     return this;
   }
   addPath(path) {
+    const curvePaths = path instanceof Path2D ? path.curves : [path];
+    if (curvePaths.filter((curvePath) => curvePath.curves.length).length === 0) {
+      return this;
+    }
     if (!this.currentCurve.curves.length) {
       const index = this.curves.findIndex((v) => v === this.currentCurve);
       if (index > -1) {
         this.curves.splice(index, 1);
       }
     }
-    if (path instanceof Path2D) {
-      this.curves.push(
-        ...path.curves.filter((curvePath) => curvePath.curves.length).map((v) => v.clone())
-      );
-    } else if (path.curves.length) {
-      this.curves.push(path);
-    }
+    this.curves.push(...curvePaths.map((v) => v.clone()));
     this.currentCurve = this.curves[this.curves.length - 1];
     return this;
   }
@@ -10243,7 +10429,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$t, {
+      return openBlock(), createBlock(_sfc_main$u, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
@@ -10850,7 +11036,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         class: "mce-back-selected-aera",
         onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(exec)("scrollToSelection", { behavior: "smooth" }), ["prevent"]))
       }, [
-        createVNode(unref(_sfc_main$B), { icon: "$gps" }),
+        createVNode(unref(_sfc_main$C), { icon: "$gps" }),
         createElementVNode("span", null, toDisplayString(unref(t)("goBackSelectedArea")), 1)
       ])) : createCommentVNode("", true);
     };
@@ -12515,7 +12701,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             ])
           ], 64)) : unref(state) === "transforming" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             createElementVNode("div", _hoisted_8$1, [
-              createVNode(unref(_sfc_main$B), { icon: "$mouseRightClick" })
+              createVNode(unref(_sfc_main$C), { icon: "$mouseRightClick" })
             ]),
             _cache[2] || (_cache[2] = createElementVNode("span", null, " / ", -1)),
             createElementVNode("div", _hoisted_9, [
@@ -12529,7 +12715,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             ])
           ], 64)) : unref(state) ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(unref(t)(unref(state))), 1)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
             createElementVNode("div", _hoisted_14, [
-              createVNode(unref(_sfc_main$B), { icon: "$mouseLeftClick" }),
+              createVNode(unref(_sfc_main$C), { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectObject")), 1)
             ]),
             _cache[4] || (_cache[4] = createElementVNode("span", null, " + ", -1)),
@@ -12539,7 +12725,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             ]),
             _cache[5] || (_cache[5] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
             createElementVNode("div", _hoisted_17, [
-              createVNode(unref(_sfc_main$B), { icon: "$mouseLeftClick" }),
+              createVNode(unref(_sfc_main$C), { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectArea")), 1)
             ]),
             _cache[6] || (_cache[6] = createElementVNode("span", null, " + ", -1)),
@@ -12549,7 +12735,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             ]),
             _cache[7] || (_cache[7] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
             createElementVNode("div", _hoisted_20, [
-              createVNode(unref(_sfc_main$B), { icon: "$mouseLeftClick" }),
+              createVNode(unref(_sfc_main$C), { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("dragSelected")), 1)
             ])
           ], 64))
@@ -12855,7 +13041,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             class: "mce-timeline__play",
             onClick: toggle
           }, [
-            createVNode(unref(_sfc_main$B), {
+            createVNode(unref(_sfc_main$C), {
               icon: paused.value ? "$play" : "$pause"
             }, null, 8, ["icon"])
           ])
@@ -13059,14 +13245,15 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               "show-arrow": ""
             }, {
               activator: withCtx(({ props: slotProps }) => [
-                createVNode(_sfc_main$x, mergeProps({
+                createVNode(_sfc_main$y, mergeProps({
+                  icon: "",
                   class: "mce-toolbelt__btn",
                   active: tool.active || tool.checked || false
                 }, { ref_for: true }, slotProps, {
                   onClick: tool.handle
                 }), {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$B), {
+                    createVNode(unref(_sfc_main$C), {
                       icon: `$${tool.key}`
                     }, null, 8, ["icon"])
                   ]),
@@ -13081,16 +13268,19 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               ]),
               _: 2
             }, 1024),
-            tool.children?.length ? (openBlock(), createBlock(_sfc_main$s, {
+            tool.children?.length ? (openBlock(), createBlock(_sfc_main$t, {
               key: 0,
               items: tool.children,
               offset: 12,
               location: "top-start"
             }, {
               activator: withCtx(({ props }) => [
-                createVNode(_sfc_main$x, mergeProps({ class: "mce-toolbelt__arrow" }, { ref_for: true }, props), {
+                createVNode(_sfc_main$y, mergeProps({
+                  icon: "",
+                  class: "mce-toolbelt__arrow"
+                }, { ref_for: true }, props), {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$B), { icon: "$arrowDown" })
+                    createVNode(unref(_sfc_main$C), { icon: "$arrowDown" })
                   ]),
                   _: 1
                 }, 16)
@@ -13106,7 +13296,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                 ], 64)) : createCommentVNode("", true)
               ]),
               prepend: withCtx(({ item }) => [
-                createVNode(unref(_sfc_main$B), {
+                createVNode(unref(_sfc_main$C), {
                   class: "mce-toolbelt__icon",
                   icon: `$${item.key}`
                 }, null, 8, ["icon"])
@@ -13303,6 +13493,7 @@ const plugins = [
   _menu,
   _move,
   _new,
+  _node,
   _open,
   _panels,
   _pen,
@@ -13483,7 +13674,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     const props = __props;
     const {
-      selection,
+      elementSelection,
       selectionAabbInDrawboard,
       isFrame
     } = useEditor();
@@ -13503,7 +13694,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       return {};
     });
     const offset2 = computed(() => {
-      if (selection.value.some((v) => isFrame(v)) || props.location?.startsWith("bottom")) {
+      if (elementSelection.value.some((v) => isFrame(v)) || props.location?.startsWith("bottom")) {
         return 32;
       }
       return 8;
@@ -13516,7 +13707,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$t, {
+      return openBlock(), createBlock(_sfc_main$u, {
         ref: "overlayTpl",
         style: normalizeStyle(style.value),
         class: "mce-floatbar",
@@ -13528,7 +13719,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         "model-value": true
       }, {
         default: withCtx(() => [
-          unref(selection).length > 0 ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
+          unref(elementSelection).length > 0 ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
         ]),
         _: 3
       }, 8, ["style", "location", "middlewares", "offset", "target"]);
@@ -14331,6 +14522,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       isElement,
       state,
       resizeElement,
+      selection,
       elementSelection,
       selectionObb,
       selectionObbInDrawboard,
@@ -14353,11 +14545,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       unregisterCommand("startTransform");
     });
     const parentObbs = computed(() => {
-      if (elementSelection.value.length !== 1) {
+      if (selection.value.length !== 1) {
         return [];
       }
       const obbs = [];
-      elementSelection.value[0]?.findAncestor((ancestor) => {
+      selection.value[0]?.findAncestor((ancestor) => {
         if (isElement(ancestor)) {
           obbs.push(getObb(ancestor, "drawboard"));
         }
@@ -14571,6 +14763,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       top: 60,
       ...props.defaultTransform
     });
+    const defaultSlotProps = {
+      isActive
+    };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$a, {
         modelValue: transform.value,
@@ -14584,11 +14779,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           createElementVNode("div", mergeProps({ class: "mce-float-panel__card" }, slotProps), [
             __props.title ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
               createElementVNode("div", null, toDisplayString(__props.title), 1),
-              createVNode(_sfc_main$x, {
+              createVNode(_sfc_main$y, {
+                icon: "",
                 onClick: _cache[0] || (_cache[0] = ($event) => isActive.value = false)
               }, {
                 default: withCtx(() => [
-                  createVNode(unref(_sfc_main$B), { icon: "$close" })
+                  createVNode(unref(_sfc_main$C), { icon: "$close" })
                 ]),
                 _: 1
               })
@@ -14598,7 +14794,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {
               }, ["stop"]))
             }, [
-              renderSlot(_ctx.$slots, "default")
+              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(defaultSlotProps)))
             ], 32)
           ], 16)
         ]),
@@ -14864,6 +15060,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       elementSelection,
       drawboardAabb,
       drawboardPointer,
+      drawboardContextMenuPointer,
       screenCenterOffset,
       activeDrawingTool
     } = editor;
@@ -15217,27 +15414,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pluginsComponents).overlay, (p, key) => {
                   return openBlock(), createBlock(resolveDynamicComponent(p.component), { key });
                 }), 128)),
-                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pluginsComponents).panel.filter((p) => p.position === "float"), (p, key) => {
-                  return openBlock(), createElementBlock(Fragment, { key }, [
-                    unref(config)[p.name] ? (openBlock(), createBlock(_sfc_main$6, {
-                      key: 0,
-                      modelValue: unref(config)[p.name],
-                      "onUpdate:modelValue": ($event) => unref(config)[p.name] = $event,
-                      title: unref(t)(p.name),
-                      "default-transform": {
-                        width: 240,
-                        height: unref(drawboardAabb).height * 0.7,
-                        top: unref(screenCenterOffset).top + 24,
-                        left: unref(screenCenterOffset).left + 24
-                      }
-                    }, {
-                      default: withCtx(() => [
-                        (openBlock(), createBlock(resolveDynamicComponent(p.component)))
-                      ]),
-                      _: 2
-                    }, 1032, ["modelValue", "onUpdate:modelValue", "title", "default-transform"])) : createCommentVNode("", true)
-                  ], 64);
-                }), 128)),
                 renderSlot(_ctx.$slots, "drawboard", normalizeProps(guardReactiveProps(slotProps)))
               ], 40, _hoisted_1)
             ]),
@@ -15261,6 +15437,30 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               }, 1032, ["modelValue", "onUpdate:modelValue", "position", "size", "order"])) : createCommentVNode("", true)
             ], 64);
           }), 128)),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pluginsComponents).panel.filter((p) => p.position === "float"), (p, key) => {
+            return openBlock(), createElementBlock(Fragment, { key }, [
+              unref(config)[p.name] ? (openBlock(), createBlock(_sfc_main$6, {
+                key: 0,
+                modelValue: unref(config)[p.name],
+                "onUpdate:modelValue": ($event) => unref(config)[p.name] = $event,
+                title: unref(t)(p.name),
+                "default-transform": {
+                  width: 240,
+                  height: unref(drawboardAabb).height * 0.7,
+                  left: unref(drawboardAabb).left + (unref(drawboardPointer)?.x ?? unref(drawboardContextMenuPointer)?.x ?? unref(screenCenterOffset).left + 24),
+                  top: unref(drawboardAabb).top + (unref(drawboardPointer)?.y ?? unref(drawboardContextMenuPointer)?.y ?? unref(screenCenterOffset).top + 24)
+                }
+              }, {
+                default: withCtx(({ isActive }) => [
+                  (openBlock(), createBlock(resolveDynamicComponent(p.component), {
+                    "is-active": isActive.value,
+                    "onUpdate:isActive": ($event) => isActive.value = $event
+                  }, null, 40, ["is-active", "onUpdate:isActive"]))
+                ]),
+                _: 2
+              }, 1032, ["modelValue", "onUpdate:modelValue", "title", "default-transform"])) : createCommentVNode("", true)
+            ], 64);
+          }), 128)),
           createElementVNode("div", _hoisted_3, null, 512)
         ]),
         _: 3
@@ -15295,7 +15495,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$t, {
+      return openBlock(), createBlock(_sfc_main$u, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
@@ -15323,7 +15523,7 @@ export {
   _sfc_main as Dialog,
   Doc,
   Editor,
-  _sfc_main$v as EditorLayers,
+  _sfc_main$w as EditorLayers,
   _sfc_main$1 as EditorLayout,
   _sfc_main$4 as EditorLayoutItem,
   _sfc_main$c as EditorToolbelt,
@@ -15334,7 +15534,7 @@ export {
   MceLayoutKey,
   MceMenuSymbol,
   MceOverlaySymbol,
-  _sfc_main$s as Menu,
+  _sfc_main$t as Menu,
   Model,
   _sfc_main$p as Ruler,
   SUPPORTS_CLIPBOARD,
@@ -15360,7 +15560,7 @@ export {
   findChildrenWithProvide,
   getImageSizeFromUrl,
   getRandomValues,
-  iElementToYElements,
+  iElementToYNodes,
   imageExtRe,
   imageExts,
   imageMimeTypeExtMap,