@hprint/plugins 0.0.1-alpha.0

package/src/plugins/RulerPlugin.ts

@@ -0,0 +1,78 @@
+import { fabric } from '@hprint/core';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<
+    RulerPlugin,
+    'hideGuideline' | 'showGuideline' | 'rulerEnable' | 'rulerDisable'
+>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+import initRuler from '../utils/ruler';
+
+class RulerPlugin implements IPluginTempl {
+    static pluginName = 'RulerPlugin';
+    //  static events = ['sizeChange'];
+    static apis = [
+        'hideGuideline',
+        'showGuideline',
+        'rulerEnable',
+        'rulerDisable',
+    ];
+    ruler: any;
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this.init();
+    }
+
+    hookSaveBefore() {
+        return new Promise((resolve) => {
+            this.hideGuideline();
+            resolve(true);
+        });
+    }
+
+    hookSaveAfter() {
+        return new Promise((resolve) => {
+            this.showGuideline();
+            resolve(true);
+        });
+    }
+
+    init() {
+        this.ruler = initRuler(this.canvas, this.editor, {
+            unit: (this.editor.getUnit?.() as 'px' | 'mm') || 'px',
+        });
+        // 监听全局单位变化，更新标尺展示
+        this.editor.on?.('unitChange', (unit: 'px' | 'mm') => {
+            this.ruler?.setUnit?.(unit);
+        });
+    }
+
+    hideGuideline() {
+        this.ruler.hideGuideline();
+    }
+
+    showGuideline() {
+        this.ruler.showGuideline();
+    }
+
+    rulerEnable() {
+        this.ruler.enable();
+    }
+
+    rulerDisable() {
+        this.ruler.disable();
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default RulerPlugin;

package/src/plugins/SimpleClipImagePlugin.ts

@@ -0,0 +1,244 @@
+import { fabric } from '@hprint/core';
+import { mathHelper } from '@hprint/shared';
+import { get, set } from 'lodash-es';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<SimpleClipImagePlugin, 'addClipPathToImage' | 'removeClip'>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+const getBounds = (activeObject: fabric.Object) => {
+    const { left = 0, top = 0 } = activeObject;
+    return {
+        width: activeObject.getScaledWidth(),
+        height: activeObject.getScaledHeight(),
+        left,
+        top,
+    };
+};
+const bindInfo = (shell: fabric.Object, activeObject: fabric.Object) => {
+    bindFlagToObject(shell);
+    bindFlagToObject(shell, 'targetId', get(activeObject, 'id'));
+    bindFlagToObject(shell, 'targetType', get(activeObject, 'type'));
+};
+const bindFlagToObject = (
+    activeObject: fabric.Object,
+    key = 'clip',
+    value: any = true
+) => {
+    set(activeObject, key, value);
+};
+const createRectClip = (activeObject: fabric.Object, inverted: boolean) => {
+    const {
+        width = 0,
+        height = 0,
+        left = 0,
+        top = 0,
+    } = getBounds(activeObject);
+    const clipW = Math.round(width / 2);
+    const clipH = Math.round(height / 2);
+    const shell = new fabric.Rect({
+        width: clipW,
+        height: clipH,
+        fill: 'rgba(0,0,0,0)',
+        originX: 'center',
+        originY: 'center',
+        left: left + width / 2,
+        top: top + height / 2,
+    });
+    bindInfo(shell, activeObject);
+    const clipPath = new fabric.Rect({
+        absolutePositioned: true,
+        width: shell.width,
+        height: shell.height,
+        originX: 'center',
+        originY: 'center',
+        left: shell.left,
+        top: shell.top,
+        inverted: inverted,
+    });
+    return { clipPath, shell };
+};
+const createCircleClip = (activeObject: fabric.Object, inverted: boolean) => {
+    const point = activeObject.getCenterPoint();
+    const { width } = getBounds(activeObject);
+    const shell = new fabric.Ellipse({
+        fill: 'rgba(0,0,0,0)',
+        originX: 'center',
+        originY: 'center',
+        left: point.x,
+        top: point.y,
+        rx: width / 4,
+        ry: width / 4,
+    });
+    bindInfo(shell, activeObject);
+    const clipPath = new fabric.Ellipse({
+        absolutePositioned: true,
+        originX: 'center',
+        originY: 'center',
+        left: shell.left,
+        top: shell.top,
+        inverted: inverted,
+        rx: shell.rx,
+        ry: shell.ry,
+    });
+    return { shell, clipPath };
+};
+const createTriClip = (activeObject: fabric.Object, inverted: boolean) => {
+    const point = activeObject.getCenterPoint();
+    const { width = 0, height = 0 } = getBounds(activeObject);
+    const clipW = Math.round(width / 2);
+    const clipH = Math.round(height / 2);
+    const shell = new fabric.Triangle({
+        fill: 'rgba(0,0,0,0)',
+        originX: 'center',
+        originY: 'center',
+        left: point.x,
+        top: point.y,
+        width: clipW,
+        height: clipH,
+    });
+    bindInfo(shell, activeObject);
+    const clipPath = new fabric.Triangle({
+        absolutePositioned: true,
+        originX: 'center',
+        originY: 'center',
+        left: shell.left,
+        top: shell.top,
+        width: shell.width,
+        height: shell.height,
+        inverted: inverted,
+    });
+    return { shell, clipPath };
+};
+const createPolygonClip = (activeObject: fabric.Object, inverted: boolean) => {
+    const point = activeObject.getCenterPoint();
+    const points = mathHelper.getPolygonVertices(5, 200);
+    const shell = new fabric.Polygon(points, {
+        fill: 'rgba(0,0,0,0)',
+        originY: 'center',
+        originX: 'center',
+        left: point.x,
+        top: point.y,
+    });
+    bindInfo(shell, activeObject);
+    const clipPath = new fabric.Polygon([...points], {
+        absolutePositioned: true,
+        originX: 'center',
+        originY: 'center',
+        left: shell.left,
+        top: shell.top,
+        inverted: inverted,
+    });
+    return { shell, clipPath };
+};
+export default class SimpleClipImagePlugin implements IPluginTempl {
+    static pluginName = 'SimpleClipImagePlugin';
+    //  static events = ['sizeChange'];
+    static apis = ['addClipPathToImage', 'removeClip'];
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {}
+    addClipPathToImage(value: string) {
+        const activeObject = this.canvas.getActiveObjects()[0];
+        if (activeObject && activeObject.type === 'image') {
+            let clip: { shell: fabric.Object; clipPath: fabric.Object } | null =
+                null;
+            const [name, inverted] = value.split('-');
+            const isInverted = !!inverted;
+            switch (name) {
+                case 'polygon':
+                    clip = createPolygonClip(activeObject, isInverted);
+                    break;
+                case 'rect':
+                    clip = createRectClip(activeObject, isInverted);
+                    break;
+                case 'circle':
+                    clip = createCircleClip(activeObject, isInverted);
+                    break;
+                case 'triangle':
+                    clip = createTriClip(activeObject, isInverted);
+                    break;
+            }
+            if (clip == null) return;
+            const { shell, clipPath } = clip;
+            shell.on('moving', () => {
+                clipPath.setPositionByOrigin(
+                    shell.getCenterPoint(),
+                    'center',
+                    'center'
+                );
+                activeObject.set('dirty', true);
+            });
+            shell.on('rotating', () => {
+                clipPath.set({ angle: shell.angle });
+                activeObject.set('dirty', true);
+            });
+            shell.on('scaling', () => {
+                clipPath.set({ scaleX: shell.scaleX, scaleY: shell.scaleY });
+                clipPath.setPositionByOrigin(
+                    shell.getCenterPoint(),
+                    'center',
+                    'center'
+                );
+                activeObject.set('dirty', true);
+            });
+            shell.on('deselected', () => {
+                if (
+                    clipPath instanceof fabric.Ellipse &&
+                    shell instanceof fabric.Ellipse
+                ) {
+                    clipPath.set({ rx: shell.getRx(), ry: shell.getRy() });
+                    this.correctPosition(activeObject, shell, clipPath);
+                } else if (shell instanceof fabric.Polygon) {
+                    this.correctPosition(activeObject, shell, clipPath);
+                    const { scaleX: cSx = 1, scaleY: cSy = 1 } = clipPath;
+                    const { scaleX: sSx = 1, scaleY: sSy = 1 } = shell;
+                    clipPath.set('scaleX', cSx * sSx);
+                    clipPath.set('scaleY', cSy * sSy);
+                } else {
+                    this.correctPosition(activeObject, shell, clipPath);
+                    clipPath.set('width', shell.getScaledWidth());
+                    clipPath.set('height', shell.getScaledHeight());
+                }
+                activeObject.set('dirty', true);
+                this.canvas.remove(shell);
+                this.canvas.requestRenderAll();
+            });
+            activeObject.set({ clipPath: clipPath });
+            this.canvas.add(shell);
+            this.canvas.setActiveObject(shell);
+        }
+    }
+    correctPosition(
+        activeObject: fabric.Object,
+        shell: fabric.Object,
+        clipPath: fabric.Object
+    ) {
+        const position = activeObject.toLocalPoint(
+            shell.getCenterPoint(),
+            'center',
+            'center'
+        );
+        const { scaleX = 1, scaleY = 1 } = activeObject;
+        clipPath.set({
+            absolutePositioned: false,
+            left: position.x / scaleX,
+            top: position.y / scaleY,
+            scaleX: 1 / scaleX,
+            scaleY: 1 / scaleY,
+        });
+    }
+    removeClip() {
+        const activeObject = this.canvas.getActiveObjects()[0];
+        if (activeObject && activeObject.type === 'image') {
+            activeObject.set({ clipPath: undefined });
+            activeObject.set('dirty', true);
+            this.canvas.requestRenderAll();
+        }
+    }
+}

package/src/plugins/UnitPlugin.ts

@@ -0,0 +1,327 @@
+import type { IEditor, IPluginTempl } from '@hprint/core';
+import { LengthConvert } from '@hprint/shared';
+import { syncMmFromObject } from '../utils/units';
+import { fabric } from '@hprint/core';
+import { throttle } from 'lodash-es';
+
+type IPlugin = Pick<
+    UnitPlugin,
+    | 'getUnit'
+    | 'setUnit'
+    | 'getSizeByUnit'
+    | 'setSizeByUnit'
+    | 'getOriginSize'
+    | 'syncOriginSizeByUnit'
+    | 'applyObjectPx'
+    | 'applyObjectMm'
+    | 'applyObjectInch'
+    | 'applyObjectByUnit'
+>;
+
+type TUnit = 'px' | 'mm' | 'inch';
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin { }
+}
+
+class UnitPlugin implements IPluginTempl {
+    static pluginName = 'UnitPlugin';
+    //  static events = ['sizeChange'];
+    static apis = [
+        'getUnit',
+        'setUnit',
+        'getSizeByUnit',
+        'setSizeByUnit',
+        'getOriginSize',
+        'getPrecision',
+        'syncOriginSizeByUnit',
+        'applyObjectPx',
+        'applyObjectMm',
+        'applyObjectInch',
+        'applyObjectByUnit',
+    ];
+    unit: TUnit = 'px';
+    precision?: number;
+    _originSize: Record<string, { width: number, height: number }> = { mm: { width: 0, height: 0 } };
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor,
+        options?: {
+            unit?: TUnit;
+            precision?: number;
+        }
+    ) {
+        this.init(options);
+        this._bindEvents();
+    }
+
+    hookSaveBefore() {
+        return new Promise((resolve) => {
+            resolve(true);
+        });
+    }
+
+    hookSaveAfter() {
+        return new Promise((resolve) => {
+            resolve(true);
+        });
+    }
+
+    init(options?: { unit?: TUnit; precision?: number }) {
+        if (options?.unit) this.unit = options?.unit;
+        if (options?.precision) this.precision = options?.precision;
+    }
+
+    setUnit(unit: TUnit) {
+        if (this.unit === unit) return;
+        this.unit = unit;
+        this.editor.emit('unitChange', unit);
+    }
+
+    getUnit() {
+        return this.unit;
+    }
+
+    getPrecision() {
+        return this.precision;
+    }
+
+    getSizeByUnit(pxValue: number, unit?: TUnit, dpi?: number) {
+        const targetUnit = unit ?? this.editor.getUnit();
+        if (targetUnit === 'px') return pxValue;
+        if (targetUnit === 'mm') return LengthConvert.pxToMm(pxValue, dpi, { direct: true });
+        if (targetUnit === 'inch') {
+            const mm = LengthConvert.pxToMm(pxValue, dpi, { direct: true });
+            return mm / LengthConvert.CONSTANTS.INCH_TO_MM;
+        }
+    }
+
+    _toPrecisionValue(value: number) {
+        if (this.precision === undefined) return value;
+        const factor = Math.pow(10, this.precision);
+        return Math.round(value * factor) / factor;
+    }
+
+    _formatOriginUnitValues<T extends { [k: string]: number | undefined }>(vals: T): T {
+        const result: Record<string, number | undefined> = {};
+        for (const key in vals) {
+            const v = vals[key];
+            result[key] = v === undefined ? undefined : this._toPrecisionValue(v);
+        }
+        return result as T;
+    }
+
+    applyObjectPx(
+        obj: fabric.Object,
+        opts: {
+            left?: number;
+            top?: number;
+            width?: number;
+            height?: number;
+            strokeWidth?: number;
+            fontSize?: number;
+        }
+    ) {
+        const { left, top, width, height, strokeWidth, fontSize } = opts;
+        // fontSize必须在width之前，否则可能宽度设置不正确
+        if (fontSize !== undefined) obj.set('fontSize', fontSize);
+        if (strokeWidth !== undefined) obj.set('strokeWidth', strokeWidth);
+        if (width !== undefined) obj.set('width', width);
+        if (height !== undefined) obj.set('height', height);
+        if (left !== undefined) obj.set('left', left);
+        if (top !== undefined) obj.set('top', top);
+    }
+
+    applyObjectMm(
+        obj: fabric.Object,
+        mm: {
+            left?: number;
+            top?: number;
+            width?: number;
+            height?: number;
+            strokeWidth?: number;
+            fontSize?: number;
+        },
+        dpi?: number
+    ) {
+        const toPx = (v: number | undefined) =>
+            v === undefined ? undefined : LengthConvert.mmToPx(v, dpi, { direct: true });
+        this.applyObjectPx(obj, {
+            left: toPx(mm.left),
+            top: toPx(mm.top),
+            width: toPx(mm.width),
+            height: toPx(mm.height),
+            strokeWidth: toPx(mm.strokeWidth),
+            fontSize: toPx(mm.fontSize),
+        });
+        const formatted = this._formatOriginUnitValues(mm);
+        (obj as any)._originSize = { ...(obj as any)._originSize, mm: { ...formatted } };
+    }
+
+    applyObjectInch(
+        obj: fabric.Object,
+        inch: {
+            left?: number;
+            top?: number;
+            width?: number;
+            height?: number;
+            strokeWidth?: number;
+            fontSize?: number;
+        },
+        dpi?: number
+    ) {
+        const toMm = (v: number | undefined) =>
+            v === undefined ? undefined : v * LengthConvert.CONSTANTS.INCH_TO_MM;
+        this.applyObjectMm(
+            obj,
+            {
+                left: toMm(inch.left),
+                top: toMm(inch.top),
+                width: toMm(inch.width),
+                height: toMm(inch.height),
+                strokeWidth: toMm(inch.strokeWidth),
+                fontSize: toMm(inch.fontSize),
+            },
+            dpi
+        );
+        const formatted = this._formatOriginUnitValues(inch);
+        (obj as any)._originSize = { ...(obj as any)._originSize, inch: { ...formatted } };
+    }
+
+    applyObjectByUnit(
+        obj: fabric.Object,
+        opts: {
+            left?: number;
+            top?: number;
+            width?: number;
+            height?: number;
+            strokeWidth?: number;
+            fontSize?: number;
+        },
+        dpi?: number
+    ) {
+        const unit = this.getUnit();
+        if (unit === 'mm') return this.applyObjectMm(obj, opts, dpi);
+        if (unit === 'inch') return this.applyObjectInch(obj, opts, dpi);
+        return this.applyObjectPx(obj, opts);
+    }
+
+    // mm
+    setSizeMm(widthMm: number, heightMm: number, dpi?: number) {
+        const width = LengthConvert.mmToPx(widthMm, dpi, { direct: true });
+        const height = LengthConvert.mmToPx(heightMm, dpi, { direct: true });
+        this.editor.setSize(width, height);
+        this._syncOriginSize(widthMm, heightMm);
+    }
+
+    setSizeByUnit(width: number, height: number, options: { dpi: number, slient?: boolean }) {
+        const unit = (this.editor as any).getUnit?.() || 'px';
+        if (unit === 'mm') {
+            return this.setSizeMm(width, height, options.dpi);
+        }
+        if (unit === 'inch') {
+            this._syncOriginSize(width, height);
+            const wmm = width * LengthConvert.CONSTANTS.INCH_TO_MM;
+            const hmm = height * LengthConvert.CONSTANTS.INCH_TO_MM;
+            return this.setSizeMm(wmm, hmm, options.dpi);
+        }
+        this.editor.setSize(width, height, { slient: options.slient });
+    }
+
+    getOriginSize(dpi?: number) {
+        const unit = this.getUnit();
+        const origin = (this.canvas as any)._originSize || {};
+        const originMm: { width?: number; height?: number } = origin.mm || {};
+
+        if (unit === 'px') {
+            return {
+                width: this.canvas.getWidth(),
+                height: this.canvas.getHeight(),
+            };
+        }
+
+        const ensureMmWidth = originMm.width !== undefined
+            ? originMm.width
+            : LengthConvert.pxToMm(this.canvas.getWidth(), dpi, { direct: true });
+        const ensureMmHeight = originMm.height !== undefined
+            ? originMm.height
+            : LengthConvert.pxToMm(this.canvas.getHeight(), dpi, { direct: true });
+
+        if (unit === 'mm') {
+            return this._originSize.mm ?? {
+                width: ensureMmWidth,
+                height: ensureMmHeight,
+            };
+        }
+
+        // inch
+        return this._originSize.inch ?? {
+            width: ensureMmWidth / LengthConvert.CONSTANTS.INCH_TO_MM,
+            height: ensureMmHeight / LengthConvert.CONSTANTS.INCH_TO_MM,
+        };
+    }
+
+    _syncOriginSize(width?: number, height?: number) {
+        const unit = this.getUnit();
+        if (unit === 'px') return;
+        this._originSize[unit] = this._originSize[unit] || { width: 0, height: 0 };
+        if (width !== undefined) this._originSize[unit].width = this._toPrecisionValue(width);
+        if (height !== undefined) this._originSize[unit].height = this._toPrecisionValue(height);
+    }
+
+    syncOriginSizeByUnit(width?: number, height?: number) {
+        const unit = this.getUnit();
+        if (unit === 'mm') {
+            if (width !== undefined) {
+                const v = LengthConvert.pxToMm(width, undefined, { direct: true });
+                this._originSize[unit].width = this._toPrecisionValue(v);
+            }
+            if (height !== undefined) {
+                const v = LengthConvert.pxToMm(height, undefined, { direct: true });
+                this._originSize[unit].height = this._toPrecisionValue(v);
+            }
+        }
+    }
+
+    _bindEvents() {
+        const throttledSync = throttle((obj: fabric.Object) => {
+            syncMmFromObject(obj, undefined, this.precision);
+        }, 30);
+
+        this.canvas.on('object:modified', (e: any) => {
+            const target = e.target as fabric.Object | undefined;
+            if (target) syncMmFromObject(target, undefined, this.precision);
+        });
+
+        this.canvas.on('object:moving', (e: any) => {
+            const target = e.target as fabric.Object | undefined;
+            if (target) throttledSync(target);
+        });
+
+        this.canvas.on('object:scaling', (e: any) => {
+            const target = e.target as fabric.Object | undefined;
+            if (target) throttledSync(target);
+        });
+
+        this.canvas.on('object:rotating', (e: any) => {
+            const target = e.target as fabric.Object | undefined;
+            if (target) throttledSync(target);
+        });
+
+        this.editor.on?.('sizeChange', (event: { width: number, height: number }) => {
+            const unit = this.getUnit();
+            if (unit === 'px') return;
+            if (unit === 'mm') {
+                this._syncOriginSize(event.width, event.height);
+                return
+            }
+        });
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default UnitPlugin;