mce 0.17.12 → 0.17.13

package/dist/components/timeline/Segment.vue.d.ts

@@ -1,6 +1,7 @@
 import type { TimelineNode } from 'modern-canvas';
 type __VLS_Props = {
     node: TimelineNode;
+    endTime: number;
     msPerPx?: number;
     active?: boolean;
 };

package/dist/composables/index.d.ts

@@ -4,6 +4,7 @@ export * from './icons';
 export * from './layer';
 export * from './layout';
 export * from './menu';
+export * from './node';
 export * from './overlay';
 export * from './resizeObserver';
 export * from './strategy';

package/dist/composables/node.d.ts

@@ -0,0 +1,7 @@
+import type { Node } from 'modern-canvas';
+import type { Ref } from 'vue';
+import type { Editor } from '../editor';
+export declare function useNode(nodeRef: Ref<Node>, editor?: Editor): {
+    thumbnailIcon: import("vue").ComputedRef<"$frame" | "$group" | "$lottie" | "$video" | "$image" | "$text" | "$shape">;
+    thumbnailName: import("vue").ComputedRef<string>;
+};

package/dist/index.js

@@ -3865,6 +3865,39 @@ function createLayout(props) {
 //#region src/composables/menu.ts
 var MceMenuSymbol = Symbol.for("MceMenuSymbol");
 //#endregion
+//#region src/composables/node.ts
+function useNode(nodeRef, editor = useEditor()) {
+	const { inEditorIs, isElement, t } = editor;
+	return {
+		thumbnailIcon: computed(() => {
+			const node = nodeRef.value;
+			if (inEditorIs(node, "Frame")) 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";
+				if (node.text.isValid()) return "$text";
+			}
+			return "$shape";
+		}),
+		thumbnailName: computed(() => {
+			const node = nodeRef.value;
+			let value = node.name;
+			if (!value || value[0] === "@") {
+				if (inEditorIs(node, "Frame")) return t("frame");
+				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");
+				else if (node.text.isValid()) value = node._textContent || node.text.getStringContent();
+				else value = t("shape");
+			}
+			return value || node.id;
+		})
+	};
+}
+//#endregion
 //#region src/composables/overlay.ts
 var MceOverlaySymbol = Symbol.for("MceOverlaySymbol");
 var makeMceOverlayProps = propsFactory({
@@ -4407,20 +4440,21 @@ var json_default = definePlugin((editor) => {
 						elements = root.value.children;
 					}
 				}
-				const box = getAabb(elements, "parent");
+				const { left, top, width, height } = getAabb(elements, "parent");
 				return {
 					id,
 					name,
 					style: {
-						width: box.width * scale,
-						height: box.height * scale,
+						width: width * scale,
+						height: height * scale,
 						transformOrigin: "left top",
 						transform: `scale(${scale})`
 					},
 					children: elements.map((el) => {
 						const json = el.toJSON();
-						if (box.left) json.style.left = (json.style.left ?? 0) - box.left;
-						if (box.top) json.style.top = (json.style.top ?? 0) - box.top;
+						const style = json.style;
+						if (left) style.left = (style.left ?? 0) - left;
+						if (top) style.top = (style.top ?? 0) - top;
 						json.meta ??= {};
 						json.meta.inPptIs = "Slide";
 						return json;
@@ -4486,9 +4520,11 @@ var Layer_default = /* @__PURE__ */ defineComponent({
 	emits: ["update:opened"],
 	setup(__props) {
 		const props = __props;
-		const { isElement, inEditorIs, isVisible, setVisible, isLock, setLock, selection, nodes, nodeIndexMap, hoverElement, exec, t } = useEditor();
+		const editor = useEditor();
+		const { isElement, isVisible, setVisible, isLock, setLock, selection, nodes, nodeIndexMap, hoverElement, exec, t } = editor;
 		const opened = useModel(__props, "opened");
 		const dom = ref();
+		const { thumbnailIcon, thumbnailName } = useNode(computed(() => props.node), editor);
 		const { selecting, dragging, dropping, onMousedown, id, openedItems } = useLayerItem({
 			opened,
 			node: computed(() => props.node),
@@ -4502,32 +4538,6 @@ var Layer_default = /* @__PURE__ */ defineComponent({
 		const hovering = ref(false);
 		const editing = ref(false);
 		const editValue = ref();
-		const thumbnailIcon = computed(() => {
-			const node = props.node;
-			if (inEditorIs(node, "Frame")) 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";
-				if (node.text.isValid()) return "$text";
-			}
-			return "$shape";
-		});
-		const thumbnailName = computed(() => {
-			const node = props.node;
-			let value = node.name;
-			if (!value || value[0] === "@") {
-				if (inEditorIs(node, "Frame")) return t("frame");
-				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");
-				else if (node.text.isValid()) value = node._textContent || node.text.getStringContent();
-				else value = t("shape");
-			}
-			return value || node.id;
-		});
 		function onClickExpand() {
 			opened.value = !opened.value;
 		}
@@ -4637,7 +4647,7 @@ var Layer_default = /* @__PURE__ */ defineComponent({
 					createElementVNode("div", {
 						class: "m-layer__thumbnail",
 						onDblclick: onDblclickThumbnail
-					}, [createVNode(unref(Icon_default), { icon: thumbnailIcon.value }, null, 8, ["icon"])], 32),
+					}, [createVNode(unref(Icon_default), { icon: unref(thumbnailIcon) }, null, 8, ["icon"])], 32),
 					props.root ? (openBlock(), createElementBlock("div", _hoisted_4$5, toDisplayString(unref(t)("layers")), 1)) : (openBlock(), createElementBlock("div", {
 						key: 1,
 						class: "m-layer__name",
@@ -4655,7 +4665,7 @@ var Layer_default = /* @__PURE__ */ defineComponent({
 						autocorrect: "off",
 						autofocus: "",
 						onBlur: onInputBlur
-					}, null, 544)), [[vModelText, editValue.value]]) : createCommentVNode("", true), createElementVNode("div", { style: normalizeStyle({ visibility: editing.value ? "hidden" : void 0 }) }, toDisplayString(editValue.value || thumbnailName.value), 5)], 32)),
+					}, null, 544)), [[vModelText, editValue.value]]) : createCommentVNode("", true), createElementVNode("div", { style: normalizeStyle({ visibility: editing.value ? "hidden" : void 0 }) }, toDisplayString(editValue.value || unref(thumbnailName)), 5)], 32)),
 					createElementVNode("div", { class: normalizeClass(["m-layer__action", {
 						"m-layer__action--hover": hovering.value,
 						"m-layer__action--show": hovering.value || unref(isLock)(props.node) || !unref(isVisible)(props.node)
@@ -13591,11 +13601,13 @@ var Segment_default = /* @__PURE__ */ defineComponent({
 	__name: "Segment",
 	props: {
 		node: {},
+		endTime: {},
 		msPerPx: { default: 1 },
 		active: { type: Boolean }
 	},
 	setup(__props) {
 		const props = __props;
+		const { thumbnailName } = useNode(computed(() => props.node));
 		const blocks = computed(() => {
 			const node = props.node;
 			if (node instanceof Element2D) return node.children.filter((child) => child instanceof Animation).map((anim) => {
@@ -13618,17 +13630,16 @@ var Segment_default = /* @__PURE__ */ defineComponent({
 			return [];
 		});
 		const style = computed(() => {
-			const node = props.node;
+			const { duration: _duration = 0, delay = 0 } = props.node;
+			const duration = _duration || props.endTime - delay;
 			const box = {
-				left: node.delay / props.msPerPx,
+				left: delay / props.msPerPx,
 				top: 0,
-				width: node.duration / props.msPerPx,
+				width: duration / props.msPerPx,
 				height: 0
 			};
-			if (box.width) box.width = `${box.width}px`;
-			else box.width = "100%";
 			return {
-				width: box.width,
+				width: `${box.width}px`,
 				transform: `matrix(1, 0, 0, 1, ${box.left}, ${box.top})`
 			};
 		});
@@ -13645,7 +13656,7 @@ var Segment_default = /* @__PURE__ */ defineComponent({
 					}, null, 4);
 				}), 128)),
 				__props.active ? (openBlock(), createElementBlock("div", _hoisted_1$7)) : createCommentVNode("", true),
-				createElementVNode("span", _hoisted_2$3, toDisplayString(props.node.name), 1),
+				createElementVNode("span", _hoisted_2$3, toDisplayString(unref(thumbnailName)), 1),
 				__props.active ? (openBlock(), createElementBlock("div", _hoisted_3$3)) : createCommentVNode("", true)
 			], 6);
 		};
@@ -13799,11 +13810,13 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 						default: withCtx(() => [createVNode(Segment_default, {
 							node,
 							"ms-per-px": unref(msPerPx),
+							"end-time": unref(endTime),
 							active: unref(selection).some((v) => v.equal(node)),
 							onMousedown: withModifiers(($event) => selection.value = [node], ["stop"])
 						}, null, 8, [
 							"node",
 							"ms-per-px",
+							"end-time",
 							"active",
 							"onMousedown"
 						])]),
@@ -14458,12 +14471,12 @@ var TextEditor_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region \0@oxc-project+runtime@0.124.0/helpers/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.126.0/helpers/decorateMetadata.js
 function __decorateMetadata(k, v) {
 	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.124.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.126.0/helpers/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.17.12",
+  "version": "0.17.13",
   "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",
@@ -58,9 +58,9 @@
     "@floating-ui/vue": "^1.1.11",
     "@vueuse/components": "^14.2.1",
     "@vueuse/core": "^14.2.1",
-    "diff": "^8.0.4",
+    "diff": "^9.0.0",
     "lodash-es": "^4.18.1",
-    "modern-canvas": "^0.15.9",
+    "modern-canvas": "^0.16.2",
     "modern-font": "^0.5.0",
     "modern-idoc": "^0.10.21",
     "modern-text": "^1.10.17",
@@ -86,10 +86,10 @@
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
-    "@vitejs/plugin-vue": "^6.0.5",
+    "@vitejs/plugin-vue": "^6.0.6",
     "jiti": "^2.6.1",
     "sass-embedded": "^1.99.0",
-    "typedoc": "^0.28.18",
+    "typedoc": "^0.28.19",
     "typedoc-plugin-markdown": "^4.11.0"
   },
   "scripts": {