@hprint/plugins 0.0.1-alpha.0

package/src/plugins/WaterMarkPlugin.ts

@@ -0,0 +1,257 @@
+import { cloneDeep } from 'lodash-es';
+import { fabric } from '@hprint/core';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<
+    WaterMarkPlugin,
+    'drawWaterMark' | 'clearWaterMMatk' | 'updateDrawStatus'
+>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin { }
+}
+
+enum POSITION {
+    lt = 'Left_Top',
+    lb = 'Left_Right',
+    rt = 'Right_Top',
+    rb = 'Right_Bottom',
+    full = 'Full',
+}
+
+type IPosition =
+    | POSITION.lt
+    | POSITION.lb
+    | POSITION.rt
+    | POSITION.rb
+    | POSITION.full; // lt 左上 lr 左上 rt 右上  rb 右下 full 平铺 后续可扩展其他功能
+type IDrawOps = {
+    text: string;
+    size: number;
+    fontFamily: string;
+    color: string;
+    isRotate: boolean;
+    position: IPosition;
+};
+
+const defaultOptions: IDrawOps = {
+    text: '',
+    size: 24,
+    isRotate: false, // 是否倾斜
+    fontFamily: '汉体', // 可考虑自定义字体
+    color: '#ccc', // 可考虑自定义颜色
+    position: POSITION.lt,
+};
+
+class WaterMarkPlugin implements IPluginTempl {
+    static pluginName = 'WaterMarkPlugin';
+    static apis = ['drawWaterMark', 'clearWaterMMatk', 'updateDrawStatus'];
+    private hadDraw = false;
+    private drawOps: IDrawOps = defaultOptions;
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this.init();
+    }
+
+    private createCanvas(width: number, height: number) {
+        const waterCanvas: HTMLCanvasElement = document.createElement('canvas');
+        waterCanvas.width = width;
+        waterCanvas.height = height;
+        waterCanvas.style.position = 'fixed';
+        waterCanvas.style.opacity = '0';
+        waterCanvas.style.zIndex = '-1';
+        return waterCanvas;
+    }
+
+    // 待优化
+    private drawing: Record<IPosition, (...arg: any[]) => void> = {
+        [POSITION.lt]: (
+            width: number,
+            height: number,
+            cb: (imgString: string) => void
+        ) => {
+            let waterCanvas: HTMLCanvasElement | null = this.createCanvas(
+                width,
+                height
+            );
+            const w = waterCanvas.width || width;
+            let ctx: CanvasRenderingContext2D | null =
+                waterCanvas.getContext('2d')!;
+            ctx.fillStyle = this.drawOps.color;
+            ctx.font = `${this.drawOps.size}px ${this.drawOps.fontFamily}`;
+            ctx.fillText(this.drawOps.text, 10, this.drawOps.size + 10, w - 20);
+            cb && cb(waterCanvas.toDataURL());
+            waterCanvas = null;
+            ctx = null;
+        },
+        [POSITION.rt]: (
+            width: number,
+            height: number,
+            cb: (imgString: string) => void
+        ) => {
+            let waterCanvas: HTMLCanvasElement | null = this.createCanvas(
+                width,
+                height
+            );
+            let ctx: CanvasRenderingContext2D | null =
+                waterCanvas.getContext('2d')!;
+            const w = waterCanvas.width || width;
+            ctx.fillStyle = this.drawOps.color;
+            ctx.font = `${this.drawOps.size}px ${this.drawOps.fontFamily}`;
+            ctx.fillText(
+                this.drawOps.text,
+                w - ctx.measureText(this.drawOps.text).width - 20,
+                this.drawOps.size + 10,
+                w - 20
+            );
+            cb && cb(waterCanvas.toDataURL());
+            waterCanvas = null;
+            ctx = null;
+        },
+        [POSITION.lb]: (
+            width: number,
+            height: number,
+            cb: (imgString: string) => void
+        ) => {
+            let waterCanvas: HTMLCanvasElement | null = this.createCanvas(
+                width,
+                height
+            );
+            let ctx: CanvasRenderingContext2D | null =
+                waterCanvas.getContext('2d')!;
+            const w = waterCanvas.width || width;
+            const h = waterCanvas.height || height;
+            ctx.fillStyle = this.drawOps.color;
+            ctx.font = `${this.drawOps.size}px ${this.drawOps.fontFamily}`;
+            ctx.fillText(this.drawOps.text, 10, h - this.drawOps.size, w - 20);
+            cb && cb(waterCanvas.toDataURL());
+            waterCanvas = null;
+            ctx = null;
+        },
+        [POSITION.rb]: (
+            width: number,
+            height: number,
+            cb: (imgString: string) => void
+        ) => {
+            let waterCanvas: HTMLCanvasElement | null = this.createCanvas(
+                width,
+                height
+            );
+            let ctx: CanvasRenderingContext2D | null =
+                waterCanvas.getContext('2d')!;
+            const w = waterCanvas.width || width;
+            ctx.fillStyle = this.drawOps.color;
+            ctx.font = `${this.drawOps.size}px ${this.drawOps.fontFamily}`;
+            ctx.fillText(
+                this.drawOps.text,
+                w - ctx.measureText(this.drawOps.text).width - 20,
+                height - this.drawOps.size,
+                width - 20
+            );
+            cb && cb(waterCanvas.toDataURL());
+            waterCanvas = null;
+            ctx = null;
+        },
+        [POSITION.full]: (
+            width: number,
+            height: number,
+            cb: (imgString: string) => void
+        ) => {
+            const angle = -30; // 按逆时针30度算
+            const R = (angle * Math.PI) / 180;
+            const font = `${this.drawOps.size}px ${this.drawOps.fontFamily}`;
+            let waterCanvas: HTMLCanvasElement | null = this.createCanvas(
+                width,
+                height
+            );
+            let ctx: CanvasRenderingContext2D | null =
+                waterCanvas.getContext('2d')!;
+            ctx.font = font;
+            const textW = ctx.measureText(this.drawOps.text).width + 40;
+            let patternCanvas: HTMLCanvasElement | null = this.createCanvas(
+                this.drawOps.isRotate
+                    ? textW * Math.abs(Math.cos(R)) + this.drawOps.size
+                    : textW,
+                this.drawOps.isRotate
+                    ? textW * Math.abs(Math.sin(R)) + this.drawOps.size
+                    : this.drawOps.size + 20
+            );
+            document.body.appendChild(patternCanvas);
+            let ctxWater: CanvasRenderingContext2D | null =
+                patternCanvas.getContext('2d')!;
+            ctxWater.textAlign = 'left';
+            ctxWater.textBaseline = 'top';
+            ctxWater.font = font;
+            ctxWater.fillStyle = `${this.drawOps.color}`;
+            if (this.drawOps.isRotate) {
+                ctxWater.translate(0, textW * Math.abs(Math.sin(R)));
+                ctxWater.rotate(R);
+                ctxWater.fillText(this.drawOps.text, 0, 0);
+            } else {
+                ctxWater.fillText(this.drawOps.text, 10, 10);
+            }
+            ctx.fillStyle = ctx.createPattern(patternCanvas, 'repeat')!;
+            ctx.fillRect(0, 0, width, height);
+            cb && cb(waterCanvas.toDataURL());
+            waterCanvas = null;
+            patternCanvas = null;
+            ctx = null;
+            ctxWater = null;
+        },
+    };
+
+    drawWaterMark(ops: IDrawOps) {
+        this.drawOps = Object.assign(cloneDeep(this.drawOps), ops);
+        if (!this.drawOps.text) return;
+        const workspace = this.canvas
+            .getObjects()
+            .find((item: any) => item.id === 'workspace');
+        const { width, height, left, top }: any = workspace;
+        this.drawing[this.drawOps?.position](
+            width,
+            height,
+            (imgString: string) => {
+                this.canvas.overlayImage = undefined;
+                this.hadDraw = true;
+                this.canvas.setOverlayImage(
+                    imgString,
+                    this.canvas.renderAll.bind(this.canvas),
+                    {
+                        left: left || 0,
+                        top: top || 0,
+                        originX: 'left',
+                        originY: 'top',
+                    }
+                );
+            }
+        );
+    }
+
+    // 更新handDrow 导入json时无法知道是否绘制
+    updateDrawStatus(status: boolean) {
+        this.hadDraw = status;
+    }
+
+    clearWaterMMatk() {
+        if (!this.hadDraw) return;
+        this.canvas.overlayImage = undefined;
+        this.canvas.renderAll();
+        this.hadDraw = false;
+        this.drawOps = defaultOptions;
+    }
+
+    init() {
+        // TODO 这里接受的参数应该时当前单位对应的尺寸信息，可能会有问题
+        this.editor.on('sizeChange', this.drawWaterMark.bind(this));
+    }
+
+    destroy() {
+        // TODO 这里接受的参数应该时当前单位对应的尺寸信息，可能会有问题
+        this.editor.off('sizeChange', this.drawWaterMark);
+    }
+}
+
+export default WaterMarkPlugin;

package/src/plugins/WorkspacePlugin.ts

@@ -0,0 +1,307 @@
+import { fabric } from '@hprint/core';
+import { LengthConvert } from '@hprint/shared';
+import { throttle } from 'lodash-es';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<
+    WorkspacePlugin,
+    | 'big'
+    | 'small'
+    | 'auto'
+    | 'one'
+    | 'setSize'
+    | 'getWorkspase'
+    | 'setWorkspaseBg'
+    | 'setCenterFromObject'
+    | 'getZoom'
+    | 'setZoom'
+>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin { }
+}
+
+class WorkPluinConfig {
+    maxZoom = 20 // 最大缩放比例
+    minZoom = 0.01 // 最小缩放比例
+    zoomStep = 0.01 // 缩放步长
+}
+
+class WorkspacePlugin implements IPluginTempl {
+    static pluginName = 'WorkspacePlugin';
+    static events = ['sizeChange'];
+    static apis = [
+        'big',
+        'small',
+        'auto',
+        'one',
+        'setSize',
+        'setSizeMm',
+        'getWorkspase',
+        'setWorkspaseBg',
+        'setCenterFromObject',
+        'getZoom',
+        'setZoom',
+    ];
+    workspaceEl!: HTMLElement;
+    workspace: null | fabric.Rect;
+    resizeObserver!: ResizeObserver;
+    option: any;
+    config!: WorkPluinConfig;
+    zoomRatio: number;
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor,
+        config?: Partial<WorkPluinConfig>,
+    ) {
+        this.workspace = null;
+        // init会调用auto随后使用this.config，所以要先设置
+        this.config = Object.assign(new WorkPluinConfig(), config);
+        this.init({
+            width: 114,
+            height: 114,
+        });
+        this.zoomRatio = this._getValidZoom(0.85);
+    }
+
+    init(option: { width: number; height: number }) {
+        const workspaceEl = document.querySelector('#workspace') as HTMLElement;
+        if (!workspaceEl) {
+            throw new Error('element #workspace is missing, plz check!');
+        }
+        this.workspaceEl = workspaceEl;
+        this.workspace = null;
+        this.option = option;
+        this._initBackground();
+        this._initWorkspace();
+        this._initResizeObserve();
+        this._bindWheel();
+    }
+
+    hookImportAfter() {
+        return new Promise((resolve) => {
+            const workspace = this.canvas
+                .getObjects()
+                .find((item) => item.id === 'workspace');
+            if (workspace) {
+                workspace.set('selectable', false);
+                workspace.set('hasControls', false);
+                workspace.set('evented', false);
+                if (workspace.width && workspace.height) {
+                    this.setSize(workspace.width, workspace.height);
+                    this.editor.emit(
+                        'sizeChange',
+                        workspace.width,
+                        workspace.height
+                    );
+                }
+            }
+            resolve('');
+        });
+    }
+
+    hookSaveAfter() {
+        return new Promise((resolve) => {
+            this.auto();
+            resolve(true);
+        });
+    }
+
+    // 初始化背景
+    _initBackground() {
+        this.canvas.backgroundImage = '';
+        this.canvas.setWidth(this.workspaceEl.offsetWidth);
+        this.canvas.setHeight(this.workspaceEl.offsetHeight);
+    }
+
+    // 初始化画布
+    _initWorkspace() {
+        const { width, height } = this.option;
+        const workspace = new fabric.Rect({
+            fill: 'rgba(255,255,255,1)',
+            width,
+            height,
+            id: 'workspace',
+            strokeWidth: 0,
+        });
+        workspace.set('selectable', false);
+        workspace.set('hasControls', false);
+        workspace.hoverCursor = 'default';
+        this.canvas.add(workspace);
+        this.canvas.renderAll();
+
+        this.workspace = workspace;
+        if (this.canvas.clearHistory) {
+            this.canvas.clearHistory();
+        }
+        this.auto();
+    }
+
+    // 返回workspace对象
+    getWorkspase() {
+        return this.canvas
+            .getObjects()
+            .find((item) => item.id === 'workspace') as fabric.Rect;
+    }
+
+    /**
+     * 设置画布中心到指定对象中心点上
+     * @param {Object} obj 指定的对象
+     */
+    setCenterFromObject(obj: fabric.Rect) {
+        const { canvas } = this;
+        const objCenter = obj.getCenterPoint();
+        const viewportTransform = canvas.viewportTransform;
+        if (
+            canvas.width === undefined ||
+            canvas.height === undefined ||
+            !viewportTransform
+        )
+            return;
+        viewportTransform[4] =
+            canvas.width / 2 - objCenter.x * viewportTransform[0];
+        viewportTransform[5] =
+            canvas.height / 2 - objCenter.y * viewportTransform[3];
+        canvas.setViewportTransform(viewportTransform);
+        canvas.renderAll();
+    }
+
+    // 初始化监听器
+    _initResizeObserve() {
+        const resizeObserver = new ResizeObserver(
+            throttle(() => {
+                this.auto();
+            }, 50)
+        );
+        this.resizeObserver = resizeObserver;
+        this.resizeObserver.observe(this.workspaceEl);
+    }
+
+    _getValidZoom(zoom: number) {
+        return Math.max(this.config.minZoom, Math.min(this.config.maxZoom, zoom));
+    }
+
+    // px
+    setSize(width: number, height: number, options?: { slient?: boolean }) {
+        this._initBackground();
+        this.option.width = width;
+        this.option.height = height;
+        // 重新设置workspace
+        this.workspace = this.canvas
+            .getObjects()
+            .find((item) => item.id === 'workspace') as fabric.Rect;
+        this.workspace.set('width', width);
+        this.workspace.set('height', height);
+        options?.slient !== true && this.editor.emit(
+            'sizeChange',
+            this.workspace.width,
+            this.workspace.height
+        );
+        this.auto();
+    }
+
+    setZoomAuto(scale: number, cb?: (left?: number, top?: number) => void) {
+        const { workspaceEl } = this;
+        const width = workspaceEl.offsetWidth;
+        const height = workspaceEl.offsetHeight;
+        this.canvas.setWidth(width);
+        this.canvas.setHeight(height);
+        const center = this.canvas.getCenter();
+        this.canvas.setViewportTransform(fabric.iMatrix.concat());
+        this.canvas.zoomToPoint(
+            new fabric.Point(center.left, center.top),
+            scale
+        );
+        if (!this.workspace) return;
+        this.setCenterFromObject(this.workspace);
+
+        // 超出画布不展示
+        this.workspace.clone((cloned: fabric.Rect) => {
+            this.canvas.clipPath = cloned;
+            this.canvas.requestRenderAll();
+        });
+        if (cb) cb(this.workspace.left, this.workspace.top);
+    }
+
+    _getScale() {
+        return fabric.util.findScaleToFit(this.getWorkspase(), {
+            width: this.workspaceEl.offsetWidth,
+            height: this.workspaceEl.offsetHeight,
+        });
+    }
+
+    // 放大
+    big() {
+        let zoomRatio = this.canvas.getZoom();
+        zoomRatio = this._getValidZoom(zoomRatio + this.config.zoomStep);
+        const center = this.canvas.getCenter();
+        this.canvas.zoomToPoint(
+            new fabric.Point(center.left, center.top),
+            zoomRatio
+        );
+    }
+
+    // 缩小
+    small() {
+        let zoomRatio = this.canvas.getZoom();
+        zoomRatio = this._getValidZoom(zoomRatio - this.config.zoomStep);
+        const center = this.canvas.getCenter();
+        this.canvas.zoomToPoint(
+            new fabric.Point(center.left, center.top),
+            zoomRatio
+        );
+    }
+
+    // 自动缩放
+    auto() {
+        const scale = this._getScale();
+        const zoom = this._getValidZoom(scale * this.zoomRatio);
+        this.setZoomAuto(zoom);
+    }
+
+    // 1:1 放大
+    one() {
+        this.setZoomAuto(1 * this.zoomRatio);
+        this.canvas.requestRenderAll();
+    }
+
+    getZoom() {
+        return this.canvas.getZoom();
+    }
+
+    setZoom(zoom: number) {
+        const center = this.canvas.getCenter();
+        this.canvas.zoomToPoint(
+            new fabric.Point(center.left, center.top),
+            this._getValidZoom(zoom)
+        );
+    }
+
+    setWorkspaseBg(color: string) {
+        const workspase = this.getWorkspase();
+        workspase?.set('fill', color);
+    }
+
+    _bindWheel() {
+        const getValidZoom = this._getValidZoom.bind(this);
+        this.canvas.on('mouse:wheel', function (this: fabric.Canvas, opt) {
+            const delta = opt.e.deltaY;
+            let zoom = this.getZoom();
+            zoom *= 0.999 ** delta;
+            zoom = getValidZoom(zoom);
+            const center = this.getCenter();
+            this.zoomToPoint(new fabric.Point(center.left, center.top), zoom);
+            opt.e.preventDefault();
+            opt.e.stopPropagation();
+        });
+    }
+
+    destroy() {
+        this.resizeObserver.disconnect();
+        this.canvas.off();
+        console.log('pluginDestroy');
+    }
+}
+
+export default WorkspacePlugin;

package/src/types/eventType.ts

@@ -0,0 +1,11 @@
+// 选择事件（用于广播）
+export enum SelectEvent {
+    ONE = 'selectOne',
+    MULTI = 'selectMultiple',
+    CANCEL = 'selectCancel',
+}
+export enum SelectMode {
+    EMPTY = '',
+    ONE = 'one',
+    MULTI = 'multiple',
+}