mce 0.11.3 → 0.12.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch, markRaw, reactive, warn, shallowRef, onBeforeUnmount, onMounted, inject, provide, defineComponent, createVNode, mergeProps, createElementVNode, toValue, getCurrentInstance, onScopeDispose, createElementBlock, openBlock, Fragment, renderList, unref, normalizeStyle, normalizeClass, readonly, toRef, useId, onDeactivated, onActivated, useAttrs, createBlock, resolveDynamicComponent, useTemplateRef, renderSlot, Teleport, createCommentVNode, mergeModels, useModel, resolveComponent, withCtx, createTextVNode, toDisplayString, createSlots, normalizeProps, guardReactiveProps, withDirectives, vShow, vModelText, nextTick, withModifiers, onBeforeMount, isRef } from "vue";
+import { ref, computed, watch, markRaw, reactive, warn, shallowRef, onBeforeUnmount, onMounted, inject, provide, defineComponent, createVNode, mergeProps, createElementVNode, toValue, getCurrentInstance, onScopeDispose, createElementBlock, openBlock, Fragment, renderList, unref, normalizeStyle, normalizeClass, readonly, toRef, useId, onDeactivated, onActivated, useAttrs, createBlock, resolveDynamicComponent, useTemplateRef, renderSlot, Teleport, createCommentVNode, mergeModels, useModel, resolveComponent, withCtx, createTextVNode, toDisplayString, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, withDirectives, vShow, vModelText, nextTick, withModifiers, isRef } from "vue";
 import { useFileDialog, useEventListener, isClient, useResizeObserver as useResizeObserver$1, useLocalStorage, onClickOutside, useMouse, useDebounceFn } from "@vueuse/core";
 import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, IN_BROWSER, clamp, assets, TimelineNode, Transform2D, DEG_TO_RAD, render, Animation } from "modern-canvas";
 import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeElement, normalizeTextContent } from "modern-idoc";
@@ -124,6 +124,26 @@ const _0_config_base = defineMixin((editor, options) => {
   registerConfig("typographyStrategy", "autoHeight");
   registerConfig("handleShape", "rect");
   registerConfig("localDb", false);
+  const screenCenterOffset = { left: 0, top: 0, bottom: 0, right: 0 };
+  registerConfig("screenCenterOffset", { ...screenCenterOffset });
+  const getScreenCenterOffset = () => {
+    const offset2 = {
+      ...screenCenterOffset,
+      ...config.value.screenCenterOffset
+    };
+    if (config.value.scrollbar) {
+      offset2.right += 8;
+      offset2.bottom += 8;
+    }
+    if (config.value.ruler) {
+      offset2.left += 16;
+      offset2.top += 16;
+    }
+    return offset2;
+  };
+  Object.assign(editor, {
+    getScreenCenterOffset
+  });
   return () => {
     const {
       camera,
@@ -490,7 +510,8 @@ function initYElement(yMap, element = {}, parentId, regenId = false) {
   yMap.set("name", normalized.name ?? id);
   yMap.set("childrenIds", yChildrenIds);
   yMap.set("meta", new Y.Map(Object.entries(normalized.meta ?? {})));
-  if (normalized?.meta?.inCanvasIs === "Element2D") {
+  const inCanvasIs = normalized?.meta?.inCanvasIs;
+  if (inCanvasIs === "Element2D" || inCanvasIs === "Lottie2D") {
     yMap.set("style", new Y.Map(Object.entries(normalized.style ?? {})));
     yMap.set("background", new Y.Map(Object.entries(normalized.background ?? {})));
     yMap.set("shape", new Y.Map(Object.entries(normalized.shape ?? {})));
@@ -1026,7 +1047,6 @@ const en = {
   "view:timeline": "Timeline",
   "view:statusbar": "Statusbar",
   "view:frameOutline": "Frame outlines",
-  "zoom": "Zoom",
   "zoomIn": "Zoom in",
   "zoomOut": "Zoom out",
   "zoomTo100": "Zoom to 100%",
@@ -1256,10 +1276,10 @@ function getImageSizeFromUrl(url, opts = {}) {
   });
 }
 const imageMimeTypeExtMap = {
+  // 'image/svg+xml': ['.svg'],
   "image/jpeg": [".jpg", ".jpeg"],
   "image/png": [".png"],
   "image/gif": [".gif"],
-  "image/svg+xml": [".svg"],
   "image/tiff": [".tif", ".tiff"],
   "image/bmp": [".bmp"],
   "image/x-ms-bmp": [".bmp"],
@@ -1711,8 +1731,8 @@ const _2_box = defineMixin((editor) => {
       obb.top *= zoom.y;
       obb.width *= zoom.x;
       obb.height *= zoom.y;
-      obb.left += position.x;
-      obb.top += position.y;
+      obb.left -= position.x;
+      obb.top -= position.y;
     } else if (inTarget === "frame") {
       const first = Array.isArray(node) ? node[0] : node;
       if (first instanceof Element2D) {
@@ -1814,12 +1834,12 @@ const _2_box = defineMixin((editor) => {
     _aabb.top *= zoom.y;
     _aabb.width *= zoom.x;
     _aabb.height *= zoom.y;
-    _aabb.left += position.x;
-    _aabb.top += position.y;
+    _aabb.left -= position.x;
+    _aabb.top -= position.y;
     return _aabb;
   }
   const rootAabb = computed(() => getAabb(root.value.children));
-  const currentAabb = computed(() => getAabb(selection.value));
+  const selectionAabb = computed(() => getAabb(selection.value));
   Object.assign(editor, {
     obbToFit,
     getObb,
@@ -1828,7 +1848,7 @@ const _2_box = defineMixin((editor) => {
     getAabbInDrawboard,
     aabbToDrawboardAabb,
     rootAabb,
-    currentAabb
+    selectionAabb
   });
 });
 const _2_export = defineMixin((editor) => {
@@ -1873,69 +1893,6 @@ const _2_export = defineMixin((editor) => {
     to
   });
 });
-const _2_export_json = defineMixin((editor) => {
-  const {
-    registerExporter,
-    getAabb,
-    selection,
-    root,
-    getTimeRange
-  } = editor;
-  registerExporter({
-    name: "json",
-    copyAs: (exported) => JSON.stringify(exported),
-    saveAs: (exported) => new Blob([JSON.stringify(exported)], { type: "application/json" }),
-    handle: (options) => {
-      const {
-        selected = false,
-        scale = 1
-      } = options;
-      let id = idGenerator();
-      let elements = [];
-      if (Array.isArray(selected)) {
-        elements = selected;
-      } else {
-        if (selected === true) {
-          elements = selection.value;
-        }
-        if (elements.length === 0 && root.value) {
-          if (root.value.meta.id) {
-            id = root.value.meta.id;
-          }
-          elements = root.value.children;
-        }
-      }
-      const box = getAabb(elements, "parent");
-      console.log(box);
-      return {
-        id,
-        style: {
-          width: box.width * scale,
-          height: box.height * scale,
-          transformOrigin: "left top",
-          transform: `scale(${scale})`
-        },
-        children: elements.map((el) => {
-          const json = el.toJSON();
-          if (box.left) {
-            json.style.left = (json.style.left ?? 0) - box.left;
-          }
-          if (box.top) {
-            json.style.top = (json.style.top ?? 0) - box.top;
-          }
-          json.meta ??= {};
-          json.meta.inPptIs = "Slide";
-          return json;
-        }),
-        meta: {
-          inPptIs: "Pptx",
-          inCanvasIs: "Element2D",
-          ...getTimeRange(elements)
-        }
-      };
-    }
-  });
-});
 const _2_load = defineMixin((editor) => {
   const {
     state
@@ -2012,36 +1969,6 @@ const _2_load = defineMixin((editor) => {
     openFileDialog
   });
 });
-const _2_loader_json = defineMixin((editor) => {
-  const {
-    registerLoader
-  } = editor;
-  const RE = /\.json$/i;
-  registerLoader({
-    name: "json",
-    accept: ".json",
-    test: (source) => {
-      if (source instanceof Blob) {
-        if (source.type.startsWith("application/json")) {
-          return true;
-        }
-      }
-      if (source instanceof File) {
-        if (RE.test(source.name)) {
-          return true;
-        }
-      }
-      return false;
-    },
-    load: async (source) => {
-      const json = JSON.parse(await source.text());
-      if ("version" in json && "elements" in json) {
-        console.log(json);
-      }
-      return json;
-    }
-  });
-});
 const _3_view = defineMixin((editor) => {
   const {
     renderEngine,
@@ -2609,6 +2536,88 @@ const _4_4_doc = defineMixin((editor, options) => {
     }
   };
 });
+const _scroll$1 = defineMixin((editor) => {
+  const {
+    camera,
+    getAabb,
+    selectionAabb,
+    viewAabb,
+    drawboardAabb,
+    getScreenCenterOffset
+  } = editor;
+  const scrollTo = async (target, options = {}) => {
+    const {
+      behavior,
+      duration = 500
+    } = options;
+    const _camera = camera.value;
+    const screenCenterOffset = getScreenCenterOffset();
+    const offset2 = { x: 0, y: 0 };
+    let position = { x: 0, y: 0 };
+    if (typeof target === "object" && "x" in target && "y" in target) {
+      position.x = target.x;
+      position.y = target.y;
+    } else {
+      let aabb;
+      if (Array.isArray(target)) {
+        aabb = getAabb(target);
+      } else {
+        switch (target) {
+          case "selection":
+            aabb = selectionAabb.value;
+            break;
+          case "root":
+          default:
+            aabb = viewAabb.value;
+            break;
+        }
+      }
+      position = { x: aabb.left + aabb.width / 2, y: aabb.top + aabb.height / 2 };
+      offset2.x -= screenCenterOffset.left;
+      offset2.y -= screenCenterOffset.top;
+      offset2.x -= (drawboardAabb.value.width - screenCenterOffset.left - screenCenterOffset.right) / 2;
+      offset2.y -= (drawboardAabb.value.height - screenCenterOffset.top - screenCenterOffset.bottom) / 2;
+    }
+    position.x *= _camera.zoom.x;
+    position.x += offset2.x;
+    position.y *= _camera.zoom.y;
+    position.y += offset2.y;
+    const oldPosition = { x: _camera.position.x, y: _camera.position.y };
+    switch (behavior) {
+      case "smooth":
+        await new Promise((resolve) => {
+          const positionDistance = {
+            x: position.x - oldPosition.x,
+            y: position.y - oldPosition.y
+          };
+          const startTime = performance.now();
+          function step(now) {
+            const elapsed = now - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            const ease = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress;
+            _camera.position.set(
+              oldPosition.x + positionDistance.x * ease,
+              oldPosition.y + positionDistance.y * ease
+            );
+            if (elapsed < duration) {
+              requestAnimationFrame(step);
+            } else {
+              resolve();
+            }
+          }
+          requestAnimationFrame(step);
+        });
+        break;
+      case "instant":
+      default:
+        _camera.position.set(position.x, position.y);
+        break;
+    }
+  };
+  Object.assign(editor, {
+    scrollTo
+  });
+});
 const _snapshot = defineMixin((editor) => {
   const {
     renderEngine,
@@ -2720,6 +2729,114 @@ const _snapshot = defineMixin((editor) => {
     });
   };
 });
+const _zoom$1 = defineMixin((editor) => {
+  const {
+    camera,
+    drawboardAabb,
+    selectionAabb,
+    viewAabb,
+    getAabb,
+    getScreenCenterOffset
+  } = editor;
+  const zoomTo = async (target, options = {}) => {
+    const {
+      mode = "contain",
+      duration = 500,
+      behavior
+    } = options;
+    let aabb;
+    if (Array.isArray(target)) {
+      aabb = getAabb(target);
+    } else {
+      switch (target) {
+        case "selection":
+          aabb = selectionAabb.value;
+          break;
+        case "root":
+        default:
+          aabb = viewAabb.value;
+          break;
+      }
+    }
+    const offset2 = getScreenCenterOffset();
+    const { width, height } = drawboardAabb.value;
+    const tw = width - (offset2.left + offset2.right);
+    const th = height - (offset2.top + offset2.bottom);
+    const sx = aabb.left;
+    const sy = aabb.top;
+    const sw = aabb.width;
+    const sh = aabb.height;
+    if (!sw || !sh)
+      return;
+    const zw = tw / sw;
+    const zh = th / sh;
+    const _camera = camera.value;
+    let targetZoom;
+    if (typeof target === "number") {
+      targetZoom = target;
+    } else if (mode === "cover") {
+      targetZoom = Math.max(zw, zh);
+    } else {
+      targetZoom = Math.min(zw, zh);
+    }
+    const oldZoom = Math.min(_camera.zoom.x, _camera.zoom.y);
+    const newZoom = Math.min(
+      clamp(targetZoom, _camera.minZoom.x, _camera.maxZoom.x),
+      clamp(targetZoom, _camera.minZoom.y, _camera.maxZoom.y)
+    );
+    let x = offset2.left;
+    let y = offset2.top;
+    if (zw < zh) {
+      y += (th - sh * newZoom) / 2;
+    } else {
+      x += (tw - sw * newZoom) / 2;
+    }
+    const oldPosition = {
+      x: _camera.position.x,
+      y: _camera.position.y
+    };
+    const newPosition = {
+      x: sx * newZoom - x,
+      y: sy * newZoom - y
+    };
+    switch (behavior) {
+      case "smooth":
+        await new Promise((resolve) => {
+          const zoomDistance = newZoom - oldZoom;
+          const positionDistance = {
+            x: newPosition.x - oldPosition.x,
+            y: newPosition.y - oldPosition.y
+          };
+          const startTime = performance.now();
+          function step(now) {
+            const elapsed = now - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            const ease = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress;
+            _camera.zoom.set(oldZoom + zoomDistance * ease);
+            _camera.position.set(
+              oldPosition.x + positionDistance.x * ease,
+              oldPosition.y + positionDistance.y * ease
+            );
+            if (elapsed < duration) {
+              requestAnimationFrame(step);
+            } else {
+              resolve();
+            }
+          }
+          requestAnimationFrame(step);
+        });
+        break;
+      case "instant":
+      default:
+        _camera.zoom.set(newZoom);
+        _camera.position.set(newPosition.x, newPosition.y);
+        break;
+    }
+  };
+  Object.assign(editor, {
+    zoomTo
+  });
+});
 const mixins = [
   _0_command,
   _0_config,
@@ -2734,16 +2851,16 @@ const mixins = [
   _1_upload,
   _2_box,
   _2_export,
-  _2_export_json,
   _2_load,
-  _2_loader_json,
   _3_view,
   _4_0_text,
   _4_1_lock,
   _4_2_element,
   _4_3_frame,
   _4_4_doc,
-  _snapshot
+  _scroll$1,
+  _snapshot,
+  _zoom$1
 ];
 function defaultCompare(a, b) {
   if (a < b) {
@@ -4386,7 +4503,7 @@ const _gif = definePlugin((editor, options) => {
             height,
             fonts,
             keyframes: Array.from({ length: ~~((endTime - startTime) / 100) }, (_, i) => startTime + i * 100),
-            onFrame: async (data2, { duration, progress }) => {
+            onKeyframe: async (data2, { duration, progress }) => {
               await encoder.encode({ data: data2, delay: duration });
               onProgress?.(progress);
             }
@@ -4602,7 +4719,7 @@ const _image = definePlugin((editor) => {
         accept: imageExts.join(","),
         test: (source) => {
           if (source instanceof Blob) {
-            if (source.type.startsWith("image/")) {
+            if (!source.type.startsWith("image/svg+xml") && source.type.startsWith("image/")) {
               return true;
             }
           }
@@ -4672,6 +4789,97 @@ const _import = definePlugin((editor) => {
     }
   };
 });
+const _json = definePlugin((editor) => {
+  const {
+    getAabb,
+    selection,
+    root,
+    getTimeRange
+  } = editor;
+  const RE = /\.json$/i;
+  return {
+    name: "mce:json",
+    loaders: [
+      {
+        name: "json",
+        accept: ".json",
+        test: (source) => {
+          if (source instanceof Blob) {
+            if (source.type.startsWith("application/json")) {
+              return true;
+            }
+          }
+          if (source instanceof File) {
+            if (RE.test(source.name)) {
+              return true;
+            }
+          }
+          return false;
+        },
+        load: async (source) => {
+          const json = JSON.parse(await source.text());
+          if ("version" in json && "elements" in json) {
+            console.log(json);
+          }
+          return json;
+        }
+      }
+    ],
+    exporters: [
+      {
+        name: "json",
+        handle: (options) => {
+          const {
+            selected = false,
+            scale = 1
+          } = options;
+          let id = idGenerator();
+          let elements = [];
+          if (Array.isArray(selected)) {
+            elements = selected;
+          } else {
+            if (selected === true) {
+              elements = selection.value;
+            }
+            if (elements.length === 0 && root.value) {
+              if (root.value.meta.id) {
+                id = root.value.meta.id;
+              }
+              elements = root.value.children;
+            }
+          }
+          const box = getAabb(elements, "parent");
+          return {
+            id,
+            style: {
+              width: box.width * scale,
+              height: box.height * scale,
+              transformOrigin: "left top",
+              transform: `scale(${scale})`
+            },
+            children: elements.map((el) => {
+              const json = el.toJSON();
+              if (box.left) {
+                json.style.left = (json.style.left ?? 0) - box.left;
+              }
+              if (box.top) {
+                json.style.top = (json.style.top ?? 0) - box.top;
+              }
+              json.meta ??= {};
+              json.meta.inPptIs = "Slide";
+              return json;
+            }),
+            meta: {
+              inPptIs: "Pptx",
+              inCanvasIs: "Element2D",
+              ...getTimeRange(elements)
+            }
+          };
+        }
+      }
+    ]
+  };
+});
 const _layerOrder = definePlugin((editor) => {
   const {
     selection
@@ -4825,25 +5033,26 @@ const _menu = definePlugin((editor, options) => {
       { key: "open" },
       { type: "divider" },
       { key: "import" },
-      exportMenu.value
-    ]
+      exportMenu.value.children.length && exportMenu.value
+    ].filter(Boolean)
   }));
   const historyMenus = computed(() => [
     { key: "undo", disabled: !canUndo.value },
     { key: "redo", disabled: !canRedo.value }
   ]);
+  const copyAsMenu = computed(() => ({
+    key: "copyAs",
+    disabled: !hasSelected.value,
+    children: [...exporters.value.values()].filter((v) => Boolean(v.copyAs)).map((v) => ({ key: `copyAs:${v.name}` }))
+  }));
   const editMenus1 = computed(() => [
     { key: "copy", disabled: !hasSelected.value },
-    {
-      key: "copyAs",
-      disabled: !hasSelected.value,
-      children: [...exporters.value.values()].filter((v) => Boolean(v.copyAs)).map((v) => ({ key: `copyAs:${v.name}` }))
-    },
+    copyAsMenu.value.children.length && copyAsMenu.value,
     { key: "cut", disabled: !hasSelected.value },
     { key: "paste" },
     { key: "duplicate", disabled: !hasSelected.value },
     { key: "delete", disabled: !hasSelected.value }
-  ]);
+  ].filter(Boolean));
   const selectMenu = computed(() => ({
     key: "select",
     children: [
@@ -4864,8 +5073,8 @@ const _menu = definePlugin((editor, options) => {
       ...selectMenu.value.children
     ]
   }));
-  const zoomMenu = computed(() => ({
-    key: "zoom",
+  const zoomViewMenu = computed(() => ({
+    key: "view",
     children: [
       { key: "zoomIn" },
       { key: "zoomOut" },
@@ -4885,7 +5094,7 @@ const _menu = definePlugin((editor, options) => {
       { key: "view:statusbar", checked: config.value.statusbar },
       { key: "view:frameOutline", checked: config.value.frameOutline },
       { type: "divider" },
-      ...zoomMenu.value.children
+      ...zoomViewMenu.value.children
     ]
   }));
   const objectMenu1 = computed(() => [
@@ -4961,6 +5170,7 @@ const _menu = definePlugin((editor, options) => {
           layerOrderMenu.value,
           layerPositionMenu.value,
           flipMenu.value,
+          zoomViewMenu.value,
           { type: "divider" },
           exportMenu.value
         ];
@@ -5099,6 +5309,17 @@ const _saveAs = definePlugin((editor) => {
     ]
   };
 });
+const _scroll = definePlugin((editor) => {
+  const {
+    scrollTo
+  } = editor;
+  return {
+    name: "mce:scroll",
+    commands: [
+      { command: "scrollToSelection", handle: (options) => scrollTo("selection", options) }
+    ]
+  };
+});
 const _select = definePlugin((editor) => {
   const {
     selection,
@@ -5298,85 +5519,23 @@ const _visibility = definePlugin((editor) => {
     ]
   };
 });
-const defaultZoomToFitOffset = { left: 0, top: 0, bottom: 0, right: 0 };
 const _zoom = definePlugin((editor) => {
   const {
     camera,
     drawboardAabb,
-    viewAabb,
-    config,
-    currentAabb,
-    registerConfig,
-    selection
+    zoomTo,
+    selection,
+    exec
   } = editor;
-  registerConfig("zoomToFitOffset", { ...defaultZoomToFitOffset });
-  function zoomIn() {
-    camera.value.addZoom(0.25);
-  }
-  function zoomOut() {
-    camera.value.addZoom(-0.25);
-  }
-  function zoomTo100() {
-    camera.value.setZoom(1);
-  }
-  function _zoomToFit(mode, selection2 = false) {
-    const targetAabb = selection2 ? currentAabb.value : viewAabb.value;
-    const offset2 = {
-      ...defaultZoomToFitOffset,
-      ...config.value.zoomToFitOffset
-    };
-    if (config.value.scrollbar) {
-      offset2.right += 8;
-      offset2.bottom += 8;
-    }
-    if (config.value.ruler) {
-      offset2.left += 16;
-      offset2.top += 16;
-    }
-    const tw = drawboardAabb.value.width - (offset2.left + offset2.right);
-    const th = drawboardAabb.value.height - (offset2.top + offset2.bottom);
-    const sx = targetAabb.left;
-    const sy = targetAabb.top;
-    const sw = targetAabb.width;
-    const sh = targetAabb.height;
-    if (sw && sh) {
-      const zw = tw / sw;
-      const zh = th / sh;
-      camera.value.setZoom(
-        mode === "contain" ? Math.min(zw, zh) : Math.max(zw, zh)
-      );
-      const zoom = camera.value.zoom.x;
-      let x = offset2.left;
-      let y = offset2.top;
-      if (zw < zh) {
-        y += (th - sh * zoom) / 2;
-      } else {
-        x += (tw - sw * zoom) / 2;
-      }
-      camera.value.position.set(
-        -sx * zoom + x,
-        -sy * zoom + y
-      );
-    }
-  }
-  function zoomToFit() {
-    _zoomToFit("contain");
-  }
-  function zoomToCover() {
-    _zoomToFit("cover");
-  }
-  function zoomToSelection() {
-    _zoomToFit("contain", true);
-  }
   return {
     name: "mce:zoom",
     commands: [
-      { command: "zoomIn", handle: zoomIn },
-      { command: "zoomOut", handle: zoomOut },
-      { command: "zoomTo100", handle: zoomTo100 },
-      { command: "zoomToFit", handle: zoomToFit },
-      { command: "zoomToCover", handle: zoomToCover },
-      { command: "zoomToSelection", handle: zoomToSelection }
+      { command: "zoomIn", handle: () => camera.value.addZoom(0.25) },
+      { command: "zoomOut", handle: () => camera.value.addZoom(-0.25) },
+      { command: "zoomTo100", handle: () => camera.value.setZoom(1) },
+      { command: "zoomToCover", handle: () => zoomTo("root", { mode: "cover" }) },
+      { command: "zoomToFit", handle: () => zoomTo("root", { mode: "contain" }) },
+      { command: "zoomToSelection", handle: (options) => zoomTo("selection", options) }
     ],
     hotkeys: [
       { command: "zoomIn", key: "CmdOrCtrl+=" },
@@ -5386,26 +5545,26 @@ const _zoom = definePlugin((editor) => {
       { command: "zoomToSelection", key: "Shift+™" }
     ],
     events: {
-      setDoc: zoomToFit,
+      setDoc: () => exec("zoomToFit"),
       setCurrentFrame: () => {
         if (selection.value.length) {
-          zoomToSelection();
+          exec("zoomToSelection");
         } else {
-          zoomToFit();
+          exec("zoomToFit");
         }
       }
     },
     setup: () => {
       const {
         drawboardDom,
-        config: config2
+        config
       } = editor;
-      watch(() => config2.value.viewMode, zoomToFit);
+      watch(() => config.value.viewMode, () => exec("zoomToFit"));
       useResizeObserver$1(drawboardDom, (entries) => {
         const { left: _left, top: _top, width, height } = entries[0].contentRect;
         const { left = _left, top = _top } = drawboardDom.value?.getBoundingClientRect() ?? {};
         drawboardAabb.value = { left, top, width, height };
-        zoomToFit();
+        exec("zoomToFit");
       });
     }
   };
@@ -5423,6 +5582,7 @@ const plugins = [
   _html,
   _image,
   _import,
+  _json,
   _layerOrder,
   _layerPosition,
   _lock,
@@ -5431,6 +5591,7 @@ const plugins = [
   _new,
   _open,
   _saveAs,
+  _scroll,
   _select,
   _text,
   _ui,
@@ -5678,10 +5839,19 @@ const aliases = {
   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",
-  menuRight: "m10 17l5-5l-5-5z",
+  arrowRight: "M12.6 12L8 7.4L9.4 6l6 6l-6 6L8 16.6z",
   mouseLeftClick: "M13 9V1.07A8.01 8.01 0 0 1 19.75 7c.16.64.25 1.31.25 2zm4.66-2c-.48-1.35-1.43-2.5-2.66-3.19V7zM6 15v-2h12v2c0 1.59-.63 3.12-1.76 4.24A5.97 5.97 0 0 1 12 21a5.97 5.97 0 0 1-4.24-1.76A5.97 5.97 0 0 1 6 15m-2 0c0 2.12.84 4.16 2.34 5.66S9.88 23 12 23s4.16-.84 5.66-2.34S20 17.12 20 15v-4H4zm7-6V1.07C7.06 1.56 4 4.92 4 9z",
   mouseRightClick: "M13 9V1.07c3.94.49 7 3.85 7 7.93zm-2 0V1.07A8.01 8.01 0 0 0 4.25 7C4.09 7.64 4 8.31 4 9zM6.34 7C6.82 5.65 7.78 4.5 9 3.81V7zM6 15v-2h12v2c0 1.59-.63 3.12-1.76 4.24A5.97 5.97 0 0 1 12 21a5.97 5.97 0 0 1-4.24-1.76A5.97 5.97 0 0 1 6 15m-2 0c0 2.12.84 4.16 2.34 5.66S9.88 23 12 23s4.16-.84 5.66-2.34S20 17.12 20 15v-4H4z",
-  check: "M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"
+  check: "M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z",
+  frame: "M17 9v6H7V9zm2-6h-2v3h2zM7 3H5v3h2zm16 4h-3v2h3zm-4 0H5v10h14zM4 7H1v2h3zm19 8h-3v2h3zM4 15H1v2h3zm15 3h-2v3h2zM7 18H5v3h2z",
+  group: "M10 22q-.825 0-1.412-.587T8 20v-4H4q-.825 0-1.412-.587T2 14V4q0-.825.588-1.412T4 2h10q.825 0 1.413.588T16 4v4h4q.825 0 1.413.588T22 10v10q0 .825-.587 1.413T20 22zm0-2h10V10h-6V4H4v10h6zm2-8",
+  shape: "M8 17.95q.25.025.488.038T9 18t.513-.012t.487-.038V20h10V10h-2.05q.025-.25.038-.488T18 9t-.012-.513T17.95 8H20q.825 0 1.413.588T22 10v10q0 .825-.587 1.413T20 22H10q-.825 0-1.412-.587T8 20zM9 16q-2.925 0-4.962-2.037T2 9t2.038-4.962T9 2t4.963 2.038T16 9t-2.037 4.963T9 16m0-2q2.075 0 3.538-1.463T14 9t-1.463-3.537T9 4T5.463 5.463T4 9t1.463 3.538T9 14m0-5",
+  text: "m18.5 4l1.16 4.35l-.96.26c-.45-.87-.91-1.74-1.44-2.18C16.73 6 16.11 6 15.5 6H13v10.5c0 .5 0 1 .33 1.25c.34.25 1 .25 1.67.25v1H9v-1c.67 0 1.33 0 1.67-.25c.33-.25.33-.75.33-1.25V6H8.5c-.61 0-1.23 0-1.76.43c-.53.44-.99 1.31-1.44 2.18l-.96-.26L5.5 4z",
+  image: "M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zm1-2h12l-3.75-5l-3 4L9 13zm-1 2V5zm3.5-9q.625 0 1.063-.437T10 8.5t-.437-1.062T8.5 7t-1.062.438T7 8.5t.438 1.063T8.5 10",
+  lock: "M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h1V6q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm0-2h12V10H6zm6-3q.825 0 1.413-.587T14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17M9 8h6V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6zM6 20V10z",
+  unlock: "M6 8h9V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6H7q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22H6q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8m0 12h12V10H6zm6-3q.825 0 1.413-.587T14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17m-6 3V10z",
+  visible: "M12 16q1.875 0 3.188-1.312T16.5 11.5t-1.312-3.187T12 7T8.813 8.313T7.5 11.5t1.313 3.188T12 16m0-1.8q-1.125 0-1.912-.788T9.3 11.5t.788-1.912T12 8.8t1.913.788t.787 1.912t-.787 1.913T12 14.2m0 4.8q-3.65 0-6.65-2.037T1 11.5q1.35-3.425 4.35-5.462T12 4t6.65 2.038T23 11.5q-1.35 3.425-4.35 5.463T12 19m0-2q2.825 0 5.188-1.487T20.8 11.5q-1.25-2.525-3.613-4.012T12 6T6.813 7.488T3.2 11.5q1.25 2.525 3.613 4.013T12 17",
+  unvisible: "m16.1 13.3l-1.45-1.45q.225-1.175-.675-2.2t-2.325-.8L10.2 7.4q.425-.2.863-.3T12 7q1.875 0 3.188 1.313T16.5 11.5q0 .5-.1.938t-.3.862m3.2 3.15l-1.45-1.4q.95-.725 1.688-1.587T20.8 11.5q-1.25-2.525-3.588-4.012T12 6q-.725 0-1.425.1T9.2 6.4L7.65 4.85q1.025-.425 2.1-.638T12 4q3.775 0 6.725 2.087T23 11.5q-.575 1.475-1.513 2.738T19.3 16.45m.5 6.15l-4.2-4.15q-.875.275-1.762.413T12 19q-3.775 0-6.725-2.087T1 11.5q.525-1.325 1.325-2.463T4.15 7L1.4 4.2l1.4-1.4l18.4 18.4zM5.55 8.4q-.725.65-1.325 1.425T3.2 11.5q1.25 2.525 3.588 4.013T12 17q.5 0 .975-.062t.975-.138l-.9-.95q-.275.075-.525.113T12 16q-1.875 0-3.188-1.312T7.5 11.5q0-.275.038-.525t.112-.525zm4.2 4.2"
 };
 const svg = {
   component: MceSvgIcon
@@ -5786,13 +5956,13 @@ const defaultHoverStrategy = (context) => {
   }
   return void 0;
 };
-const _hoisted_1$g = { class: "mce-auxiliary" };
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _hoisted_1$h = { class: "mce-auxiliary" };
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "Auxiliary",
   setup(__props) {
     const { auxiliaryLines } = useEditor();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(auxiliaryLines), (item, key) => {
           return openBlock(), createElementBlock("div", {
             key,
@@ -6085,7 +6255,7 @@ function createLayout(props) {
   };
 }
 const MceMenuSymbol = Symbol.for("MceMenuSymbol");
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "Icon",
   props: {
     disabled: Boolean,
@@ -6110,7 +6280,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -6222,7 +6392,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$f = ["onMouseenter"];
+const _hoisted_1$g = ["onMouseenter"];
 const _hoisted_2$8 = ["onClick"];
 const _hoisted_3$7 = {
   key: 0,
@@ -6233,7 +6403,7 @@ const _hoisted_5$3 = {
   key: 1,
   class: "mce-list-item__append"
 };
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceMenu"
   },
@@ -6306,7 +6476,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$v, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isActive.value = $event),
@@ -6350,7 +6520,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                     onClick: (e) => onClickItem(item, index, e)
                   }, [
                     hasPrepend.value ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
-                      item.checked ? (openBlock(), createBlock(_sfc_main$u, {
+                      item.checked ? (openBlock(), createBlock(_sfc_main$w, {
                         key: 0,
                         icon: "$check"
                       })) : createCommentVNode("", true)
@@ -6361,10 +6531,10 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                       ])
                     ]),
                     item.children?.length ? (openBlock(), createElementBlock("div", _hoisted_5$3, [
-                      createVNode(_sfc_main$u, { icon: "$menuRight" })
+                      createVNode(_sfc_main$w, { icon: "$arrowRight" })
                     ])) : createCommentVNode("", true)
                   ], 10, _hoisted_2$8)
-                ], 40, _hoisted_1$f))
+                ], 40, _hoisted_1$g))
               ], 64);
             }), 128)),
             opened.value > -1 && __props.items?.[opened.value]?.children?.length ? (openBlock(), createBlock(_component_MceMenu, {
@@ -6394,12 +6564,12 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$e = { class: "mce-context-menu__title" };
+const _hoisted_1$f = { class: "mce-context-menu__title" };
 const _hoisted_2$7 = {
   key: 0,
   class: "mce-context-menu__kbd"
 };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "ContextMenu",
   props: {
     "modelValue": { type: Boolean },
@@ -6418,11 +6588,19 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       exec,
       getKbd,
       t,
-      hotkeys
+      hotkeys,
+      registerCommand,
+      unregisterCommand
     } = useEditor();
     const model = useModel(__props, "modelValue");
     const position = useModel(__props, "position");
     const menuRef = useTemplateRef("menuTplRef");
+    onBeforeMount(() => {
+      registerCommand({ command: "openContextMenu", handle: onContextmenu });
+    });
+    onBeforeUnmount(() => {
+      unregisterCommand("openContextMenu");
+    });
     function updateLocation() {
       menuRef.value?.updateLocation();
     }
@@ -6449,7 +6627,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$s, {
+      return openBlock(), createBlock(_sfc_main$u, {
         ref: "menuTplRef",
         modelValue: model.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
@@ -6464,7 +6642,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         "onClick:item": onClickItem
       }, {
         title: withCtx(({ item }) => [
-          createElementVNode("span", _hoisted_1$e, toDisplayString(unref(t)(item.key)), 1),
+          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)
         ]),
         _: 1
@@ -6472,11 +6650,11 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$d = {
+const _hoisted_1$e = {
   key: 0,
   class: "mce-drawing__content"
 };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "Drawing",
   setup(__props) {
     const {
@@ -6506,12 +6684,12 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
         }),
         onMousedown
       }, [
-        unref(stateContext)?.content ? (openBlock(), createElementBlock("div", _hoisted_1$d, toDisplayString(unref(t)(unref(stateContext).content)), 1)) : createCommentVNode("", true)
+        unref(stateContext)?.content ? (openBlock(), createElementBlock("div", _hoisted_1$e, toDisplayString(unref(t)(unref(stateContext).content)), 1)) : createCommentVNode("", true)
       ], 36)) : createCommentVNode("", true);
     };
   }
 });
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "Floatbar",
   props: {
     ...makeMceOverlayProps({
@@ -6537,7 +6715,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$t, {
+      return openBlock(), createBlock(_sfc_main$v, {
         ref: "overlayTpl",
         class: "mce-floatbar",
         location: props.location,
@@ -6554,7 +6732,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "Frame",
   props: {
     "modelValue": { required: true },
@@ -6620,7 +6798,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "Frames",
   setup(__props) {
     const {
@@ -6628,7 +6806,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     } = useEditor();
     return (_ctx, _cache) => {
       return openBlock(true), createElementBlock(Fragment, null, renderList(unref(frames), (frame, key) => {
-        return openBlock(), createBlock(_sfc_main$o, {
+        return openBlock(), createBlock(_sfc_main$q, {
           key,
           "model-value": frame
         }, null, 8, ["model-value"]);
@@ -6636,36 +6814,36 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "GoBackSelectedArea",
   setup(__props) {
     const {
-      currentAabb,
+      selectionAabb,
       drawboardAabb,
       aabbToDrawboardAabb,
-      exec,
-      t
+      t,
+      exec
     } = useEditor();
     const isActive = computed(() => {
-      return currentAabb.value.width && currentAabb.value.height && !isOverlappingAabb(
+      return selectionAabb.value.width && selectionAabb.value.height && !isOverlappingAabb(
         drawboardAabb.value,
-        aabbToDrawboardAabb(currentAabb.value)
+        aabbToDrawboardAabb(selectionAabb.value)
       );
     });
     return (_ctx, _cache) => {
       return isActive.value ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: "mce-back-selected-aera",
-        onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(exec)("zoomToSelection"), ["prevent"]))
+        onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(exec)("scrollToSelection", { behavior: "smooth" }), ["prevent"]))
       }, [
-        createVNode(_sfc_main$u, { icon: "$gps" }),
+        createVNode(_sfc_main$w, { icon: "$gps" }),
         createElementVNode("span", null, toDisplayString(unref(t)("goBackSelectedArea")), 1)
       ])) : createCommentVNode("", true);
     };
   }
 });
-const _hoisted_1$c = ["data-name"];
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$d = ["data-name"];
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "Hover",
   setup(__props) {
     const {
@@ -6683,11 +6861,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           borderColor: "currentcolor",
           ...unref(boundingBoxToStyle)(hoverElementObb.value)
         })
-      }, null, 12, _hoisted_1$c)) : createCommentVNode("", true);
+      }, null, 12, _hoisted_1$d)) : createCommentVNode("", true);
     };
   }
 });
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "Tooltip",
   props: /* @__PURE__ */ mergeModels({
     ...makeMceOverlayProps({
@@ -6710,7 +6888,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$t, {
+      return openBlock(), createBlock(_sfc_main$v, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
@@ -6736,10 +6914,10 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$b = ["width", "height"];
+const _hoisted_1$c = ["width", "height"];
 const _hoisted_2$6 = ["onDblclick", "onMousedown", "onMousemove"];
 const _hoisted_3$6 = { style: { "font-size": "12px", "text-wrap": "nowrap" } };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -6824,7 +7002,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       return niceFraction * 10 ** exponent;
     });
     const start = computed(() => {
-      const value = -props.position / props.zoom;
+      const value = props.position / props.zoom;
       return Math.floor(value / unit.value) * unit.value;
     });
     const end = computed(() => {
@@ -6833,10 +7011,10 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       return start.value + Math.ceil(value / unit.value) * unit.value;
     });
     function numToPx(num) {
-      return Math.round(num * props.zoom + props.position);
+      return Math.round(num * props.zoom - props.position);
     }
     function pxToNum(px) {
-      return Math.round((px - props.position) / props.zoom);
+      return Math.round((px + props.position) / props.zoom);
     }
     function render2() {
       const cvs = canvas.value;
@@ -6995,7 +7173,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             class: "mce-ruler__canvas",
             width: props.size,
             height: props.size
-          }, null, 8, _hoisted_1$b)
+          }, null, 8, _hoisted_1$c)
         ], 16)), [
           [unref(vResizeObserver), unref(resize)]
         ]),
@@ -7019,7 +7197,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             onMouseleave: onLeave
           }, null, 46, _hoisted_2$6);
         }), 128)),
-        createVNode(_sfc_main$k, {
+        createVNode(_sfc_main$m, {
           "model-value": !!tipText.value,
           target: tipPos.value,
           offset: 24
@@ -7033,8 +7211,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$a = { class: "mce-rulers" };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _hoisted_1$b = { class: "mce-rulers" };
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -7047,8 +7225,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     } = useEditor();
     const activeAabb = computed(() => getAabbInDrawboard(selection.value));
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
-        createVNode(_sfc_main$j, {
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+        createVNode(_sfc_main$l, {
           refline: "",
           zoom: unref(camera).zoom.x,
           position: unref(camera).position.x,
@@ -7056,7 +7234,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           axis: "",
           size: 16
         }, null, 8, ["zoom", "position", "selected"]),
-        createVNode(_sfc_main$j, {
+        createVNode(_sfc_main$l, {
           refline: "",
           zoom: unref(camera).zoom.y,
           position: unref(camera).position.y,
@@ -7070,13 +7248,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$9 = {
+const _hoisted_1$a = {
   ref: "trackTplRef",
   class: "mce-scrollbar__track"
 };
 const AMOUNT_STEP = 50;
 const AMOUNT_REPEAR_DELAY = 50;
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "Scrollbar",
   props: /* @__PURE__ */ mergeModels({
     zoom: {},
@@ -7166,7 +7344,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           [props.vertical ? "top" : "left"]: `${props.offset}px`
         })
       }, [
-        createElementVNode("div", _hoisted_1$9, [
+        createElementVNode("div", _hoisted_1$a, [
           withDirectives(createElementVNode("div", {
             ref: "thumbTplRef",
             class: normalizeClass(["mce-scrollbar__thumb", {
@@ -7189,7 +7367,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -7207,14 +7385,14 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     } = useEditor();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$h, mergeProps(props, {
+        createVNode(_sfc_main$j, mergeProps(props, {
           modelValue: unref(camera).position.y,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(camera).position.y = $event),
           zoom: unref(camera).zoom.y,
           vertical: "",
           length: unref(viewAabb).height
         }), null, 16, ["modelValue", "zoom", "length"]),
-        createVNode(_sfc_main$h, mergeProps(props, {
+        createVNode(_sfc_main$j, mergeProps(props, {
           modelValue: unref(camera).position.x,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(camera).position.x = $event),
           zoom: unref(camera).zoom.x,
@@ -7224,7 +7402,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$8 = { class: "mce-transformable__svg" };
+const _hoisted_1$9 = { 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"];
@@ -7233,7 +7411,7 @@ const _hoisted_6$2 = {
   key: 0,
   class: "mce-transformable__tip"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "Transformable",
   props: {
     tag: { default: "div" },
@@ -7606,7 +7784,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             },
             start
           }),
-          (openBlock(), createElementBlock("svg", _hoisted_1$8, [
+          (openBlock(), createElementBlock("svg", _hoisted_1$9, [
             createElementVNode("rect", {
               width: "100%",
               height: "100%",
@@ -7682,7 +7860,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -7821,7 +7999,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             })
           }, null, 4);
         }), 128)),
-        selectionObb.value.width && selectionObb.value.height ? (openBlock(), createBlock(_sfc_main$f, {
+        selectionObb.value.width && selectionObb.value.height ? (openBlock(), createBlock(_sfc_main$h, {
           key: 1,
           ref: "transformableRef",
           modelValue: selectionObb.value,
@@ -7854,7 +8032,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "Setup",
   setup(__props) {
     useEditor().setup();
@@ -7863,7 +8041,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "Layout",
   props: {
     ...makeLayoutProps()
@@ -7892,7 +8070,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "LayoutItem",
   props: {
     position: {
@@ -7903,7 +8081,10 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       type: [Number, String],
       default: 300
     },
-    modelValue: Boolean,
+    modelValue: {
+      type: Boolean,
+      default: true
+    },
     ...makeLayoutItemProps()
   },
   setup(__props) {
@@ -7929,11 +8110,11 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7 = {
+const _hoisted_1$8 = {
   key: 0,
   class: "mce-main__scroller"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "Main",
   props: {
     scrollable: Boolean
@@ -7948,14 +8129,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         ]]),
         style: normalizeStyle([unref(mainStyles)])
       }, [
-        props.scrollable ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
+        props.scrollable ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
           renderSlot(_ctx.$slots, "default")
         ])) : renderSlot(_ctx.$slots, "default", { key: 1 })
       ], 6);
     };
   }
 });
-const _hoisted_1$6 = { class: "progress-indicator" };
+const _hoisted_1$7 = { class: "progress-indicator" };
 const _hoisted_2$4 = {
   key: 0,
   class: "progress-indicator__status"
@@ -7965,7 +8146,7 @@ const _hoisted_4$2 = {
   key: 1,
   class: "progress-indicator__bar-indeterminate"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "ProgressIndicator",
   props: /* @__PURE__ */ mergeModels({
     label: {},
@@ -7978,7 +8159,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const progress = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
         __props.label ? (openBlock(), createElementBlock("span", _hoisted_2$4, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_3$4, [
           !__props.indeterminate ? (openBlock(), createElementBlock("div", {
@@ -7998,8 +8179,8 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const ProgressIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-c4234331"]]);
-const _hoisted_1$5 = { class: "mce-statusbar" };
+const ProgressIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__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" };
 const _hoisted_4$1 = { class: "mce-statusbar__kbd" };
@@ -8020,7 +8201,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$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "Statusbar",
   setup(__props) {
     const {
@@ -8031,7 +8212,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       exportProgress
     } = useEditor();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
         createElementVNode("div", _hoisted_2$3, [
           unref(state) === "typing" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             createElementVNode("div", _hoisted_3$3, [
@@ -8045,7 +8226,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             ])
           ], 64)) : unref(state) === "transforming" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             createElementVNode("div", _hoisted_8, [
-              createVNode(_sfc_main$u, { icon: "$mouseRightClick" })
+              createVNode(_sfc_main$w, { icon: "$mouseRightClick" })
             ]),
             _cache[2] || (_cache[2] = createElementVNode("span", null, " / ", -1)),
             createElementVNode("div", _hoisted_9, [
@@ -8059,7 +8240,7 @@ const _sfc_main$8 = /* @__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$u, { icon: "$mouseLeftClick" }),
+              createVNode(_sfc_main$w, { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectObject")), 1)
             ]),
             _cache[4] || (_cache[4] = createElementVNode("span", null, " + ", -1)),
@@ -8069,7 +8250,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             ]),
             _cache[5] || (_cache[5] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
             createElementVNode("div", _hoisted_17, [
-              createVNode(_sfc_main$u, { icon: "$mouseLeftClick" }),
+              createVNode(_sfc_main$w, { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectArea")), 1)
             ]),
             _cache[6] || (_cache[6] = createElementVNode("span", null, " + ", -1)),
@@ -8079,7 +8260,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             ]),
             _cache[7] || (_cache[7] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
             createElementVNode("div", _hoisted_20, [
-              createVNode(_sfc_main$u, { icon: "$mouseLeftClick" }),
+              createVNode(_sfc_main$w, { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("dragSelected")), 1)
             ])
           ], 64))
@@ -8096,8 +8277,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-36c89bd7"]]);
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-36c89bd7"]]);
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "TextEditor",
   setup(__props, { expose: __expose }) {
     const {
@@ -8192,19 +8373,19 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = { class: "mce-payhead" };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = { class: "mce-payhead" };
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "Playhead",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [..._cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [..._cache[0] || (_cache[0] = [
         createElementVNode("header", { class: "mce-payhead__header" }, null, -1),
         createElementVNode("main", { class: "mce-payhead__main" }, null, -1)
       ])]);
     };
   }
 });
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   key: 0,
   class: "mce-segment__edge mce-segment__edge--front"
 };
@@ -8216,7 +8397,7 @@ const _hoisted_3$2 = {
   key: 1,
   class: "mce-segment__edge mce-segment__edge--end"
 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "Segment",
   props: {
     node: {},
@@ -8247,25 +8428,25 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         ]]),
         style: normalizeStyle(style.value)
       }, [
-        __props.active ? (openBlock(), createElementBlock("div", _hoisted_1$3)) : createCommentVNode("", true),
+        __props.active ? (openBlock(), createElementBlock("div", _hoisted_1$4)) : createCommentVNode("", true),
         createElementVNode("span", _hoisted_2$2, toDisplayString(props.node.name), 1),
         __props.active ? (openBlock(), createElementBlock("div", _hoisted_3$2)) : createCommentVNode("", true)
       ], 6);
     };
   }
 });
-const _hoisted_1$2 = { class: "mce-track" };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3 = { class: "mce-track" };
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "Track",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
         renderSlot(_ctx.$slots, "default")
       ]);
     };
   }
 });
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "Trackhead",
   props: {
     node: {}
@@ -8281,7 +8462,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$1 = { class: "mce-timeline__toolbar" };
+const _hoisted_1$2 = { class: "mce-timeline__toolbar" };
 const _hoisted_2$1 = { class: "mce-timeline__main" };
 const _hoisted_3$1 = { class: "mce-timeline__left" };
 const _hoisted_4 = { class: "mce-timeline__left-wrapper" };
@@ -8289,7 +8470,7 @@ 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$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "Timeline",
   setup(__props) {
     const {
@@ -8392,12 +8573,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         onWheel: _cache[0] || (_cache[0] = withModifiers(() => {
         }, ["prevent"]))
       }, [
-        createElementVNode("div", _hoisted_1$1, [
+        createElementVNode("div", _hoisted_1$2, [
           createElementVNode("div", {
             class: "mce-timeline__play",
             onClick: toggle
           }, [
-            createVNode(_sfc_main$u, {
+            createVNode(_sfc_main$w, {
               icon: paused.value ? "$play" : "$pause"
             }, null, 8, ["icon"])
           ])
@@ -8411,7 +8592,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 })
               }, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(elements.value, (node, index) => {
-                  return openBlock(), createBlock(_sfc_main$3, {
+                  return openBlock(), createBlock(_sfc_main$5, {
                     key: index,
                     node
                   }, null, 8, ["node"]);
@@ -8426,7 +8607,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           }, [
             createElementVNode("div", _hoisted_5, [
               createElementVNode("div", _hoisted_6, [
-                createVNode(_sfc_main$j, {
+                createVNode(_sfc_main$l, {
                   ref: "rulerTpl",
                   zoom: 1 / unref(msPerPx) * fps.value,
                   unit: 100,
@@ -8444,9 +8625,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   })
                 }, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(elements.value, (node, index) => {
-                    return openBlock(), createBlock(_sfc_main$4, { key: index }, {
+                    return openBlock(), createBlock(_sfc_main$6, { key: index }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$5, {
+                        createVNode(_sfc_main$7, {
                           node,
                           "ms-per-px": unref(msPerPx),
                           active: unref(selection).some((v) => v.equal(node)),
@@ -8458,7 +8639,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   }), 128))
                 ], 4)
               ]),
-              createVNode(_sfc_main$6, {
+              createVNode(_sfc_main$8, {
                 style: normalizeStyle({
                   transform: `translate(${position.value[0] + Math.ceil(unref(currentTime) / unref(msPerPx))}px, 0px)`
                 })
@@ -8470,6 +8651,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main$3 = {};
+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 _hoisted_1 = ["data-pixel-ratio"];
 const _hoisted_2 = {
   ref: "canvasTpl",
@@ -8479,7 +8666,7 @@ const _hoisted_3 = {
   ref: "overlayContainerTpl",
   class: "mce-editor__overlay-container"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "EditorLayout",
   props: {
     ...makeMceStrategyProps({
@@ -8743,10 +8930,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, { class: "mce-editor" }, {
+      return openBlock(), createBlock(_sfc_main$e, { class: "mce-editor" }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$d),
-          createVNode(_sfc_main$a, null, {
+          createVNode(_sfc_main$f),
+          createVNode(_sfc_main$c, null, {
             default: withCtx(() => [
               createElementVNode("div", {
                 ref_key: "drawboardDom",
@@ -8759,12 +8946,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 }, ["prevent"]))
               }, [
                 createElementVNode("canvas", _hoisted_2, null, 512),
-                createVNode(_sfc_main$7, { ref: "textEditorTpl" }, null, 512),
-                createVNode(_sfc_main$v),
-                createVNode(_sfc_main$l),
+                createVNode(_sfc_main$9, { ref: "textEditorTpl" }, null, 512),
+                createVNode(_sfc_main$x),
                 createVNode(_sfc_main$n),
-                createVNode(_sfc_main$q),
-                createVNode(_sfc_main$e, {
+                createVNode(_sfc_main$p),
+                createVNode(_sfc_main$s),
+                createVNode(_sfc_main$g, {
                   ref: "selectorTpl",
                   "selected-area": selectedArea.value,
                   "resize-strategy": unref(selection)[0] ? props.resizeStrategy(unref(selection)[0]) : void 0
@@ -8777,8 +8964,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 3
                 }, 8, ["selected-area", "resize-strategy"]),
-                unref(config).scrollbar ? (openBlock(), createBlock(_sfc_main$g, { key: 0 })) : createCommentVNode("", true),
-                _ctx.$slots.floatbar ? (openBlock(), createBlock(_sfc_main$p, {
+                unref(config).scrollbar ? (openBlock(), createBlock(_sfc_main$i, { key: 0 })) : createCommentVNode("", true),
+                _ctx.$slots.floatbar ? (openBlock(), createBlock(_sfc_main$r, {
                   key: 1,
                   target: unref(state) === "typing" ? textEditor.value?.textEditor : selector.value?.transformable?.$el
                 }, {
@@ -8787,16 +8974,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 3
                 }, 8, ["target"])) : createCommentVNode("", true),
-                createVNode(_sfc_main$r),
-                createVNode(_sfc_main$m),
-                unref(config).ruler ? (openBlock(), createBlock(_sfc_main$i, { key: 2 })) : createCommentVNode("", true),
+                createVNode(_sfc_main$t),
+                createVNode(_sfc_main$o),
+                unref(config).ruler ? (openBlock(), createBlock(_sfc_main$k, { key: 2 })) : createCommentVNode("", true),
+                createVNode(Toolbelt),
                 renderSlot(_ctx.$slots, "drawboard")
               ], 40, _hoisted_1)
             ]),
             _: 3
           }),
           renderSlot(_ctx.$slots, "default"),
-          createVNode(_sfc_main$b, {
+          createVNode(_sfc_main$d, {
             modelValue: unref(config).statusbar,
             "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(config).statusbar = $event),
             position: "bottom",
@@ -8807,14 +8995,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["modelValue"]),
-          createVNode(_sfc_main$b, {
+          createVNode(_sfc_main$d, {
             modelValue: unref(config).timeline,
             "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => unref(config).timeline = $event),
             position: "bottom",
             size: 160
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$2)
+              createVNode(_sfc_main$4)
             ]),
             _: 1
           }, 8, ["modelValue"]),
@@ -8825,6 +9013,209 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "Layers",
+  setup(__props) {
+    const {
+      root,
+      selection,
+      exec,
+      zoomTo
+    } = 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() {
+          if (props.node instanceof Element2D) {
+            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
+          };
+        }
+        return () => {
+          function thumbnail() {
+            const node = props.node;
+            if (node.meta.inEditorIs === "Frame") {
+              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: (e) => {
+                  if (props.node instanceof Element2D) {
+                    selection.value = [props.node];
+                    exec("openContextMenu", e);
+                  }
+                }
+              }, [
+                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({
@@ -8852,7 +9243,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$t, {
+      return openBlock(), createBlock(_sfc_main$v, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
@@ -8879,8 +9270,10 @@ export {
   _sfc_main as Dialog,
   Doc,
   Editor,
-  _sfc_main$1 as EditorLayout,
-  _sfc_main$b as EditorLayoutItem,
+  _sfc_main$1 as EditorLayers,
+  _sfc_main$2 as EditorLayout,
+  _sfc_main$d as EditorLayoutItem,
+  Toolbelt as EditorToolbelt,
   IconsSymbol,
   MceComponentIcon,
   MceLayoutItemKey,
@@ -8888,12 +9281,12 @@ export {
   MceMenuSymbol,
   MceOverlaySymbol,
   MceSvgIcon,
-  _sfc_main$s as Menu,
+  _sfc_main$u as Menu,
   Model,
-  _sfc_main$j as Ruler,
+  _sfc_main$l as Ruler,
   SUPPORTS_CLIPBOARD,
-  _sfc_main$h as Scrollbar,
-  _sfc_main$f as Transformable,
+  _sfc_main$j as Scrollbar,
+  _sfc_main$h as Transformable,
   USER_AGENT,
   boundingBoxToStyle,
   consoleError,