mce 0.15.14 → 0.15.16

package/dist/index.css

@@ -900,6 +900,16 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+.mce-segment__block {
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-size: 12px;
+  padding: 0 8px;
+  text-wrap: nowrap;
+  overflow: visible;
+  border-bottom: 1px solid rgb(var(--mce-theme-surface));
 }.mce-track {
   position: relative;
   display: flex;

package/dist/index.js

@@ -1,5 +1,5 @@
-import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, Aabb2D, IN_BROWSER, clamp, assets, TimelineNode, Transform2D, Obb2D, render, Vector2 as Vector2$1, customNodes, Animation, IN_MAC_OS } from "modern-canvas";
-import { reactive, computed, watch, markRaw, isReactive, ref, warn, shallowRef, onBeforeUnmount, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle, toDisplayString, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, useId, readonly, toRef, onMounted, onDeactivated, onActivated, onScopeDispose, useModel, useTemplateRef, withDirectives, vShow, vModelText, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withModifiers, withCtx, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, h, isRef, useSlots } from "vue";
+import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, Aabb2D, IN_BROWSER, clamp, assets, TimelineNode, Video2D, Transform2D, Obb2D, render, Vector2 as Vector2$1, Lottie2D, customNodes, Animation, IN_MAC_OS } from "modern-canvas";
+import { reactive, computed, watch, markRaw, isReactive, ref, warn, shallowRef, onBeforeUnmount, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle, toDisplayString, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, useId, readonly, toRef, onMounted, onDeactivated, onActivated, onScopeDispose, useModel, useTemplateRef, withDirectives, withModifiers, vShow, vModelText, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withCtx, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, h, isRef, useSlots } from "vue";
 import { useFileDialog, useEventListener, isClient, onClickOutside, useDebounceFn, useResizeObserver as useResizeObserver$1, useLocalStorage, useImage } from "@vueuse/core";
 import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeTextContent, normalizeCRLF, isEqualObject } from "modern-idoc";
 import { saveAs } from "file-saver";
@@ -1089,6 +1089,8 @@ const en = {
   "polygon": "Polygon",
   "star": "Star",
   "image": "Image",
+  "video": "Video",
+  "lottie": "Lottie",
   "pen": "Pen",
   "pencil": "Pencil",
   "file": "File",
@@ -1195,6 +1197,8 @@ const zhHans = {
   "polygon": "多边形",
   "star": "星形",
   "image": "图片",
+  "video": "视频",
+  "lottie": "Lottie",
   "pen": "钢笔",
   "pencil": "铅笔",
   "file": "文件",
@@ -1756,9 +1760,15 @@ const _1_timeline = defineMixin((editor) => {
       timeline.value.currentTime = clamp(val, startTime2, endTime2);
     }
   });
-  const startTime = computed(() => timeline.value.startTime);
-  const endTime = computed(() => timeline.value.endTime);
-  const getTimeRange = (node) => {
+  const startTime = computed({
+    get: () => timeline.value.startTime,
+    set: (val) => timeline.value.startTime = val
+  });
+  const endTime = computed({
+    get: () => timeline.value.endTime,
+    set: (val) => timeline.value.endTime = val
+  });
+  const getTimeRange = (node = root.value) => {
     const range = { startTime: 0, endTime: 0 };
     function handle(node2) {
       if (node2 instanceof TimelineNode) {
@@ -1779,6 +1789,11 @@ const _1_timeline = defineMixin((editor) => {
           range.endTime = Math.max(range.endTime, node2.globalStartTime + node2.outline.animatedTexture.duration);
         }
       }
+      if (node2 instanceof Video2D) {
+        if (node2.texture) {
+          range.endTime = Math.max(range.endTime, node2.globalStartTime + node2.videoDuration);
+        }
+      }
       return false;
     }
     const nodes = Array.isArray(node) ? node : [node];
@@ -3527,7 +3542,18 @@ const _clipboard = definePlugin((editor, options) => {
       return;
     }
     addElements(
-      selection.value.map((v) => v.toJSON()),
+      selection.value.map((v) => {
+        const el = v.toJSON();
+        if (el.style) {
+          if (el.style.left) {
+            el.style.left += 20;
+          }
+          if (el.style.top) {
+            el.style.top += 20;
+          }
+        }
+        return el;
+      }),
       {
         parent: selection.value[0].parent,
         index: selection.value[0].getIndex(),
@@ -3778,6 +3804,8 @@ const aliases = {
   shape: "M8 17.95q.25.025.488.038T9 18t.513-.012t.487-.038V20h10V10h-2.05q.025-.25.038-.488T18 9t-.012-.513T17.95 8H20q.825 0 1.413.588T22 10v10q0 .825-.587 1.413T20 22H10q-.825 0-1.412-.587T8 20zM9 16q-2.925 0-4.962-2.037T2 9t2.038-4.962T9 2t4.963 2.038T16 9t-2.037 4.963T9 16m0-2q2.075 0 3.538-1.463T14 9t-1.463-3.537T9 4T5.463 5.463T4 9t1.463 3.538T9 14m0-5",
   text: "m18.5 4l1.16 4.35l-.96.26c-.45-.87-.91-1.74-1.44-2.18C16.73 6 16.11 6 15.5 6H13v10.5c0 .5 0 1 .33 1.25c.34.25 1 .25 1.67.25v1H9v-1c.67 0 1.33 0 1.67-.25c.33-.25.33-.75.33-1.25V6H8.5c-.61 0-1.23 0-1.76.43c-.53.44-.99 1.31-1.44 2.18l-.96-.26L5.5 4z",
   image: "M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zm1-2h12l-3.75-5l-3 4L9 13zm-1 2V5zm3.5-9q.625 0 1.063-.437T10 8.5t-.437-1.062T8.5 7t-1.062.438T7 8.5t.438 1.063T8.5 10",
+  lottie: "M17 6c-2.8 0-4.4 2.8-5.9 5.5C9.9 13.8 8.7 16 7 16c-.6 0-1 .4-1 1s.4 1 1 1c2.8 0 4.4-2.8 5.9-5.5C14.1 10.2 15.3 8 17 8c.6 0 1-.4 1-1s-.4-1-1-1m2-4H5C3.3 2 2 3.3 2 5v14c0 1.7 1.3 3 3 3h14c1.7 0 3-1.3 3-3V5c0-1.7-1.3-3-3-3m1 17c0 .6-.4 1-1 1H5c-.6 0-1-.4-1-1V5c0-.6.4-1 1-1h14c.6 0 1 .4 1 1z",
+  video: "M15 8v8H5V8zm1-2H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4V7a1 1 0 0 0-1-1",
   lock: "M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h1V6q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm0-2h12V10H6zm6-3q.825 0 1.413-.587T14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17M9 8h6V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6zM6 20V10z",
   unlock: "M6 8h9V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6H7q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22H6q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8m0 12h12V10H6zm6-3q.825 0 1.413-.587T14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17m-6 3V10z",
   visible: "M12 16q1.875 0 3.188-1.312T16.5 11.5t-1.312-3.187T12 7T8.813 8.313T7.5 11.5t1.313 3.188T12 16m0-1.8q-1.125 0-1.912-.788T9.3 11.5t.788-1.912T12 8.8t1.913.788t.787 1.912t-.787 1.913T12 14.2m0 4.8q-3.65 0-6.65-2.037T1 11.5q1.35-3.425 4.35-5.462T12 4t6.65 2.038T23 11.5q-1.35 3.425-4.35 5.463T12 19m0-2q2.825 0 5.188-1.487T20.8 11.5q-1.25-2.525-3.613-4.012T12 6T6.813 7.488T3.2 11.5q1.25 2.525 3.613 4.013T12 17",
@@ -4371,8 +4399,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     const editing = ref(false);
     async function onDblclick() {
       editing.value = true;
-      await nextTick();
       if (input.value) {
+        await nextTick();
         input.value.focus();
         input.value.select();
       }
@@ -4398,7 +4426,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       }, [
         withDirectives(createElementVNode("div", {
           class: "mce-frame__name",
-          onDblclick,
+          onDblclick: withModifiers(onDblclick, ["prevent", "stop"]),
           onPointerdown,
           onPointerenter: _cache[2] || (_cache[2] = ($event) => !unref(state) && (hoverElement.value = frame.value)),
           onPointerleave: _cache[3] || (_cache[3] = ($event) => !unref(state) && (hoverElement.value = void 0))
@@ -5166,6 +5194,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         return "$frame";
       } else if (node.children.filter(isElement).length) {
         return "$group";
+      } else if (node instanceof Lottie2D) {
+        return "$lottie";
+      } else if (node instanceof Video2D) {
+        return "$video";
       } else if (isElement(node)) {
         if (node.foreground.isValid() && node.foreground.image) {
           return "$image";
@@ -5182,8 +5214,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       if (!value) {
         if (isFrame(node)) {
           return t("frame");
-        } else if (node.children.length) {
+        } else if (node.children.filter(isElement).length) {
           value = t("group");
+        } else if (node instanceof Lottie2D) {
+          value = t("lottie");
+        } else if (node instanceof Video2D) {
+          value = t("video");
         } else if (isElement(node)) {
           if (node.foreground.isValid() && node.foreground.image) {
             value = t("image");
@@ -13008,10 +13044,38 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const blocks = computed(() => {
+      const node = props.node;
+      if (node instanceof Element2D) {
+        return node.children.filter((child) => child instanceof Animation).map((anim) => {
+          const box = {
+            left: anim.delay / props.msPerPx,
+            top: 0,
+            width: anim.duration / props.msPerPx
+          };
+          if (box.width) {
+            box.width = `${box.width}px`;
+          } else {
+            box.width = "100%";
+          }
+          return {
+            name: anim.name,
+            style: {
+              width: box.width,
+              transform: `matrix(1, 0, 0, 1, ${box.left}, ${box.top})`
+            }
+          };
+        });
+      }
+      return [];
+    });
     const style = computed(() => {
-      const box = { left: 0, top: 0, width: 0 };
-      box.left = props.node.delay / props.msPerPx;
-      box.width = props.node.duration / props.msPerPx;
+      const node = props.node;
+      const box = {
+        left: node.delay / props.msPerPx,
+        top: 0,
+        width: node.duration / props.msPerPx
+      };
       if (box.width) {
         box.width = `${box.width}px`;
       } else {
@@ -13025,11 +13089,18 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["mce-segment", [
-          `mce-segment--${__props.node.meta.inEditorIs}`,
+          `mce-segment--${(__props.node.meta.inEditorIs ?? "none").toLowerCase()}`,
           __props.active && `mce-segment--active`
         ]]),
         style: normalizeStyle(style.value)
       }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(blocks.value, (block, index) => {
+          return openBlock(), createElementBlock("div", {
+            key: index,
+            class: "mce-segment__block",
+            style: normalizeStyle(block.style)
+          }, toDisplayString(block.name), 5);
+        }), 128)),
         __props.active ? (openBlock(), createElementBlock("div", _hoisted_1$8)) : createCommentVNode("", true),
         createElementVNode("span", _hoisted_2$4, toDisplayString(props.node.name), 1),
         __props.active ? (openBlock(), createElementBlock("div", _hoisted_3$4)) : createCommentVNode("", true)

package/dist/locale/en.d.ts

@@ -24,6 +24,8 @@ declare const _default: {
     polygon: string;
     star: string;
     image: string;
+    video: string;
+    lottie: string;
     pen: string;
     pencil: string;
     file: string;

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

@@ -25,6 +25,8 @@ declare const _default: {
     polygon: string;
     star: string;
     image: string;
+    video: string;
+    lottie: string;
     pen: string;
     pencil: string;
     file: string;

package/dist/mixins/1.timeline.d.ts

@@ -1,13 +1,13 @@
 import type { Node } from 'modern-canvas';
-import type { ComputedRef, Ref, WritableComputedRef } from 'vue';
+import type { Ref, WritableComputedRef } from 'vue';
 declare global {
     namespace Mce {
         interface Editor {
             msPerPx: Ref<number>;
             currentTime: WritableComputedRef<number>;
-            startTime: ComputedRef<number>;
-            endTime: ComputedRef<number>;
-            getTimeRange: (node: Node | Node[]) => {
+            startTime: WritableComputedRef<number>;
+            endTime: WritableComputedRef<number>;
+            getTimeRange: (node?: Node | Node[]) => {
                 startTime: number;
                 endTime: number;
             };

package/dist/plugins/panels.d.ts

@@ -5,7 +5,7 @@ declare global {
         interface Config extends Record<keyof Panels, boolean> {
         }
         interface Commands {
-            panel: <T extends keyof Panels>(panel: T, ...args: Panels[T]) => Promise<boolean>;
+            panels: <T extends keyof Panels>(panel: T, ...args: Panels[T]) => Promise<boolean>;
         }
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.15.14",
+  "version": "0.15.16",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",
@@ -61,10 +61,10 @@
     "diff": "^8.0.2",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.17.22",
-    "modern-canvas": "^0.14.29",
+    "modern-canvas": "^0.14.32",
     "modern-font": "^0.4.4",
     "modern-idoc": "^0.10.8",
-    "modern-text": "^1.10.13",
+    "modern-text": "^1.10.15",
     "yjs": "^13.6.29"
   },
   "peerDependencies": {
@@ -94,7 +94,7 @@
     "@vitejs/plugin-vue": "^6.0.3",
     "jiti": "^2.6.1",
     "modern-gif": "^2.0.4",
-    "sass-embedded": "^1.97.1"
+    "sass-embedded": "^1.97.2"
   },
   "scripts": {
     "build:code": "vite build",