@mce/bigesj 0.24.1 → 0.24.3

package/dist/convert/image.d.ts

@@ -1,2 +1,5 @@
+import type { Effect } from 'modern-idoc';
+import type { BigeElement } from './types';
+export declare function convertImageEffects(el: BigeElement): Effect[] | undefined;
 export declare function cachedFetchImageBitmap(url: string): Promise<ImageBitmap>;
 export declare function convertImageElementToUrl(el: Record<string, any>): Promise<string>;

package/dist/convert/text.d.ts

@@ -1,6 +1,8 @@
-import type { NormalizedTextContent, StyleObject } from 'modern-idoc';
+import type { NormalizedTextContent, StyleObject, TextDeformation } from 'modern-idoc';
 import type { BigeElement } from './types';
 export declare function convertTextStyle(el: BigeElement, isByWord?: boolean): Partial<StyleObject>;
 export declare function convertTextEffects(el: BigeElement): Promise<Partial<StyleObject>[] | undefined>;
+export declare function convertDeformationType(oldType: string): string;
+export declare function convertTextDeformation(el: BigeElement): TextDeformation | undefined;
 export declare function getTextContents(el: BigeElement): BigeElement['contents'];
 export declare function convertTextContent(el: BigeElement, isByWord?: boolean): NormalizedTextContent;

package/dist/index.js

@@ -1,8 +1,8 @@
 import { definePlugin, useEditor } from "mce";
 import { onBeforeMount, onScopeDispose, ref } from "vue";
 import { clearUndef, idGenerator, isGradient, isGradientFill, normalizeCRLF, normalizeGradientFill, normalizeNumber } from "modern-idoc";
-import { OoxmlNode, parsePresetShapeDefinition } from "modern-openxml";
 import { assets } from "modern-canvas";
+import { OoxmlNode, parsePresetShapeDefinition } from "modern-openxml";
 import { gunzipSync } from "fflate";
 //#region \0rolldown/runtime.js
 var __create = Object.create;
@@ -8180,6 +8180,253 @@ ${this.paths.map((path) => path.toSvgPathString()).join("")}
 	}
 };
 //#endregion
+//#region src/convert/image.ts
+function convertImageEffects(el) {
+	const imageEffects = el.imageEffects ?? [];
+	if (!imageEffects.length) return;
+	const ratio = el.imageEffectsRatio ?? 50;
+	const effects = [];
+	for (const entry of imageEffects) {
+		const { filling, offset, stroke } = entry;
+		const transform = offset ? `translate(${offset.x / 50 * ratio * 200}, ${offset.y / 50 * ratio * 200})` : void 0;
+		let fill;
+		if (filling?.color) fill = { color: filling.color };
+		else if (filling?.imageContent?.image) fill = { image: filling.imageContent.image };
+		const strokes = Array.isArray(stroke) ? stroke : stroke ? [stroke] : [];
+		if (strokes.length) {
+			let cumulative = 0;
+			for (const s of strokes) {
+				cumulative += s.width / 50 * ratio;
+				effects.push({
+					...transform ? { transform } : {},
+					outline: {
+						color: s.color,
+						width: cumulative
+					}
+				});
+			}
+		} else if (fill) effects.push({
+			...transform ? { transform } : {},
+			fill
+		});
+		else effects.push(transform ? { transform } : {});
+	}
+	return effects.length ? effects : void 0;
+}
+function cachedFetchImageBitmap(url) {
+	if (typeof url === "string" && url.startsWith("http")) return assets.loadBy(url).then((blob) => assets.fetchImageBitmap(blob));
+	return assets.fetchImageBitmap(url);
+}
+async function convertImageElementToUrl(el) {
+	const { cropping = {}, transform = {}, style = {}, maskUrl, imageEffects = [], imageEffectsRatio = 1 } = el;
+	const url = el.clipUrl || el.url;
+	const { translateX = 0, translateY = 0, zoom = 1 } = transform ?? {};
+	const { scaleX = 1, scaleY = 1, filter } = style;
+	if (translateX === 0 && translateY === 0 && zoom === 1 && scaleX === 1 && scaleY === 1 && !maskUrl && !filter && !imageEffects.length) return url;
+	const img = await cachedFetchImageBitmap(url);
+	const { originWidth = img.width, originHeight = img.height, imageWidth = originWidth, imageHeight = originHeight } = transform;
+	const { width = originWidth, height = originHeight } = style;
+	const dpr = window.devicePixelRatio || 1;
+	const [canvas, ctx] = createCanvas(width, height, dpr);
+	if (filter) ctx.filter = filter;
+	ctx.scale(scaleX, scaleY);
+	ctx.translate(scaleX < 0 ? -width : 0, scaleY < 0 ? -height : 0);
+	if (maskUrl) {
+		const mask = await cachedFetchImageBitmap(maskUrl);
+		ctx.drawImage(mask, 0, 0, cropping?.maskWidth ?? width, cropping?.maskHeight ?? height);
+		ctx.globalCompositeOperation = "source-in";
+		mask.close();
+	}
+	const dw = imageWidth * zoom;
+	const dh = imageHeight * zoom;
+	const dx = -(dw / 2 - imageWidth / 2) + translateX;
+	const dy = -(dh / 2 - imageHeight / 2) + translateY;
+	ctx.drawImage(img, 0, 0, img.width, img.height, dx, dy, dw, dh);
+	img.close();
+	ctx.globalCompositeOperation = "source-over";
+	if (imageEffects.length > 0) {
+		const scale = .9;
+		const center = {
+			x: (width - width * scale) / 2,
+			y: (height - height * scale) / 2
+		};
+		const canvasBitmap = await createImageBitmap(canvas);
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.scale(scale, scale);
+		for (let i = imageEffects.length - 1; i >= 0; i--) {
+			const { filling, offset, stroke } = imageEffects[i];
+			let effectCanvas = canvasBitmap;
+			if (filling) {
+				const [canvas1, ctx1] = createCanvas(width, height, dpr);
+				ctx1.drawImage(effectCanvas, 0, 0, width, height);
+				ctx1.globalCompositeOperation = "source-in";
+				if (filling.color) {
+					const [canvas2, ctx2] = createCanvas(width, height, dpr);
+					ctx2.fillStyle = filling.color;
+					ctx2.fillRect(0, 0, width, height);
+					ctx1.drawImage(canvas2, 0, 0, width, height);
+				} else if (filling.imageContent?.image) {
+					const img2 = await cachedFetchImageBitmap(filling.imageContent.image);
+					ctx1.drawImage(img2, 0, 0, width, height);
+					img2.close();
+				}
+				effectCanvas = canvas1;
+			}
+			stroke?.forEach(({ width, color }) => {
+				effectCanvas = new ImageStroke().use((ctx, image, options) => {
+					const [, ctx1] = createCanvas(image.width, image.height);
+					ctx1.drawImage(image, 0, 0);
+					const paths = getContours(ctx1);
+					const x = options.thickness;
+					const y = options.thickness;
+					ctx.strokeStyle = options.color;
+					ctx.lineWidth = options.thickness * 2;
+					ctx.lineJoin = "round";
+					paths.forEach((path) => {
+						ctx.beginPath();
+						ctx.moveTo(x + path[0].x, y + path[1].y);
+						for (let i = 1; i < path.length; i++) ctx.lineTo(x + path[i].x, y + path[i].y);
+						ctx.closePath();
+					});
+					ctx.stroke();
+				}).make(effectCanvas, {
+					color,
+					thickness: width / 50 * imageEffectsRatio
+				});
+			});
+			if (offset) {
+				let { x, y } = offset;
+				x = x / 50 * imageEffectsRatio * 200;
+				y = y / 50 * imageEffectsRatio * 200;
+				ctx.drawImage(effectCanvas, x + center.x, y + center.y, width, height);
+			} else ctx.drawImage(effectCanvas, center.x, center.y, width, height);
+		}
+		canvasBitmap.close();
+	}
+	return await new Promise((resolve) => {
+		canvas.toBlob((blob) => {
+			try {
+				resolve(URL.createObjectURL(blob));
+			} catch (e) {
+				console.error(`Failed to URL.createObjectURL, url: ${url}`, e);
+				resolve(url);
+			}
+		});
+	});
+}
+function createCanvas(width, height, ratio = 1) {
+	const canvas = document.createElement("canvas");
+	canvas.width = width * ratio;
+	canvas.height = height * ratio;
+	canvas.style.width = `${width}px`;
+	canvas.style.height = `${height}px`;
+	const ctx = canvas.getContext("2d");
+	ctx.scale(ratio, ratio);
+	return [canvas, ctx];
+}
+var ImageStroke = class {
+	canvas = document.createElement("canvas");
+	method;
+	use(method) {
+		this.method = method;
+		return this;
+	}
+	make(image, options) {
+		const { canvas } = this;
+		const ctx = this.canvas.getContext("2d");
+		const strokeSize = options.thickness * 2;
+		const [resultWidth, resultHeight] = [image.width, image.height].map((val) => val + strokeSize);
+		if (resultWidth !== canvas.width || resultHeight !== canvas.height) {
+			canvas.width = resultWidth;
+			canvas.height = resultHeight;
+		}
+		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+		this.method(ctx, image, options);
+		ctx.drawImage(image, options.thickness, options.thickness);
+		return canvas;
+	}
+};
+function getContours(ctx) {
+	const cx = 0;
+	const cy = 0;
+	const canvasWidth = ctx.canvas.width;
+	const canvasHeight = ctx.canvas.height;
+	const paths = [];
+	let lastPos = 3;
+	const alpha = 100;
+	const trace = () => {
+		const path = [];
+		const data = new Uint32Array(ctx.getImageData(cx, cy, canvasWidth, canvasHeight).data.buffer);
+		let x;
+		let y;
+		let startX;
+		let startY;
+		let startPos = -1;
+		let step;
+		let prevStep = 9;
+		const steps = [
+			9,
+			0,
+			3,
+			3,
+			2,
+			0,
+			9,
+			3,
+			1,
+			9,
+			1,
+			1,
+			2,
+			0,
+			2,
+			9
+		];
+		let time = 50;
+		function getState(x, y) {
+			return x >= 0 && y >= 0 && x < canvasWidth && y < canvasHeight ? data[y * canvasWidth + x] >>> 24 > alpha : false;
+		}
+		function getNextStep(x, y) {
+			let v = 0;
+			if (getState(x - 1, y - 1)) v += 1;
+			if (getState(x, y - 1)) v += 2;
+			if (getState(x - 1, y)) v += 4;
+			if (getState(x, y)) v += 8;
+			if (time > 50) time += 10;
+			else time += 10;
+			if (v === 6) return prevStep === 0 ? 2 : 3;
+			else if (v === 9) return prevStep === 3 ? 0 : 1;
+			else return steps[v];
+		}
+		for (let i = lastPos; i < data.length; i++) if (data[i] >>> 24 > alpha) {
+			startPos = lastPos = i;
+			break;
+		}
+		if (startPos >= 0) {
+			x = startX = startPos % canvasWidth;
+			y = startY = Math.floor(startPos / canvasWidth);
+			do {
+				step = getNextStep(x, y);
+				if (step === 0) y--;
+				else if (step === 1) y++;
+				else if (step === 2) x--;
+				else if (step === 3) x++;
+				if (step !== prevStep) {
+					path.push({
+						x: x + cx,
+						y: y + cy
+					});
+					prevStep = step;
+				}
+			} while (x !== startX || y !== startY);
+		}
+		paths.push(path);
+		return path;
+	};
+	trace();
+	return paths;
+}
+//#endregion
 //#region src/convert/shape.ts
 async function convertShapeElementToSvg(el) {
 	if (![
@@ -8439,221 +8686,6 @@ function convertSvgLinearGradient(value) {
 	}
 }
 //#endregion
-//#region src/convert/image.ts
-function cachedFetchImageBitmap(url) {
-	if (typeof url === "string" && url.startsWith("http")) return assets.loadBy(url).then((blob) => assets.fetchImageBitmap(blob));
-	return assets.fetchImageBitmap(url);
-}
-async function convertImageElementToUrl(el) {
-	const { cropping = {}, transform = {}, style = {}, maskUrl, imageEffects = [], imageEffectsRatio = 1 } = el;
-	const url = el.clipUrl || el.url;
-	const { translateX = 0, translateY = 0, zoom = 1 } = transform ?? {};
-	const { scaleX = 1, scaleY = 1, filter } = style;
-	if (translateX === 0 && translateY === 0 && zoom === 1 && scaleX === 1 && scaleY === 1 && !maskUrl && !filter && !imageEffects.length) return url;
-	const img = await cachedFetchImageBitmap(url);
-	const { originWidth = img.width, originHeight = img.height, imageWidth = originWidth, imageHeight = originHeight } = transform;
-	const { width = originWidth, height = originHeight } = style;
-	const dpr = window.devicePixelRatio || 1;
-	const [canvas, ctx] = createCanvas(width, height, dpr);
-	if (filter) ctx.filter = filter;
-	ctx.scale(scaleX, scaleY);
-	ctx.translate(scaleX < 0 ? -width : 0, scaleY < 0 ? -height : 0);
-	if (maskUrl) {
-		const mask = await cachedFetchImageBitmap(maskUrl);
-		ctx.drawImage(mask, 0, 0, cropping?.maskWidth ?? width, cropping?.maskHeight ?? height);
-		ctx.globalCompositeOperation = "source-in";
-		mask.close();
-	}
-	const dw = imageWidth * zoom;
-	const dh = imageHeight * zoom;
-	const dx = -(dw / 2 - imageWidth / 2) + translateX;
-	const dy = -(dh / 2 - imageHeight / 2) + translateY;
-	ctx.drawImage(img, 0, 0, img.width, img.height, dx, dy, dw, dh);
-	img.close();
-	ctx.globalCompositeOperation = "source-over";
-	if (imageEffects.length > 0) {
-		const scale = .9;
-		const center = {
-			x: (width - width * scale) / 2,
-			y: (height - height * scale) / 2
-		};
-		const canvasBitmap = await createImageBitmap(canvas);
-		ctx.clearRect(0, 0, canvas.width, canvas.height);
-		ctx.scale(scale, scale);
-		for (let i = imageEffects.length - 1; i >= 0; i--) {
-			const { filling, offset, stroke } = imageEffects[i];
-			let effectCanvas = canvasBitmap;
-			if (filling) {
-				const [canvas1, ctx1] = createCanvas(width, height, dpr);
-				ctx1.drawImage(effectCanvas, 0, 0, width, height);
-				ctx1.globalCompositeOperation = "source-in";
-				if (filling.color) {
-					const [canvas2, ctx2] = createCanvas(width, height, dpr);
-					ctx2.fillStyle = filling.color;
-					ctx2.fillRect(0, 0, width, height);
-					ctx1.drawImage(canvas2, 0, 0, width, height);
-				} else if (filling.imageContent?.image) {
-					const img2 = await cachedFetchImageBitmap(filling.imageContent.image);
-					ctx1.drawImage(img2, 0, 0, width, height);
-					img2.close();
-				}
-				effectCanvas = canvas1;
-			}
-			stroke?.forEach(({ width, color }) => {
-				effectCanvas = new ImageStroke().use((ctx, image, options) => {
-					const [, ctx1] = createCanvas(image.width, image.height);
-					ctx1.drawImage(image, 0, 0);
-					const paths = getContours(ctx1);
-					const x = options.thickness;
-					const y = options.thickness;
-					ctx.strokeStyle = options.color;
-					ctx.lineWidth = options.thickness * 2;
-					ctx.lineJoin = "round";
-					paths.forEach((path) => {
-						ctx.beginPath();
-						ctx.moveTo(x + path[0].x, y + path[1].y);
-						for (let i = 1; i < path.length; i++) ctx.lineTo(x + path[i].x, y + path[i].y);
-						ctx.closePath();
-					});
-					ctx.stroke();
-				}).make(effectCanvas, {
-					color,
-					thickness: width / 50 * imageEffectsRatio
-				});
-			});
-			if (offset) {
-				let { x, y } = offset;
-				x = x / 50 * imageEffectsRatio * 200;
-				y = y / 50 * imageEffectsRatio * 200;
-				ctx.drawImage(effectCanvas, x + center.x, y + center.y, width, height);
-			} else ctx.drawImage(effectCanvas, center.x, center.y, width, height);
-		}
-		canvasBitmap.close();
-	}
-	return await new Promise((resolve) => {
-		canvas.toBlob((blob) => {
-			try {
-				resolve(URL.createObjectURL(blob));
-			} catch (e) {
-				console.error(`Failed to URL.createObjectURL, url: ${url}`, e);
-				resolve(url);
-			}
-		});
-	});
-}
-function createCanvas(width, height, ratio = 1) {
-	const canvas = document.createElement("canvas");
-	canvas.width = width * ratio;
-	canvas.height = height * ratio;
-	canvas.style.width = `${width}px`;
-	canvas.style.height = `${height}px`;
-	const ctx = canvas.getContext("2d");
-	ctx.scale(ratio, ratio);
-	return [canvas, ctx];
-}
-var ImageStroke = class {
-	canvas = document.createElement("canvas");
-	method;
-	use(method) {
-		this.method = method;
-		return this;
-	}
-	make(image, options) {
-		const { canvas } = this;
-		const ctx = this.canvas.getContext("2d");
-		const strokeSize = options.thickness * 2;
-		const [resultWidth, resultHeight] = [image.width, image.height].map((val) => val + strokeSize);
-		if (resultWidth !== canvas.width || resultHeight !== canvas.height) {
-			canvas.width = resultWidth;
-			canvas.height = resultHeight;
-		}
-		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-		this.method(ctx, image, options);
-		ctx.drawImage(image, options.thickness, options.thickness);
-		return canvas;
-	}
-};
-function getContours(ctx) {
-	const cx = 0;
-	const cy = 0;
-	const canvasWidth = ctx.canvas.width;
-	const canvasHeight = ctx.canvas.height;
-	const paths = [];
-	let lastPos = 3;
-	const alpha = 100;
-	const trace = () => {
-		const path = [];
-		const data = new Uint32Array(ctx.getImageData(cx, cy, canvasWidth, canvasHeight).data.buffer);
-		let x;
-		let y;
-		let startX;
-		let startY;
-		let startPos = -1;
-		let step;
-		let prevStep = 9;
-		const steps = [
-			9,
-			0,
-			3,
-			3,
-			2,
-			0,
-			9,
-			3,
-			1,
-			9,
-			1,
-			1,
-			2,
-			0,
-			2,
-			9
-		];
-		let time = 50;
-		function getState(x, y) {
-			return x >= 0 && y >= 0 && x < canvasWidth && y < canvasHeight ? data[y * canvasWidth + x] >>> 24 > alpha : false;
-		}
-		function getNextStep(x, y) {
-			let v = 0;
-			if (getState(x - 1, y - 1)) v += 1;
-			if (getState(x, y - 1)) v += 2;
-			if (getState(x - 1, y)) v += 4;
-			if (getState(x, y)) v += 8;
-			if (time > 50) time += 10;
-			else time += 10;
-			if (v === 6) return prevStep === 0 ? 2 : 3;
-			else if (v === 9) return prevStep === 3 ? 0 : 1;
-			else return steps[v];
-		}
-		for (let i = lastPos; i < data.length; i++) if (data[i] >>> 24 > alpha) {
-			startPos = lastPos = i;
-			break;
-		}
-		if (startPos >= 0) {
-			x = startX = startPos % canvasWidth;
-			y = startY = Math.floor(startPos / canvasWidth);
-			do {
-				step = getNextStep(x, y);
-				if (step === 0) y--;
-				else if (step === 1) y++;
-				else if (step === 2) x--;
-				else if (step === 3) x++;
-				if (step !== prevStep) {
-					path.push({
-						x: x + cx,
-						y: y + cy
-					});
-					prevStep = step;
-				}
-			} while (x !== startX || y !== startY);
-		}
-		paths.push(path);
-		return path;
-	};
-	trace();
-	return paths;
-}
-//#endregion
 //#region src/convert/svg.ts
 async function convertSvgElementToUrl(el) {
 	const { id, doc, url, style = {}, background = {} } = el;
@@ -8755,6 +8787,17 @@ async function convertTextEffects(el) {
 		return result;
 	}));
 }
+function convertDeformationType(oldType) {
+	return oldType.replace(/([A-Z])/g, (_, c) => `-${c.toLowerCase()}`).replace(/^-/, "");
+}
+function convertTextDeformation(el) {
+	const deformation = el.deformation;
+	if (!deformation?.type) return;
+	return {
+		...deformation,
+		type: convertDeformationType(deformation.type)
+	};
+}
 function getTextContents(el) {
 	if (el.version) return el.contents;
 	return el.contents.map((p) => {
@@ -8874,7 +8917,8 @@ async function convertElement(el, parent, context) {
 			element.foreground = {
 				enabled: true,
 				image: el.clipUrl || el.url,
-				fillWithShape: true
+				fillWithShape: true,
+				effects: convertImageEffects(el)
 			};
 			if (el.clipUrl) meta.rawForegroundImage = el.url;
 			if (el.maskUrl && el.maskUrl !== el.url) style.maskImage = el.maskUrl;
@@ -8902,7 +8946,8 @@ async function convertElement(el, parent, context) {
 			};
 			element.text = clearUndef({
 				content: convertTextContent(el),
-				effects: await convertTextEffects(el)
+				effects: await convertTextEffects(el),
+				deformation: convertTextDeformation(el)
 			});
 			meta.textEffectsId = el.effectId;
 			if (style.color && isGradientFill(style.color)) {
@@ -9297,4 +9342,4 @@ var options = {
 //#region src/index.ts
 var src_default = plugin;
 //#endregion
-export { bidTidLoader, bigeLoader, cachedFetchImageBitmap, clipboardLoader, convertAnimation, convertBackground, convertDoc, convertElement, convertImageElementToUrl, convertLayout, convertSvgElementToUrl, convertTextContent, convertTextEffects, convertTextStyle, croppingToCropRect, src_default as default, getStyle, getTextContents, options, parseAnimations, plugin, transformToCropRect, useFonts };
+export { bidTidLoader, bigeLoader, cachedFetchImageBitmap, clipboardLoader, convertAnimation, convertBackground, convertDeformationType, convertDoc, convertElement, convertImageEffects, convertImageElementToUrl, convertLayout, convertSvgElementToUrl, convertTextContent, convertTextDeformation, convertTextEffects, convertTextStyle, croppingToCropRect, src_default as default, getStyle, getTextContents, options, parseAnimations, plugin, transformToCropRect, useFonts };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mce/bigesj",
   "type": "module",
-  "version": "0.24.1",
+  "version": "0.24.3",
   "description": "Plugin for mce",
   "author": "wxm",
   "license": "MIT",
@@ -46,10 +46,10 @@
   ],
   "dependencies": {
     "fflate": "^0.8.3",
-    "modern-openxml": "^1.12.3"
+    "modern-openxml": "^1.12.4"
   },
   "devDependencies": {
-    "mce": "0.24.1"
+    "mce": "0.24.3"
   },
   "peerDependencies": {
     "mce": "^0"