@hprint/plugins 0.0.1-alpha.0

package/src/plugins/CenterAlignPlugin.ts

@@ -0,0 +1,133 @@
+import { fabric, IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<
+    CenterAlignPlugin,
+    'centerH' | 'center' | 'position' | 'centerV' | 'positionV2'
+>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin { }
+}
+
+class CenterAlignPlugin implements IPluginTempl {
+    static pluginName = 'CenterAlignPlugin';
+    static apis = ['centerH', 'center', 'position', 'centerV', 'positionV2'];
+    static anignType = ['centerH', 'center', 'centerV'];
+    static alignTypeV2 = ['centerH', 'center', 'centerV', 'leftH', 'topV', 'rightH', 'bottomV'];
+    // public hotkeys: string[] = ['space'];
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) { }
+
+    center(workspace: fabric.Rect, object: fabric.Object) {
+        const center = workspace.getCenterPoint();
+        return this.canvas._centerObject(object, center);
+    }
+
+    centerV(workspace: fabric.Rect, object: fabric.Object) {
+        return this.canvas._centerObject(
+            object,
+            new fabric.Point(
+                object.getCenterPoint().x,
+                workspace.getCenterPoint().y
+            )
+        );
+    }
+
+    centerH(workspace: fabric.Rect, object: fabric.Object) {
+        return this.canvas._centerObject(
+            object,
+            new fabric.Point(
+                workspace.getCenterPoint().x,
+                object.getCenterPoint().y
+            )
+        );
+    }
+
+    position(name: 'centerH' | 'center' | 'centerV') {
+        const activeObject = this.canvas.getActiveObject();
+        if (CenterAlignPlugin.anignType.includes(name) && activeObject) {
+            const defaultWorkspace = this.canvas
+                .getObjects()
+                .find((item) => item.id === 'workspace');
+            if (defaultWorkspace) {
+                this[name](defaultWorkspace, activeObject);
+            }
+            this.canvas.renderAll();
+        }
+    }
+
+    contextMenu() {
+        const activeObject = this.canvas.getActiveObject();
+        if (activeObject) {
+            return [
+                {
+                    text: '水平垂直居中',
+                    hotkey: '',
+                    disabled: false,
+                    onclick: () => this.position('center'),
+                },
+            ];
+        }
+    }
+
+    positionV2(element: fabric.Object, position: 'centerH' | 'center' | 'centerV' | 'leftH' | 'topV' | 'rightH' | 'bottomV') {
+        if (CenterAlignPlugin.alignTypeV2.includes(position) && element) {
+            const defaultWorkspace = this.canvas
+                .getObjects()
+                .find((item) => item.id === 'workspace');
+            if (defaultWorkspace) {
+                const center = defaultWorkspace.getCenterPoint();
+                switch (position) {
+                    case 'centerH':
+                        this.canvas._centerObject(
+                            element,
+                            new fabric.Point(
+                                defaultWorkspace.getCenterPoint().x,
+                                element.getCenterPoint().y
+                            )
+                        );
+                        break;
+                    case 'centerV':
+                        this.canvas._centerObject(
+                            element,
+                            new fabric.Point(
+                                element.getCenterPoint().x,
+                                defaultWorkspace.getCenterPoint().y,
+                            )
+                        );
+                        break;
+                    case 'leftH':
+                        element.set('left', 0)
+                        break;
+                    case 'topV':
+                        element.set('top', 0)
+                        break;
+                    case 'rightH':
+                        element.set('left', defaultWorkspace.get('left') + defaultWorkspace.get('width') - element.get('width'))
+                        break;
+                    case 'bottomV':
+                        element.set('top', defaultWorkspace.get('top') + defaultWorkspace.get('height') - element.get('height'))
+                        break;
+                    case 'center':
+                        this.canvas._centerObject(element, center);
+                        break;
+                    default:
+                        break;
+                }
+            }
+            element.syncOriginSizeByUnit()
+            this.canvas.fire('object:modified', element);
+            this.canvas.renderAll();
+        }
+
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default CenterAlignPlugin;

package/src/plugins/ControlsPlugin.ts

@@ -0,0 +1,251 @@
+import { fabric } from '@hprint/core';
+import verticalImg from '../assets/middlecontrol.svg?url';
+// import verticalImg from './middlecontrol.svg';
+import horizontalImg from '../assets/middlecontrolhoz.svg?url';
+import edgeImg from '../assets/edgecontrol.svg?url';
+import rotateImg from '../assets/rotateicon.svg?url';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+/**
+ * 实际场景: 在进行某个对象缩放的时候，由于fabricjs默认精度使用的是toFixed(2)。
+ * 此处为了缩放的精度更准确一些，因此将NUM_FRACTION_DIGITS默认值改为4，即toFixed(4).
+ */
+fabric.Object.NUM_FRACTION_DIGITS = 4;
+
+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 intervalControl() {
+    const verticalImgIcon = document.createElement('img');
+    verticalImgIcon.src = verticalImg;
+
+    const horizontalImgIcon = document.createElement('img');
+    horizontalImgIcon.src = horizontalImg;
+
+    function renderIcon(
+        ctx: CanvasRenderingContext2D,
+        left: number,
+        top: number,
+        styleOverride: any,
+        fabricObject: fabric.Object
+    ) {
+        drawImg(ctx, left, top, verticalImgIcon, 20, 25, fabricObject.angle);
+    }
+
+    function renderIconHoz(
+        ctx: CanvasRenderingContext2D,
+        left: number,
+        top: number,
+        styleOverride: any,
+        fabricObject: fabric.Object
+    ) {
+        drawImg(ctx, left, top, horizontalImgIcon, 25, 20, fabricObject.angle);
+    }
+    // 中间横杠
+    fabric.Object.prototype.controls.ml = new fabric.Control({
+        x: -0.5,
+        y: 0,
+        offsetX: -1,
+        cursorStyleHandler: fabric.controlsUtils.scaleSkewCursorStyleHandler,
+        actionHandler: fabric.controlsUtils.scalingXOrSkewingY,
+        getActionName: fabric.controlsUtils.scaleOrSkewActionName,
+        render: renderIcon,
+    });
+
+    fabric.Object.prototype.controls.mr = new fabric.Control({
+        x: 0.5,
+        y: 0,
+        offsetX: 1,
+        cursorStyleHandler: fabric.controlsUtils.scaleSkewCursorStyleHandler,
+        actionHandler: fabric.controlsUtils.scalingXOrSkewingY,
+        getActionName: fabric.controlsUtils.scaleOrSkewActionName,
+        render: renderIcon,
+    });
+
+    fabric.Object.prototype.controls.mb = new fabric.Control({
+        x: 0,
+        y: 0.5,
+        offsetY: 1,
+        cursorStyleHandler: fabric.controlsUtils.scaleSkewCursorStyleHandler,
+        actionHandler: fabric.controlsUtils.scalingYOrSkewingX,
+        getActionName: fabric.controlsUtils.scaleOrSkewActionName,
+        render: renderIconHoz,
+    });
+
+    fabric.Object.prototype.controls.mt = new fabric.Control({
+        x: 0,
+        y: -0.5,
+        offsetY: -1,
+        cursorStyleHandler: fabric.controlsUtils.scaleSkewCursorStyleHandler,
+        actionHandler: fabric.controlsUtils.scalingYOrSkewingX,
+        getActionName: fabric.controlsUtils.scaleOrSkewActionName,
+        render: renderIconHoz,
+    });
+}
+
+// 顶点
+function peakControl() {
+    const img = document.createElement('img');
+    img.src = edgeImg;
+
+    function renderIconEdge(
+        ctx: CanvasRenderingContext2D,
+        left: number,
+        top: number,
+        styleOverride: any,
+        fabricObject: fabric.Object
+    ) {
+        drawImg(ctx, left, top, img, 25, 25, fabricObject.angle);
+    }
+    // 四角图标
+    fabric.Object.prototype.controls.tl = new fabric.Control({
+        x: -0.5,
+        y: -0.5,
+        cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
+        actionHandler: fabric.controlsUtils.scalingEqually,
+        render: renderIconEdge,
+    });
+    fabric.Object.prototype.controls.bl = new fabric.Control({
+        x: -0.5,
+        y: 0.5,
+        cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
+        actionHandler: fabric.controlsUtils.scalingEqually,
+        render: renderIconEdge,
+    });
+    fabric.Object.prototype.controls.tr = new fabric.Control({
+        x: 0.5,
+        y: -0.5,
+        cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
+        actionHandler: fabric.controlsUtils.scalingEqually,
+        render: renderIconEdge,
+    });
+    fabric.Object.prototype.controls.br = new fabric.Control({
+        x: 0.5,
+        y: 0.5,
+        cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
+        actionHandler: fabric.controlsUtils.scalingEqually,
+        render: renderIconEdge,
+    });
+}
+
+// 删除
+/*function deleteControl(canvas: fabric.Canvas) {
+  const deleteIcon =
+    "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
+  const delImg = document.createElement('img');
+  delImg.src = deleteIcon;
+
+  function renderDelIcon(
+    ctx: CanvasRenderingContext2D,
+    left: number,
+    top: number,
+    styleOverride: any,
+    fabricObject: fabric.Object
+  ) {
+    drawImg(ctx, left, top, delImg, 24, 24, fabricObject.angle);
+  }
+
+  // 删除选中元素
+  function deleteObject(mouseEvent: MouseEvent, target: fabric.Transform) {
+    if (target.action === 'rotate') return true;
+    const activeObject = canvas.getActiveObjects();
+    if (activeObject) {
+      activeObject.map((item) => canvas.remove(item));
+      canvas.requestRenderAll();
+      canvas.discardActiveObject();
+    }
+    return true;
+  }
+
+  // 删除图标
+  fabric.Object.prototype.controls.deleteControl = new fabric.Control({
+    x: 0.5,
+    y: -0.5,
+    offsetY: -16,
+    offsetX: 16,
+    cursorStyle: 'pointer',
+    mouseUpHandler: deleteObject,
+    render: renderDelIcon,
+    // cornerSize: 24,
+  });
+}*/
+
+// 旋转
+function rotationControl() {
+    const img = document.createElement('img');
+    img.src = rotateImg;
+    function renderIconRotate(
+        ctx: CanvasRenderingContext2D,
+        left: number,
+        top: number,
+        styleOverride: any,
+        fabricObject: fabric.Object
+    ) {
+        drawImg(ctx, left, top, img, 40, 40, fabricObject.angle);
+    }
+    // 旋转图标
+    fabric.Object.prototype.controls.mtr = new fabric.Control({
+        x: 0,
+        y: 0.5,
+        cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,
+        actionHandler: fabric.controlsUtils.rotationWithSnapping,
+        offsetY: 30,
+        // withConnecton: false,
+        actionName: 'rotate',
+        render: renderIconRotate,
+    });
+}
+
+class ControlsPlugin implements IPluginTempl {
+    static pluginName = 'ControlsPlugin';
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this.init();
+    }
+    init() {
+        // 删除图标
+        // deleteControl(this.canvas);
+        // 顶点图标
+        peakControl();
+        // 中间横杠图标
+        intervalControl();
+        // 旋转图标
+        rotationControl();
+
+        // 选中样式
+        fabric.Object.prototype.set({
+            transparentCorners: false,
+            borderColor: '#51B9F9',
+            cornerColor: '#FFF',
+            borderScaleFactor: 2.5,
+            cornerStyle: 'circle',
+            cornerStrokeColor: '#0E98FC',
+            borderOpacityWhenMoving: 1,
+        });
+        // textbox保持一致
+        // fabric.Textbox.prototype.controls = fabric.Object.prototype.controls;
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default ControlsPlugin;

package/src/plugins/ControlsRotatePlugin.ts

@@ -0,0 +1,111 @@
+import { fabric } from '@hprint/core';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+// 定义旋转光标样式，根据转动角度设定光标旋转
+function rotateIcon(angle: number) {
+    return `url("data:image/svg+xml,%3Csvg height='18' width='18' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'%3E%3Cg fill='none' transform='rotate(${angle} 16 16)'%3E%3Cpath d='M22.4484 0L32 9.57891L22.4484 19.1478V13.1032C17.6121 13.8563 13.7935 17.6618 13.0479 22.4914H19.2141L9.60201 32.01L0 22.4813H6.54912C7.36524 14.1073 14.0453 7.44023 22.4484 6.61688V0Z' fill='white'/%3E%3Cpath d='M24.0605 3.89587L29.7229 9.57896L24.0605 15.252V11.3562C17.0479 11.4365 11.3753 17.0895 11.3048 24.0879H15.3048L9.60201 29.7308L3.90932 24.0879H8.0806C8.14106 15.3223 15.2645 8.22345 24.0605 8.14313V3.89587Z' fill='black'/%3E%3C/g%3E%3C/svg%3E ") 12 12,crosshair`;
+}
+
+class ControlsRotatePlugin implements IPluginTempl {
+    static pluginName = 'ControlsRotatePlugin';
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this.init();
+    }
+    init() {
+        const { canvas } = this;
+        // 添加旋转控制响应区域
+        fabric.Object.prototype.controls.mtr = new fabric.Control({
+            x: -0.5,
+            y: -0.5,
+            offsetY: -10,
+            offsetX: -10,
+            rotate: 20,
+            actionName: 'rotate',
+            actionHandler: fabric.controlsUtils.rotationWithSnapping,
+            render: () => '',
+        });
+        // ↖左上
+        fabric.Object.prototype.controls.mtr2 = new fabric.Control({
+            x: 0.5,
+            y: -0.5,
+            offsetY: -10,
+            offsetX: 10,
+            rotate: 20,
+            actionName: 'rotate',
+            actionHandler: fabric.controlsUtils.rotationWithSnapping,
+            render: () => '',
+        }); // ↗右上
+        fabric.Object.prototype.controls.mtr3 = new fabric.Control({
+            x: 0.5,
+            y: 0.5,
+            offsetY: 10,
+            offsetX: 10,
+            rotate: 20,
+            actionName: 'rotate',
+            actionHandler: fabric.controlsUtils.rotationWithSnapping,
+            render: () => '',
+        }); // ↘右下
+        fabric.Object.prototype.controls.mtr4 = new fabric.Control({
+            x: -0.5,
+            y: 0.5,
+            offsetY: 10,
+            offsetX: -10,
+            rotate: 20,
+            actionName: 'rotate',
+            actionHandler: fabric.controlsUtils.rotationWithSnapping,
+            render: () => '',
+        }); // ↙左下
+
+        // 渲染时，执行
+        canvas.on('after:render', () => {
+            const activeObj = canvas.getActiveObject();
+            const angle = activeObj?.angle?.toFixed(2);
+            if (angle !== undefined) {
+                fabric.Object.prototype.controls.mtr.cursorStyle = rotateIcon(
+                    Number(angle)
+                );
+                fabric.Object.prototype.controls.mtr2.cursorStyle = rotateIcon(
+                    Number(angle) + 90
+                );
+                fabric.Object.prototype.controls.mtr3.cursorStyle = rotateIcon(
+                    Number(angle) + 180
+                );
+                fabric.Object.prototype.controls.mtr4.cursorStyle = rotateIcon(
+                    Number(angle) + 270
+                );
+            }
+        });
+
+        // 旋转时，实时更新旋转控制图标
+        canvas.on('object:rotating', (event) => {
+            const body = canvas.lowerCanvasEl.nextSibling as HTMLElement;
+            const angle = canvas.getActiveObject()?.angle?.toFixed(2);
+            if (angle === undefined) return;
+            switch (event.transform?.corner) {
+                case 'mtr':
+                    body.style.cursor = rotateIcon(Number(angle));
+                    break;
+                case 'mtr2':
+                    body.style.cursor = rotateIcon(Number(angle) + 90);
+                    break;
+                case 'mtr3':
+                    body.style.cursor = rotateIcon(Number(angle) + 180);
+                    break;
+                case 'mtr4':
+                    body.style.cursor = rotateIcon(Number(angle) + 270);
+                    break;
+                default:
+                    break;
+            } // 设置四角旋转光标
+        });
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default ControlsRotatePlugin;