mce 0.16.3 → 0.16.4

package/dist/index.js

@@ -1,4 +1,4 @@
-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 } 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";
@@ -787,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) {
@@ -869,8 +869,13 @@ class Doc extends Node$1 {
     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" }));
@@ -1027,6 +1032,7 @@ const _0_context = defineMixin((editor) => {
     onBeforeMount(() => {
       on("setDoc", onSetDoc);
       renderEngine.value.start();
+      root2.value.load();
     });
     onScopeDispose(() => {
       off("setDoc", onSetDoc);
@@ -2006,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);
@@ -12561,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;
@@ -12617,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;
@@ -12655,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) {
@@ -12768,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
@@ -16409,19 +16418,23 @@ const _transform = definePlugin((editor) => {
     elementSelection,
     exec,
     inEditorIs,
-    resizeElement
+    resizeElement,
+    state
   } = editor;
   async function enter() {
-    if (elementSelection.value.length === 1) {
-      const element = elementSelection.value[0];
-      if (element.text.isValid()) {
+    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 startState = {
+  const transformCtx = {
     rotate: 0,
-    minMaxMap: {}
+    resize: {}
   };
   const transformValue = computed(() => {
     const { left, top, width, height, rotationDegrees } = selectionObb.value;
@@ -16434,32 +16447,54 @@ const _transform = definePlugin((editor) => {
       borderRadius: elementSelection.value[0]?.style.borderRadius ?? 0
     };
   });
-  function transform(handle, partialValue) {
-    const oldValue = transformValue.value;
-    const value = {
-      ...oldValue,
-      ...partialValue
+  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") {
-      value.left = exec("snap", "x", Math.round(value.left));
-      value.top = exec("snap", "y", Math.round(value.top));
+      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: value.left - oldValue.left,
-      top: value.top - oldValue.top,
-      width: value.width - oldValue.width,
-      height: value.height - oldValue.height,
-      rotate: value.rotate - oldValue.rotate,
-      borderRadius: value.borderRadius - oldValue.borderRadius
+      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 = value.rotate - startState.rotate;
-        startState.rotate += offsetStyle.rotate;
+        offsetStyle.rotate = transform2.rotate - transformCtx.rotate;
+        transformCtx.rotate += offsetStyle.rotate;
       }
     }
     els.forEach((el) => {
@@ -16473,15 +16508,47 @@ const _transform = definePlugin((editor) => {
         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 parentAabb = el.getParent()?.globalAabb ?? new Aabb2D();
-          const minMax = startState.minMaxMap[el.instanceId];
-          newStyle.left = value.left - parentAabb.left + value.width * minMax.minX;
-          newStyle.top = value.top - parentAabb.left + value.height * minMax.minY;
-          newStyle.width = value.width * (minMax.maxX - minMax.minX);
-          newStyle.height = value.height * (minMax.maxY - minMax.minY);
+          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(
@@ -16527,23 +16594,9 @@ const _transform = definePlugin((editor) => {
       { command: "flipVertical", key: "Shift+V" }
     ],
     events: {
-      selectionTransformStart: () => {
-        const aabb = selectionAabb.value;
-        elementSelection.value.forEach((el) => {
-          const elAabb = el.globalAabb;
-          startState.minMaxMap[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
-          };
-        });
-      },
+      selectionTransformStart: onSelectionTransformStart,
       selectionTransform: (ctx) => transform(ctx.handle, ctx.value),
-      selectionTransformEnd: () => {
-        startState.rotate = 0;
-        startState.minMaxMap = {};
-      }
+      selectionTransformEnd: onSelectionTransformEnd
     }
   };
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.16.3",
+  "version": "0.16.4",
   "description": "A headless infinite canvas editor framework built on WebGL rendering, supports exporting to image, video, and PPT. Only the ESM.",
   "author": "wxm",
   "license": "MIT",
@@ -61,7 +61,7 @@
     "diff": "^8.0.3",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.17.23",
-    "modern-canvas": "^0.15.1",
+    "modern-canvas": "^0.15.3",
     "modern-font": "^0.4.4",
     "modern-idoc": "^0.10.21",
     "modern-text": "^1.10.15",