mce 0.12.5 → 0.13.1

package/dist/index.js

@@ -111,22 +111,26 @@ const _0_config_base = defineMixin((editor, options) => {
   } = editor;
   registerConfig("theme", "system");
   registerConfig("viewMode", "edgeless");
+  registerConfig("watermark", void 0);
   registerConfig("checkerboard", false);
+  registerConfig("checkerboardStyle", "grid");
   registerConfig("pixelGrid", false);
+  registerConfig("pixelate", true);
   registerConfig("camera", false);
   registerConfig("ruler", false);
   registerConfig("scrollbar", false);
+  registerConfig("layers", false);
   registerConfig("timeline", false);
   registerConfig("statusbar", false);
-  registerConfig("wheelZoom", false);
   registerConfig("frameOutline", false);
   registerConfig("frameGap", 48);
   registerConfig("typographyStrategy", "autoHeight");
   registerConfig("handleShape", "rect");
-  registerConfig("localDb", false);
   registerConfig("screenCenterOffset", { left: 0, top: 0, bottom: 0, right: 0 });
+  registerConfig("localDb", false);
   return () => {
     const {
+      renderEngine,
       camera,
       drawboardEffect
     } = editor;
@@ -135,6 +139,11 @@ const _0_config_base = defineMixin((editor, options) => {
         config.value[key] = options[key];
       }
     });
+    watch(
+      () => config.value.pixelate,
+      (value) => renderEngine.value.pixelate = value,
+      { immediate: true }
+    );
     watch(
       () => config.value.camera,
       (enable) => {
@@ -142,14 +151,24 @@ const _0_config_base = defineMixin((editor, options) => {
       },
       { immediate: true }
     );
+    watch(
+      () => config.value.watermark,
+      (value) => drawboardEffect.value.watermark = value,
+      { immediate: true }
+    );
     watch(
       () => config.value.checkerboard,
-      (enable) => drawboardEffect.value.checkerboard = enable,
+      (value) => drawboardEffect.value.checkerboard = value,
+      { immediate: true }
+    );
+    watch(
+      () => config.value.checkerboardStyle,
+      (value) => drawboardEffect.value.checkerboardStyle = value,
       { immediate: true }
     );
     watch(
       () => config.value.pixelGrid,
-      (enable) => drawboardEffect.value.pixelGrid = enable,
+      (value) => drawboardEffect.value.pixelGrid = value,
       { immediate: true }
     );
   };
@@ -879,6 +898,8 @@ const _0_context = defineMixin((editor) => {
   const drawboardAabb = ref({ left: 0, top: 0, width: 0, height: 0 });
   const doc = ref(new Doc());
   const root = computed(() => doc.value.root);
+  const nodes = ref([]);
+  const nodeIndexMap = reactive(/* @__PURE__ */ new Map());
   const drawboardPointer = ref();
   const state = ref();
   const stateContext = ref();
@@ -908,10 +929,12 @@ const _0_context = defineMixin((editor) => {
     timeline,
     camera,
     drawboardEffect,
+    doc,
     root,
+    nodes,
+    nodeIndexMap,
     drawboardDom,
     drawboardAabb,
-    doc,
     state,
     stateContext,
     setState,
@@ -919,13 +942,40 @@ const _0_context = defineMixin((editor) => {
     drawboardPointer,
     getGlobalPointer
   });
+  return () => {
+    const {
+      on,
+      root: root2
+    } = editor;
+    function updateNodes(value) {
+      let node;
+      if (value) {
+        node = value;
+      } else {
+        nodes.value.length = 0;
+        nodeIndexMap.clear();
+        node = root2.value;
+      }
+      for (const ch of node.children) {
+        updateNodes(ch);
+      }
+      nodes.value.push(node);
+      nodeIndexMap.set(node.id, nodes.value.length - 1);
+    }
+    on("setDoc", () => updateNodes());
+  };
 });
 const _0_element = defineMixin((editor) => {
   const selection = ref([]);
+  const elementSelection = computed({
+    get: () => selection.value.filter((v) => v instanceof Element2D),
+    set: (val) => selection.value = val
+  });
   const hoverElement = ref();
   const textSelection = ref();
   Object.assign(editor, {
     selection,
+    elementSelection,
     textSelection,
     hoverElement
   });
@@ -984,6 +1034,9 @@ const _0_font = defineMixin((editor, options) => {
   };
 });
 const _0_helper = defineMixin((editor) => {
+  const {
+    root
+  } = editor;
   const block = ["top", "bottom"];
   const inline = ["start", "end", "left", "right"];
   function toPhysical(str, isRtl) {
@@ -1003,19 +1056,37 @@ const _0_helper = defineMixin((editor) => {
       align: toPhysical(align, isRtl)
     };
   };
+  function isRoot(value) {
+    return value instanceof Node$1 && root.value.equal(value);
+  }
+  function isElement(value) {
+    return value instanceof Element2D;
+  }
   function isFrame(node) {
-    return node instanceof Element2D && node.meta?.inEditorIs === "Frame";
+    return isElement(node) && node.meta.inEditorIs === "Frame";
+  }
+  function isVisible(node) {
+    return isElement(node) && node.style.visibility === "visible";
+  }
+  function setVisible(node, visible) {
+    if (isElement(node)) {
+      node.style.visibility = visible ? "visible" : "hidden";
+    }
   }
-  function isLocked(element) {
-    return Boolean(element.meta.lock);
+  function isLock(node) {
+    return Boolean(node.meta.lock);
   }
-  function setLock(element, lock) {
-    element.meta.lock = lock;
+  function setLock(node, lock) {
+    node.meta.lock = lock;
   }
   Object.assign(editor, {
     parseAnchor,
+    isRoot,
+    isElement,
     isFrame,
-    isLocked,
+    isVisible,
+    setVisible,
+    isLock,
     setLock
   });
 });
@@ -1068,6 +1139,12 @@ const en = {
   "view:timeline": "Timeline",
   "view:statusbar": "Statusbar",
   "view:frameOutline": "Frame outlines",
+  "checkerboardStyle:grid": "Grid checkerboard",
+  "checkerboardStyle:dot": "Dot checkerboard",
+  "panels": "Panels",
+  "panels:layers": "Open layers panel",
+  "pixelate": "Pixelate",
+  "layers": "Layers",
   "zoomIn": "Zoom in",
   "zoomOut": "Zoom out",
   "zoomTo100": "Zoom to 100%",
@@ -1096,6 +1173,89 @@ const en = {
   "alignBottom": "Align bottom",
   "exporting": "Exporting"
 };
+const zhHans = {
+  "cancel": "取消",
+  "constrainToAxis": "约束到轴",
+  "loading": "加载中...",
+  "exporting": "导出中...",
+  "selecting": "选择中...",
+  "selectObject": "选择对象",
+  "commitChanges": "提交修改",
+  "extend": "扩展",
+  "goBackSelectedArea": "返回选中区域",
+  "selectArea": "选择区域",
+  "dragSelected": "拖拽选择的",
+  "file": "文件",
+  "new": "新建",
+  "open": "打开",
+  "import": "导入",
+  "export": "导出",
+  "saveAs:png": "另存为 PNG",
+  "saveAs:jpeg": "另存为 JPEG",
+  "saveAs:webp": "另存为 WEBP",
+  "saveAs:svg": "另存为 SVG",
+  "saveAs:gif": "另存为 GIF",
+  "saveAs:mp4": "另存为 MP4",
+  "saveAs:pdf": "另存为 PDF",
+  "saveAs:pptx": "另存为 PPTX",
+  "saveAs:json": "另存为 JSON",
+  "edit": "编辑",
+  "undo": "撤销",
+  "redo": "重做",
+  "cut": "剪切",
+  "copy": "复制",
+  "copyAs": "复制为",
+  "copyAs:svg": "复制为 SVG",
+  "copyAs:json": "复制为 JSON",
+  "paste": "粘贴",
+  "duplicate": "创建副本",
+  "delete": "删除",
+  "selectAll": "选择全部",
+  "deselectAll": "反选全部",
+  "selectParent": "选择父元素",
+  "previousSelection": "选择前一个",
+  "nextSelection": "选择后一个",
+  "view": "视图",
+  "view:checkerboard": "棋盘",
+  "view:pixelGrid": "像素网格",
+  "view:ruler": "标尺",
+  "view:scrollbar": "滚动条",
+  "view:timeline": "时间线",
+  "view:statusbar": "状态栏",
+  "view:frameOutline": "框架轮廓",
+  "checkerboardStyle:grid": "网格棋盘",
+  "checkerboardStyle:dot": "点状棋盘",
+  "panels": "面板",
+  "panels:layers": "打开图层面板",
+  "pixelate": "像素化",
+  "layers": "图层",
+  "zoomIn": "放大",
+  "zoomOut": "缩小",
+  "zoomTo100": "缩放到100%",
+  "zoomToFit": "缩放到合适",
+  "zoomToSelection": "缩放到选区",
+  "object": "对象",
+  "groupSelection": "成组",
+  "frameSelection": "成框架",
+  "ungroup": "解组（框架）",
+  "flip": "翻转",
+  "flipHorizontal": "水平翻转",
+  "flipVertical": "垂直翻转",
+  "hide/show": "隐藏/显示",
+  "lock/unlock": "锁/解锁",
+  "layerOrder": "图层顺序",
+  "bringToFront": "移到顶层",
+  "bringForward": "上移一层",
+  "sendBackward": "下移一层",
+  "sendToBack": "移到底层",
+  "layerPosition": "图层位置",
+  "alignLeft": "贴左侧",
+  "alignHorizontalCenter": "水平居中",
+  "alignRight": "贴右侧",
+  "alignTop": "贴顶部",
+  "alignVerticalCenter": "垂直居中",
+  "alignBottom": "贴底部"
+};
 const _0_locale = defineMixin((editor, options) => {
   const {
     locale
@@ -1109,7 +1269,8 @@ const _0_locale = defineMixin((editor, options) => {
       locale: "en",
       fallback: "en",
       messages: {
-        en
+        en,
+        zhHans
       }
     }, locale);
     return {
@@ -1143,8 +1304,8 @@ const _1_frame = defineMixin((editor) => {
     return { left, top, width, height };
   });
   const frameThumbs = ref([]);
-  function getAncestorFrame(element) {
-    return element?.findAncestor((node) => isFrame(node));
+  function getAncestorFrame(node) {
+    return node?.findAncestor((node2) => isFrame(node2));
   }
   Object.assign(editor, {
     frames,
@@ -1160,9 +1321,9 @@ const _1_frame = defineMixin((editor) => {
     } = editor;
     watch(() => {
       return selection.value.length === 1 && selection.value[0];
-    }, (element) => {
-      if (element && isFrame(element)) {
-        currentFrameIndex.value = frames.value.findIndex((v) => v.equal(element));
+    }, (node) => {
+      if (node && isFrame(node)) {
+        currentFrameIndex.value = frames.value.findIndex((v) => v.equal(node));
       }
     });
   };
@@ -1585,7 +1746,7 @@ const _1_screen = defineMixin((editor) => {
     config,
     drawboardAabb
   } = editor;
-  const getScreenCenterOffset = () => {
+  const screenCenterOffset = computed(() => {
     const offset2 = {
       left: 0,
       top: 0,
@@ -1602,21 +1763,22 @@ const _1_screen = defineMixin((editor) => {
       offset2.top += 16;
     }
     return offset2;
-  };
-  const getScreenCenter = () => {
-    const offset2 = getScreenCenterOffset();
+  });
+  const screenCenter = computed(() => {
+    const offset2 = screenCenterOffset.value;
     return {
       x: offset2.left + (drawboardAabb.value.width - offset2.left - offset2.right) / 2,
       y: offset2.top + (drawboardAabb.value.height - offset2.top - offset2.bottom) / 2
     };
-  };
+  });
   Object.assign(editor, {
-    getScreenCenterOffset,
-    getScreenCenter
+    screenCenterOffset,
+    screenCenter
   });
 });
 const _1_timeline = defineMixin((editor) => {
   const {
+    isElement,
     root,
     timeline,
     renderEngine
@@ -1638,7 +1800,7 @@ const _1_timeline = defineMixin((editor) => {
         range.startTime = Math.min(range.startTime, node2.globalStartTime);
         range.endTime = Math.max(range.endTime, node2.globalEndTime);
       }
-      if (node2 instanceof Element2D) {
+      if (isElement(node2)) {
         if (node2.background.animatedTexture) {
           range.endTime = Math.max(range.endTime, node2.globalStartTime + node2.background.animatedTexture.duration);
         }
@@ -1692,6 +1854,7 @@ function noop(..._args) {
 }
 const _2_box = defineMixin((editor) => {
   const {
+    isElement,
     camera,
     root,
     selection,
@@ -1764,7 +1927,7 @@ const _2_box = defineMixin((editor) => {
       } else {
         obb = { ...getAabb(node), rotate: 0 };
       }
-    } else if (node instanceof Element2D) {
+    } else if (isElement(node)) {
       const style = node.style;
       noop([style.left, style.top, style.width, style.height, style.rotate]);
       const { rect, rotation } = node.getGlobalObb();
@@ -1840,7 +2003,7 @@ const _2_box = defineMixin((editor) => {
           height: minmax.maxY - minmax.minY
         };
       }
-    } else if (node instanceof Element2D) {
+    } else if (isElement(node)) {
       const style = node.style;
       noop([style.left, style.top, style.width, style.height, style.rotate]);
       const rect = node.getGlobalAabb();
@@ -2219,13 +2382,13 @@ const _4_2_element = defineMixin((editor) => {
     log,
     root,
     isFrame,
-    isLocked,
+    isLock,
     getObbInDrawboard,
     config,
     getAncestorFrame,
     getAabb,
     getGlobalPointer,
-    getScreenCenter,
+    screenCenter,
     selection,
     camera,
     parseAnchor
@@ -2247,12 +2410,12 @@ const _4_2_element = defineMixin((editor) => {
       if (config.value.viewMode === "frame") {
         parent = currentFrame.value;
       } else {
-        const element = selection.value[0];
-        if (element) {
-          if (isFrame(element)) {
-            parent = element;
+        const node = selection.value[0];
+        if (node) {
+          if (isFrame(node)) {
+            parent = node;
           } else {
-            parent = getAncestorFrame(element);
+            parent = getAncestorFrame(node);
           }
         }
       }
@@ -2309,7 +2472,7 @@ const _4_2_element = defineMixin((editor) => {
           case "pointer":
             break;
           case "screenCenter":
-            globalPosition = camera.value.toGlobal(getScreenCenter());
+            globalPosition = camera.value.toGlobal(screenCenter.value);
             globalPosition.x -= aabb.width / 2;
             globalPosition.y -= aabb.height / 2;
             break;
@@ -2458,7 +2621,7 @@ const _4_2_element = defineMixin((editor) => {
       }
       return [node];
     }).filter((node) => {
-      return "isVisibleInTree" in node && node.isVisibleInTree() && isOverlappingObb(areaInDrawboard, getObbInDrawboard(node)) && !isLocked(node);
+      return "isVisibleInTree" in node && node.isVisibleInTree() && isOverlappingObb(areaInDrawboard, getObbInDrawboard(node)) && !isLock(node);
     }) ?? [];
     selection.value = selected;
     return selected;
@@ -2659,7 +2822,7 @@ const _scroll$1 = defineMixin((editor) => {
     getAabb,
     selectionAabb,
     viewAabb,
-    getScreenCenter
+    screenCenter
   } = editor;
   const scrollTo = async (target, options = {}) => {
     const {
@@ -2667,7 +2830,7 @@ const _scroll$1 = defineMixin((editor) => {
       duration = 500
     } = options;
     const _camera = camera.value;
-    const screenCenter = getScreenCenter();
+    const _screenCenter = screenCenter.value;
     const offset2 = { x: 0, y: 0 };
     let position = { x: 0, y: 0 };
     if (typeof target === "object" && "x" in target && "y" in target) {
@@ -2689,8 +2852,8 @@ const _scroll$1 = defineMixin((editor) => {
         }
       }
       position = { x: aabb.left + aabb.width / 2, y: aabb.top + aabb.height / 2 };
-      offset2.x += -screenCenter.x;
-      offset2.y = -screenCenter.y;
+      offset2.x += -_screenCenter.x;
+      offset2.y = -_screenCenter.y;
     }
     position.x *= _camera.zoom.x;
     position.x += offset2.x;
@@ -2850,7 +3013,7 @@ const _zoom$1 = defineMixin((editor) => {
     selectionAabb,
     viewAabb,
     getAabb,
-    getScreenCenterOffset
+    screenCenterOffset
   } = editor;
   const zoomTo = async (target, options = {}) => {
     const {
@@ -2872,7 +3035,7 @@ const _zoom$1 = defineMixin((editor) => {
           break;
       }
     }
-    const offset2 = getScreenCenterOffset();
+    const offset2 = screenCenterOffset.value;
     const { width, height } = drawboardAabb.value;
     const tw = width - (offset2.left + offset2.right);
     const th = height - (offset2.top + offset2.bottom);
@@ -3941,7 +4104,7 @@ function isLeftTopLine(line) {
 const _auxiliary = definePlugin((editor) => {
   const {
     currentFrame,
-    selection,
+    elementSelection,
     state,
     getObbInDrawboard,
     root
@@ -3973,18 +4136,18 @@ const _auxiliary = definePlugin((editor) => {
   const excluded = computed(() => {
     return new Set(
       [
-        selection.value[0]?.instanceId
+        elementSelection.value[0]?.instanceId
       ].filter(Boolean)
     );
   });
   const activatedBox = computed(() => {
-    if (selection.value[0]) {
-      return createBox(selection.value[0]);
+    if (elementSelection.value[0]) {
+      return createBox(elementSelection.value[0]);
     }
     return void 0;
   });
   const parnet = computed(() => {
-    const p = selection.value[0].parent;
+    const p = elementSelection.value[0].parent;
     return p instanceof Element2D ? p : void 0;
   });
   const parentBox = computed(() => createBox(
@@ -4512,15 +4675,15 @@ const _delete = definePlugin((editor) => {
 });
 const _flip = definePlugin((editor) => {
   const {
-    selection
+    elementSelection
   } = editor;
   function flipHorizontal() {
-    selection.value.forEach((el) => {
+    elementSelection.value.forEach((el) => {
       el.style.scaleX = -el.style.scaleX;
     });
   }
   function flipVertical() {
-    selection.value.forEach((el) => {
+    elementSelection.value.forEach((el) => {
       el.style.scaleY = -el.style.scaleY;
     });
   }
@@ -4578,13 +4741,13 @@ const _group = definePlugin((editor) => {
   const {
     getObb,
     getAabb,
-    selection,
+    elementSelection,
     addElement,
     deleteElement,
     doc
   } = editor;
   function group(inEditorIs) {
-    const elements = selection.value;
+    const elements = elementSelection.value;
     if (!elements.length) {
       return;
     }
@@ -4616,7 +4779,7 @@ const _group = definePlugin((editor) => {
     });
   }
   function ungroup() {
-    const element = selection.value[0];
+    const element = elementSelection.value[0];
     if (!element || !element.children.length)
       return;
     const parent = getObb(element, "parent");
@@ -4728,7 +4891,8 @@ const _image = definePlugin((editor) => {
     addElement,
     to,
     fonts,
-    upload
+    upload,
+    drawboardEffect
   } = editor;
   const insertImage = async (url, options) => {
     return addElement(await createImageElement(url), {
@@ -4755,7 +4919,17 @@ const _image = definePlugin((editor) => {
           data: doc,
           fonts,
           width: doc.style.width,
-          height: doc.style.height
+          height: doc.style.height,
+          onBefore: (engine) => {
+            engine.root.append(
+              new DrawboardEffect({
+                internalMode: "back",
+                effectMode: "before",
+                ...drawboardEffect.value.getProperties()
+              })
+            );
+            console.log(drawboardEffect.value.getProperties());
+          }
         });
         return await new Promise((resolve) => {
           canvas.toBlob(
@@ -4856,7 +5030,7 @@ const _import = definePlugin((editor) => {
 const _json = definePlugin((editor) => {
   const {
     getAabb,
-    selection,
+    elementSelection,
     root,
     getTimeRange
   } = editor;
@@ -4903,7 +5077,7 @@ const _json = definePlugin((editor) => {
             elements = selected;
           } else {
             if (selected === true) {
-              elements = selection.value;
+              elements = elementSelection.value;
             }
             if (elements.length === 0 && root.value) {
               id = root.value.id;
@@ -5003,13 +5177,14 @@ const _layerOrder = definePlugin((editor) => {
 });
 const _layerPosition = definePlugin((editor) => {
   const {
-    currentFrameAabb,
-    selection,
+    isElement,
+    rootAabb,
+    elementSelection,
     getAabb
   } = editor;
   function align(direction) {
-    const box = selection.value.length === 1 ? currentFrameAabb.value : getAabb(selection.value);
-    selection.value.forEach((el) => {
+    elementSelection.value.forEach((el) => {
+      const box = el.parent && isElement(el.parent) ? getAabb(el.parent) : rootAabb.value;
       switch (direction) {
         case "left":
           el.style.left = 0;
@@ -5056,7 +5231,7 @@ const _layerPosition = definePlugin((editor) => {
 const _lock = definePlugin((editor) => {
   const {
     selection,
-    isLocked,
+    isLock,
     setLock
   } = editor;
   return {
@@ -5064,7 +5239,7 @@ const _lock = definePlugin((editor) => {
     commands: [
       { command: "lock", handle: () => selection.value.forEach((el) => setLock(el, true)) },
       { command: "unlock", handle: () => selection.value.forEach((el) => setLock(el, false)) },
-      { command: "lock/unlock", handle: () => selection.value.forEach((el) => setLock(el, !isLocked(el))) }
+      { command: "lock/unlock", handle: () => selection.value.forEach((el) => setLock(el, !isLock(el))) }
     ],
     hotkeys: [
       { command: "lock/unlock", key: "Shift+CmdOrCtrl+l" }
@@ -5145,10 +5320,39 @@ const _menu = definePlugin((editor, options) => {
       { key: "zoomToSelection", disabled: !hasSelected.value }
     ]
   }));
+  const panelsMenu = computed(() => ({
+    key: "panels",
+    children: [
+      { key: "panels:layers", checked: config.value.layers }
+    ]
+  }));
+  function setCheckerboard(value) {
+    if (config.value.checkerboard && config.value.checkerboardStyle === value) {
+      config.value.checkerboard = false;
+    } else {
+      config.value.checkerboard = true;
+      config.value.checkerboardStyle = value;
+    }
+  }
+  const checkerboardMenu = computed(() => ({
+    key: "view:checkerboard",
+    children: [
+      {
+        key: "checkerboardStyle:grid",
+        checked: config.value.checkerboard && config.value.checkerboardStyle === "grid",
+        handle: () => setCheckerboard("grid")
+      },
+      {
+        key: "checkerboardStyle:dot",
+        checked: config.value.checkerboard && config.value.checkerboardStyle === "dot",
+        handle: () => setCheckerboard("dot")
+      }
+    ]
+  }));
   const viewMenu = computed(() => ({
     key: "view",
     children: [
-      { key: "view:checkerboard", checked: config.value.checkerboard },
+      checkerboardMenu.value,
       { key: "view:pixelGrid", checked: config.value.pixelGrid },
       { key: "view:ruler", checked: config.value.ruler },
       { key: "view:scrollbar", checked: config.value.scrollbar },
@@ -5156,8 +5360,15 @@ const _menu = definePlugin((editor, options) => {
       { key: "view:statusbar", checked: config.value.statusbar },
       { key: "view:frameOutline", checked: config.value.frameOutline },
       { type: "divider" },
+      {
+        key: "pixelate",
+        checked: config.value.pixelate,
+        handle: () => config.value.pixelate = !config.value.pixelate
+      },
+      panelsMenu.value,
+      { type: "divider" },
       ...zoomViewMenu.value.children
-    ]
+    ].filter(Boolean)
   }));
   const objectMenu1 = computed(() => [
     { key: "groupSelection", disabled: !hasSelected.value },
@@ -5262,7 +5473,7 @@ const _menu = definePlugin((editor, options) => {
 });
 const _move = definePlugin((editor) => {
   const {
-    selection
+    elementSelection
   } = editor;
   function move(direction, distance = 1) {
     let prop;
@@ -5279,12 +5490,12 @@ const _move = definePlugin((editor) => {
         prop = "left";
         break;
     }
-    selection.value.forEach((element) => {
+    elementSelection.value.forEach((element) => {
       element.style[prop] += distance;
     });
   }
   function when() {
-    return selection.value.length > 0;
+    return elementSelection.value.length > 0;
   }
   return {
     name: "mce:move",
@@ -5341,6 +5552,20 @@ const _open = definePlugin((editor) => {
     ]
   };
 });
+const _panels = definePlugin((editor) => {
+  const {
+    config
+  } = editor;
+  return {
+    name: "mce:panels",
+    commands: [
+      { command: "panels", handle: (panel) => config.value[panel] = !config.value[panel] }
+    ],
+    hotkeys: [
+      { command: "panels:layers", key: "Alt+¡" }
+    ]
+  };
+});
 const _saveAs = definePlugin((editor) => {
   const {
     to,
@@ -5401,21 +5626,21 @@ const _select = definePlugin((editor) => {
     }
   }
   function previousSelection() {
-    const element = selection.value[0];
-    if (!element)
-      return;
-    const previousSibling = element.previousSibling;
-    if (previousSibling instanceof Element2D && !element.equal(previousSibling)) {
-      selection.value = [previousSibling];
+    const node = selection.value[0];
+    if (node) {
+      const previousSibling = node.previousSibling;
+      if (previousSibling && !node.equal(previousSibling)) {
+        selection.value = [previousSibling];
+      }
     }
   }
   function nextSelection() {
-    const element = selection.value[0];
-    if (!element)
-      return;
-    const nextSibling = element.nextSibling;
-    if (nextSibling instanceof Element2D && !element.equal(nextSibling)) {
-      selection.value = [nextSibling];
+    const node = selection.value[0];
+    if (node) {
+      const nextSibling = node.nextSibling;
+      if (nextSibling && node.equal(nextSibling)) {
+        selection.value = [nextSibling];
+      }
     }
   }
   return {
@@ -5553,20 +5778,20 @@ const _view = definePlugin((editor) => {
 });
 const _visibility = definePlugin((editor) => {
   const {
-    selection
+    elementSelection
   } = editor;
   function show() {
-    selection.value.forEach((el) => {
+    elementSelection.value.forEach((el) => {
       el.style.visibility = "visible";
     });
   }
   function hide() {
-    selection.value.forEach((el) => {
+    elementSelection.value.forEach((el) => {
       el.style.visibility = "hidden";
     });
   }
   function hideOrShow() {
-    selection.value.forEach((el) => {
+    elementSelection.value.forEach((el) => {
       el.style.visibility = el.style.visibility === "hidden" ? "visible" : "hidden";
     });
   }
@@ -5587,7 +5812,7 @@ const _zoom = definePlugin((editor) => {
     camera,
     drawboardAabb,
     zoomTo,
-    selection,
+    elementSelection,
     exec
   } = editor;
   return {
@@ -5610,7 +5835,7 @@ const _zoom = definePlugin((editor) => {
     events: {
       setDoc: () => exec("zoomToFit"),
       setCurrentFrame: () => {
-        if (selection.value.length) {
+        if (elementSelection.value.length) {
           exec("zoomToSelection");
         } else {
           exec("zoomToFit");
@@ -5652,6 +5877,7 @@ const plugins = [
   _move,
   _new,
   _open,
+  _panels,
   _saveAs,
   _scroll,
   _select,
@@ -5898,6 +6124,7 @@ function useIcon(props) {
   };
 }
 const aliases = {
+  close: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z",
   play: "M8 5.14v14l11-7z",
   pause: "M14 19h4V5h-4M6 19h4V5H6z",
   gps: "M12 8a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m-8.95 5H1v-2h2.05C3.5 6.83 6.83 3.5 11 3.05V1h2v2.05c4.17.45 7.5 3.78 7.95 7.95H23v2h-2.05c-.45 4.17-3.78 7.5-7.95 7.95V23h-2v-2.05C6.83 20.5 3.5 17.17 3.05 13M12 5a7 7 0 0 0-7 7a7 7 0 0 0 7 7a7 7 0 0 0 7-7a7 7 0 0 0-7-7",
@@ -5932,6 +6159,10 @@ const MceOverlaySymbol = Symbol.for("MceOverlaySymbol");
 const makeMceOverlayProps = propsFactory({
   location: String,
   offset: Number,
+  middlewares: {
+    type: Object,
+    default: () => ["offset", "flip", "shift"]
+  },
   target: Object,
   attach: {
     type: [String, Boolean, Object],
@@ -6018,13 +6249,13 @@ const defaultHoverStrategy = (context) => {
   }
   return void 0;
 };
-const _hoisted_1$h = { class: "mce-auxiliary" };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _hoisted_1$l = { class: "mce-auxiliary" };
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "Auxiliary",
   setup(__props) {
     const { auxiliaryLines } = useEditor();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(auxiliaryLines), (item, key) => {
           return openBlock(), createElementBlock("div", {
             key,
@@ -6041,6 +6272,67 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const MceLayerKey = Symbol.for("mce:layer");
+const MceLayerItemKey = Symbol.for("mce:layer-item");
+function createLayer(options) {
+  const {
+    sortedSelection
+  } = options;
+  const registered = ref([]);
+  const selecting = ref(false);
+  const openedItems = reactive(/* @__PURE__ */ new Map());
+  const domItems = reactive(/* @__PURE__ */ new Map());
+  const rootVm = getCurrentInstance();
+  provide(MceLayerKey, {
+    selecting,
+    sortedSelection,
+    register: (vm, options2) => {
+      const {
+        id,
+        dom,
+        opened
+      } = options2;
+      openedItems.set(id, opened);
+      domItems.set(id, dom);
+      registered.value.push(id);
+      const instances = findChildrenWithProvide(MceLayerItemKey, rootVm?.vnode);
+      const instanceIndex = instances.indexOf(vm);
+      if (instanceIndex > -1) {
+        registered.value.splice(instanceIndex, 0, id);
+      } else {
+        registered.value.push(id);
+      }
+    },
+    unregister: (id) => {
+      openedItems.delete(id);
+      domItems.delete(id);
+      registered.value = registered.value.filter((v) => v !== id);
+    }
+  });
+  return {
+    selecting,
+    openedItems,
+    domItems
+  };
+}
+function useLayerItem(options) {
+  const {
+    id,
+    opened,
+    dom
+  } = options;
+  const vm = getCurrentInstance();
+  provide(MceLayerItemKey, { id });
+  const rootLayer = inject(MceLayerKey);
+  const { register, unregister, ...props } = rootLayer;
+  register(vm, {
+    id,
+    dom,
+    opened
+  });
+  onBeforeUnmount(() => unregister(id));
+  return props;
+}
 function useResizeObserver(callback, box = "content") {
   const resizeRef = templateRef();
   const contentRect = ref();
@@ -6317,7 +6609,7 @@ function createLayout(props) {
   };
 }
 const MceMenuSymbol = Symbol.for("MceMenuSymbol");
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "Icon",
   props: {
     disabled: Boolean,
@@ -6342,7 +6634,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -6387,14 +6679,15 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     });
     const contentEl = useTemplateRef("contentElTpl");
     const attach = computed(() => props.attach ?? overlayItem.attach?.value ?? "body");
+    const middlewares = new Set(props.middlewares);
     const { floatingStyles, update } = useFloating(target, contentEl, {
       placement: computed(() => props.location),
       whileElementsMounted: autoUpdate,
       middleware: [
-        offset(() => props.offset ?? 0),
-        flip(),
-        shift({ padding: 20 })
-      ]
+        middlewares.has("offset") && offset(() => props.offset ?? 0),
+        middlewares.has("flip") && flip(),
+        middlewares.has("shift") && shift({ padding: 20 })
+      ].filter(Boolean)
     });
     const style = computed(() => {
       return {
@@ -6454,8 +6747,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$g = ["onMouseenter"];
-const _hoisted_2$8 = ["onClick"];
+const _hoisted_1$k = ["onMouseenter"];
+const _hoisted_2$a = ["onClick"];
 const _hoisted_3$7 = {
   key: 0,
   class: "mce-list-item__prepend"
@@ -6465,7 +6758,7 @@ const _hoisted_5$3 = {
   key: 1,
   class: "mce-list-item__append"
 };
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceMenu"
   },
@@ -6486,7 +6779,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     const isActive = useModel(__props, "modelValue");
     const opened = ref(-1);
     const overlay = useTemplateRef("overlayTpl");
-    const menuItemRefs = useTemplateRef("menuItemTplRefs");
+    const menuItemRefs = ref([]);
     const hasPrepend = computed(() => Boolean(props.items?.some((v) => "checked" in v)));
     const uid = useId();
     const parent = inject(MceMenuSymbol, null);
@@ -6523,10 +6816,16 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       } else {
         isActive.value = false;
         parent?.closeParents(e);
-        item.handle?.(e);
-        emit("click:item", item, e);
+        if (item.handle) {
+          item.handle?.(e);
+        } else {
+          emit("click:item", item, e);
+        }
       }
     }
+    function onMouseenter(item, index) {
+      opened.value = item.disabled ? -1 : index;
+    }
     function onMouseleave() {
       if (props.items?.[opened.value]?.children?.length === void 0) {
         opened.value = -1;
@@ -6538,7 +6837,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_MceMenu = resolveComponent("MceMenu");
-      return openBlock(), createBlock(_sfc_main$v, {
+      return openBlock(), createBlock(_sfc_main$y, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isActive.value = $event),
@@ -6565,14 +6864,14 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                 item.type === "divider" ? (openBlock(), createElementBlock("div", {
                   key: 0,
                   ref_for: true,
-                  ref: "menuItemTplRefs",
+                  ref: (el) => menuItemRefs.value[index] = el ?? void 0,
                   class: "mce-list__divider"
                 }, null, 512)) : (openBlock(), createElementBlock("div", {
                   key: 1,
                   ref_for: true,
-                  ref: "menuItemTplRefs",
+                  ref: (el) => menuItemRefs.value[index] = el ?? void 0,
                   class: "mce-list__item",
-                  onMouseenter: ($event) => item.disabled ? opened.value = -1 : opened.value = index
+                  onMouseenter: ($event) => onMouseenter(item, index)
                 }, [
                   createElementVNode("div", {
                     class: normalizeClass(["mce-list-item", [
@@ -6582,7 +6881,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                     onClick: (e) => onClickItem(item, index, e)
                   }, [
                     hasPrepend.value ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
-                      item.checked ? (openBlock(), createBlock(_sfc_main$w, {
+                      item.checked ? (openBlock(), createBlock(_sfc_main$z, {
                         key: 0,
                         icon: "$check"
                       })) : createCommentVNode("", true)
@@ -6593,10 +6892,10 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                       ])
                     ]),
                     item.children?.length ? (openBlock(), createElementBlock("div", _hoisted_5$3, [
-                      createVNode(_sfc_main$w, { icon: "$arrowRight" })
+                      createVNode(_sfc_main$z, { icon: "$arrowRight" })
                     ])) : createCommentVNode("", true)
-                  ], 10, _hoisted_2$8)
-                ], 40, _hoisted_1$g))
+                  ], 10, _hoisted_2$a)
+                ], 40, _hoisted_1$k))
               ], 64);
             }), 128)),
             opened.value > -1 && __props.items?.[opened.value]?.children?.length ? (openBlock(), createBlock(_component_MceMenu, {
@@ -6626,12 +6925,12 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$f = { class: "mce-context-menu__title" };
-const _hoisted_2$7 = {
+const _hoisted_1$j = { class: "mce-context-menu__title" };
+const _hoisted_2$9 = {
   key: 0,
   class: "mce-context-menu__kbd"
 };
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "ContextMenu",
   props: {
     "modelValue": { type: Boolean },
@@ -6689,7 +6988,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$u, {
+      return openBlock(), createBlock(_sfc_main$x, {
         ref: "menuTplRef",
         modelValue: model.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
@@ -6704,19 +7003,19 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         "onClick:item": onClickItem
       }, {
         title: withCtx(({ item }) => [
-          createElementVNode("span", _hoisted_1$f, toDisplayString(unref(t)(item.key)), 1),
-          unref(hotkeys).has(item.key) ? (openBlock(), createElementBlock("span", _hoisted_2$7, toDisplayString(unref(getKbd)(item.key)), 1)) : createCommentVNode("", true)
+          createElementVNode("span", _hoisted_1$j, toDisplayString(unref(t)(item.key)), 1),
+          unref(hotkeys).has(item.key) ? (openBlock(), createElementBlock("span", _hoisted_2$9, toDisplayString(unref(getKbd)(item.key)), 1)) : createCommentVNode("", true)
         ]),
         _: 1
       }, 8, ["modelValue", "target", "items", "style"]);
     };
   }
 });
-const _hoisted_1$e = {
+const _hoisted_1$i = {
   key: 0,
   class: "mce-drawing__content"
 };
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "Drawing",
   setup(__props) {
     const {
@@ -6746,16 +7045,17 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         }),
         onMousedown
       }, [
-        unref(stateContext)?.content ? (openBlock(), createElementBlock("div", _hoisted_1$e, toDisplayString(unref(t)(unref(stateContext).content)), 1)) : createCommentVNode("", true)
+        unref(stateContext)?.content ? (openBlock(), createElementBlock("div", _hoisted_1$i, toDisplayString(unref(t)(unref(stateContext).content)), 1)) : createCommentVNode("", true)
       ], 36)) : createCommentVNode("", true);
     };
   }
 });
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "Floatbar",
   props: {
     ...makeMceOverlayProps({
       location: "top-start",
+      middlewares: ["offset", "shift"],
       offset: 8
     })
   },
@@ -6777,10 +7077,11 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$v, {
+      return openBlock(), createBlock(_sfc_main$y, {
         ref: "overlayTpl",
         class: "mce-floatbar",
         location: props.location,
+        middlewares: props.middlewares,
         offset: unref(selection)[0] && unref(isFrame)(unref(selection)[0]) ? 32 : 8,
         target: props.target,
         attach: false,
@@ -6790,11 +7091,11 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           unref(selection).length > 0 ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 8, ["location", "offset", "target"]);
+      }, 8, ["location", "middlewares", "offset", "target"]);
     };
   }
 });
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "Frame",
   props: {
     "modelValue": { required: true },
@@ -6860,7 +7161,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "Frames",
   setup(__props) {
     const {
@@ -6868,7 +7169,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     } = useEditor();
     return (_ctx, _cache) => {
       return openBlock(true), createElementBlock(Fragment, null, renderList(unref(frames), (frame, key) => {
-        return openBlock(), createBlock(_sfc_main$q, {
+        return openBlock(), createBlock(_sfc_main$t, {
           key,
           "model-value": frame
         }, null, 8, ["model-value"]);
@@ -6876,7 +7177,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "GoBackSelectedArea",
   setup(__props) {
     const {
@@ -6898,14 +7199,14 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         class: "mce-back-selected-aera",
         onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(exec)("scrollToSelection", { behavior: "smooth" }), ["prevent"]))
       }, [
-        createVNode(_sfc_main$w, { icon: "$gps" }),
+        createVNode(_sfc_main$z, { icon: "$gps" }),
         createElementVNode("span", null, toDisplayString(unref(t)("goBackSelectedArea")), 1)
       ])) : createCommentVNode("", true);
     };
   }
 });
-const _hoisted_1$d = ["data-name"];
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _hoisted_1$h = ["data-name"];
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "Hover",
   setup(__props) {
     const {
@@ -6923,7 +7224,371 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           borderColor: "currentcolor",
           ...unref(boundingBoxToStyle)(hoverElementObb.value)
         })
-      }, null, 12, _hoisted_1$d)) : createCommentVNode("", true);
+      }, null, 12, _hoisted_1$h)) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$g = { class: "mce-btn" };
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  __name: "Btn",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+        renderSlot(_ctx.$slots, "default")
+      ]);
+    };
+  }
+});
+const _hoisted_1$f = { class: "mce-layer__name" };
+const _hoisted_2$8 = { class: "mce-layer__action" };
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MceLayer",
+    inheritAttrs: false
+  },
+  __name: "Layer",
+  props: /* @__PURE__ */ mergeModels({
+    root: Boolean,
+    node: {
+      type: Object,
+      required: true
+    },
+    active: Boolean,
+    indent: {
+      type: Number,
+      default: 0
+    }
+  }, {
+    "opened": { default: false },
+    "openedModifiers": {}
+  }),
+  emits: ["update:opened"],
+  setup(__props) {
+    const props = __props;
+    const {
+      isElement,
+      isFrame,
+      isVisible,
+      setVisible,
+      isLock,
+      setLock,
+      selection,
+      nodes,
+      nodeIndexMap,
+      zoomTo,
+      hoverElement,
+      exec
+    } = useEditor();
+    const opened = useModel(__props, "opened");
+    const dom = ref();
+    const {
+      selecting,
+      sortedSelection
+    } = useLayerItem({
+      id: props.node.id,
+      opened,
+      node: computed(() => props.node),
+      dom: computed(() => dom.value)
+    });
+    const isFrist = computed(() => sortedSelection.value[0]?.equal(props.node));
+    const isLast = computed(() => {
+      const last = sortedSelection.value[sortedSelection.value.length - 1];
+      if (last) {
+        if (last.equal(props.node)) {
+          if (!opened.value || !props.node?.children.length)
+            return true;
+        } else if (last.equal(props.node?.parent)) ;
+      }
+      return false;
+    });
+    const isActive = computed(() => selection.value.some((v) => v.equal(props.node)));
+    const inputDom = ref();
+    const isHoverElement = computed(() => props.node?.equal(hoverElement.value));
+    const hovering = ref(false);
+    const editing = ref(false);
+    const editValue = ref();
+    const thumbnailIcon = computed(() => {
+      const node = props.node;
+      if (isFrame(node)) {
+        return "$frame";
+      } else if (node.children.length) {
+        return "$group";
+      } else if (isElement(node)) {
+        if (node.foreground.isValid() && node.foreground.image) {
+          return "$image";
+        }
+        if (node.text.isValid()) {
+          return "$text";
+        }
+      }
+      return "$shape";
+    });
+    function onMousedown() {
+    }
+    function onClickExpand() {
+      opened.value = !opened.value;
+    }
+    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 (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];
+          }
+        } else {
+          selection.value = [props.node];
+        }
+      }
+      nextTick().then(() => {
+        selecting.value = false;
+      });
+    }
+    function onDblclickThumbnail(e) {
+      e.stopPropagation();
+      if (isElement(props.node)) {
+        zoomTo("selection", {
+          behavior: "smooth"
+        });
+      }
+    }
+    function onDblclickContent() {
+      editing.value = true;
+      editValue.value = props.node.name;
+      nextTick().then(() => {
+        inputDom.value?.focus();
+      });
+    }
+    function onMouseenter() {
+      if (isElement(props.node)) {
+        hoverElement.value = props.node;
+        hovering.value = true;
+      }
+    }
+    function onMouseleave() {
+      hoverElement.value = void 0;
+      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);
+      }
+    }
+    function onInputBlur() {
+      console.log("onInputBlur");
+      editing.value = false;
+      if (editValue.value) {
+        props.node.name = editValue.value;
+        editValue.value = void 0;
+      }
+    }
+    return (_ctx, _cache) => {
+      const _component_MceLayer = resolveComponent("MceLayer");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", {
+          ref_key: "dom",
+          ref: dom,
+          class: normalizeClass(["mce-layer", [
+            props.root && "mce-layer--root",
+            (__props.active || isActive.value) && "mce-layer--active",
+            isFrist.value && "mce-layer--first",
+            isLast.value && "mce-layer--last",
+            opened.value && "mce-layer--open",
+            isHoverElement.value && "mce-layer--hover"
+          ]]),
+          style: normalizeStyle({
+            "--indent-padding": `${props.indent * 16}px`
+          }),
+          onMousedown,
+          onMouseenter,
+          onMouseleave,
+          onContextmenu
+        }, [
+          createElementVNode("div", {
+            class: "mce-layer__expand",
+            onClick: onClickExpand
+          }, [
+            props.node.children.length ? (openBlock(), createBlock(_sfc_main$z, {
+              key: 0,
+              icon: "$arrowRight"
+            })) : createCommentVNode("", true)
+          ]),
+          createElementVNode("div", {
+            class: "mce-layer__content",
+            onClick: onClickContent,
+            onDblclick: onDblclickContent
+          }, [
+            createElementVNode("div", {
+              class: "mce-layer__thumbnail",
+              onDblclick: onDblclickThumbnail
+            }, [
+              createVNode(_sfc_main$z, { icon: thumbnailIcon.value }, null, 8, ["icon"])
+            ], 32),
+            createElementVNode("div", _hoisted_1$f, [
+              withDirectives(createElementVNode("input", {
+                ref_key: "inputDom",
+                ref: inputDom,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => editValue.value = $event),
+                type: "text",
+                class: "mce-layer__input",
+                autofocus: "",
+                onBlur: onInputBlur
+              }, null, 544), [
+                [vShow, editing.value],
+                [vModelText, editValue.value]
+              ]),
+              createElementVNode("div", {
+                style: normalizeStyle({ visibility: editing.value ? "hidden" : void 0 })
+              }, toDisplayString(editValue.value || props.node.name || props.node.id), 5)
+            ]),
+            createElementVNode("div", _hoisted_2$8, [
+              props.root ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass(["mce-btn", {
+                  "mce-btn--hide": !hovering.value && !unref(isLock)(props.node)
+                }]),
+                onClick: _cache[1] || (_cache[1] = ($event) => unref(setLock)(props.node, !unref(isLock)(props.node)))
+              }, [
+                createVNode(_sfc_main$z, {
+                  icon: unref(isLock)(props.node) ? "$lock" : "$unlock"
+                }, null, 8, ["icon"])
+              ], 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createVNode(_sfc_main$p, {
+                  class: normalizeClass({
+                    "mce-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(_sfc_main$z, {
+                      icon: unref(isLock)(props.node) ? "$lock" : "$unlock"
+                    }, null, 8, ["icon"])
+                  ]),
+                  _: 1
+                }, 8, ["class"]),
+                createVNode(_sfc_main$p, {
+                  class: normalizeClass({
+                    "mce-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(_sfc_main$z, {
+                      icon: unref(isVisible)(props.node) ? "$visible" : "$unvisible"
+                    }, null, 8, ["icon"])
+                  ]),
+                  _: 1
+                }, 8, ["class"])
+              ], 64))
+            ])
+          ], 32)
+        ], 38),
+        opened.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.node.children, (child, key) => {
+          return openBlock(), createBlock(_component_MceLayer, {
+            key,
+            node: child,
+            indent: __props.root ? props.indent : props.indent + 1,
+            active: __props.active || isActive.value
+          }, null, 8, ["node", "indent", "active"]);
+        }), 128)) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+const _hoisted_1$e = { class: "mce-layers" };
+const _hoisted_2$7 = { class: "mce-layers__wrapper" };
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  __name: "Layers",
+  setup(__props) {
+    const {
+      root,
+      selection,
+      state,
+      nodeIndexMap
+    } = useEditor();
+    const sortedSelection = computed(() => {
+      return selection.value.map((node) => {
+        return {
+          node,
+          index: nodeIndexMap.get(node.id) ?? 0
+        };
+      }).sort((a, b) => a.index - b.index).map((v) => v.node);
+    });
+    const {
+      selecting,
+      openedItems,
+      domItems
+    } = createLayer({
+      sortedSelection
+    });
+    watch(selection, (selection2) => {
+      if (state.value === "selecting" || selecting.value) {
+        return;
+      }
+      let last;
+      selection2.forEach((node) => {
+        node.findAncestor((ancestor) => {
+          const opened = openedItems.get(ancestor.id);
+          if (opened) {
+            opened.value = true;
+          }
+          return false;
+        });
+        last = node;
+      });
+      if (last) {
+        nextTick().then(() => {
+          domItems.get(last.id)?.value?.scrollIntoView({
+            block: "center"
+          });
+        });
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+        createElementVNode("div", _hoisted_2$7, [
+          createVNode(_sfc_main$o, {
+            root: true,
+            node: unref(root),
+            opened: true
+          }, null, 8, ["node"])
+        ])
+      ]);
     };
   }
 });
@@ -6950,7 +7615,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$v, {
+      return openBlock(), createBlock(_sfc_main$y, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
@@ -6976,7 +7641,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$c = ["width", "height"];
+const _hoisted_1$d = ["width", "height"];
 const _hoisted_2$6 = ["onDblclick", "onMousedown", "onMousemove"];
 const _hoisted_3$6 = { style: { "font-size": "12px", "text-wrap": "nowrap" } };
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
@@ -7235,7 +7900,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             class: "mce-ruler__canvas",
             width: props.size,
             height: props.size
-          }, null, 8, _hoisted_1$c)
+          }, null, 8, _hoisted_1$d)
         ], 16)), [
           [unref(vResizeObserver), unref(resize)]
         ]),
@@ -7273,7 +7938,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$b = { class: "mce-rulers" };
+const _hoisted_1$c = { class: "mce-rulers" };
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -7287,7 +7952,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     } = useEditor();
     const activeAabb = computed(() => getAabbInDrawboard(selection.value));
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
         createVNode(_sfc_main$l, {
           refline: "",
           zoom: unref(camera).zoom.x,
@@ -7310,7 +7975,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$a = {
+const _hoisted_1$b = {
   ref: "trackTplRef",
   class: "mce-scrollbar__track"
 };
@@ -7401,7 +8066,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           [props.vertical ? "top" : "left"]: `${props.offset}px`
         })
       }, [
-        createElementVNode("div", _hoisted_1$a, [
+        createElementVNode("div", _hoisted_1$b, [
           createElementVNode("div", {
             ref: "thumbTplRef",
             class: normalizeClass(["mce-scrollbar__thumb", {
@@ -7454,7 +8119,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$9 = { class: "mce-transformable__svg" };
+const _hoisted_1$a = { class: "mce-transformable__svg" };
 const _hoisted_2$5 = { "pointer-events": "all" };
 const _hoisted_3$5 = ["x", "y", "width", "height", "aria-label", "fill"];
 const _hoisted_4$3 = ["cx", "cy", "r", "aria-label", "fill"];
@@ -7830,13 +8495,12 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {
             value: unref(modelValue),
-            moveProps: {
-              onPointerdown: start,
-              style: { cursor: "move" }
+            props: {
+              onPointerdown: start
             },
             start
           }),
-          (openBlock(), createElementBlock("svg", _hoisted_1$9, [
+          (openBlock(), createElementBlock("svg", _hoisted_1$a, [
             createElementVNode("rect", {
               width: "100%",
               height: "100%",
@@ -7926,7 +8590,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const {
       state,
       resizeElement,
-      selection,
+      elementSelection,
       camera,
       obbToFit,
       getObbInDrawboard,
@@ -7934,7 +8598,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       registerCommand,
       unregisterCommand,
       isFrame,
-      isLocked,
+      isLock,
       config
     } = useEditor();
     const transformable = useTemplateRef("transformableRef");
@@ -7945,11 +8609,11 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       unregisterCommand("startTransform");
     });
     const parentObbs = computed(() => {
-      if (selection.value.length !== 1) {
+      if (elementSelection.value.length !== 1) {
         return [];
       }
       const obbs = [];
-      selection.value[0]?.findAncestor((ancestor) => {
+      elementSelection.value[0]?.findAncestor((ancestor) => {
         if (ancestor instanceof Element2D) {
           obbs.push(getObbInDrawboard(ancestor));
         }
@@ -7958,17 +8622,17 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return obbs;
     });
     const selectionObbs = computed(() => {
-      if (state.value !== "selecting" && selection.value.length === 1) {
+      if (state.value !== "selecting" && elementSelection.value.length === 1) {
         return [];
       }
-      return selection.value.map((el) => {
+      return elementSelection.value.map((el) => {
         return {
           name: el.name,
           box: getObbInDrawboard(el)
         };
       });
     });
-    const _selectionObb = computed(() => getObbInDrawboard(selection.value));
+    const _selectionObb = computed(() => getObbInDrawboard(elementSelection.value));
     const selectionObb = computed({
       get: () => _selectionObb.value,
       set: (val) => {
@@ -7982,7 +8646,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           rotate: Math.round((val.rotate ?? 0) - (oldBox.rotate ?? 0))
         };
         const handle = transformable.value?.activeHandle ?? "move";
-        selection.value.forEach((element) => {
+        elementSelection.value.forEach((element) => {
           const style = element.style;
           const box = {
             left: style.left + offsetBox.left,
@@ -8015,7 +8679,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       }
     });
     function tipFormat() {
-      const obb = selection.value.length === 1 ? selection.value[0].style : getObb(selection.value);
+      const obb = elementSelection.value.length === 1 ? elementSelection.value[0].style : getObb(elementSelection.value);
       return `${Number(obb.width.toFixed(2))} × ${Number(obb.height.toFixed(2))}`;
     }
     __expose({
@@ -8057,11 +8721,11 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           modelValue: selectionObb.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectionObb.value = $event),
           visibility: unref(state) !== "selecting" ? "auto" : "none",
-          moveable: unref(selection)[0] && !unref(isLocked)(unref(selection)[0]),
+          moveable: unref(elementSelection)[0] && !unref(isLock)(unref(elementSelection)[0]),
           "resize-strategy": props.resizeStrategy,
           "handle-shape": unref(config).handleShape,
           class: "mce-selection-obb",
-          "border-style": unref(selection).length > 1 ? "dashed" : "solid",
+          "border-style": unref(elementSelection).length > 1 ? "dashed" : "solid",
           "tip-format": tipFormat,
           onMove: _cache[1] || (_cache[1] = () => !unref(state) && (state.value = "transforming")),
           onEnd: _cache[2] || (_cache[2] = () => unref(state) === "transforming" && (state.value = void 0))
@@ -8093,7 +8757,67 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$9 = {
+  key: 0,
+  class: "mce-float-panel__title"
+};
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "FloatPanel",
+  props: /* @__PURE__ */ mergeModels({
+    title: {},
+    defaultTransform: {}
+  }, {
+    "modelValue": { type: Boolean },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const isActive = useModel(__props, "modelValue");
+    const transform = ref({
+      width: 300,
+      height: 600,
+      left: 60,
+      top: 60,
+      ...props.defaultTransform
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$h, {
+        modelValue: transform.value,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => transform.value = $event),
+        class: "mce-float-panel",
+        visibility: "none",
+        onWheel: _cache[3] || (_cache[3] = withModifiers(() => {
+        }, ["stop"]))
+      }, {
+        default: withCtx(({ props: slotProps }) => [
+          createElementVNode("div", mergeProps({ class: "mce-float-panel__card" }, slotProps), [
+            __props.title ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
+              createElementVNode("div", null, toDisplayString(__props.title), 1),
+              createVNode(_sfc_main$p, {
+                onClick: _cache[0] || (_cache[0] = ($event) => isActive.value = false)
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$z, { icon: "$close" })
+                ]),
+                _: 1
+              })
+            ])) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: "mce-float-panel__content",
+              onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {
+              }, ["stop"]))
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 32)
+          ], 16)
+        ]),
+        _: 3
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "Layout",
   props: {
     ...makeLayoutProps()
@@ -8122,7 +8846,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "LayoutItem",
   props: {
     position: {
@@ -8166,7 +8890,7 @@ const _hoisted_1$8 = {
   key: 0,
   class: "mce-main__scroller"
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "Main",
   props: {
     scrollable: Boolean
@@ -8198,7 +8922,7 @@ const _hoisted_4$2 = {
   key: 1,
   class: "progress-indicator__bar-indeterminate"
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "ProgressIndicator",
   props: /* @__PURE__ */ mergeModels({
     label: {},
@@ -8231,7 +8955,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const ProgressIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-c4234331"]]);
+const ProgressIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-c4234331"]]);
 const _hoisted_1$6 = { class: "mce-statusbar" };
 const _hoisted_2$3 = { class: "mce-statusbar__main" };
 const _hoisted_3$3 = { class: "mce-statusbar__item" };
@@ -8253,7 +8977,7 @@ const _hoisted_18 = { class: "mce-statusbar__item" };
 const _hoisted_19 = { class: "mce-statusbar__kbd" };
 const _hoisted_20 = { class: "mce-statusbar__item" };
 const _hoisted_21 = { class: "mce-statusbar__progress" };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "Statusbar",
   setup(__props) {
     const {
@@ -8278,7 +9002,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             ])
           ], 64)) : unref(state) === "transforming" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             createElementVNode("div", _hoisted_8, [
-              createVNode(_sfc_main$w, { icon: "$mouseRightClick" })
+              createVNode(_sfc_main$z, { icon: "$mouseRightClick" })
             ]),
             _cache[2] || (_cache[2] = createElementVNode("span", null, " / ", -1)),
             createElementVNode("div", _hoisted_9, [
@@ -8292,7 +9016,7 @@ const _sfc_main$a = /* @__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(_sfc_main$w, { icon: "$mouseLeftClick" }),
+              createVNode(_sfc_main$z, { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectObject")), 1)
             ]),
             _cache[4] || (_cache[4] = createElementVNode("span", null, " + ", -1)),
@@ -8302,7 +9026,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             ]),
             _cache[5] || (_cache[5] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
             createElementVNode("div", _hoisted_17, [
-              createVNode(_sfc_main$w, { icon: "$mouseLeftClick" }),
+              createVNode(_sfc_main$z, { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectArea")), 1)
             ]),
             _cache[6] || (_cache[6] = createElementVNode("span", null, " + ", -1)),
@@ -8312,7 +9036,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             ]),
             _cache[7] || (_cache[7] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
             createElementVNode("div", _hoisted_20, [
-              createVNode(_sfc_main$w, { icon: "$mouseLeftClick" }),
+              createVNode(_sfc_main$z, { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("dragSelected")), 1)
             ])
           ], 64))
@@ -8329,12 +9053,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-36c89bd7"]]);
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-36c89bd7"]]);
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "TextEditor",
   setup(__props, { expose: __expose }) {
     const {
-      selection,
+      elementSelection,
       state,
       textSelection,
       textToFit,
@@ -8352,7 +9076,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       };
     });
     const textEditorStyle = computed(() => {
-      const element = selection.value[0];
+      const element = elementSelection.value[0];
       const obb = getObb(element);
       const textBox = element?.text.base?.boundingBox;
       if (textBox) {
@@ -8368,14 +9092,14 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       textSelection.value = e.detail;
     }
     function onUpdate() {
-      const element = selection.value[0];
+      const element = elementSelection.value[0];
       const shape = element.shape;
       if (!shape.enabled || !shape._path2DSet.paths.length) {
         textToFit(element);
       }
     }
     async function startTyping(e) {
-      const element = selection.value[0];
+      const element = elementSelection.value[0];
       if (!element) {
         return false;
       }
@@ -8420,13 +9144,13 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           }, null, 544)
         ], 4)
       ], 4)), [
-        [vShow, unref(selection)[0] && unref(state) === "typing"]
+        [vShow, unref(elementSelection)[0] && unref(state) === "typing"]
       ]);
     };
   }
 });
 const _hoisted_1$5 = { class: "mce-payhead" };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "Playhead",
   setup(__props) {
     return (_ctx, _cache) => {
@@ -8449,7 +9173,7 @@ const _hoisted_3$2 = {
   key: 1,
   class: "mce-segment__edge mce-segment__edge--end"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "Segment",
   props: {
     node: {},
@@ -8488,7 +9212,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$3 = { class: "mce-track" };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "Track",
   setup(__props) {
     return (_ctx, _cache) => {
@@ -8498,7 +9222,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "Trackhead",
   props: {
     node: {}
@@ -8522,10 +9246,11 @@ const _hoisted_5 = { class: "mce-timeline__right-wrapper" };
 const _hoisted_6 = { class: "mce-timeline__ruler" };
 const _hoisted_7 = { class: "mce-timeline__track" };
 const wheelSensitivity = 0.02;
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "Timeline",
   setup(__props) {
     const {
+      isElement,
       root,
       msPerPx,
       currentTime,
@@ -8539,7 +9264,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const position = ref([0, 0]);
     const elements = computed(() => {
       return root.value.findAll((node) => {
-        if (node instanceof Element2D) {
+        if (isElement(node)) {
           if (node.children.some((child) => child instanceof Animation)) {
             return true;
           }
@@ -8630,7 +9355,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             class: "mce-timeline__play",
             onClick: toggle
           }, [
-            createVNode(_sfc_main$w, {
+            createVNode(_sfc_main$z, {
               icon: paused.value ? "$play" : "$pause"
             }, null, 8, ["icon"])
           ])
@@ -8644,7 +9369,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 })
               }, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(elements.value, (node, index) => {
-                  return openBlock(), createBlock(_sfc_main$5, {
+                  return openBlock(), createBlock(_sfc_main$4, {
                     key: index,
                     node
                   }, null, 8, ["node"]);
@@ -8677,9 +9402,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   })
                 }, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(elements.value, (node, index) => {
-                    return openBlock(), createBlock(_sfc_main$6, { key: index }, {
+                    return openBlock(), createBlock(_sfc_main$5, { key: index }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$7, {
+                        createVNode(_sfc_main$6, {
                           node,
                           "ms-per-px": unref(msPerPx),
                           active: unref(selection).some((v) => v.equal(node)),
@@ -8691,7 +9416,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   }), 128))
                 ], 4)
               ]),
-              createVNode(_sfc_main$8, {
+              createVNode(_sfc_main$7, {
                 style: normalizeStyle({
                   transform: `translate(${position.value[0] + Math.ceil(unref(currentTime) / unref(msPerPx))}px, 0px)`
                 })
@@ -8703,12 +9428,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$3 = {};
+const _sfc_main$2 = {};
 const _hoisted_1$1 = { class: "mce-toolbelt" };
 function _sfc_render(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1$1);
 }
-const Toolbelt = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render]]);
+const Toolbelt = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
 const _hoisted_1 = ["data-pixel-ratio"];
 const _hoisted_2 = {
   ref: "canvasTpl",
@@ -8718,7 +9443,7 @@ const _hoisted_3 = {
   ref: "overlayContainerTpl",
   class: "mce-editor__overlay-container"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "EditorLayout",
   props: {
     ...makeMceStrategyProps({
@@ -8751,11 +9476,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       isFrame,
       selectArea,
       exec,
-      isLocked,
-      selection,
+      isLock,
+      elementSelection,
       getAabbInDrawboard,
       drawboardAabb,
-      drawboardPointer
+      drawboardPointer,
+      screenCenterOffset,
+      t
     } = editor;
     const overlayContainer = useTemplateRef("overlayContainerTpl");
     const canvas = useTemplateRef("canvasTpl");
@@ -8790,12 +9517,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       let hovered;
       if (isPointInsideAabb(
         { x: event.clientX, y: event.clientY },
-        getAabbInDrawboard(selection.value)
+        getAabbInDrawboard(elementSelection.value)
       )) {
         cursor = "move";
       } else {
         const element = event.target;
-        const oldElement = selection.value[0];
+        const oldElement = elementSelection.value[0];
         const result = props.hoverStrategy({
           element,
           oldElement,
@@ -8816,7 +9543,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       if (event.srcElement !== drawboardDom.value && event.srcElement.dataset?.pointerdown_to_drawboard === void 0 || camera.value.spaceKey || ![0, 2].includes(event.button)) {
         return;
       }
-      const oldElement = selection.value[0];
+      const oldElement = elementSelection.value[0];
       const element = event.target;
       const start = { x: event.clientX, y: event.clientY };
       let current = { ...start };
@@ -8827,7 +9554,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       const inSelected = isPointInsideAabb({
         x: start.x + -drawboardAabb.value.left,
         y: start.y + -drawboardAabb.value.top
-      }, getAabbInDrawboard(selection.value));
+      }, getAabbInDrawboard(elementSelection.value));
       if (event.button === 2) {
         if (!inSelected) {
           const result = props.activeStrategy({
@@ -8841,7 +9568,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           } else {
             selected = result ? [result] : [];
           }
-          selection.value = selected;
+          elementSelection.value = selected;
         }
         return;
       }
@@ -8857,7 +9584,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         } else {
           selected = result ? [result] : [];
         }
-        selection.value = selected;
+        elementSelection.value = selected;
       }
       function onSelectArea() {
         if (state.value !== "selecting") {
@@ -8886,10 +9613,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           _element = result;
         }
         if (_element && (event?.ctrlKey || event?.shiftKey || event?.metaKey)) {
-          if (selection.value.findIndex((v) => v.equal(_element)) > -1) {
-            selected = selection.value.filter((v) => !v.equal(_element));
+          if (elementSelection.value.findIndex((v) => v.equal(_element)) > -1) {
+            selected = elementSelection.value.filter((v) => !v.equal(_element));
           } else {
-            selected = [...selection.value, _element];
+            selected = [...elementSelection.value, _element];
           }
         } else {
           selected = _element ? [_element] : [];
@@ -8934,9 +9661,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           if (element) {
             onActivate();
           }
-          selection.value = selected;
+          elementSelection.value = selected;
           if (ctxState) {
-            if (selected[0] && !isLocked(selected[0])) {
+            if (selected[0] && !isLock(selected[0])) {
               switch (ctxState) {
                 case "typing": {
                   await exec("startTyping", _event);
@@ -8982,31 +9709,31 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$e, { class: "mce-editor" }, {
+      return openBlock(), createBlock(_sfc_main$d, { class: "mce-editor" }, {
         default: withCtx(() => [
           createVNode(_sfc_main$f),
-          createVNode(_sfc_main$c, null, {
+          createVNode(_sfc_main$b, null, {
             default: withCtx(() => [
               createElementVNode("div", {
                 ref_key: "drawboardDom",
                 ref: drawboardDom,
                 class: "mce-editor__drawboard",
                 "data-pixel-ratio": unref(renderEngine).pixelRatio,
-                onDblclick: _cache[0] || (_cache[0] = ($event) => emit("dblclick:drawboard", $event)),
+                onDblclick: _cache[1] || (_cache[1] = ($event) => emit("dblclick:drawboard", $event)),
                 onScroll,
-                onWheel: _cache[1] || (_cache[1] = withModifiers(() => {
+                onWheel: _cache[2] || (_cache[2] = withModifiers(() => {
                 }, ["prevent"]))
               }, [
                 createElementVNode("canvas", _hoisted_2, null, 512),
-                createVNode(_sfc_main$9, { ref: "textEditorTpl" }, null, 512),
-                createVNode(_sfc_main$x),
-                createVNode(_sfc_main$n),
-                createVNode(_sfc_main$p),
+                createVNode(_sfc_main$8, { ref: "textEditorTpl" }, null, 512),
+                createVNode(_sfc_main$A),
+                createVNode(_sfc_main$q),
                 createVNode(_sfc_main$s),
+                createVNode(_sfc_main$v),
                 createVNode(_sfc_main$g, {
                   ref: "selectorTpl",
                   "selected-area": selectedArea.value,
-                  "resize-strategy": unref(selection)[0] ? props.resizeStrategy(unref(selection)[0]) : void 0
+                  "resize-strategy": unref(elementSelection)[0] ? props.resizeStrategy(unref(elementSelection)[0]) : void 0
                 }, {
                   transformable: withCtx(({ box }) => [
                     renderSlot(_ctx.$slots, "transformer", { box })
@@ -9017,7 +9744,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   _: 3
                 }, 8, ["selected-area", "resize-strategy"]),
                 unref(config).scrollbar ? (openBlock(), createBlock(_sfc_main$i, { key: 0 })) : createCommentVNode("", true),
-                _ctx.$slots.floatbar ? (openBlock(), createBlock(_sfc_main$r, {
+                _ctx.$slots.floatbar ? (openBlock(), createBlock(_sfc_main$u, {
                   key: 1,
                   target: unref(state) === "typing" ? textEditor.value?.textEditor : selector.value?.transformable?.$el
                 }, {
@@ -9026,9 +9753,26 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 3
                 }, 8, ["target"])) : createCommentVNode("", true),
-                createVNode(_sfc_main$t),
-                createVNode(_sfc_main$o),
+                createVNode(_sfc_main$w),
+                createVNode(_sfc_main$r),
                 unref(config).ruler ? (openBlock(), createBlock(_sfc_main$k, { key: 2 })) : createCommentVNode("", true),
+                unref(config).layers ? (openBlock(), createBlock(_sfc_main$e, {
+                  key: 3,
+                  modelValue: unref(config).layers,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(config).layers = $event),
+                  title: unref(t)("layers"),
+                  "default-transform": {
+                    width: 240,
+                    height: unref(drawboardAabb).height * 0.7,
+                    top: unref(screenCenterOffset).top + 24,
+                    left: unref(screenCenterOffset).left + 24
+                  }
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_sfc_main$n)
+                  ]),
+                  _: 1
+                }, 8, ["modelValue", "title", "default-transform"])) : createCommentVNode("", true),
                 createVNode(Toolbelt),
                 renderSlot(_ctx.$slots, "drawboard")
               ], 40, _hoisted_1)
@@ -9036,9 +9780,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             _: 3
           }),
           renderSlot(_ctx.$slots, "default"),
-          createVNode(_sfc_main$d, {
+          createVNode(_sfc_main$c, {
             modelValue: unref(config).statusbar,
-            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(config).statusbar = $event),
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => unref(config).statusbar = $event),
             position: "bottom",
             size: 24
           }, {
@@ -9047,14 +9791,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["modelValue"]),
-          createVNode(_sfc_main$d, {
+          createVNode(_sfc_main$c, {
             modelValue: unref(config).timeline,
-            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => unref(config).timeline = $event),
+            "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => unref(config).timeline = $event),
             position: "bottom",
             size: 160
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$4)
+              createVNode(_sfc_main$3)
             ]),
             _: 1
           }, 8, ["modelValue"]),
@@ -9065,220 +9809,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "Layers",
-  setup(__props) {
-    const {
-      root,
-      selection,
-      exec,
-      zoomTo,
-      isFrame
-    } = useEditor();
-    const rootRef = ref();
-    const hover = ref();
-    const current = ref();
-    watch(hover, (hover2) => {
-      const rootBox = rootRef.value?.getBoundingClientRect();
-      const hoverBox = hover2?.dom.getBoundingClientRect();
-      if (rootBox && hoverBox && hover2.node instanceof Element2D) {
-        current.value = {
-          x: -rootRef.value.scrollLeft,
-          y: rootRef.value.scrollTop + hoverBox.y - rootBox.y,
-          node: hover2.node
-        };
-      } else {
-        current.value = void 0;
-      }
-    });
-    function onMouseleave() {
-      hover.value = void 0;
-    }
-    const Layer = defineComponent({
-      name: "MceLayer",
-      inheritAttrs: false,
-      props: {
-        node: {
-          type: Object,
-          required: true
-        },
-        indent: {
-          type: Number,
-          default: 0
-        }
-      },
-      setup(props, { attrs }) {
-        const opened = ref(false);
-        const isActive = computed(() => selection.value.some((v) => v.equal(props.node)));
-        const children = computed(() => props.node?.children ?? []);
-        const itemRef = ref();
-        const editing = ref(false);
-        const editValue = ref();
-        function onClickExpand() {
-          opened.value = !opened.value;
-        }
-        function onClickContent(e) {
-          if (props.node instanceof Element2D) {
-            if (e.shiftKey) {
-              selection.value = [
-                ...selection.value.filter((v) => !v.equal(props.node)),
-                props.node
-              ];
-            } else {
-              selection.value = [props.node];
-            }
-          }
-        }
-        function onDblclickThumbnail(e) {
-          e.stopPropagation();
-          if (props.node instanceof Element2D) {
-            zoomTo("selection", {
-              behavior: "smooth"
-            });
-          }
-        }
-        function onDblclickContent() {
-          editing.value = true;
-        }
-        function onMouseenter() {
-          hover.value = {
-            node: props.node,
-            dom: itemRef.value
-          };
-        }
-        function onContextmenu(e) {
-          if (props.node instanceof Element2D) {
-            if (!selection.value.some((v) => v.equal(props.node))) {
-              selection.value = [props.node];
-            }
-            exec("openContextMenu", e);
-          }
-        }
-        return () => {
-          function thumbnail() {
-            const node = props.node;
-            if (isFrame(node)) {
-              return createVNode(_sfc_main$w, { icon: "$frame" });
-            }
-            if (node.children.length > 0) {
-              return createVNode(_sfc_main$w, { icon: "$group" });
-            }
-            if (node instanceof Element2D) {
-              if (node.foreground.isValid() && node.foreground.image) {
-                return createVNode(_sfc_main$w, { icon: "$image" });
-              }
-              if (node.text.isValid()) {
-                return createVNode(_sfc_main$w, { icon: "$text" });
-              }
-            }
-            return createVNode(_sfc_main$w, { icon: "$shape" });
-          }
-          return createElementVNode(
-            "div",
-            mergeProps(attrs, {
-              class: [
-                "mce-layer",
-                isActive.value && "mce-layer--active",
-                opened.value && "mce-layer--opened"
-              ]
-            }),
-            [
-              createElementVNode("div", {
-                class: "mce-layer-item",
-                style: {
-                  "--indent-padding": `${props.indent * 16}px`
-                },
-                ref: itemRef,
-                onMouseenter,
-                onContextmenu
-              }, [
-                createElementVNode("div", {
-                  class: "mce-layer-item__expand",
-                  onClick: onClickExpand
-                }, [
-                  children.value.length ? createVNode(_sfc_main$w, { icon: "$arrowRight" }) : void 0
-                ]),
-                createElementVNode("div", {
-                  class: "mce-layer-item__content",
-                  onClick: onClickContent,
-                  onDblclick: onDblclickContent
-                }, [
-                  createElementVNode("div", {
-                    class: "mce-layer-item__thumbnail",
-                    onDblclick: onDblclickThumbnail
-                  }, [
-                    thumbnail()
-                  ]),
-                  createElementVNode("div", {
-                    class: "mce-layer-item__name"
-                  }, [
-                    editing.value ? createElementVNode("input", {
-                      class: "mce-layer-item__name-input",
-                      autofocus: true,
-                      value: props.node.name,
-                      onBlur: () => {
-                        editing.value = false;
-                        if (editValue.value) {
-                          props.node.name = editValue.value;
-                          editValue.value = void 0;
-                        }
-                      },
-                      onInput: (e) => editValue.value = e.target.value
-                    }) : props.node.name || props.node.id
-                  ])
-                ])
-              ]),
-              ...opened.value ? children.value.map((child) => createVNode(Layer, {
-                node: child,
-                indent: props.indent + 1
-              })) : []
-            ]
-          );
-        };
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "rootRef",
-        ref: rootRef,
-        class: "mce-layers",
-        onMouseleave
-      }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(root).children, (child, index) => {
-          return openBlock(), createBlock(unref(Layer), {
-            key: index,
-            node: child
-          }, null, 8, ["node"]);
-        }), 128)),
-        current.value !== void 0 ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: "mce-layers__action",
-          style: normalizeStyle({
-            right: `${current.value.x}px`,
-            top: `${current.value.y}px`
-          })
-        }, [
-          createElementVNode("div", {
-            class: "mce-btn",
-            onClick: _cache[0] || (_cache[0] = ($event) => current.value.node.meta.lock = !current.value.node.meta.lock)
-          }, [
-            createVNode(_sfc_main$w, {
-              icon: current.value.node.meta.lock ? "$lock" : "$unlock"
-            }, null, 8, ["icon"])
-          ]),
-          createElementVNode("div", {
-            class: "mce-btn",
-            onClick: _cache[1] || (_cache[1] = ($event) => current.value.node.style.visibility = current.value.node.style.visibility === "visible" ? "hidden" : "visible")
-          }, [
-            createVNode(_sfc_main$w, {
-              icon: current.value.node.style.visibility === "visible" ? "$visible" : "$unvisible"
-            }, null, 8, ["icon"])
-          ])
-        ], 4)) : createCommentVNode("", true)
-      ], 544);
-    };
-  }
-});
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Dialog",
   props: /* @__PURE__ */ mergeModels({
@@ -9306,7 +9836,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$v, {
+      return openBlock(), createBlock(_sfc_main$y, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
@@ -9333,18 +9863,20 @@ export {
   _sfc_main as Dialog,
   Doc,
   Editor,
-  _sfc_main$1 as EditorLayers,
-  _sfc_main$2 as EditorLayout,
-  _sfc_main$d as EditorLayoutItem,
+  _sfc_main$n as EditorLayers,
+  _sfc_main$1 as EditorLayout,
+  _sfc_main$c as EditorLayoutItem,
   Toolbelt as EditorToolbelt,
   IconsSymbol,
   MceComponentIcon,
+  MceLayerItemKey,
+  MceLayerKey,
   MceLayoutItemKey,
   MceLayoutKey,
   MceMenuSymbol,
   MceOverlaySymbol,
   MceSvgIcon,
-  _sfc_main$u as Menu,
+  _sfc_main$x as Menu,
   Model,
   _sfc_main$l as Ruler,
   SUPPORTS_CLIPBOARD,
@@ -9357,6 +9889,7 @@ export {
   convertToUnit,
   createIcons,
   createImageElement,
+  createLayer,
   createLayout,
   createTextElement,
   defaultActiveStrategy,
@@ -9394,6 +9927,7 @@ export {
   uint32,
   useEditor,
   useIcon,
+  useLayerItem,
   useLayout,
   useLayoutItem,
   useOverlay,