@hprint/plugins 0.0.1-alpha.0

package/src/plugins/DrawLinePlugin.ts

@@ -0,0 +1,162 @@
+import { v4 as uuid } from 'uuid';
+import { fabric } from '@hprint/core';
+import Arrow from '../objects/Arrow';
+import ThinTailArrow from '../objects/ThinTailArrow';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<DrawLinePlugin, 'setLineType' | 'setMode'>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+class DrawLinePlugin implements IPluginTempl {
+    static pluginName = 'DrawLinePlugin';
+    static apis = ['setLineType', 'setMode'];
+    isDrawingLineMode: boolean;
+    lineType: string;
+    lineToDraw: any;
+    pointer: any;
+    pointerPoints: any;
+    isDrawingLine: boolean;
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this.isDrawingLine = false;
+        this.isDrawingLineMode = false;
+        this.lineType = '';
+        this.lineToDraw = null;
+        this.pointer = null;
+        this.pointerPoints = null;
+        this.init();
+    }
+
+    init() {
+        const { canvas } = this;
+        canvas.on('mouse:down', (o) => {
+            if (!this.isDrawingLineMode) return;
+            canvas.discardActiveObject();
+            canvas.getObjects().forEach((obj) => {
+                obj.selectable = false;
+                obj.hasControls = false;
+            });
+            canvas.requestRenderAll();
+            this.isDrawingLine = true;
+            this.pointer = canvas.getPointer(o.e);
+            this.pointerPoints = [
+                this.pointer.x,
+                this.pointer.y,
+                this.pointer.x,
+                this.pointer.y,
+            ];
+            let NodeHandler;
+            let opts: any = {
+                strokeWidth: 2,
+                stroke: '#000000',
+                id: uuid(),
+            };
+            switch (this.lineType) {
+                case 'line':
+                    NodeHandler = fabric.Line;
+                    break;
+                case 'arrow':
+                    NodeHandler = Arrow;
+                    break;
+                case 'thinTailArrow':
+                    NodeHandler = ThinTailArrow;
+                    opts = {
+                        strokeWidth: 2,
+                        stroke: '#ff0000',
+                        fill: '#ff0000',
+                        id: uuid(),
+                    };
+                    break;
+                default:
+                    break;
+            }
+            if (!NodeHandler) throw new Error('Draw failed: invalid lineType.');
+
+            this.lineToDraw = new NodeHandler(this.pointerPoints, opts);
+
+            this.lineToDraw.selectable = false;
+            this.lineToDraw.evented = false;
+            this.lineToDraw.strokeUniform = true;
+            canvas.add(this.lineToDraw);
+        });
+
+        canvas.on('mouse:move', (o) => {
+            if (
+                !this.isDrawingLine ||
+                !['line', 'arrow', 'thinTailArrow'].includes(this.lineType)
+            )
+                return;
+            canvas.discardActiveObject();
+            const activeObject = canvas.getActiveObject();
+            if (activeObject) return;
+            this.pointer = canvas.getPointer(o.e);
+
+            if (o.e.shiftKey) {
+                // calc angle
+                const startX = this.pointerPoints[0];
+                const startY = this.pointerPoints[1];
+                const x2 = this.pointer.x - startX;
+                const y2 = this.pointer.y - startY;
+                const r = Math.sqrt(x2 * x2 + y2 * y2);
+                let angle = (Math.atan2(y2, x2) / Math.PI) * 180;
+                angle = ~~(((angle + 7.5) % 360) / 15) * 15;
+
+                const cosx = r * Math.cos((angle * Math.PI) / 180);
+                const sinx = r * Math.sin((angle * Math.PI) / 180);
+
+                this.lineToDraw.set({
+                    x2: cosx + startX,
+                    y2: sinx + startY,
+                });
+            } else {
+                this.lineToDraw.set({
+                    x2: this.pointer.x,
+                    y2: this.pointer.y,
+                });
+            }
+
+            canvas.renderAll();
+        });
+
+        canvas.on('mouse:up', () => {
+            if (!this.isDrawingLine) return;
+            this.lineToDraw.setCoords();
+            this.isDrawingLine = false;
+            canvas.discardActiveObject();
+            canvas.renderAll();
+            this.editor.saveState();
+        });
+    }
+
+    setLineType(params: any) {
+        this.lineType = params;
+    }
+
+    setMode(params: any) {
+        this.isDrawingLineMode = params;
+        if (!this.isDrawingLineMode) {
+            this.endRest();
+        }
+    }
+
+    endRest() {
+        this.canvas.getObjects().forEach((obj) => {
+            if (obj.id !== 'workspace') {
+                obj.selectable = true;
+                obj.hasControls = true;
+            }
+        });
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default DrawLinePlugin;

package/src/plugins/DrawPolygonPlugin.ts

@@ -0,0 +1,205 @@
+import { fabric } from '@hprint/core';
+import { v4 as uuid } from 'uuid';
+import { utils } from '@hprint/shared';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<
+    DrawPolygonPlugin,
+    'beginDrawPolygon' | 'endDrawPolygon' | 'discardPolygon'
+>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+type LineCoords = [fabric.Point, fabric.Point];
+type OffListener = (ev: fabric.IEvent) => void;
+type OnEnd = (...args: any[]) => void;
+class DrawPolygonPlugin implements IPluginTempl {
+    isDrawingPolygon = false;
+    points: fabric.Point[] = [];
+    lines: fabric.Line[] = [];
+    anchors: fabric.Circle[] = [];
+    tempPoint: fabric.Point | undefined;
+    tempLine: fabric.Line | undefined;
+    lastPoint: fabric.Point | undefined;
+    onEnd?: OnEnd;
+    // 最后一点和第一点的距离为<=delta即闭合
+    delta = 5;
+    static pluginName = 'DrawPolygonPlugin';
+    static apis = ['beginDrawPolygon', 'endDrawPolygon', 'discardPolygon'];
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {}
+
+    _isUsingHistory() {
+        return (
+            this.canvas.offHistory &&
+            typeof this.canvas.offHistory === 'function'
+        );
+    }
+    _bindEvent() {
+        window.addEventListener('keydown', this._escListener);
+        this.canvas.on('mouse:down', this._downHandler);
+        this.canvas.on('mouse:move', this._moveHandler);
+    }
+    _escListener = (evt: KeyboardEvent) => {
+        if (evt.key === 'Escape' || evt['keyCode'] === 27) {
+            this._confirmBuildPolygon();
+        }
+    };
+    _downHandler = (ev: fabric.IEvent<MouseEvent>): void => {
+        if (!this.isDrawingPolygon) return;
+        const absPointer = ev.absolutePointer!;
+        const confirmPoint = new fabric.Point(absPointer.x, absPointer.y);
+        const anchor = this._mackAnchor(absPointer);
+        this.anchors.push(anchor);
+        if (this.tempLine == null) {
+            const tempPoint = new fabric.Point(absPointer.x, absPointer.y);
+            this.tempLine = this._makeLine([tempPoint, tempPoint]);
+            this.canvas.add(this.tempLine);
+        } else {
+            ev.e.shiftKey &&
+                confirmPoint.setXY(this.tempLine.x2!, this.tempLine.y2!);
+            anchor.set({ left: confirmPoint.x, top: confirmPoint.y });
+            this.tempLine.set({
+                x1: confirmPoint.x,
+                y1: confirmPoint.y,
+                x2: confirmPoint.x,
+                y2: confirmPoint.y,
+            });
+        }
+        if (this.lastPoint) {
+            const line = this._makeLine([this.lastPoint, confirmPoint]);
+            this.lines.push(line);
+            this.canvas.add(line);
+            if (
+                this.points[0].distanceFrom(confirmPoint) /
+                    this.canvas.getZoom() <=
+                this.delta
+            ) {
+                this._confirmBuildPolygon();
+                return;
+            }
+        }
+        this.canvas.add(anchor);
+        this.lastPoint = confirmPoint;
+        this.points.push(confirmPoint);
+        this._ensureAnchorsForward();
+    };
+    _moveHandler = (ev: fabric.IEvent<MouseEvent>): void => {
+        if (!this.isDrawingPolygon || !this.tempLine) return;
+        const absPoint = ev.absolutePointer!;
+        if (ev.e.shiftKey && this.lastPoint) {
+            const point = utils.shiftAngle(this.lastPoint, absPoint);
+            this.tempLine.set({
+                x2: point.x,
+                y2: point.y,
+            });
+        } else {
+            this.tempLine.set({
+                x2: absPoint.x,
+                y2: absPoint.y,
+            });
+        }
+        this.canvas.renderAll();
+    };
+    _ensureAnchorsForward() {
+        this.anchors.forEach((item) => {
+            item.bringForward();
+        });
+    }
+    _unbindEvent() {
+        window.removeEventListener('keydown', this._escListener);
+        this.canvas.off('mouse:down', this._downHandler as OffListener);
+        this.canvas.off('mouse:move', this._moveHandler as OffListener);
+    }
+    _createPolygon(points: fabric.Point[]) {
+        return new fabric.Polygon(points, {
+            fill: '#ccccccff',
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            id: uuid(),
+        });
+    }
+    _makeLine(coors: LineCoords) {
+        const [p1, p2] = coors;
+        return new fabric.Line([p1.x, p1.y, p2.x, p2.y], {
+            fill: '#000',
+            stroke: '#000',
+            strokeWidth: 1,
+            selectable: false,
+            evented: false,
+        });
+    }
+    _mackAnchor(position: fabric.Point) {
+        return new fabric.Circle({
+            radius: 5,
+            left: position.x,
+            top: position.y,
+            fill: 'rgb(178, 53, 84)',
+            scaleX: 1 / this.canvas.getZoom(),
+            scaleY: 1 / this.canvas.getZoom(),
+            strokeWidth: 1 / this.canvas.getZoom(),
+            originX: 'center',
+            originY: 'center',
+            evented: false,
+            selectable: false,
+        });
+    }
+    _confirmBuildPolygon() {
+        const points = this.points;
+        this.discardPolygon();
+        if (this._isUsingHistory()) {
+            this.canvas.historyProcessing = false;
+        }
+        if (points.length >= 3) {
+            const poly = this._createPolygon(points);
+            this.canvas.add(poly);
+        }
+    }
+    _prepare() {
+        this.canvas.discardActiveObject();
+        this.canvas.getObjects().forEach((obj) => {
+            obj.selectable = false;
+            obj.hasControls = false;
+        });
+    }
+    beginDrawPolygon(onEnd?: OnEnd) {
+        this._prepare();
+        this.onEnd = onEnd;
+        if (this._isUsingHistory()) {
+            this.canvas.historyProcessing = true;
+        }
+        this.canvas.requestRenderAll();
+        this.isDrawingPolygon = true;
+        this._bindEvent();
+    }
+    endDrawPolygon() {
+        this.canvas.discardActiveObject();
+        this.isDrawingPolygon = false;
+        this.lastPoint = undefined;
+        this.tempPoint = undefined;
+        this._unbindEvent();
+        this.onEnd && this.onEnd();
+        this.onEnd = undefined;
+    }
+    discardPolygon() {
+        this.lines.forEach((item) => {
+            this.canvas.remove(item);
+        });
+        this.anchors.forEach((item) => {
+            this.canvas.remove(item);
+        });
+        this.tempLine && this.canvas.remove(this.tempLine);
+        this.tempLine = undefined;
+        this.anchors = [];
+        this.lines = [];
+        this.points = [];
+        this.endDrawPolygon();
+    }
+}
+
+export default DrawPolygonPlugin;

package/src/plugins/DringPlugin.ts

@@ -0,0 +1,125 @@
+import { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<DringPlugin, 'startDring' | 'endDring'>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+export class DringPlugin implements IPluginTempl {
+    defautOption = {};
+    static pluginName = 'DringPlugin';
+    static events = ['startDring', 'endDring'];
+    static apis = ['startDring', 'endDring'];
+    hotkeys: string[] = ['space'];
+    dragMode = false;
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this.dragMode = false;
+        this.init();
+    }
+    init() {
+        this._initDring();
+    }
+
+    startDring() {
+        this.dragMode = true;
+        this.canvas.setCursor('grab');
+        this.editor.emit('startDring');
+        this.canvas.renderAll();
+    }
+    endDring() {
+        this.dragMode = false;
+        this.canvas.setCursor('default');
+        this.canvas.isDragging = false;
+        this.editor.emit('endDring');
+        this.canvas.renderAll();
+    }
+
+    // 拖拽模式;
+    _initDring() {
+        const This = this;
+        this.canvas.on('mouse:down', function (this: ExtCanvas, opt) {
+            const evt = opt.e;
+            // evt.button === 1 为鼠标中键的判断
+            if (evt.altKey || This.dragMode || evt.button === 1) {
+                This.canvas.setCursor('grabbing');
+                This.canvas.discardActiveObject();
+                This._setDring();
+                this.selection = false;
+                this.isDragging = true;
+                this.lastPosX = evt.clientX;
+                this.lastPosY = evt.clientY;
+                this.requestRenderAll();
+            }
+        });
+
+        this.canvas.on('mouse:move', function (this: ExtCanvas, opt) {
+            This.dragMode && This.canvas.setCursor('grab');
+            if (this.isDragging) {
+                This.canvas.discardActiveObject();
+                This.canvas.setCursor('grabbing');
+                const { e } = opt;
+                if (!this.viewportTransform) return;
+                const vpt = this.viewportTransform;
+                vpt[4] += e.clientX - this.lastPosX;
+                vpt[5] += e.clientY - this.lastPosY;
+                this.lastPosX = e.clientX;
+                this.lastPosY = e.clientY;
+                this.requestRenderAll();
+            }
+        });
+
+        this.canvas.on('mouse:up', function (this: ExtCanvas) {
+            if (!this.viewportTransform) return;
+            this.setViewportTransform(this.viewportTransform);
+            this.isDragging = false;
+            this.selection = true;
+            this.getObjects().forEach((obj) => {
+                if (obj.id !== 'workspace' && obj.hasControls) {
+                    obj.selectable = true;
+                }
+            });
+            This.dragMode && This.canvas.setCursor('grab');
+            this.requestRenderAll();
+        });
+    }
+
+    _setDring() {
+        this.canvas.selection = false;
+        this.canvas.getObjects().forEach((obj) => {
+            obj.selectable = false;
+        });
+        this.canvas.requestRenderAll();
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+
+    // 快捷键扩展回调
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    hotkeyEvent(eventName: string, e: KeyboardEvent) {
+        if (e.code === 'Space' && e.type === 'keydown') {
+            if (!this.dragMode) {
+                this.startDring();
+            }
+        }
+        if (e.code === 'Space' && e.type === 'keyup') {
+            this.endDring();
+        }
+    }
+}
+
+declare global {
+    export type ExtCanvas = fabric.Canvas & {
+        isDragging: boolean;
+        lastPosX: number;
+        lastPosY: number;
+    };
+}
+
+export default DringPlugin;

package/src/plugins/FlipPlugin.ts

@@ -0,0 +1,59 @@
+import { fabric } from '@hprint/core';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+import { SelectMode } from '../types/eventType';
+
+type IPlugin = Pick<FlipPlugin, 'flip'>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+// import event from '@/utils/event/notifier';
+
+export default class FlipPlugin implements IPluginTempl {
+    static pluginName = 'FlipPlugin';
+    static apis = ['flip'];
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {}
+
+    flip(type: 'X' | 'Y') {
+        const activeObject = this.canvas.getActiveObject();
+        if (activeObject) {
+            activeObject
+                .set(`flip${type}`, !activeObject[`flip${type}`])
+                .setCoords();
+            this.canvas.requestRenderAll();
+        }
+    }
+
+    contextMenu() {
+        const selectedMode = this.editor.getSelectMode();
+        if (selectedMode === SelectMode.ONE) {
+            return [
+                {
+                    text: '翻转',
+                    hotkey: '❯',
+                    subitems: [
+                        {
+                            text: '水平翻转',
+                            hotkey: '|',
+                            onclick: () => this.flip('X'),
+                        },
+                        {
+                            text: '垂直翻转',
+                            hotkey: '-',
+                            onclick: () => this.flip('Y'),
+                        },
+                    ],
+                },
+            ];
+        }
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}