mce 0.15.26 → 0.15.27

package/dist/components/Scrollbars.vue.d.ts

@@ -1,12 +1,10 @@
 type __VLS_Props = {
-    infinite?: boolean;
     offset?: number;
     size?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: number;
     offset: number;
-    infinite: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/index.js

@@ -938,8 +938,11 @@ const _0_context = defineMixin((editor) => {
   function isElement(value) {
     return value instanceof Element2D;
   }
+  function inEditorIs(value, inEditorIs2) {
+    return value.meta.inEditorIs === inEditorIs2;
+  }
   function isFrame(value) {
-    return isElement(value) && value.meta.inEditorIs === "Frame";
+    return isElement(value) && inEditorIs(value, "Frame");
   }
   function isTopFrame(value) {
     return isFrame(value) && Boolean(value.parent?.equal(root.value));
@@ -984,6 +987,7 @@ const _0_context = defineMixin((editor) => {
     isNode,
     isRoot,
     isElement,
+    inEditorIs,
     isFrame,
     isTopFrame,
     isVisible,
@@ -1079,6 +1083,7 @@ const en = {
   "move": "Move",
   "hand": "Hand",
   "frame": "Frame",
+  "slice": "Slice",
   "group": "Group",
   "text": "Text",
   "doubleClickEditText": "DoubleClickEditText",
@@ -1191,6 +1196,7 @@ const zhHans = {
   "move": "移动",
   "hand": "抓手",
   "frame": "画板",
+  "slice": "切片",
   "group": "组合",
   "text": "文字",
   "doubleClickEditText": "双击编辑文字",
@@ -3486,22 +3492,20 @@ const _4_2_frame = defineMixin((editor) => {
         continue;
       }
       const aabb2 = frame2.getGlobalAabb();
-      if (aabb2) {
-        if (pointer ? aabb2.contains(pointer) : aabb1 && aabb1.getIntersectionRect(aabb2).getArea() > area1 * 0.5) {
-          if (!frame2.equal(frame1)) {
-            let index = frame2.children.length;
-            if (frame2.equal(options?.parent)) {
-              index = options.index;
-            }
-            frame2.moveChild(element, index);
-            element.style.left = aabb1.x - aabb2.x;
-            element.style.top = aabb1.y - aabb2.y;
-            element.updateGlobalTransform();
-            exec("layerScrollIntoView");
+      if (pointer ? aabb2.contains(pointer) : aabb1 && aabb1.getIntersectionRect(aabb2).getArea() > area1 * 0.5) {
+        if (!frame2.equal(frame1)) {
+          let index = frame2.children.length;
+          if (frame2.equal(options?.parent)) {
+            index = options.index;
           }
-          flag = false;
-          break;
+          frame2.moveChild(element, index);
+          element.style.left = aabb1.x - aabb2.x;
+          element.style.top = aabb1.y - aabb2.y;
+          element.updateGlobalTransform();
+          exec("layerScrollIntoView");
         }
+        flag = false;
+        break;
       }
     }
     if (flag && frame1) {
@@ -3525,8 +3529,11 @@ const _4_2_frame = defineMixin((editor) => {
       on,
       getGlobalPointer
     } = editor;
-    const startContext = ref({});
+    let startFrame;
+    let startContext = {};
     on("selectionTransformStart", ({ elements }) => {
+      const pointer = getGlobalPointer();
+      startFrame = frames.value.find((frame) => frame.getGlobalAabb().contains(pointer));
       const ctx = {};
       elements.forEach((el) => {
         ctx[el.instanceId] = {
@@ -3534,16 +3541,19 @@ const _4_2_frame = defineMixin((editor) => {
           index: el.getIndex()
         };
       });
-      startContext.value = ctx;
+      startContext = ctx;
     });
     on("selectionTransforming", ({ handle, startEvent, elements }) => {
       if (handle === "move" && !startEvent?.__FROM__) {
         const idSet = /* @__PURE__ */ new Set();
         elements.forEach((el) => {
-          if (isTopFrame(el)) {
-            idSet.add(el.instanceId);
+          const frame = isTopFrame(el) ? el : el.findAncestor(isTopFrame);
+          if (frame) {
+            if (frame.equal(startFrame)) {
+              idSet.add(frame.instanceId);
+            }
           } else {
-            idSet.add(el.findAncestor(isTopFrame)?.instanceId ?? 0);
+            idSet.add(0);
           }
         });
         if (idSet.size === 1) {
@@ -3551,7 +3561,7 @@ const _4_2_frame = defineMixin((editor) => {
             handleDragOutReparent(
               element,
               {
-                ...startContext.value[element.instanceId],
+                ...startContext[element.instanceId],
                 pointer: getGlobalPointer()
               }
             );
@@ -3560,7 +3570,8 @@ const _4_2_frame = defineMixin((editor) => {
       }
     });
     on("selectionTransformEnd", () => {
-      startContext.value = {};
+      startContext = {};
+      startFrame = void 0;
     });
   };
 });
@@ -3936,6 +3947,72 @@ const _drawingTool$1 = defineMixin((editor) => {
     });
   };
 });
+function createHttp() {
+  async function request(config) {
+    const {
+      url,
+      method = "GET",
+      data,
+      responseType
+    } = config;
+    const fetchConfig = {
+      method: method.toUpperCase(),
+      headers: new Headers()
+    };
+    if (data !== void 0) {
+      if (data instanceof FormData || data instanceof URLSearchParams || data instanceof Blob) {
+        fetchConfig.body = data;
+      } else if (typeof data === "object") {
+        fetchConfig.body = JSON.stringify(data);
+        fetchConfig.headers.set("Content-Type", "application/json");
+      } else {
+        fetchConfig.body = String(data);
+      }
+    }
+    const response = await fetch(url, fetchConfig);
+    if (!response.ok) {
+      const error = new Error(`HTTP Error: ${response.status} ${response.statusText}`);
+      error.response = {
+        status: response.status,
+        statusText: response.statusText,
+        headers: Object.fromEntries(response.headers.entries()),
+        data: await response.text().catch(() => null)
+      };
+      throw error;
+    }
+    let _responseType = responseType;
+    if (!_responseType) {
+      const repContentType = response.headers.get("content-type");
+      if (repContentType) {
+        if (repContentType.includes("application/json")) {
+          _responseType = "json";
+        }
+      }
+    }
+    switch (_responseType ?? "text") {
+      case "arraybuffer":
+        return await response.arrayBuffer();
+      case "blob":
+        return await response.blob();
+      case "json":
+        return await response.json();
+      case "document":
+      case "stream":
+      case "formdata":
+      case "text":
+      default:
+        return await response.text();
+    }
+  }
+  return {
+    request
+  };
+}
+const _http = defineMixin((editor, options) => {
+  Object.assign(editor, {
+    http: options.http ?? createHttp()
+  });
+});
 const _scroll$1 = defineMixin((editor) => {
   const {
     camera,
@@ -4272,6 +4349,7 @@ const mixins = [
   _4_3_element,
   _4_4_doc,
   _drawingTool$1,
+  _http,
   _scroll$1,
   _snapshot,
   _zoom$1
@@ -4847,6 +4925,7 @@ const aliases = {
   check: "M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z",
   collapse: "m12 17.4l-3.9 3.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l3.875-3.875q.575-.575 1.425-.575t1.425.575L17.3 19.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275zm0-10.8l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-3.875 3.875Q12.85 8.55 12 8.55t-1.425-.575L6.7 4.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275z",
   frame: "M17 9v6H7V9zm2-6h-2v3h2zM7 3H5v3h2zm16 4h-3v2h3zm-4 0H5v10h14zM4 7H1v2h3zm19 8h-3v2h3zM4 15H1v2h3zm15 3h-2v3h2zM7 18H5v3h2z",
+  slice: "M20.802 4.221a2.166 2.166 0 0 0-3.062 0L2.24 19.72l.001.001A.75.75 0 0 0 2.773 21h8.125a2.25 2.25 0 0 0 2.25-2.25v-3.812l7.654-7.654a2.166 2.166 0 0 0 0-3.063m-7.654 8.596v-1.883L18.8 5.282a.665.665 0 1 1 .941.941zM4.584 19.5l7.064-7.064v6.314a.75.75 0 0 1-.75.75z",
   group: "M10 22q-.825 0-1.412-.587T8 20v-4H4q-.825 0-1.412-.587T2 14V4q0-.825.588-1.412T4 2h10q.825 0 1.413.588T16 4v4h4q.825 0 1.413.588T22 10v10q0 .825-.587 1.413T20 22zm0-2h10V10h-6V4H4v10h6zm2-8",
   shape: "M8 17.95q.25.025.488.038T9 18t.513-.012t.487-.038V20h10V10h-2.05q.025-.25.038-.488T18 9t-.012-.513T17.95 8H20q.825 0 1.413.588T22 10v10q0 .825-.587 1.413T20 22H10q-.825 0-1.412-.587T8 20zM9 16q-2.925 0-4.962-2.037T2 9t2.038-4.962T9 2t4.963 2.038T16 9t-2.037 4.963T9 16m0-2q2.075 0 3.538-1.463T14 9t-1.463-3.537T9 4T5.463 5.463T4 9t1.463 3.538T9 14m0-5",
   text: "m18.5 4l1.16 4.35l-.96.26c-.45-.87-.91-1.74-1.44-2.18C16.73 6 16.11 6 15.5 6H13v10.5c0 .5 0 1 .33 1.25c.34.25 1 .25 1.67.25v1H9v-1c.67 0 1.33 0 1.67-.25c.33-.25.33-.75.33-1.25V6H8.5c-.61 0-1.23 0-1.76.43c-.53.44-.99 1.31-1.44 2.18l-.96-.26L5.5 4z",
@@ -5525,9 +5604,6 @@ const _frame = definePlugin((editor) => {
   } = editor;
   return {
     name: "mce:frame",
-    components: [
-      { type: "overlay", component: _sfc_main$A }
-    ],
     drawingTools: [
       {
         name: "frame",
@@ -5567,6 +5643,9 @@ const _frame = definePlugin((editor) => {
     ],
     hotkeys: [
       { command: "setActiveDrawingTool:frame", key: "F" }
+    ],
+    components: [
+      { type: "overlay", component: _sfc_main$A, order: "before" }
     ]
   };
 });
@@ -12128,7 +12207,6 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   },
   __name: "Scrollbars",
   props: {
-    infinite: { type: Boolean, default: true },
     offset: { default: 0 },
     size: { default: 8 }
   },
@@ -12460,6 +12538,102 @@ const _shape = definePlugin((editor) => {
     ]
   };
 });
+const _slice = definePlugin((editor) => {
+  const {
+    setActiveDrawingTool,
+    addElement,
+    t,
+    elementSelection,
+    inEditorIs,
+    to,
+    fonts,
+    drawboardEffect
+  } = editor;
+  async function exportSlice(options) {
+    const el = elementSelection.value[0];
+    if (!el || !inEditorIs(el, "Slice")) {
+      return;
+    }
+    const aabb = el.getGlobalAabb();
+    const doc = to("json", {
+      ...options,
+      selected: el.parent?.children.filter((node) => !node.equal(el)) ?? []
+    });
+    doc.children.unshift({
+      position: {
+        x: aabb.left,
+        y: aabb.top
+      },
+      meta: {
+        inCanvasIs: "Camera2D"
+      }
+    });
+    return await render({
+      data: doc,
+      fonts,
+      width: aabb.width,
+      height: aabb.height,
+      onBefore: (engine) => {
+        engine.root.append(
+          new DrawboardEffect({
+            ...drawboardEffect.value.getProperties(),
+            internalMode: "back",
+            effectMode: "before",
+            checkerboard: false,
+            pixelGrid: false
+          })
+        );
+      }
+    });
+  }
+  return {
+    name: "mce:slice",
+    drawingTools: [
+      {
+        name: "slice",
+        handle: (start) => {
+          const el = addElement({
+            name: t("slice"),
+            outline: {
+              color: "#d9d9d9",
+              width: 1,
+              style: "dashed"
+            },
+            meta: {
+              inPptIs: "Shape",
+              inEditorIs: "Slice",
+              inCanvasIs: "Element2D"
+            }
+          }, {
+            position: start,
+            active: true
+          });
+          return {
+            move: (move) => {
+              const minX = Math.min(move.x, start.x);
+              const minY = Math.min(move.y, start.y);
+              const maxX = Math.max(move.x, start.x);
+              const maxY = Math.max(move.y, start.y);
+              el.style.left = minX;
+              el.style.top = minY;
+              el.style.width = maxX - minX;
+              el.style.height = maxY - minY;
+            },
+            end: () => {
+              setActiveDrawingTool(void 0);
+            }
+          };
+        }
+      }
+    ],
+    hotkeys: [
+      { command: "setActiveDrawingTool:slice", key: "S" }
+    ],
+    commands: [
+      { command: "exportSlice", handle: exportSlice }
+    ]
+  };
+});
 const _hoisted_1$c = { class: "mce-smart-guides" };
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "SmartGuides",
@@ -14448,9 +14622,13 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           ]
         },
         {
-          key: "frame",
-          active: activeDrawingTool.value?.name === "frame",
-          handle: () => setActiveDrawingTool("frame")
+          key: activeDrawingTool.value?.name === "slice" ? "slice" : "frame",
+          active: ["frame", "slice"].includes(activeDrawingTool.value?.name),
+          handle: () => setActiveDrawingTool("frame"),
+          children: [
+            { key: "frame", handle: () => setActiveDrawingTool("frame") },
+            { key: "slice", handle: () => setActiveDrawingTool("slice") }
+          ]
         },
         {
           ...shapeItems.value.find((v) => v.checked) ?? shapeItems.value[activeShape.value],
@@ -14626,7 +14804,8 @@ const _ui = definePlugin((editor) => {
 });
 const _url = definePlugin((editor) => {
   const {
-    load
+    load,
+    http
   } = editor;
   return {
     name: "mce:url",
@@ -14637,7 +14816,7 @@ const _url = definePlugin((editor) => {
           return typeof source === "string";
         },
         load: async (url) => {
-          const blob = await fetch(url).then((rep) => rep.blob());
+          const blob = await http.request({ url, responseType: "blob" });
           const file = new File([blob], url, { type: blob.type });
           try {
             return await load(file);
@@ -14772,6 +14951,7 @@ const plugins = [
   _scroll,
   _selection,
   _shape,
+  _slice,
   _smartGuides,
   _state,
   _statusbar,
@@ -16763,6 +16943,24 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 }, ["prevent"]))
               }, [
                 createElementVNode("canvas", _hoisted_2, null, 512),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pluginsComponents).overlay.filter((v) => v.order === "before"), (p, key) => {
+                  return openBlock(), createBlock(resolveDynamicComponent(p.component), { key });
+                }), 128)),
+                createVNode(_sfc_main$7, {
+                  ref: "selectorTpl",
+                  "selected-area": selectedArea.value,
+                  "resize-strategy": resizeStrategy.value
+                }, {
+                  transformable: withCtx(({ box }) => [
+                    renderSlot(_ctx.$slots, "transformer", mergeProps({ box }, slotProps))
+                  ]),
+                  default: withCtx(({ box }) => [
+                    createVNode(_sfc_main$8),
+                    renderSlot(_ctx.$slots, "selector", mergeProps({ box }, slotProps))
+                  ]),
+                  _: 3
+                }, 8, ["selected-area", "resize-strategy"]),
+                createVNode(_sfc_main$2, { ref: "textEditorTpl" }, null, 512),
                 slots.floatbar ? (openBlock(), createBlock(_sfc_main$b, {
                   key: 0,
                   location: "top-start",
@@ -16796,24 +16994,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 3
                 }, 8, ["target"])) : createCommentVNode("", true),
-                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pluginsComponents).overlay, (p, key) => {
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pluginsComponents).overlay.filter((v) => v.order !== "before" && v.order !== "after"), (p, key) => {
+                  return openBlock(), createBlock(resolveDynamicComponent(p.component), { key });
+                }), 128)),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pluginsComponents).overlay.filter((v) => v.order === "after"), (p, key) => {
                   return openBlock(), createBlock(resolveDynamicComponent(p.component), { key });
                 }), 128)),
-                createVNode(_sfc_main$2, { ref: "textEditorTpl" }, null, 512),
-                createVNode(_sfc_main$7, {
-                  ref: "selectorTpl",
-                  "selected-area": selectedArea.value,
-                  "resize-strategy": resizeStrategy.value
-                }, {
-                  transformable: withCtx(({ box }) => [
-                    renderSlot(_ctx.$slots, "transformer", mergeProps({ box }, slotProps))
-                  ]),
-                  default: withCtx(({ box }) => [
-                    createVNode(_sfc_main$8),
-                    renderSlot(_ctx.$slots, "selector", mergeProps({ box }, slotProps))
-                  ]),
-                  _: 3
-                }, 8, ["selected-area", "resize-strategy"]),
                 renderSlot(_ctx.$slots, "drawboard", normalizeProps(guardReactiveProps(slotProps)))
               ], 40, _hoisted_1)
             ]),

package/dist/locale/en.d.ts

@@ -15,6 +15,7 @@ declare const _default: {
     move: string;
     hand: string;
     frame: string;
+    slice: string;
     group: string;
     text: string;
     doubleClickEditText: string;

package/dist/locale/zh-Hans.d.ts

@@ -16,6 +16,7 @@ declare const _default: {
     move: string;
     hand: string;
     frame: string;
+    slice: string;
     group: string;
     text: string;
     doubleClickEditText: string;

package/dist/mixins/0.context.d.ts

@@ -20,6 +20,7 @@ declare global {
             align: Tblock | 'center';
         };
         type IndexCharacter = _IndexCharacter;
+        type EditorNodeType = 'Doc' | 'Frame' | 'Slice' | 'Element';
         interface Editor {
             fonts: Fonts;
             renderEngine: Ref<Engine>;
@@ -45,6 +46,7 @@ declare global {
             parseAnchor: (anchor: Anchor, isRtl?: boolean) => ParsedAnchor;
             isNode: (value: any) => value is Node;
             isRoot: (value: any) => value is Node;
+            inEditorIs: (value: Node, inEditorIs?: EditorNodeType) => boolean;
             isElement: (value: any) => value is Element2D;
             isFrame: (value: any) => value is Element2D;
             isTopFrame: (value: any) => value is Element2D;

package/dist/mixins/http.d.ts

@@ -0,0 +1,23 @@
+declare global {
+    namespace Mce {
+        type HttpMethod = 'get' | 'GET' | 'delete' | 'DELETE' | 'head' | 'HEAD' | 'options' | 'OPTIONS' | 'post' | 'POST' | 'put' | 'PUT' | 'patch' | 'PATCH' | 'purge' | 'PURGE' | 'link' | 'LINK' | 'unlink' | 'UNLINK';
+        type HttpResponseType = 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream' | 'formdata';
+        interface HttpRequestConfig {
+            url: string;
+            method?: HttpMethod | string;
+            data?: any;
+            responseType?: HttpResponseType;
+        }
+        interface Http {
+            request: (config: HttpRequestConfig) => Promise<any>;
+        }
+        interface Options {
+            http?: Http;
+        }
+        interface Editor {
+            http: Http;
+        }
+    }
+}
+declare const _default: import("..").Mixin;
+export default _default;

package/dist/plugin.d.ts

@@ -13,6 +13,7 @@ export interface PanelPluginComponent extends BasePluginComponent {
 }
 export interface OverlayPluginComponent extends BasePluginComponent {
     type: 'overlay';
+    order?: 'before' | 'after';
 }
 export type PluginComponent = OverlayPluginComponent | PanelPluginComponent;
 export interface PluginObject {

package/dist/plugins/slice.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("..").Plugin;
+export default _default;

package/dist/typed-plugins.d.ts

@@ -23,6 +23,7 @@ import './mixins/4.2.frame'
 import './mixins/4.3.element'
 import './mixins/4.4.doc'
 import './mixins/drawingTool'
+import './mixins/http'
 import './mixins/scroll'
 import './mixins/snapshot'
 import './mixins/zoom'
@@ -57,6 +58,7 @@ import './plugins/saveAs'
 import './plugins/scroll'
 import './plugins/selection'
 import './plugins/shape'
+import './plugins/slice'
 import './plugins/smartGuides'
 import './plugins/state'
 import './plugins/statusbar'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.15.26",
+  "version": "0.15.27",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",
@@ -61,7 +61,7 @@
     "diff": "^8.0.3",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.17.22",
-    "modern-canvas": "^0.14.36",
+    "modern-canvas": "^0.14.39",
     "modern-font": "^0.4.4",
     "modern-idoc": "^0.10.9",
     "modern-text": "^1.10.15",