mce 0.16.2 → 0.16.4

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Element2D, Node as Node$1, Camera2D, Timeline, DrawboardEffect, Engine, Aabb2D, IN_BROWSER, clamp, assets, TimelineNode, Video2D, Transform2D, Obb2D, render, Vector2 as Vector2$1, Lottie2D, customNodes, Animation, IN_MAC_OS } from "modern-canvas";
+import { Element2D, Node as Node$1, Camera2D, Timeline, DrawboardEffect, Engine, Aabb2D, assets, IN_BROWSER, clamp, TimelineNode, Video2D, Transform2D, Obb2D, render, Vector2 as Vector2$1, Lottie2D, customNodes, Animation, IN_MAC_OS, DEG_TO_RAD } from "modern-canvas";
 import { reactive, computed, watch, markRaw, isReactive, ref, onBeforeMount, onScopeDispose, warn, shallowRef, defineComponent, unref, openBlock, createElementBlock, normalizeStyle as normalizeStyle$1, toDisplayString, createCommentVNode, onMounted, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, useId, onBeforeUnmount, readonly, toRef, onDeactivated, onActivated, useModel, useTemplateRef, withDirectives, withModifiers, vModelText, vShow, nextTick, Fragment, renderList, renderSlot, resolveComponent, withCtx, mergeModels, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, h, isRef, effectScope, useSlots } from "vue";
 import { useFileDialog, useEventListener, isClient, onClickOutside, useDebounceFn, useImage, useResizeObserver as useResizeObserver$1, useLocalStorage } from "@vueuse/core";
 import { getObjectValueByPath, setObjectValueByPath, Observable, idGenerator, normalizeTextContent, property, isCRLF, textContentToString, normalizeCRLF, isEqualObject } from "modern-idoc";
@@ -52,10 +52,20 @@ const _0_config = defineMixin((editor) => {
   const {
     config
   } = editor;
+  const configDeclarations = /* @__PURE__ */ new Map();
   function getConfigValue(path, defaultValue) {
-    return getObjectValueByPath(config.value, path) ?? defaultValue;
+    let value = getObjectValueByPath(config.value, path);
+    const declaration = configDeclarations.get(path);
+    if (declaration?.getter) {
+      value = declaration.getter(value);
+    }
+    return value ?? defaultValue;
   }
   function setConfigValue(path, value) {
+    const declaration = configDeclarations.get(path);
+    if (declaration?.setter) {
+      value = declaration.setter(value);
+    }
     setObjectValueByPath(config.value, path, value);
   }
   function getConfig(path) {
@@ -64,10 +74,15 @@ const _0_config = defineMixin((editor) => {
       set: (value) => setConfigValue(path, value)
     });
   }
-  function registerConfig(path, initValue) {
+  function registerConfig(path, declaration = {}) {
+    configDeclarations.set(path, declaration);
     const ref2 = getConfig(path);
     if (ref2.value === void 0) {
-      ref2.value = initValue;
+      if (typeof declaration.default === "function") {
+        ref2.value = declaration.default();
+      } else {
+        ref2.value = declaration.default;
+      }
     }
     return ref2;
   }
@@ -112,29 +127,30 @@ const _0_config_base = defineMixin((editor, options) => {
     registerConfig,
     config
   } = editor;
-  registerConfig("theme", "system");
-  registerConfig("watermark", void 0);
-  registerConfig("msaa", false);
-  registerConfig("checkerboard", false);
-  registerConfig("checkerboardStyle", "grid");
-  registerConfig("pixelGrid", false);
-  registerConfig("pixelate", false);
-  registerConfig("camera", false);
-  registerConfig("frameOutline", false);
-  registerConfig("frameGap", 48);
-  registerConfig("typographyStrategy", "autoHeight");
-  registerConfig("transformControls", {});
-  registerConfig("screenCenterOffset", { left: 0, top: 0, bottom: 0, right: 0 });
-  registerConfig("localDb", false);
+  registerConfig("theme", { default: "system" });
+  registerConfig("watermark", { default: void 0 });
+  registerConfig("msaa", { default: false });
+  registerConfig("checkerboard", { default: false });
+  registerConfig("checkerboardStyle", { default: "grid" });
+  registerConfig("pixelGrid", { default: false });
+  registerConfig("pixelate", { default: false });
+  registerConfig("camera", { default: false });
+  registerConfig("frameOutline", { default: false });
+  registerConfig("frameGap", { default: 48 });
+  registerConfig("typographyStrategy", { default: "autoHeight" });
+  registerConfig("transformControls", { default: {} });
+  registerConfig("screenCenterOffset", { default: { left: 0, top: 0, bottom: 0, right: 0 } });
+  registerConfig("localDb", { default: false });
   return () => {
     const {
       renderEngine,
       camera,
-      drawboardEffect
+      drawboardEffect,
+      setConfigValue
     } = editor;
     Object.keys(config.value).forEach((key) => {
       if (key in options) {
-        config.value[key] = options[key];
+        setConfigValue(key, options[key]);
       }
     });
     watch(
@@ -392,20 +408,37 @@ class IndexeddbProvider extends Observable {
     });
   }
 }
-class YModel extends Observable {
+class YDoc extends Observable {
   constructor(id = idGenerator()) {
     super();
     this.id = id;
-    this._yDoc = markRaw(new Y.Doc({ guid: this.id }));
-    this._yDoc.on("update", (...args) => this.emit("update", ...args));
+    this._yDoc = markRaw(new Y.Doc({ guid: id }));
     this._yProps = markRaw(this._yDoc.getMap("props"));
+    this._yChildren = markRaw(this._yDoc.getMap("children"));
+    this._yChildrenIds = markRaw(this._yDoc.getArray("childrenIds"));
+    this._initUndoManager([
+      this._yChildren,
+      this._yChildrenIds
+    ]);
+    this._yDoc.on("update", (...args) => this.emit("update", ...args));
+    this._yChildren.observe(this._yChildrenChange.bind(this));
   }
-  _transacting = void 0;
+  _transacting;
   _yDoc;
   _yProps;
+  _yChildren;
+  _yChildrenIds;
+  _nodeMap = /* @__PURE__ */ new Map();
   indexeddb;
   _ready = false;
-  _setupUndoManager(typeScope = []) {
+  _isSelfTransaction(transaction) {
+    if (transaction) {
+      return !transaction.origin || transaction.origin === this._yDoc.clientID;
+    } else {
+      return this._transacting === false;
+    }
+  }
+  _initUndoManager(typeScope = []) {
     const um = markRaw(new Y.UndoManager([
       this._yProps,
       ...typeScope
@@ -439,9 +472,7 @@ class YModel extends Observable {
         try {
           result = fn();
         } catch (e) {
-          console.error(
-            `An error occurred while Y.doc ${doc.guid} transacting:`
-          );
+          console.error(`An error occurred while Y.doc ${doc.guid} transacting:`);
           console.error(e);
         }
       },
@@ -462,61 +493,38 @@ class YModel extends Observable {
     this.undoManager.clear();
     return this;
   }
-  reset() {
-    this._yProps.clear();
-    return this;
-  }
-}
-class YDoc extends YModel {
-  _yChildren;
-  _yChildrenIds;
-  _nodeMap = /* @__PURE__ */ new Map();
-  constructor(id) {
-    super(id);
-    this._yChildren = markRaw(this._yDoc.getMap("children"));
-    this._yChildrenIds = markRaw(this._yDoc.getArray("childrenIds"));
-    this._setupUndoManager([
-      this._yChildren,
-      this._yChildrenIds
-    ]);
-  }
-  async load(initFn) {
-    return super.load(async () => {
-      await initFn?.();
-      this._yChildren.observe(this._yChildrenChange.bind(this));
-    });
-  }
-  _isSelfTransaction(transaction) {
-    return !transaction.origin || transaction.origin === this._yDoc.clientID;
-  }
   _debug(..._args) {
   }
   _yChildrenChange(event, transaction) {
     if (this._isSelfTransaction(transaction)) {
       return;
     }
-    this._debug("yChildrenChange", event);
     const { keysChanged, changes } = event;
-    keysChanged.forEach((key) => {
-      const change = changes.keys.get(key);
-      const yNode = this._yChildren.get(key);
+    keysChanged.forEach((id) => {
+      const change = changes.keys.get(id);
+      const yNode = this._yChildren.get(id);
       switch (change?.action) {
         case "add":
           if (yNode) {
             this._initYNode(yNode);
+            this._debug("[yChildren][add]", id);
           }
           break;
         case "delete":
-          this._nodeMap.get(key)?.remove();
-          this._nodeMap.delete(key);
+          this._debug("[yChildren][delete]", id);
           break;
       }
     });
   }
   reset() {
-    super.reset();
+    this._yProps.clear();
     this._yChildren.clear();
     this._yChildrenIds.delete(0, this._yChildrenIds.length);
+    this._nodeMap.forEach((node) => {
+      if (!("_yDoc" in node)) {
+        node.destroy();
+      }
+    });
     this._nodeMap.clear();
     this.undoManager.clear();
     this.indexeddb?.clearData();
@@ -526,26 +534,22 @@ class YDoc extends YModel {
     this.reset();
     super.destroy();
   }
-  proxyRoot(root, props) {
-    const { meta = {}, ..._props } = props;
-    this.reset();
-    for (const key in _props) {
-      this._yProps.set(key, _props[key]);
-    }
-    this._yProps.set("meta", new Y.Map(Object.entries(meta)));
+  _proxyRoot(root) {
+    const oldTransacting = this._transacting;
     this._transacting = true;
     this._proxyNode(
       root,
       this._yProps,
       this._yChildrenIds
     );
+    this._transacting = oldTransacting;
     return this;
   }
   _proxyProps(obj, yMap, isMeta = false) {
     const accessor = {
       getProperty: (key) => yMap.doc ? yMap.get(key) : void 0,
       setProperty: (key, value) => {
-        if (this._transacting === false) {
+        if (this._isSelfTransaction()) {
           return;
         }
         this.transact(() => yMap.set(key, value));
@@ -572,7 +576,7 @@ class YDoc extends YModel {
       if (this._isSelfTransaction(transaction)) {
         return;
       }
-      this._debug("_proxyProps", event, obj);
+      this._debug("[props]", event.keysChanged);
       this.transact(() => {
         const { keysChanged, changes } = event;
         keysChanged.forEach((key) => {
@@ -601,22 +605,24 @@ class YDoc extends YModel {
   }
   _proxyChildren(node, childrenIds) {
     node.on("addChild", (child, newIndex) => {
-      if (this._transacting === false || child.internalMode !== "default") {
+      if (this._isSelfTransaction() || child.internalMode !== "default") {
         return;
       }
       this.transact(() => {
-        this._debug(`addChild ${child.id}`, child.name, newIndex);
+        const childId = child.id;
+        this._debug(`[addChild][${childId}]`, child.name, newIndex);
         this._proxyNode(child);
-        childrenIds.insert(newIndex, [child.id]);
+        childrenIds.insert(newIndex, [childId]);
       });
     });
     node.on("removeChild", (child, oldIndex) => {
-      if (this._transacting === false || child.internalMode !== "default") {
+      if (this._isSelfTransaction() || child.internalMode !== "default") {
         return;
       }
       this.transact(() => {
-        this._debug(`removeChild ${child.id}`, child.name, oldIndex);
-        const index = childrenIds.toJSON().indexOf(child.id);
+        const childId = child.id;
+        this._debug(`[removeChild][${childId}]`, child.name, oldIndex);
+        const index = childrenIds.toJSON().indexOf(childId);
         if (index > -1) {
           childrenIds.delete(index, 1);
         }
@@ -628,7 +634,6 @@ class YDoc extends YModel {
     const cachedChildrenIds = childrenIds.toArray();
     const observeFn = (event, transaction) => {
       const skip = this._isSelfTransaction(transaction);
-      this._debug(`yChildren ${node.id} changes skip:${skip}`, event.changes.delta);
       let retain = 0;
       event.changes.delta.forEach((action) => {
         if (action.retain !== void 0) {
@@ -636,6 +641,7 @@ class YDoc extends YModel {
         }
         if (action.delete) {
           if (!skip) {
+            const deleted = [];
             for (let i = retain; i < retain + action.delete; i++) {
               const id = cachedChildrenIds[i];
               if (!id) {
@@ -643,12 +649,17 @@ class YDoc extends YModel {
               }
               const child = this._nodeMap.get(id);
               if (child && child.parent?.equal(node) && child.getIndex() === i) {
-                this.transact(() => {
-                  child.remove();
-                  this._debug(`yChildren remove ${child.id}`, child.name, i);
-                }, false);
+                deleted.push(child);
+                this._debug(`[childrenIds][remove][${id}]`, i);
               }
             }
+            if (deleted.length > 0) {
+              this.transact(() => {
+                deleted.forEach((item) => {
+                  item.remove();
+                });
+              }, false);
+            }
           }
           cachedChildrenIds.splice(retain, action.delete);
         }
@@ -660,7 +671,7 @@ class YDoc extends YModel {
               const cb = (child2) => {
                 this.transact(() => {
                   node.moveChild(child2, retain + index);
-                  this._debug(`yChildren insert ${child2.id}`, child2.name, retain + index);
+                  this._debug(`[childrenIds][insert][${id}]`, retain + index);
                 }, false);
               };
               if (child) {
@@ -693,7 +704,7 @@ class YDoc extends YModel {
     }
     if (!yNode) {
       yNode = new Y.Map(Object.entries({
-        ...node.getProperties(),
+        ...node.offsetGetProperties(),
         id
       }));
       this._yChildren.set(id, yNode);
@@ -711,15 +722,10 @@ class YDoc extends YModel {
       node.on("parented", () => {
         yNode.set("parentId", node.parent?.id);
       });
-      node.on("destroy", () => {
-        this._nodeMap.delete(node.id);
-        this._yChildren.delete(node.id);
-        this._debug("destroy", node.id);
-      });
       this._proxyProps(node, yNode);
       let meta = yNode.get("meta");
       if (!meta || !(meta instanceof Y.Map)) {
-        meta = new Y.Map(Object.entries(node.meta.getProperties()));
+        meta = new Y.Map(Object.entries(node.meta.offsetGetProperties()));
         yNode.set("meta", meta);
       }
       this._proxyProps(node.meta, meta, true);
@@ -736,7 +742,7 @@ class YDoc extends YModel {
         ].forEach((key) => {
           let yMap = yNode.get(key);
           if (!yMap || !(yMap instanceof Y.Map)) {
-            yMap = new Y.Map(Object.entries(node[key].getProperties()));
+            yMap = new Y.Map(Object.entries(node[key].offsetGetProperties()));
             yNode.set(key, yMap);
           }
           this._proxyProps(node[key], yMap);
@@ -781,7 +787,7 @@ class Doc extends Node$1 {
     });
     this._localDb = _localDb;
     let id;
-    let _source = source;
+    let _source;
     if (typeof source === "string") {
       id = source;
     } else if (source) {
@@ -797,11 +803,14 @@ class Doc extends Node$1 {
       }
     }
     const _doc2 = new YDoc(id);
+    _doc2._yProps.set("id", this.id);
+    _doc2._yProps.set("name", this.name);
     _doc2.on(
       "update",
       throttle((update, origin) => this.emit("update", update, origin), 200)
     );
     _doc2.on("history", (um) => this.emit("history", um));
+    _doc2._proxyRoot(this);
     this._yDoc = _doc2;
     this._source = _source;
   }
@@ -816,20 +825,28 @@ class Doc extends Node$1 {
   redo = () => {
     this._yDoc.undoManager.redo();
   };
+  stopCapturing = () => {
+    this._yDoc.undoManager.stopCapturing();
+  };
+  clearHistory = () => {
+    this._yDoc.undoManager.clear();
+  };
   set = (source) => {
-    const { children = [], ..._props } = source;
-    const props = {
-      id: this.id,
-      name: this.name,
-      ..._props
-    };
+    const { children = [], ...props } = source;
+    const oldTransacting = this._yDoc._transacting;
+    this._yDoc.reset();
+    this._yDoc._transacting = true;
+    this.stopCapturing();
     this.resetProperties();
-    this._yDoc.proxyRoot(this, props);
+    this.removeChildren();
+    this.setProperties(props);
     this.append(children);
+    this._yDoc._transacting = oldTransacting;
     return this;
   };
-  async load() {
+  load = async () => {
     const source = this._source;
+    this._source = void 0;
     await this._yDoc.load(async () => {
       if (this._localDb) {
         try {
@@ -846,10 +863,19 @@ class Doc extends Node$1 {
         }
       }
     });
-  }
+  };
+  destroy = () => {
+    super.destroy();
+    this._yDoc.destroy();
+  };
 }
-const _0_context = defineMixin((editor) => {
-  const root = ref(new Doc());
+const _0_context = defineMixin((editor, options) => {
+  const root = ref(
+    new Doc(
+      options.localDb ? "doc" : void 0,
+      options.localDb
+    )
+  );
   const docLoading = ref(false);
   const fonts = markRaw(new Fonts());
   const camera = ref(new Camera2D({ internalMode: "front" }));
@@ -939,6 +965,7 @@ const _0_context = defineMixin((editor) => {
   }
   Object.assign(editor, {
     fonts,
+    assets,
     renderEngine,
     timeline,
     camera,
@@ -1005,6 +1032,7 @@ const _0_context = defineMixin((editor) => {
     onBeforeMount(() => {
       on("setDoc", onSetDoc);
       renderEngine.value.start();
+      root2.value.load();
     });
     onScopeDispose(() => {
       off("setDoc", onSetDoc);
@@ -1130,11 +1158,13 @@ const en = {
   "checkerboardStyle:grid": "Grid checkerboard",
   "checkerboardStyle:dot": "Dot checkerboard",
   "panels": "Panels",
-  "panels:layers": "Open layers panel",
-  "panels:timeline": "Open timeline panel",
-  "panels:statusbar": "Open statusbar panel",
-  "panels:nodeCreator": "Open node creator panel",
+  "panels:layers": "Open layers",
+  "panels:timeline": "Open timeline",
+  "panels:statusbar": "Open statusbar",
+  "panels:nodeCreator": "Open node creator",
+  "panels:memoryManager": "Open memory manager",
   "nodeCreator": "Create node",
+  "memoryManager": "Manage memory",
   "toolbelt": "Toolbelt",
   "msaa": "MSAA",
   "pixelate": "Pixelate",
@@ -1249,11 +1279,13 @@ const zhHans = {
   "checkerboardStyle:grid": "网格棋盘",
   "checkerboardStyle:dot": "点状棋盘",
   "panels": "面板",
-  "panels:layers": "打开图层面板",
-  "panels:statusbar": "打开状态栏面板",
-  "panels:timeline": "打开时间线面板",
-  "panels:nodeCreator": "打开节点创建面板",
+  "panels:layers": "打开图层",
+  "panels:statusbar": "打开状态栏",
+  "panels:timeline": "打开时间线",
+  "panels:nodeCreator": "打开节点创建",
+  "panels:memoryManager": "打开内存管理",
   "nodeCreator": "创建节点",
+  "memoryManager": "管理内存",
   "toolbelt": "工具腰带",
   "msaa": "抗锯齿",
   "pixelate": "像素化",
@@ -1418,7 +1450,8 @@ function createShapeElement(shape, fill, outline) {
     fill,
     outline,
     meta: {
-      inPptIs: "Shape"
+      inPptIs: "Shape",
+      inCanvasIs: "Element2D"
     }
   };
 }
@@ -1432,7 +1465,8 @@ function createTextElement(content, style) {
     },
     text: { content: normalizeTextContent(content) },
     meta: {
-      inPptIs: "Shape"
+      inPptIs: "Shape",
+      inCanvasIs: "Element2D"
     }
   };
 }
@@ -1444,6 +1478,7 @@ async function createImageElement(image) {
     foreground: { image },
     meta: {
       inPptIs: "Picture",
+      inCanvasIs: "Element2D",
       lockAspectRatio: true
     }
   };
@@ -1710,7 +1745,9 @@ const _1_hotkey = defineMixin((editor) => {
   const {
     registerConfig
   } = editor;
-  const hotkeysData = registerConfig("hotkeys", []);
+  const hotkeysData = registerConfig("hotkeys", {
+    default: () => []
+  });
   const hotkeys = reactive(/* @__PURE__ */ new Map());
   function registerHotkey(value) {
     if (Array.isArray(value)) {
@@ -1923,6 +1960,7 @@ const _1_timeline = defineMixin((editor) => {
   });
   return () => {
     const {
+      assets: assets2,
       on,
       off
     } = editor;
@@ -1932,11 +1970,11 @@ const _1_timeline = defineMixin((editor) => {
     }
     onBeforeMount(() => {
       on("setDoc", updateEndTime);
-      assets.on("loaded", updateEndTime);
+      assets2.on("loaded", updateEndTime);
     });
     onScopeDispose(() => {
       off("setDoc", updateEndTime);
-      assets.off("loaded", updateEndTime);
+      assets2.off("loaded", updateEndTime);
     });
   };
 });
@@ -1974,7 +2012,7 @@ const _2_box = defineMixin((editor) => {
     let flag = false;
     element.children.forEach((child) => {
       if (isElement(child)) {
-        const { min: _min, max: _max } = child.aabb.toMinmax();
+        const { min: _min, max: _max } = child.aabb;
         min.x = Math.min(min.x, _min.x);
         min.y = Math.min(min.y, _min.y);
         max.x = Math.max(max.x, _max.x);
@@ -3498,15 +3536,14 @@ const _4_3_element = defineMixin((editor) => {
     const isArray = Array.isArray(value);
     let offsetIndex = index;
     const elements = root.value.transact(() => {
-      const parentId = parent?.id;
       const index2 = offsetIndex;
       const values = isArray ? value : [value];
       const elements2 = values.map((data) => {
-        let parent2;
-        if (parentId && parentId !== root.value.id) {
-          parent2 = root.value._yDoc._nodeMap.get(parentId) ?? root.value;
+        let _parent;
+        if (parent && parent.id !== root.value.id) {
+          _parent = parent;
         } else {
-          parent2 = root.value;
+          _parent = root.value;
         }
         const value2 = {
           ...data,
@@ -3520,9 +3557,9 @@ const _4_3_element = defineMixin((editor) => {
         }
         const el = reactive(Node$1.parse(value2));
         if (index2 === void 0) {
-          parent2.appendChild(el);
+          _parent.appendChild(el);
         } else {
-          parent2.moveChild(el, index2);
+          _parent.moveChild(el, index2);
         }
         if (offsetIndex !== void 0) {
           offsetIndex++;
@@ -3809,7 +3846,7 @@ const _snapshot = defineMixin((editor) => {
     fonts,
     registerConfig
   } = editor;
-  registerConfig("frameScreenshot", false);
+  registerConfig("frameScreenshot", { default: false });
   async function snapshot() {
     frameThumbs.value = frames.value.map(() => ({
       instanceId: -1,
@@ -4113,7 +4150,8 @@ const _autoNest = definePlugin((editor) => {
     frames,
     isFrameNode,
     exec,
-    root
+    root,
+    elementSelection
   } = editor;
   let startContext = {};
   function nestIntoFrame(el, options) {
@@ -4162,12 +4200,12 @@ const _autoNest = definePlugin((editor) => {
       { command: "nestIntoFrame", handle: nestIntoFrame }
     ],
     events: {
-      selectionTransformStart: ({ handle, startEvent, elements }) => {
+      selectionTransformStart: ({ handle, startEvent }) => {
         if (handle === "move" && !startEvent?.__FROM__) {
           const pointer = getGlobalPointer();
           const startFrame = frames.value.find((frame) => frame.globalAabb.contains(pointer));
           const idSet = /* @__PURE__ */ new Set();
-          elements.forEach((el) => {
+          elementSelection.value.forEach((el) => {
             const frame = isFrameNode(el, true) ? el : el.findAncestor((v) => isFrameNode(v, true));
             if (frame) {
               if (frame.equal(startFrame)) {
@@ -4179,7 +4217,7 @@ const _autoNest = definePlugin((editor) => {
           });
           if (idSet.size === 1) {
             const ctx = {};
-            elements.forEach((el) => {
+            elementSelection.value.forEach((el) => {
               ctx[el.instanceId] = {
                 parent: el.getParent(),
                 index: el.getIndex()
@@ -4189,11 +4227,11 @@ const _autoNest = definePlugin((editor) => {
           }
         }
       },
-      selectionTransform: ({ handle, startEvent, elements }) => {
+      selectionTransform: ({ handle, startEvent }) => {
         if (handle === "move" && !startEvent?.__FROM__) {
           if (Object.keys(startContext).length > 0) {
-            const excluded = new Set(elements.map((el) => el.instanceId));
-            elements.forEach((el) => {
+            const excluded = new Set(elementSelection.value.map((el) => el.instanceId));
+            elementSelection.value.forEach((el) => {
               nestIntoFrame(
                 el,
                 {
@@ -4245,19 +4283,33 @@ const _doc = definePlugin((editor, options) => {
     renderEngine,
     config,
     to,
-    waitUntilFontLoad
+    waitUntilFontLoad,
+    fonts
   } = editor;
   const getDoc = () => {
     return to("json");
   };
   const setDoc = async (source) => {
+    fonts.clear();
     const oldRoot = root.value;
     const _root = new Doc(source, config.value.localDb);
-    await _root.load();
+    oldRoot.findOne((node) => {
+      if (node instanceof Element2D) {
+        node.foreground.texture?.destroy();
+        node.foreground.animatedTexture?.destroy();
+        node.fill.texture?.destroy();
+        node.fill.animatedTexture?.destroy();
+        node.background.texture?.destroy();
+        node.background.animatedTexture?.destroy();
+      }
+      return false;
+    });
+    root.value = _root;
     oldRoot.remove();
+    await _root.load();
     renderEngine.value.root.append(_root);
-    root.value = _root;
     emit("setDoc", _root, oldRoot);
+    oldRoot.destroy();
     return _root;
   };
   const loadDoc = async (source) => {
@@ -4296,11 +4348,11 @@ const _doc = definePlugin((editor, options) => {
     }
   };
 });
-const _hoisted_1$r = {
+const _hoisted_1$s = {
   key: 0,
   class: "mce-drawing__tip"
 };
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "Drawing",
   setup(__props) {
     const {
@@ -4318,7 +4370,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           top: `${unref(drawboardPointer).y}px`
         })
       }, [
-        unref(activeDrawingTool)?.name ? (openBlock(), createElementBlock("div", _hoisted_1$r, toDisplayString(unref(t)(unref(activeDrawingTool).name)), 1)) : createCommentVNode("", true)
+        unref(activeDrawingTool)?.name ? (openBlock(), createElementBlock("div", _hoisted_1$s, toDisplayString(unref(t)(unref(activeDrawingTool).name)), 1)) : createCommentVNode("", true)
       ], 4)) : createCommentVNode("", true);
     };
   }
@@ -4333,7 +4385,7 @@ const _drawingTool = definePlugin((editor) => {
       { command: "setActiveDrawingTool", handle: (val) => setActiveDrawingTool(val) }
     ],
     components: [
-      { name: "drawing", type: "overlay", component: _sfc_main$E }
+      { name: "drawing", type: "overlay", component: _sfc_main$F }
     ]
   };
 });
@@ -4689,7 +4741,7 @@ const ComponentIcon = defineComponent({
     };
   }
 });
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "Icon",
   props: {
     disabled: Boolean,
@@ -5314,13 +5366,7 @@ const defaultActiveStrategy = (context) => {
   return element.findAncestor(cb);
 };
 const defaultDoubleclickStrategy = (context) => {
-  const { editor } = context;
-  const { elementSelection } = editor;
-  const element = elementSelection.value[0];
-  if (element && !element.meta.lock) {
-    return element.foreground.isValid() ? void 0 : "typing";
-  }
-  return void 0;
+  context.editor.exec("enter");
 };
 const defaultHoverStrategy = (context) => {
   const { element, editor } = context;
@@ -5346,7 +5392,7 @@ const defaultHoverStrategy = (context) => {
   }
   return element.findAncestor(cb);
 };
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "Frame",
   props: {
     "modelValue": { required: true },
@@ -5421,17 +5467,17 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$q = { class: "mce-frames" };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _hoisted_1$r = { class: "mce-frames" };
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "Frames",
   setup(__props) {
     const {
       frames
     } = useEditor();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$q, [
+      return openBlock(), createElementBlock("div", _hoisted_1$r, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(frames), (frame, key) => {
-          return openBlock(), createBlock(_sfc_main$C, {
+          return openBlock(), createBlock(_sfc_main$D, {
             key,
             "model-value": frame
           }, null, 8, ["model-value"]);
@@ -5491,17 +5537,18 @@ const _frame = definePlugin((editor) => {
       { command: "setActiveDrawingTool:frame", key: "F" }
     ],
     components: [
-      { type: "overlay", component: _sfc_main$B, order: "before" }
+      { type: "overlay", component: _sfc_main$C, order: "before" }
     ]
   };
 });
 const _gif = definePlugin((editor, options) => {
   const {
+    assets: assets2,
     fonts,
     to
   } = editor;
   const gifWorkerUrl = options.gifWorkerUrl;
-  assets.gifWorkerUrl = gifWorkerUrl;
+  assets2.gifWorkerUrl = gifWorkerUrl;
   return {
     name: "mce:gif",
     exporters: [
@@ -5573,8 +5620,8 @@ const _history = definePlugin((editor) => {
     }
   };
 });
-const _hoisted_1$p = ["data-name"];
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _hoisted_1$q = ["data-name"];
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "Hover",
   setup(__props) {
     const {
@@ -5595,7 +5642,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           borderRadius: `${(unref(hoverElement).style.borderRadius ?? 0) * unref(camera).zoom.x}px`,
           ...hoverElementObb.value.toCssStyle()
         })
-      }, null, 12, _hoisted_1$p)) : createCommentVNode("", true);
+      }, null, 12, _hoisted_1$q)) : createCommentVNode("", true);
     };
   }
 });
@@ -5603,7 +5650,7 @@ const _hover = definePlugin(() => {
   return {
     name: "mce:hover",
     components: [
-      { type: "overlay", component: _sfc_main$A, order: "before" }
+      { type: "overlay", component: _sfc_main$B, order: "before" }
     ]
   };
 });
@@ -5885,7 +5932,7 @@ const _json = definePlugin((editor) => {
     ]
   };
 });
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "Btn",
   props: {
     active: { type: Boolean },
@@ -5904,10 +5951,10 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$o = ["data-id"];
+const _hoisted_1$p = ["data-id"];
 const _hoisted_2$d = { class: "mce-layer__content" };
 const _hoisted_3$b = { class: "mce-layer__prepend" };
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceLayer",
     inheritAttrs: false
@@ -6131,7 +6178,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           _cache[6] || (_cache[6] = createElementVNode("span", { class: "mce-layer__overlay" }, null, -1)),
           createElementVNode("div", _hoisted_2$d, [
             createElementVNode("div", _hoisted_3$b, [
-              childrenLength.value ? (openBlock(), createBlock(unref(_sfc_main$D), {
+              childrenLength.value ? (openBlock(), createBlock(unref(_sfc_main$E), {
                 key: 0,
                 class: "mce-layer__arrow",
                 icon: "$arrowRight",
@@ -6144,7 +6191,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
               class: "mce-layer__thumbnail",
               onDblclick: onDblclickThumbnail
             }, [
-              createVNode(unref(_sfc_main$D), { icon: thumbnailIcon.value }, null, 8, ["icon"])
+              createVNode(unref(_sfc_main$E), { icon: thumbnailIcon.value }, null, 8, ["icon"])
             ], 32),
             createElementVNode("div", {
               class: "mce-layer__name",
@@ -6177,7 +6224,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
               }])
             }, [
               props.root ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                Array.from(unref(openedItems).values()).filter((v) => v.value).length > 1 ? (openBlock(), createBlock(_sfc_main$z, {
+                Array.from(unref(openedItems).values()).filter((v) => v.value).length > 1 ? (openBlock(), createBlock(_sfc_main$A, {
                   key: 0,
                   icon: "",
                   class: "mce-layer__btn mce-layer__btn--show",
@@ -6188,12 +6235,12 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                   }), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$D), { icon: "$collapse" })
+                    createVNode(unref(_sfc_main$E), { icon: "$collapse" })
                   ]),
                   _: 1
                 })) : createCommentVNode("", true)
               ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                createVNode(_sfc_main$z, {
+                createVNode(_sfc_main$A, {
                   icon: "",
                   class: normalizeClass(["mce-layer__btn", {
                     "mce-layer__btn--show": unref(isLock)(props.node)
@@ -6201,13 +6248,13 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                   onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(setLock)(props.node, !unref(isLock)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$D), {
+                    createVNode(unref(_sfc_main$E), {
                       icon: unref(isLock)(props.node) ? "$lock" : "$unlock"
                     }, null, 8, ["icon"])
                   ]),
                   _: 1
                 }, 8, ["class"]),
-                createVNode(_sfc_main$z, {
+                createVNode(_sfc_main$A, {
                   icon: "",
                   class: normalizeClass(["mce-layer__btn", {
                     "mce-layer__btn--show": !unref(isVisible)(props.node)
@@ -6215,7 +6262,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                   onClick: _cache[4] || (_cache[4] = withModifiers(($event) => unref(setVisible)(props.node, !unref(isVisible)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$D), {
+                    createVNode(unref(_sfc_main$E), {
                       icon: unref(isVisible)(props.node) ? "$visible" : "$unvisible"
                     }, null, 8, ["icon"])
                   ]),
@@ -6224,7 +6271,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
               ], 64))
             ], 2)
           ])
-        ], 46, _hoisted_1$o),
+        ], 46, _hoisted_1$p),
         opened.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(childrenLength.value, (i) => {
           return openBlock(), createBlock(_component_MceLayer, {
             key: i,
@@ -6237,9 +6284,9 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$n = { class: "mce-layers" };
+const _hoisted_1$o = { class: "mce-layers" };
 const _hoisted_2$c = { class: "mce-layers__wrapper" };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "Layers",
   setup(__props) {
     const {
@@ -6283,9 +6330,9 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       layerScrollIntoView();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$n, [
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
         createElementVNode("div", _hoisted_2$c, [
-          createVNode(_sfc_main$y, {
+          createVNode(_sfc_main$z, {
             root: true,
             node: unref(root),
             opened: true
@@ -6299,7 +6346,7 @@ const _layers = definePlugin(() => {
   return {
     name: "mce:layers",
     components: [
-      { name: "layers", type: "panel", position: "float", component: _sfc_main$x }
+      { name: "layers", type: "panel", position: "float", component: _sfc_main$y }
     ]
   };
 });
@@ -6310,25 +6357,25 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$w = {};
-const _hoisted_1$m = {
+const _sfc_main$x = {};
+const _hoisted_1$n = {
   class: "mce-made-with",
   href: "https://github.com/qq15725/mce",
   target: "_blank"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("a", _hoisted_1$m, [..._cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("a", _hoisted_1$n, [..._cache[0] || (_cache[0] = [
     createElementVNode("div", null, "MADE WITH", -1),
     createElementVNode("div", null, "MCE", -1)
   ])]);
 }
-const MadeWith = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render]]);
+const MadeWith = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render]]);
 const _madeWith = definePlugin((editor) => {
   const {
     config,
     registerConfig
   } = editor;
-  registerConfig("madeWith", false);
+  registerConfig("madeWith", { default: false });
   return {
     name: "mce:madeWith",
     components: [
@@ -6340,6 +6387,57 @@ const _madeWith = definePlugin((editor) => {
     ]
   };
 });
+const _hoisted_1$m = { class: "mce-manage-memory" };
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
+  __name: "MemoryManager",
+  setup(__props) {
+    const used = ref(0);
+    const total = ref(0);
+    function humanBytes(bytes) {
+      if (!bytes)
+        return "";
+      const num = 1024;
+      if (bytes < num)
+        return `${bytes}B`;
+      if (bytes < num ** 2)
+        return `${(bytes / num).toFixed(2)}KB`;
+      if (bytes < num ** 3)
+        return `${(bytes / num ** 2).toFixed(2)}MB`;
+      if (bytes < num ** 4)
+        return `${(bytes / num ** 3).toFixed(2)}G`;
+      return `${(bytes / num ** 4).toFixed(2)}T`;
+    }
+    async function update() {
+      const performance2 = window.performance;
+      if ("memory" in performance2) {
+        const memory = performance2.memory;
+        used.value = memory.usedJSHeapSize;
+        total.value = memory.totalJSHeapSize;
+      }
+    }
+    let timer;
+    onBeforeMount(() => {
+      const request = requestIdleCallback || requestAnimationFrame;
+      request(update);
+      timer = setInterval(() => request(update), 2e3);
+    });
+    onBeforeUnmount(() => timer && clearInterval(timer));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+        _cache[0] || (_cache[0] = createElementVNode("div", null, "Total memory used", -1)),
+        createElementVNode("div", null, toDisplayString(humanBytes(used.value)), 1)
+      ]);
+    };
+  }
+});
+const _memory = definePlugin(() => {
+  return {
+    name: "mce:memory",
+    components: [
+      { type: "panel", position: "float", name: "memoryManager", component: _sfc_main$w }
+    ]
+  };
+});
 const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -6615,7 +6713,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                     onClick: (e) => onClickItem(item, index, e)
                   }, [
                     hasPrepend.value ? (openBlock(), createElementBlock("div", _hoisted_3$a, [
-                      item.checked ? (openBlock(), createBlock(unref(_sfc_main$D), {
+                      item.checked ? (openBlock(), createBlock(unref(_sfc_main$E), {
                         key: 0,
                         icon: "$check"
                       })) : createCommentVNode("", true)
@@ -6633,7 +6731,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                     ])) : createCommentVNode("", true),
                     item.children?.length || _ctx.$slots.append ? (openBlock(), createElementBlock("div", _hoisted_7$3, [
                       renderSlot(_ctx.$slots, "append", { item }),
-                      item.children?.length ? (openBlock(), createBlock(unref(_sfc_main$D), {
+                      item.children?.length ? (openBlock(), createBlock(unref(_sfc_main$E), {
                         key: 0,
                         icon: "$arrowRight"
                       })) : createCommentVNode("", true)
@@ -7226,13 +7324,13 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         createElementVNode("div", _hoisted_3$9, [
-          createVNode(_sfc_main$z, { onClick: cancel }, {
+          createVNode(_sfc_main$A, { onClick: cancel }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(unref(t)("cancel")), 1)
             ]),
             _: 1
           }),
-          createVNode(_sfc_main$z, { onClick: create }, {
+          createVNode(_sfc_main$A, { onClick: create }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(unref(t)("create")), 1)
             ]),
@@ -7248,7 +7346,7 @@ const _node = definePlugin((editor) => {
     registerConfig,
     config
   } = editor;
-  registerConfig("nodeCreator", false);
+  registerConfig("nodeCreator", { default: false });
   return {
     name: "mce:node",
     components: [
@@ -11474,7 +11572,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     inheritAttrs: false
   },
   __name: "Ruler",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     size: { default: 16 },
     vertical: { type: Boolean },
     zoom: { default: 1 },
@@ -11485,8 +11583,16 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     pixelRatio: { default: window.devicePixelRatio || 1 },
     refline: { type: Boolean },
     axis: { type: Boolean },
+    borderColor: {},
+    textColor: {},
+    lineColor: {},
+    locked: { type: Boolean },
     labelFormat: { type: Function, default: (tick) => String(tick) }
-  },
+  }, {
+    "modelValue": { default: () => [] },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
     const props = __props;
     const attrs = useAttrs();
@@ -11501,6 +11607,9 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       text: "#000",
       border: "#000"
     });
+    const borderColor = computed(() => props.borderColor ?? colors.border);
+    const textColor = computed(() => props.textColor ?? colors.text);
+    const lineColor = computed(() => props.lineColor ?? "rgb(var(--mce-theme-primary))");
     function drawSelected() {
       if (!props.selected?.width || !props.selected?.height)
         return;
@@ -11568,6 +11677,15 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     function pxToNum(px) {
       return Math.round((px + props.position) / props.zoom);
     }
+    const renderTransfer = "transferToImageBitmap" in offscreenCanvas ? (cvs) => {
+      cvs.getContext("bitmaprenderer").transferFromImageBitmap(offscreenCanvas.transferToImageBitmap());
+    } : (cvs) => {
+      const ctx2 = cvs.getContext("2d");
+      if (ctx2) {
+        ctx2.clearRect(0, 0, cvs.width, cvs.height);
+        ctx2.drawImage(offscreenCanvas, 0, 0);
+      }
+    };
     function render2() {
       const cvs = canvas.value;
       if (!cvs || !offscreenCanvas.width || !offscreenCanvas.height)
@@ -11586,7 +11704,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           [0, props.size],
           [props.vertical ? cvs.height : cvs.width, props.size],
           2,
-          colors.border
+          borderColor.value
         );
       }
       const drawPrimary = (tick, label) => {
@@ -11598,8 +11716,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       inc = (inc > 0 ? 1 : -1) * Math.max(1, Math.abs(inc));
       ctx.beginPath();
       ctx.lineWidth = 1;
-      ctx.strokeStyle = colors.text;
-      ctx.fillStyle = colors.text;
+      ctx.strokeStyle = textColor.value;
+      ctx.fillStyle = textColor.value;
       for (let tick = start.value; tick <= end.value; tick += inc) {
         if (tick % unit.value === 0) {
           drawPrimary(numToPx(tick), props.labelFormat(tick));
@@ -11608,7 +11726,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       ctx.stroke();
       ctx.beginPath();
       ctx.lineWidth = 1;
-      ctx.strokeStyle = colors.border;
+      ctx.strokeStyle = borderColor.value;
       for (let tick = start.value; tick <= end.value; tick += inc) {
         if (tick % unit.value === 0) ;
         else if (tick % inc === 0) {
@@ -11617,18 +11735,10 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       }
       ctx.stroke();
       ctx.restore();
-      if ("transferToImageBitmap" in offscreenCanvas) {
-        cvs.getContext("bitmaprenderer").transferFromImageBitmap(offscreenCanvas.transferToImageBitmap());
-      } else {
-        const mainCtx = cvs.getContext("2d");
-        if (mainCtx) {
-          mainCtx.clearRect(0, 0, cvs.width, cvs.height);
-          mainCtx.drawImage(offscreenCanvas, 0, 0);
-        }
-      }
+      renderTransfer(cvs);
     }
     watch(
-      [canvas, () => props.zoom, () => props.position, () => props.selected],
+      [canvas, () => props.zoom, () => props.position, () => props.selected, () => borderColor.value, () => textColor.value],
       () => {
         render2();
       },
@@ -11658,7 +11768,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       offscreenCanvas.width = 0;
       offscreenCanvas.height = 0;
     });
-    const savedLines = ref([]);
+    const savedLines = useModel(__props, "modelValue");
     const tempLine = ref();
     const lines = computed(() => {
       const res = [...savedLines.value];
@@ -11690,9 +11800,15 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       tipText.value = void 0;
     }
     function onReflineDblclick(index) {
+      if (props.locked) {
+        return;
+      }
       savedLines.value.splice(index, 1);
     }
     function onReflineMousedown(e, index) {
+      if (props.locked) {
+        return;
+      }
       e.stopPropagation();
       e.preventDefault();
       const move = (e2) => {
@@ -11735,13 +11851,15 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             class: normalizeClass(["mce-ruler-refline", {
               "mce-ruler-refline--vertical": props.vertical,
               "mce-ruler-refline--horizontal": !props.vertical,
-              "mce-ruler-refline--temp": item === tempLine.value
+              "mce-ruler-refline--temp": item === tempLine.value,
+              "mce-ruler-refline--locked": props.locked
             }]),
             style: normalizeStyle$1({
               [props.vertical ? "height" : "width"]: "0",
               [props.vertical ? "width" : "height"]: "100%",
               [props.vertical ? "top" : "left"]: `${numToPx(item)}px`,
-              [props.vertical ? "left" : "top"]: 0
+              [props.vertical ? "left" : "top"]: 0,
+              "--line-color": lineColor.value
             }),
             onDblclick: ($event) => onReflineDblclick(index),
             onMousedown: ($event) => onReflineMousedown($event, index),
@@ -11766,48 +11884,86 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
 const _hoisted_1$h = { class: "mce-rulers" };
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "Rulers",
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const {
       camera,
-      selectionAabbInDrawboard
+      selectionAabbInDrawboard,
+      config
     } = useEditor();
+    const hLines = ref([]);
+    const vLines = ref([]);
+    function clean() {
+      hLines.value = [];
+      vLines.value = [];
+    }
+    __expose({
+      clean
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$h, [
         createVNode(_sfc_main$q, {
+          modelValue: hLines.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => hLines.value = $event),
           refline: "",
           zoom: unref(camera).zoom.x,
           position: unref(camera).position.x,
           selected: unref(selectionAabbInDrawboard),
           axis: "",
-          size: 16
-        }, null, 8, ["zoom", "position", "selected"]),
+          size: 16,
+          "line-color": unref(config).ruler.lineColor,
+          locked: unref(config).ruler.locked
+        }, null, 8, ["modelValue", "zoom", "position", "selected", "line-color", "locked"]),
         createVNode(_sfc_main$q, {
+          modelValue: vLines.value,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vLines.value = $event),
           refline: "",
           zoom: unref(camera).zoom.y,
           position: unref(camera).position.y,
           selected: unref(selectionAabbInDrawboard),
           axis: "",
           vertical: "",
-          size: 16
-        }, null, 8, ["zoom", "position", "selected"]),
-        _cache[0] || (_cache[0] = createElementVNode("div", { class: "mce-rulers__left-top" }, null, -1))
+          size: 16,
+          "line-color": unref(config).ruler.lineColor,
+          locked: unref(config).ruler.locked
+        }, null, 8, ["modelValue", "zoom", "position", "selected", "line-color", "locked"]),
+        _cache[2] || (_cache[2] = createElementVNode("div", { class: "mce-rulers__left-top" }, null, -1))
       ]);
     };
   }
 });
 const _ruler = definePlugin((editor) => {
   const {
-    config,
-    registerConfig
+    registerConfig,
+    componentRefs
   } = editor;
-  registerConfig("ruler", false);
+  const defaultConfig = (visible = true) => ({
+    visible,
+    adsorbed: false,
+    locked: false
+  });
+  const ruler = registerConfig("ruler", {
+    setter: (val) => {
+      if (typeof val === "boolean") {
+        return defaultConfig(val);
+      }
+      return val;
+    },
+    default: () => defaultConfig()
+  });
+  const name = "mce:ruler";
+  function clearRulerLines() {
+    componentRefs.value[name].forEach((com) => com?.clean());
+  }
   return {
-    name: "mce:ruler",
+    name,
+    commands: [
+      { command: "clearRulerLines", handle: clearRulerLines }
+    ],
     components: [
       {
         type: "overlay",
         component: _sfc_main$p,
-        ignore: () => !config.value.ruler,
+        ignore: () => !ruler.value.visible,
         order: "after"
       }
     ]
@@ -11997,7 +12153,7 @@ const _scroll = definePlugin((editor) => {
     screenCenter,
     screenCenterOffset
   } = editor;
-  registerConfig("scrollbar", false);
+  registerConfig("scrollbar", { default: false });
   const scrollTo = async (target, options = {}) => {
     const {
       intoView,
@@ -12148,7 +12304,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         class: "mce-scroll-to-selection",
         onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(exec)("scrollToSelection", { behavior: "smooth" }), ["prevent"]))
       }, [
-        createVNode(unref(_sfc_main$D), { icon: "$gps" }),
+        createVNode(unref(_sfc_main$E), { icon: "$gps" }),
         createElementVNode("span", null, toDisplayString(unref(t)("scrollToSelection")), 1)
       ])) : createCommentVNode("", true);
     };
@@ -12411,17 +12567,20 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         height: props.initialSize && !height ? void 0 : `${height}px`
       };
     });
+    const DEG_TO_RAD2 = Math.PI / 180;
     const style = computed(() => {
       const { left = 0, top = 0, rotate = 0 } = model.value;
-      const radian = rotate * Math.PI / 180;
-      const cos = Math.cos(radian);
-      const sin = Math.sin(radian);
+      const rad = rotate * DEG_TO_RAD2;
+      const cos = Math.cos(rad);
+      const sin = Math.sin(rad);
       return {
         ...sizeStyle.value,
         transform: `matrix(${cos}, ${sin}, ${-sin}, ${cos}, ${left}, ${top})`
       };
     });
-    const tip = computed(() => typeof props.tip === "string" ? props.tip : props.tip?.("size"));
+    const tip = computed(() => {
+      return typeof props.tip === "string" ? props.tip : props.tip?.("size");
+    });
     function start(event, index) {
       if (event && event.button !== void 0 && event.button !== 0) {
         return false;
@@ -12467,7 +12626,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       const startAngle = Math.atan2(
         rotatedStartPoint.y - centerPoint.y,
         rotatedStartPoint.x - centerPoint.x
-      ) / (Math.PI / 180);
+      ) / DEG_TO_RAD2;
       let startClientPoint = event ? { x: event.clientX, y: event.clientY } : void 0;
       function startTransform() {
         transforming.value = true;
@@ -12505,7 +12664,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             const endAngle = Math.atan2(
               rotatedCurrentPoint.y - centerPoint.y,
               rotatedCurrentPoint.x - centerPoint.x
-            ) / (Math.PI / 180);
+            ) / DEG_TO_RAD2;
             updated.rotate = rotate + endAngle - startAngle;
           }
         } else if (isRound) {
@@ -12618,10 +12777,10 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       }
       return `url("data:image/svg+xml,${create(model.value.rotate ?? 0)}") 16 16, pointer`;
     }
-    function rotatePoint2(point, origin, angle) {
-      const radian = angle * Math.PI / 180;
-      const cos = Math.cos(radian);
-      const sin = Math.sin(radian);
+    function rotatePoint2(point, origin, deg) {
+      const rad = deg * DEG_TO_RAD2;
+      const cos = Math.cos(rad);
+      const sin = Math.sin(rad);
       return {
         x: (point.x - origin.x) * cos - (point.y - origin.y) * sin + origin.x,
         y: (point.x - origin.x) * sin + (point.y - origin.y) * cos + origin.y
@@ -12899,30 +13058,31 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         internalValue.value = { left, top, right, bottom };
       }
     });
+    function setScale(value) {
+      const { sx: oldSx, sy: oldSy } = inverseMat.value;
+      const { left: oldLeft, top: oldTop, right: oldRight, bottom: oldBottom } = internalValue.value;
+      const oldViewWidth = 1 - oldLeft - oldRight;
+      const oldViewHeight = 1 - oldTop - oldBottom;
+      const centerX = oldLeft + oldViewWidth * 0.5;
+      const centerY = oldTop + oldViewHeight * 0.5;
+      const newSx = value;
+      const newSy = value * (oldSy / oldSx);
+      const newViewWidth = 1 / newSx;
+      const newViewHeight = 1 / newSy;
+      const newLeft = centerX - newViewWidth * 0.5;
+      const newTop = centerY - newViewHeight * 0.5;
+      const newRight = 1 - newViewWidth - newLeft;
+      const newBottom = 1 - newViewHeight - newTop;
+      internalValue.value = {
+        left: newLeft,
+        top: newTop,
+        right: newRight,
+        bottom: newBottom
+      };
+    }
     const scale = computed({
       get: () => inverseMat.value.sx,
-      set: (value) => {
-        const { sx: oldSx, sy: oldSy } = inverseMat.value;
-        const { left: oldLeft, top: oldTop, right: oldRight, bottom: oldBottom } = internalValue.value;
-        const oldViewWidth = 1 - oldLeft - oldRight;
-        const oldViewHeight = 1 - oldTop - oldBottom;
-        const centerX = oldLeft + oldViewWidth * 0.5;
-        const centerY = oldTop + oldViewHeight * 0.5;
-        const newSx = value;
-        const newSy = value * (oldSy / oldSx);
-        const newViewWidth = 1 / newSx;
-        const newViewHeight = 1 / newSy;
-        const newLeft = centerX - newViewWidth * 0.5;
-        const newTop = centerY - newViewHeight * 0.5;
-        const newRight = 1 - newViewWidth - newLeft;
-        const newBottom = 1 - newViewHeight - newTop;
-        internalValue.value = {
-          left: newLeft,
-          top: newTop,
-          right: newRight,
-          bottom: newBottom
-        };
-      }
+      set: setScale
     });
     function ok() {
       emit("end");
@@ -13001,6 +13161,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         }, 8, ["modelValue"]),
         renderSlot(_ctx.$slots, "default", {
           scale: scale.value,
+          setScale,
           ok,
           cancel,
           setAspectRatio
@@ -13058,8 +13219,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const {
       emit,
       isElement,
+      exec,
       state,
-      resizeElement,
       selection,
       selectionMarquee,
       elementSelection,
@@ -13067,26 +13228,23 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       selectionObbInDrawboard,
       camera,
       getObb,
-      getAabb,
       registerCommand,
       unregisterCommand,
-      inEditorIs,
       isLock,
       config,
-      snapThreshold,
-      getSnapPoints,
-      hoverElement,
-      selectionAabb
+      hoverElement
     } = useEditor();
     const transformControls = useTemplateRef("transformControlsTpl");
     const startEvent = ref();
     const resizeStrategy = computed(() => {
-      const first = elementSelection.value[0];
-      if (first) {
-        if (first.text.isValid()) {
-          return "lockAspectRatioDiagonal";
+      if (elementSelection.value.length === 1) {
+        const el = elementSelection.value[0];
+        if (el) {
+          if (el.text.isValid()) {
+            return "lockAspectRatioDiagonal";
+          }
+          return defaultResizeStrategy(el);
         }
-        return defaultResizeStrategy(first);
       }
       return void 0;
     });
@@ -13127,44 +13285,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         };
       });
     });
-    function snap(currentPos, type) {
-      const points = getSnapPoints();
-      let closest;
-      let minDist = Infinity;
-      for (const pt of points[type]) {
-        const dist = pt - currentPos;
-        const absDist = Math.abs(dist);
-        if (absDist < minDist) {
-          minDist = absDist;
-          closest = pt;
-        }
-      }
-      if (minDist < snapThreshold.value) {
-        currentPos = closest ?? currentPos;
-      }
-      return currentPos;
-    }
     function createTransformContext() {
       return {
         startEvent: startEvent.value,
-        handle: transformControls.value?.activeHandle ?? "move",
-        elements: elementSelection.value
+        handle: transformControls.value?.activeHandle ?? "move"
       };
     }
-    const startContext = {
-      rotate: 0,
-      offsetMap: {}
-    };
     function onStart() {
-      startContext.rotate = 0;
-      const aabb = selectionAabb.value;
-      elementSelection.value.forEach((el) => {
-        const elAabb = el.globalAabb;
-        startContext.offsetMap[el.instanceId] = {
-          x: (elAabb.x - aabb.x) / aabb.width,
-          y: (elAabb.y - aabb.y) / aabb.height
-        };
-      });
       emit("selectionTransformStart", createTransformContext());
     }
     function onMove() {
@@ -13179,80 +13306,12 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       emit("selectionTransformEnd", createTransformContext());
     }
     const transform = computed({
-      get: () => {
-        const { left, top, width, height, rotationDegrees } = selectionObb.value;
-        return {
-          left,
-          top,
-          width,
-          height,
-          rotate: rotationDegrees,
-          borderRadius: elementSelection.value[0]?.style.borderRadius ?? 0
-        };
-      },
+      get: () => exec("getTransformValue"),
       set: (value) => {
-        const oldTransform = transform.value;
-        const handle = transformControls.value?.activeHandle ?? "move";
-        if (handle === "move") {
-          value.left = snap(Math.round(value.left), "x");
-          value.top = snap(Math.round(value.top), "y");
-        }
-        const offsetStyle = {
-          left: value.left - oldTransform.left,
-          top: value.top - oldTransform.top,
-          width: value.width - oldTransform.width,
-          height: value.height - oldTransform.height,
-          rotate: value.rotate - oldTransform.rotate,
-          borderRadius: value.borderRadius - oldTransform.borderRadius
-        };
-        const els = elementSelection.value;
-        if (els.length > 1) {
-          if (handle.startsWith("rotate")) {
-            offsetStyle.rotate = value.rotate - startContext.rotate;
-            startContext.rotate += offsetStyle.rotate;
-          }
-        }
-        els.forEach((el) => {
-          const style = el.style;
-          const newStyle = {
-            left: style.left + offsetStyle.left,
-            top: style.top + offsetStyle.top,
-            width: style.width + offsetStyle.width,
-            height: style.height + offsetStyle.height,
-            rotate: (style.rotate + offsetStyle.rotate + 360) % 360,
-            borderRadius: Math.round(style.borderRadius + offsetStyle.borderRadius)
-          };
-          if (handle.startsWith("rotate")) {
-            newStyle.rotate = Math.round(newStyle.rotate * 100) / 100;
-          } else if (handle.startsWith("resize")) {
-            const scale = newStyle.rotate ? 100 : 1;
-            const newWidth = Math.max(1, Math.round(newStyle.width * scale) / scale);
-            const newHeight = Math.max(1, Math.round(newStyle.height * scale) / scale);
-            const shape = el.shape;
-            resizeElement(
-              el,
-              newWidth,
-              newHeight,
-              inEditorIs(el, "Frame") ? void 0 : shape.isValid() ? { deep: true } : handle.split("-")[1].length > 1 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true }
-            );
-            newStyle.width = el.style.width;
-            newStyle.height = el.style.height;
-          }
-          Object.assign(style, newStyle);
-          el.updateGlobalTransform();
+        emit("selectionTransform", {
+          ...createTransformContext(),
+          value
         });
-        if (els.length > 1) {
-          if (handle.startsWith("resize")) {
-            const selectionAabb2 = getAabb(els);
-            els.forEach((el) => {
-              const parentAabb = el.getParent()?.globalAabb ?? new Aabb2D();
-              const { x, y } = startContext.offsetMap[el.instanceId];
-              el.style.left = selectionAabb2.left - parentAabb.left + selectionAabb2.width * x;
-              el.style.top = selectionAabb2.top - parentAabb.left + selectionAabb2.height * y;
-            });
-          }
-        }
-        emit("selectionTransform", createTransformContext());
       }
     });
     const movable = computed(() => {
@@ -13546,8 +13605,8 @@ const _selection = definePlugin((editor) => {
     ],
     events: {
       clearDoc: () => select("none"),
-      selectionTransform: ({ elements }) => {
-        elements.forEach((el) => {
+      selectionTransform: () => {
+        elementSelection.value.forEach((el) => {
           el.findAncestor((ancestor) => {
             if (isElement(ancestor) && !inEditorIs(ancestor, "Frame")) {
               obbToFit(ancestor);
@@ -15138,12 +15197,28 @@ const _smartGuides = definePlugin((editor) => {
     }
     return { x, y };
   }
-  Object.assign(editor, {
-    snapThreshold,
-    getSnapPoints
-  });
+  function snap(axis, position) {
+    const points = getSnapPoints();
+    let closest;
+    let minDist = Infinity;
+    for (const pt of points[axis]) {
+      const dist = pt - position;
+      const absDist = Math.abs(dist);
+      if (absDist < minDist) {
+        minDist = absDist;
+        closest = pt;
+      }
+    }
+    if (minDist < snapThreshold.value) {
+      position = closest ?? position;
+    }
+    return position;
+  }
   return {
     name: "mce:smartGuides",
+    commands: [
+      { command: "snap", handle: snap }
+    ],
     events: {
       selectionTransform: ({ handle }) => {
         if (handle === "move") {
@@ -15524,7 +15599,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             ])
           ], 64)) : unref(state) === "transforming" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             createElementVNode("div", _hoisted_8, [
-              createVNode(unref(_sfc_main$D), { icon: "$mouseRightClick" })
+              createVNode(unref(_sfc_main$E), { icon: "$mouseRightClick" })
             ]),
             _cache[2] || (_cache[2] = createElementVNode("span", null, " / ", -1)),
             createElementVNode("div", _hoisted_9, [
@@ -15538,7 +15613,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             ])
           ], 64)) : unref(state) ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(unref(t)(unref(state))), 1)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
             createElementVNode("div", _hoisted_14, [
-              createVNode(unref(_sfc_main$D), { icon: "$mouseLeftClick" }),
+              createVNode(unref(_sfc_main$E), { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectObject")), 1)
             ]),
             _cache[5] || (_cache[5] = createElementVNode("span", null, " + ", -1)),
@@ -15548,7 +15623,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             ]),
             _cache[6] || (_cache[6] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
             createElementVNode("div", _hoisted_17, [
-              createVNode(unref(_sfc_main$D), { icon: "$mouseLeftClick" }),
+              createVNode(unref(_sfc_main$E), { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectArea")), 1)
             ]),
             _cache[7] || (_cache[7] = createElementVNode("span", null, " + ", -1)),
@@ -15558,7 +15633,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             ]),
             _cache[8] || (_cache[8] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
             createElementVNode("div", _hoisted_20, [
-              createVNode(unref(_sfc_main$D), { icon: "$mouseLeftClick" }),
+              createVNode(unref(_sfc_main$E), { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("dragSelected")), 1)
             ]),
             unref(selection).length === 1 && unref(isElement)(unref(selection)[0]) && unref(selection)[0].text.isValid() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -15587,7 +15662,7 @@ const _statusbar = definePlugin((editor) => {
   const {
     registerConfig
   } = editor;
-  registerConfig("statusbar", false);
+  registerConfig("statusbar", { default: false });
   return {
     name: "mce:statusbar",
     components: [
@@ -16047,7 +16122,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             class: "mce-timeline__play",
             onClick: toggle
           }, [
-            createVNode(unref(_sfc_main$D), {
+            createVNode(unref(_sfc_main$E), {
               icon: paused.value ? "$play" : "$pause"
             }, null, 8, ["icon"])
           ])
@@ -16124,7 +16199,7 @@ const _timeline = definePlugin((editor) => {
   const {
     registerConfig
   } = editor;
-  registerConfig("timeline", false);
+  registerConfig("timeline", { default: false });
   return {
     name: "mce:timeline",
     components: [
@@ -16255,7 +16330,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               "show-arrow": ""
             }, {
               activator: withCtx(({ props: slotProps }) => [
-                createVNode(_sfc_main$z, mergeProps({
+                createVNode(_sfc_main$A, mergeProps({
                   icon: "",
                   class: "mce-toolbelt__btn",
                   active: tool.active || tool.checked || false
@@ -16263,7 +16338,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                   onClick: tool.handle
                 }), {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$D), {
+                    createVNode(unref(_sfc_main$E), {
                       icon: `$${tool.key}`
                     }, null, 8, ["icon"])
                   ]),
@@ -16285,12 +16360,12 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               location: "top-start"
             }, {
               activator: withCtx(({ props }) => [
-                createVNode(_sfc_main$z, mergeProps({
+                createVNode(_sfc_main$A, mergeProps({
                   icon: "",
                   class: "mce-toolbelt__arrow"
                 }, { ref_for: true }, props), {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$D), { icon: "$arrowDown" })
+                    createVNode(unref(_sfc_main$E), { icon: "$arrowDown" })
                   ]),
                   _: 1
                 }, 16)
@@ -16306,7 +16381,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                 ], 64)) : createCommentVNode("", true)
               ]),
               prepend: withCtx(({ item }) => [
-                createVNode(unref(_sfc_main$D), {
+                createVNode(unref(_sfc_main$E), {
                   class: "mce-toolbelt__icon",
                   icon: `$${item.key}`
                 }, null, 8, ["icon"])
@@ -16323,7 +16398,7 @@ const _toolbelt = definePlugin((editor) => {
   const {
     registerConfig
   } = editor;
-  const toolbelt = registerConfig("toolbelt", false);
+  const toolbelt = registerConfig("toolbelt", { default: false });
   return {
     name: "mce:toolbelt",
     components: [
@@ -16338,20 +16413,159 @@ const _toolbelt = definePlugin((editor) => {
 });
 const _transform = definePlugin((editor) => {
   const {
+    selectionObb,
+    selectionAabb,
     elementSelection,
-    exec
+    exec,
+    inEditorIs,
+    resizeElement,
+    state
   } = editor;
-  async function _enter() {
-    if (elementSelection.value.length === 1) {
-      const element = elementSelection.value[0];
-      if (element.text.isValid()) {
+  async function enter() {
+    const els = elementSelection.value;
+    if (els.length === 1) {
+      const el = els[0];
+      if (el.text.isValid()) {
         await exec("startTyping");
+      } else if (el.foreground.isValid()) {
+        state.value = "cropping";
       }
     }
   }
-  const when = () => Boolean(elementSelection.value.length > 0);
-  function flip2(target) {
-    switch (target) {
+  const transformCtx = {
+    rotate: 0,
+    resize: {}
+  };
+  const transformValue = computed(() => {
+    const { left, top, width, height, rotationDegrees } = selectionObb.value;
+    return {
+      left,
+      top,
+      width,
+      height,
+      rotate: rotationDegrees,
+      borderRadius: elementSelection.value[0]?.style.borderRadius ?? 0
+    };
+  });
+  function onSelectionTransformStart() {
+    const aabb = selectionAabb.value;
+    elementSelection.value.forEach((el) => {
+      const elAabb = el.globalAabb;
+      transformCtx.resize[el.instanceId] = {
+        minX: (elAabb.min.x - aabb.min.x) / aabb.width,
+        minY: (elAabb.min.y - aabb.min.y) / aabb.height,
+        maxX: (elAabb.max.x - aabb.min.x) / aabb.width,
+        maxY: (elAabb.max.y - aabb.min.y) / aabb.height,
+        scaleX: el.style.width / elAabb.width,
+        scaleY: el.style.height / elAabb.height
+      };
+    });
+  }
+  function onSelectionTransformEnd() {
+    transformCtx.rotate = 0;
+    transformCtx.resize = {};
+  }
+  function transform(handle, partialTransform) {
+    const oldTransform = transformValue.value;
+    const transform2 = {
+      ...oldTransform,
+      ...partialTransform
+    };
+    const [type, direction = ""] = handle.split("-");
+    const isCorner = direction.length > 1;
+    const els = elementSelection.value;
+    const isMultiple = els.length > 1;
+    if (type === "move") {
+      transform2.left = Math.round(transform2.left);
+      transform2.top = Math.round(transform2.top);
+      if (!transform2.rotate) {
+        transform2.left = exec("snap", "x", transform2.left);
+        transform2.top = exec("snap", "y", transform2.top);
+      }
+    }
+    const offsetStyle = {
+      left: transform2.left - oldTransform.left,
+      top: transform2.top - oldTransform.top,
+      width: transform2.width - oldTransform.width,
+      height: transform2.height - oldTransform.height,
+      rotate: transform2.rotate - oldTransform.rotate,
+      borderRadius: transform2.borderRadius - oldTransform.borderRadius
+    };
+    if (isMultiple) {
+      if (type === "rotate") {
+        offsetStyle.rotate = transform2.rotate - transformCtx.rotate;
+        transformCtx.rotate += offsetStyle.rotate;
+      }
+    }
+    els.forEach((el) => {
+      const style = el.style;
+      const newStyle = {
+        left: style.left + offsetStyle.left,
+        top: style.top + offsetStyle.top,
+        width: style.width + offsetStyle.width,
+        height: style.height + offsetStyle.height,
+        rotate: (style.rotate + offsetStyle.rotate + 360) % 360,
+        borderRadius: Math.round(style.borderRadius + offsetStyle.borderRadius)
+      };
+      if (type === "rotate") {
+        if (isMultiple) {
+          const center = el.globalAabb.getCenter().rotate(
+            offsetStyle.rotate * DEG_TO_RAD,
+            {
+              x: transform2.left + transform2.width / 2,
+              y: transform2.top + transform2.height / 2
+            }
+          );
+          const parentAabb = el.getParent()?.globalAabb;
+          if (parentAabb) {
+            center.x -= parentAabb.left;
+            center.y -= parentAabb.top;
+          }
+          newStyle.left = center.x - newStyle.width / 2;
+          newStyle.top = center.y - newStyle.height / 2;
+        }
+        newStyle.rotate = Math.round(newStyle.rotate * 100) / 100;
+      } else if (type === "resize") {
+        if (isMultiple) {
+          const ctx = transformCtx.resize[el.instanceId];
+          if (ctx) {
+            const min = {
+              x: transform2.left + transform2.width * ctx.minX,
+              y: transform2.top + transform2.height * ctx.minY
+            };
+            const max = {
+              x: transform2.left + transform2.width * ctx.maxX,
+              y: transform2.top + transform2.height * ctx.maxY
+            };
+            const size = { x: max.x - min.x, y: max.y - min.y };
+            const center = { x: min.x + size.x / 2, y: min.y + size.y / 2 };
+            const parentAabb = el.getParent()?.globalAabb;
+            if (parentAabb) {
+              center.x -= parentAabb.left;
+              center.y -= parentAabb.top;
+            }
+            newStyle.width = size.x * ctx.scaleX;
+            newStyle.height = size.y * ctx.scaleY;
+            newStyle.left = center.x - newStyle.width / 2;
+            newStyle.top = center.y - newStyle.height / 2;
+          }
+        }
+        const scale = newStyle.rotate ? 100 : 1;
+        resizeElement(
+          el,
+          Math.max(1, Math.round(newStyle.width * scale) / scale),
+          Math.max(1, Math.round(newStyle.height * scale) / scale),
+          inEditorIs(el, "Frame") ? void 0 : el.shape.isValid() ? { deep: true } : isCorner ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true }
+        );
+        newStyle.width = el.style.width;
+        newStyle.height = el.style.height;
+      }
+      Object.assign(style, newStyle);
+      el.updateGlobalTransform();
+    });
+  }
+  function flip2(type) {
+    switch (type) {
       case "horizontal":
         elementSelection.value.forEach((el) => {
           el.style.scaleX = -el.style.scaleX;
@@ -16367,16 +16581,23 @@ const _transform = definePlugin((editor) => {
   return {
     name: "mce:transform",
     commands: [
-      { command: "enter", handle: _enter },
+      { command: "enter", handle: enter },
+      { command: "getTransformValue", handle: () => transformValue.value },
+      { command: "transform", handle: transform },
       { command: "flip", handle: flip2 },
       { command: "flipHorizontal", handle: () => flip2("horizontal") },
       { command: "flipVertical", handle: () => flip2("vertical") }
     ],
     hotkeys: [
-      { command: "enter", key: ["Enter"], when },
+      { command: "enter", key: ["Enter"], when: () => elementSelection.value.length > 0 },
       { command: "flipHorizontal", key: "Shift+H" },
       { command: "flipVertical", key: "Shift+V" }
-    ]
+    ],
+    events: {
+      selectionTransformStart: onSelectionTransformStart,
+      selectionTransform: (ctx) => transform(ctx.handle, ctx.value),
+      selectionTransformEnd: onSelectionTransformEnd
+    }
   };
 });
 const _ui = definePlugin((editor) => {
@@ -16437,7 +16658,17 @@ const _view = definePlugin((editor) => {
   return {
     name: "mce:view",
     commands: [
-      { command: "view", handle: (view) => config.value[view] = !config.value[view] }
+      {
+        command: "view",
+        handle: (view) => {
+          const value = config.value[view];
+          if (typeof value === "object" && "visible" in value) {
+            value.visible = !value.visible;
+          } else {
+            config.value[view] = !config.value[view];
+          }
+        }
+      }
     ],
     hotkeys: [
       { command: "view:pixelGrid", key: 'Shift+"' },
@@ -16460,7 +16691,7 @@ const _zoom = definePlugin((editor) => {
     screenCenterOffset,
     viewportAabb
   } = editor;
-  registerConfig("zoomToFit", "contain");
+  registerConfig("zoomToFit", { default: "contain" });
   async function zoomTo(target, options = {}) {
     const {
       intoView,
@@ -16628,6 +16859,7 @@ const plugins = [
   _json,
   _layers,
   _madeWith,
+  _memory,
   _menu,
   _move,
   _new,
@@ -16945,12 +17177,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           createElementVNode("div", mergeProps({ class: "mce-float-panel__card" }, slotProps), [
             __props.title ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
               createElementVNode("div", null, toDisplayString(__props.title), 1),
-              createVNode(_sfc_main$z, {
+              createVNode(_sfc_main$A, {
                 icon: "",
                 onClick: _cache[0] || (_cache[0] = ($event) => isActive.value = false)
               }, {
                 default: withCtx(() => [
-                  createVNode(unref(_sfc_main$D), { icon: "$close" })
+                  createVNode(unref(_sfc_main$E), { icon: "$close" })
                 ]),
                 _: 1
               })
@@ -17414,16 +17646,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     }
     async function onDoubleclick(event) {
-      const state2 = props.doubleclickStrategy({
+      props.doubleclickStrategy({
         event,
         editor
       });
-      switch (state2) {
-        case "typing": {
-          await exec("startTyping", event);
-          break;
-        }
-      }
     }
     function setComponentRef(ref2, item) {
       if (!componentRefs.value[item.plugin]) {
@@ -17613,7 +17839,7 @@ export {
   _sfc_main$k as Cropper,
   _sfc_main as Dialog,
   Editor,
-  _sfc_main$x as EditorLayers,
+  _sfc_main$y as EditorLayers,
   _sfc_main$1 as EditorLayout,
   _sfc_main$3 as EditorLayoutItem,
   _sfc_main$7 as EditorToolbelt,