@versa_ai/vmml-editor 1.0.2

package/src/utils/usePeekControl.ts

@@ -0,0 +1,242 @@
+import { fabric } from "fabric";
+function drawImg(
+	ctx: CanvasRenderingContext2D,
+	left: number,
+	top: number,
+	img: HTMLImageElement,
+	wSize: number,
+	hSize: number,
+	angle: number | undefined,
+) {
+	if (angle === undefined) return;
+	ctx.save();
+	ctx.translate(left, top);
+	ctx.rotate(fabric.util.degreesToRadians(angle));
+	ctx.drawImage(img, -wSize / 2, -hSize / 2, wSize, hSize);
+	ctx.restore();
+}
+
+// 顶点
+function usePeekControl(canvas: fabric.Canvas) {
+	const iconUrls = {
+		delete: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/0c7084a9-6067-4277-a5af-2932983cbeb7.png",
+		// zoom: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/ff6aea73-4d12-4201-9404-3134d5f9525c.png",
+		zoom: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/0909485d-46db-47b4-8bb1-5a686510ddb3.png",
+		mute: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/3fef2c5d-7576-424d-813c-34508b051884.png",
+		volume: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/1ab2e829-c5b1-4177-8554-ae2f74b02e1d.png",
+		edit: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/9e9ed472-62cf-4b71-891f-bc08c8b08a5d.png"
+	};
+	const createIconElement = (url: string) => {
+		const img = document.createElement("img");
+		img.src = url;
+		return img;
+	};
+
+	// 删除选中元素
+	const deleteObject = (mouseEvent: MouseEvent, target: fabric.Transform) => {
+		if (target.action === "rotate") return true;
+		const activeObject = canvas.getActiveObjects();
+		if (activeObject) {
+			activeObject.map((item: any) => canvas.remove(item));
+			canvas.requestRenderAll();
+			canvas.discardActiveObject();
+		}
+		return true;
+	};
+	const delImg = createIconElement(iconUrls.delete);
+	const zoomImg = createIconElement(iconUrls.zoom);
+	const muteImg = createIconElement(iconUrls.mute);
+	const volumeImg = createIconElement(iconUrls.volume);
+	const editImg = createIconElement(iconUrls.edit);
+	//渲染删除图标
+	const renderDelIcon = (
+		ctx: CanvasRenderingContext2D,
+		left: number,
+		top: number,
+		styleOverride: any,
+		fabricObject: fabric.Object,
+	) => {
+		drawImg(ctx, left, top, delImg, 28, 28, fabricObject.angle);
+	};
+	//渲染旋转缩放图标
+	const renderIconRotate = (
+		ctx: CanvasRenderingContext2D,
+		left: number,
+		top: number,
+		styleOverride: any,
+		fabricObject: fabric.Object,
+	) => {
+		drawImg(ctx, left, top, zoomImg, 28, 28, fabricObject.angle);
+	};
+
+	const renderMultiIcon = (ctx: CanvasRenderingContext2D,
+		left: number,
+		top: number,
+		styleOverride: any,
+		fabricObject: fabric.Object | any,) => {
+		if (fabricObject.clipData.type === '文字') {
+			renderEditIcon(ctx,
+				left,
+				top,
+				styleOverride,
+				fabricObject)
+		} else {
+			renderMuteIcon(ctx,
+				left,
+				top,
+				styleOverride,
+				fabricObject
+			)
+		}
+	}
+	//渲染静音图标
+	const renderMuteIcon = (
+		ctx: CanvasRenderingContext2D,
+		left: number,
+		top: number,
+		styleOverride: any,
+		fabricObject: fabric.Object | any,
+	) => {
+		if (!fabricObject.clipData) return false;
+		if (fabricObject.clipData.type === '表情包') {
+			if (fabricObject.clipData.isMute === null || fabricObject.clipData.isMute === undefined) return false;
+			if (fabricObject.clipData.isMute) {
+				drawImg(ctx, left, top, muteImg, 28, 28, fabricObject.angle);
+			} else {
+				drawImg(ctx, left, top, volumeImg, 28, 28, fabricObject.angle);
+			}
+		}
+	};
+	//渲染编辑图标
+	const renderEditIcon = (
+		ctx: CanvasRenderingContext2D,
+		left: number,
+		top: number,
+		styleOverride: any,
+		fabricObject: fabric.Object | any,
+	) => {
+		if (!fabricObject.clipData) return false;
+		if (fabricObject.clipData.type === '文字') {
+			drawImg(ctx, left, top, editImg, 28, 28, fabricObject.angle);
+		}
+	};
+	const multiAction = (eventData: any, transform: any, x: any, y: any)=>{
+		if (transform.target.clipData.type === '文字') {
+			editAction(eventData, transform, x, y)
+		}else{
+			muteAction(eventData, transform, x, y)
+		}
+		return true;
+	}
+	//需要暴露方法
+	const muteAction = (eventData: any, transform: any, x: any, y: any) => {
+		if (transform.target.clipData.isMute === null) return false;
+		transform.target.clipData = JSON.parse(JSON.stringify(transform.target.clipData));
+		transform.target.clipData.isMute = !transform.target.clipData.isMute;
+		canvas.renderAll();
+		canvas.fire("object:muteChange", { target: transform.target });
+		return true;
+	};
+	//暴露文字编辑方法
+	const editAction = (eventData: any, transform: any, x: any, y: any) => {
+		if (transform.target.clipData.type === '文字') {
+			canvas.fire("object:textEdit", { target: transform.target });
+		}
+		return true;
+	}
+
+	const actionHandler = (
+		eventData: any, // 在实际应用中，应该为 eventData 提供准确的类型定义
+		transform: any,
+		x: number,
+		y: number
+	): boolean => {
+		try {
+			const t = transform,
+				target = t.target,
+				pivotPoint = target.translateToOriginPoint(
+					target.getCenterPoint(),
+					t.originX,
+					t.originY
+				);
+			const lastAngle = Math.atan2(t.ey - pivotPoint.y, t.ex - pivotPoint.x),
+				curAngle = Math.atan2(y - pivotPoint.y, x - pivotPoint.x);
+			let angle2 = Math.floor((curAngle - lastAngle + t.theta) * (180 / Math.PI));
+			fabric.controlsUtils.scalingEqually(eventData, transform, x, y);
+			// 优化条件判断，使用策略模式或映射的方式进行旋转角度的决定
+			// 数组前两位是范围，最后一位是设置的角度
+			const rotateAngles = [
+				[85, 95, 90],
+				[175, 185, 180],
+				[265, 275, 270],
+				[355, 365, 360],
+				[440, 460, 90],
+				[-5, 5, 0],
+				[-95, -85, 270],
+				[-185, -175, 180]
+			];
+
+			for (let i = 0; i < rotateAngles.length; i++) {
+				if (rotateAngles[i][0] < angle2 && angle2 < rotateAngles[i][1]) {
+					target.rotate(rotateAngles[i][2]);
+					return true;
+				}
+			}
+
+			// 如果没有符合的旋转范围，则使用默认的旋转逻辑
+			fabric.controlsUtils.rotationWithSnapping(eventData, transform, x, y);
+			return true;
+		} catch (error) {
+			console.error("Action handler error:", error);
+			// 根据实际情况处理异常，例如返回false，或者重新抛出异常
+			return false;
+		}
+	};
+	//top left 删除
+	fabric.Object.prototype.controls.tl = new fabric.Control({
+		x: -0.5,
+		y: -0.5,
+		mouseUpHandler: deleteObject,
+		render: renderDelIcon,
+	});
+
+	//bottom left 左下 -- 设置静音和音量
+	fabric.Object.prototype.controls.bl = new fabric.Control({
+		x: -0.5,
+		y: 0.5,
+		mouseUpHandler: muteAction,
+		render: renderMuteIcon,
+	});
+	//top right 右上   文字类型设置编辑
+	fabric.Object.prototype.controls.tr = new fabric.Control({
+		x: 0.5,
+		y: -0.5,
+		mouseUpHandler: editAction,
+		render: renderEditIcon
+	});
+	// 中间横杠
+	fabric.Object.prototype.controls.ml = new fabric.Control({ visible: false });
+	fabric.Object.prototype.controls.mr = new fabric.Control({ visible: false });
+	fabric.Object.prototype.controls.mb = new fabric.Control({ visible: false });
+	fabric.Object.prototype.controls.mt = new fabric.Control({ visible: false });
+	//旋转图标
+	fabric.Object.prototype.controls.mtr = new fabric.Control({ visible: false });
+	//bottom right 旋转+缩放
+	fabric.Object.prototype.controls.br = new fabric.Control({
+		x: 0.5,
+		y: 0.5,
+		actionName: "rotate",
+		actionHandler: actionHandler,
+		render: renderIconRotate,
+	});
+	// 选中边框样式
+	fabric.Object.prototype.set({
+		borderColor: "#d6d6d699",
+		borderScaleFactor: 1.5,
+		borderOpacityWhenMoving: 1,
+		padding: 5,
+	});
+	return canvas;
+}
+
+export { usePeekControl };

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+	"extends": "../../tsconfig.json",
+	"include": ["."],
+	"exclude": ["dist", "build", "node_modules"]
+}

package/tsup.config.ts

@@ -0,0 +1,14 @@
+import { sassPlugin } from "esbuild-sass-plugin";
+import { defineConfig } from "tsup";
+export default defineConfig((options) => ({
+	entryPoints: ["./src/index.tsx"],
+	format: ["cjs", "esm"],
+	esbuildPlugins: [sassPlugin({ type: "style" })],
+	treeshake: true,
+	dts: true,
+	sourcemap: true,
+	splitting: true,
+	external: ["react"],
+	injectStyle: true,
+	...options,
+}));