@hprint/plugins 0.0.7 → 0.0.9-alpha.0

package/src/plugins/DrawPolygonPlugin.ts

@@ -1,205 +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;
+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

@@ -1,125 +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;
+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;