@hprint/plugins 0.0.1-alpha.1 → 0.0.1-alpha.3

package/src/utils/ruler/guideline.ts

@@ -1,145 +1,145 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { fabric } from '@hprint/core';
-
-export function setupGuideLine() {
-    if (fabric.GuideLine) {
-        return;
-    }
-
-    fabric.GuideLine = fabric.util.createClass(fabric.Line, {
-        type: 'GuideLine',
-        selectable: false,
-        hasControls: false,
-        hasBorders: false,
-        stroke: '#4bec13',
-        originX: 'center',
-        originY: 'center',
-        padding: 4, // 填充，让辅助线选择范围更大，方便选中
-        globalCompositeOperation: 'difference',
-        axis: 'horizontal',
-        // excludeFromExport: true,
-
-        initialize(points: number, options: fabric.IGuideLineOptions) {
-            const isHorizontal = options.axis === 'horizontal';
-            // 指针
-            this.hoverCursor = isHorizontal ? 'ns-resize' : 'ew-resize';
-            // 设置新的点
-            const newPoints = isHorizontal
-                ? [-999999, points, 999999, points]
-                : [points, -999999, points, 999999];
-            // 锁定移动
-            options[isHorizontal ? 'lockMovementX' : 'lockMovementY'] = true;
-            // 调用父类初始化
-            this.callSuper('initialize', newPoints, options);
-
-            // 绑定事件
-            this.on('mousedown:before', (e: fabric.IEvent<MouseEvent>) => {
-                if (this.activeOn === 'down') {
-                    // 设置selectable:false后激活对象才能进行移动
-                    this.canvas && this.canvas.setActiveObject(this, e.e);
-                }
-            });
-
-            this.on('moving', (e) => {
-                if (
-                    this.canvas &&
-                    this.canvas.ruler.options.enabled &&
-                    this.isPointOnRuler(e.e)
-                ) {
-                    this.moveCursor = 'not-allowed';
-                } else {
-                    this.moveCursor = this.isHorizontal()
-                        ? 'ns-resize'
-                        : 'ew-resize';
-                }
-                this.canvas &&
-                    this.canvas.fire('guideline:moving', {
-                        target: this,
-                        e: e.e,
-                    });
-            });
-
-            this.on('mouseup', (e) => {
-                // 移动到标尺上，移除辅助线
-                if (
-                    this.canvas &&
-                    this.canvas.ruler.options.enabled &&
-                    this.isPointOnRuler(e.e)
-                ) {
-                    // console.log('移除辅助线', this);
-                    this.canvas.remove(this);
-                    return;
-                }
-                this.moveCursor = this.isHorizontal()
-                    ? 'ns-resize'
-                    : 'ew-resize';
-                this.canvas &&
-                    this.canvas.fire('guideline:mouseup', {
-                        target: this,
-                        e: e.e,
-                    });
-            });
-
-            this.on('removed', () => {
-                this.off('removed');
-                this.off('mousedown:before');
-                this.off('moving');
-                this.off('mouseup');
-            });
-        },
-
-        getBoundingRect(absolute, calculate) {
-            this.bringToFront();
-
-            const isHorizontal = this.isHorizontal();
-            const rect = this.callSuper('getBoundingRect', absolute, calculate);
-            rect[isHorizontal ? 'top' : 'left'] +=
-                rect[isHorizontal ? 'height' : 'width'] / 2;
-            rect[isHorizontal ? 'height' : 'width'] = 0;
-            return rect;
-        },
-
-        isPointOnRuler(e) {
-            const isHorizontal = this.isHorizontal();
-            const hoveredRuler =
-                this.canvas &&
-                this.canvas.ruler.isPointOnRuler(
-                    new fabric.Point(e.offsetX, e.offsetY)
-                );
-            if (
-                (isHorizontal && hoveredRuler === 'horizontal') ||
-                (!isHorizontal && hoveredRuler === 'vertical')
-            ) {
-                return hoveredRuler;
-            }
-            return false;
-        },
-
-        isHorizontal() {
-            return this.height === 0;
-        },
-    } as fabric.GuideLine);
-
-    fabric.GuideLine.fromObject = function (object, callback) {
-        const clone = fabric.util.object.clone as (
-            object: any,
-            deep: boolean
-        ) => any;
-
-        function _callback(instance: any) {
-            delete instance.xy;
-            callback && callback(instance);
-        }
-
-        const options = clone(object, true);
-        const isHorizontal = options.height === 0;
-
-        options.xy = isHorizontal ? options.y1 : options.x1;
-        options.axis = isHorizontal ? 'horizontal' : 'vertical';
-
-        fabric.Object._fromObject(options.type, options, _callback, 'xy');
-    };
-}
-
-export default fabric.GuideLine;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { fabric } from '@hprint/core';
+
+export function setupGuideLine() {
+    if (fabric.GuideLine) {
+        return;
+    }
+
+    fabric.GuideLine = fabric.util.createClass(fabric.Line, {
+        type: 'GuideLine',
+        selectable: false,
+        hasControls: false,
+        hasBorders: false,
+        stroke: '#4bec13',
+        originX: 'center',
+        originY: 'center',
+        padding: 4, // 填充，让辅助线选择范围更大，方便选中
+        globalCompositeOperation: 'difference',
+        axis: 'horizontal',
+        // excludeFromExport: true,
+
+        initialize(points: number, options: fabric.IGuideLineOptions) {
+            const isHorizontal = options.axis === 'horizontal';
+            // 指针
+            this.hoverCursor = isHorizontal ? 'ns-resize' : 'ew-resize';
+            // 设置新的点
+            const newPoints = isHorizontal
+                ? [-999999, points, 999999, points]
+                : [points, -999999, points, 999999];
+            // 锁定移动
+            options[isHorizontal ? 'lockMovementX' : 'lockMovementY'] = true;
+            // 调用父类初始化
+            this.callSuper('initialize', newPoints, options);
+
+            // 绑定事件
+            this.on('mousedown:before', (e: fabric.IEvent<MouseEvent>) => {
+                if (this.activeOn === 'down') {
+                    // 设置selectable:false后激活对象才能进行移动
+                    this.canvas && this.canvas.setActiveObject(this, e.e);
+                }
+            });
+
+            this.on('moving', (e) => {
+                if (
+                    this.canvas &&
+                    this.canvas.ruler.options.enabled &&
+                    this.isPointOnRuler(e.e)
+                ) {
+                    this.moveCursor = 'not-allowed';
+                } else {
+                    this.moveCursor = this.isHorizontal()
+                        ? 'ns-resize'
+                        : 'ew-resize';
+                }
+                this.canvas &&
+                    this.canvas.fire('guideline:moving', {
+                        target: this,
+                        e: e.e,
+                    });
+            });
+
+            this.on('mouseup', (e) => {
+                // 移动到标尺上，移除辅助线
+                if (
+                    this.canvas &&
+                    this.canvas.ruler.options.enabled &&
+                    this.isPointOnRuler(e.e)
+                ) {
+                    // console.log('移除辅助线', this);
+                    this.canvas.remove(this);
+                    return;
+                }
+                this.moveCursor = this.isHorizontal()
+                    ? 'ns-resize'
+                    : 'ew-resize';
+                this.canvas &&
+                    this.canvas.fire('guideline:mouseup', {
+                        target: this,
+                        e: e.e,
+                    });
+            });
+
+            this.on('removed', () => {
+                this.off('removed');
+                this.off('mousedown:before');
+                this.off('moving');
+                this.off('mouseup');
+            });
+        },
+
+        getBoundingRect(absolute, calculate) {
+            this.bringToFront();
+
+            const isHorizontal = this.isHorizontal();
+            const rect = this.callSuper('getBoundingRect', absolute, calculate);
+            rect[isHorizontal ? 'top' : 'left'] +=
+                rect[isHorizontal ? 'height' : 'width'] / 2;
+            rect[isHorizontal ? 'height' : 'width'] = 0;
+            return rect;
+        },
+
+        isPointOnRuler(e) {
+            const isHorizontal = this.isHorizontal();
+            const hoveredRuler =
+                this.canvas &&
+                this.canvas.ruler.isPointOnRuler(
+                    new fabric.Point(e.offsetX, e.offsetY)
+                );
+            if (
+                (isHorizontal && hoveredRuler === 'horizontal') ||
+                (!isHorizontal && hoveredRuler === 'vertical')
+            ) {
+                return hoveredRuler;
+            }
+            return false;
+        },
+
+        isHorizontal() {
+            return this.height === 0;
+        },
+    } as fabric.GuideLine);
+
+    fabric.GuideLine.fromObject = function (object, callback) {
+        const clone = fabric.util.object.clone as (
+            object: any,
+            deep: boolean
+        ) => any;
+
+        function _callback(instance: any) {
+            delete instance.xy;
+            callback && callback(instance);
+        }
+
+        const options = clone(object, true);
+        const isHorizontal = options.height === 0;
+
+        options.xy = isHorizontal ? options.y1 : options.x1;
+        options.axis = isHorizontal ? 'horizontal' : 'vertical';
+
+        fabric.Object._fromObject(options.type, options, _callback, 'xy');
+    };
+}
+
+export default fabric.GuideLine;

package/src/utils/ruler/index.ts

@@ -1,91 +1,91 @@
-import { fabric, Canvas, IEditor } from '@hprint/core';
-import CanvasRuler, { RulerOptions } from './ruler';
-
-function initRuler(canvas: Canvas, editor: IEditor, options?: RulerOptions) {
-    const ruler = new CanvasRuler({
-        canvas,
-        editor,
-        ...options,
-    });
-
-    // 辅助线移动到画板外删除
-    let workspace: fabric.Object | undefined = undefined;
-
-    /**
-     * 获取workspace
-     */
-    const getWorkspace = () => {
-        workspace = canvas.getObjects().find((item) => item.id === 'workspace');
-    };
-
-    /**
-     * 判断target是否在object矩形外
-     * @param object
-     * @param target
-     * @returns
-     */
-    const isRectOut = (
-        object: fabric.Object,
-        target: fabric.GuideLine
-    ): boolean => {
-        const { top, height, left, width } = object;
-
-        if (
-            top === undefined ||
-            height === undefined ||
-            left === undefined ||
-            width === undefined
-        ) {
-            return false;
-        }
-
-        const targetRect = target.getBoundingRect(true, true);
-        const {
-            top: targetTop,
-            height: targetHeight,
-            left: targetLeft,
-            width: targetWidth,
-        } = targetRect;
-
-        if (
-            target.isHorizontal() &&
-            (top > targetTop + 1 || top + height < targetTop + targetHeight - 1)
-        ) {
-            return true;
-        } else if (
-            !target.isHorizontal() &&
-            (left > targetLeft + 1 ||
-                left + width < targetLeft + targetWidth - 1)
-        ) {
-            return true;
-        }
-
-        return false;
-    };
-
-    canvas.on('guideline:moving', (e) => {
-        if (!workspace) {
-            getWorkspace();
-            return;
-        }
-        const { target } = e;
-        if (isRectOut(workspace, target)) {
-            target.moveCursor = 'not-allowed';
-        }
-    });
-
-    canvas.on('guideline:mouseup', (e) => {
-        if (!workspace) {
-            getWorkspace();
-            return;
-        }
-        const { target } = e;
-        if (isRectOut(workspace, target)) {
-            canvas.remove(target);
-            canvas.setCursor(canvas.defaultCursor ?? '');
-        }
-    });
-    return ruler;
-}
-
-export default initRuler;
+import { fabric, Canvas, IEditor } from '@hprint/core';
+import CanvasRuler, { RulerOptions } from './ruler';
+
+function initRuler(canvas: Canvas, editor: IEditor, options?: RulerOptions) {
+    const ruler = new CanvasRuler({
+        canvas,
+        editor,
+        ...options,
+    });
+
+    // 辅助线移动到画板外删除
+    let workspace: fabric.Object | undefined = undefined;
+
+    /**
+     * 获取workspace
+     */
+    const getWorkspace = () => {
+        workspace = canvas.getObjects().find((item) => item.id === 'workspace');
+    };
+
+    /**
+     * 判断target是否在object矩形外
+     * @param object
+     * @param target
+     * @returns
+     */
+    const isRectOut = (
+        object: fabric.Object,
+        target: fabric.GuideLine
+    ): boolean => {
+        const { top, height, left, width } = object;
+
+        if (
+            top === undefined ||
+            height === undefined ||
+            left === undefined ||
+            width === undefined
+        ) {
+            return false;
+        }
+
+        const targetRect = target.getBoundingRect(true, true);
+        const {
+            top: targetTop,
+            height: targetHeight,
+            left: targetLeft,
+            width: targetWidth,
+        } = targetRect;
+
+        if (
+            target.isHorizontal() &&
+            (top > targetTop + 1 || top + height < targetTop + targetHeight - 1)
+        ) {
+            return true;
+        } else if (
+            !target.isHorizontal() &&
+            (left > targetLeft + 1 ||
+                left + width < targetLeft + targetWidth - 1)
+        ) {
+            return true;
+        }
+
+        return false;
+    };
+
+    canvas.on('guideline:moving', (e) => {
+        if (!workspace) {
+            getWorkspace();
+            return;
+        }
+        const { target } = e;
+        if (isRectOut(workspace, target)) {
+            target.moveCursor = 'not-allowed';
+        }
+    });
+
+    canvas.on('guideline:mouseup', (e) => {
+        if (!workspace) {
+            getWorkspace();
+            return;
+        }
+        const { target } = e;
+        if (isRectOut(workspace, target)) {
+            canvas.remove(target);
+            canvas.setCursor(canvas.defaultCursor ?? '');
+        }
+    });
+    return ruler;
+}
+
+export default initRuler;