@hprint/plugins 0.0.1-alpha.0

package/src/plugins/PathTextPlugin.ts

@@ -0,0 +1,89 @@
+import { fabric } from '@hprint/core';
+import { v4 as uuid } from 'uuid';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<PathTextPlugin, 'startTextPathDraw' | 'endTextPathDraw'>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+type DrawOptions = {
+    decimate: number;
+    width: number;
+    defaultText: string;
+    color: string;
+    lineColor: string;
+    defaultFontSize: number;
+};
+
+export default class PathTextPlugin implements IPluginTempl {
+    static pluginName = 'PathTextPlugin';
+    static apis = ['startTextPathDraw', 'endTextPathDraw'];
+    private options?: DrawOptions;
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {}
+
+    _beforeHandler = (opt: any) => {
+        if (this.options == null) return;
+        const path = opt.path as any;
+        const getPathSegmentsInfo = (fabric.util as any).getPathSegmentsInfo;
+        path.segmentsInfo = getPathSegmentsInfo(path.path);
+        path.set({ stroke: this.options.lineColor });
+        const text = this.options.defaultText;
+        const fontSize = this.options.defaultFontSize;
+        const textObject = new fabric.IText(text, {
+            shadow: '',
+            fontFamily: 'arial',
+            fontSize: fontSize,
+            top: path.top,
+            left: path.left,
+            fill: this.options.color,
+            path: path,
+            id: uuid(),
+            // 路径文字元素禁止在画布上直接编辑
+            editable: false,
+        });
+        this.canvas.add(textObject);
+    };
+    _createdHandler = (opt: any) => {
+        this.canvas.remove(opt.path);
+    };
+    _bindEvent() {
+        this.canvas.on('before:path:created', this._beforeHandler);
+        this.canvas.on('path:created', this._createdHandler);
+    }
+    _unbindEvent() {
+        this.canvas.off('before:path:created', this._beforeHandler);
+        this.canvas.off('path:created', this._createdHandler);
+    }
+    startTextPathDraw(options: Partial<DrawOptions> = {}) {
+        const defaultOptions = {
+            decimate: 8,
+            width: 2,
+            defaultText: '诸事顺遂 万事大吉',
+            color: '#000000',
+            lineColor: '#000000',
+            defaultFontSize: 20,
+        };
+        this.options = {
+            ...defaultOptions,
+            ...options,
+        };
+        this.canvas.isDrawingMode = true;
+        const brush = (this.canvas.freeDrawingBrush = new fabric.PencilBrush(
+            this.canvas
+        ));
+        brush.decimate = this.options.decimate;
+        brush.width = this.options.width;
+        brush.color = this.options.color;
+        this._bindEvent();
+    }
+    endTextPathDraw() {
+        this.canvas.isDrawingMode = false;
+        this._unbindEvent();
+    }
+}

package/src/plugins/PolygonModifyPlugin.ts

@@ -0,0 +1,224 @@
+import { fabric } from '@hprint/core';
+import { utils } from '@hprint/shared';
+import edgeImg from '../assets/edgecontrol.svg?url';
+import { noop } from 'lodash-es';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<
+    PolygonModifyPlugin,
+    'toggleEdit' | 'activeEdit' | 'inActiveEdit'
+>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+export type Options = {
+    fill: string;
+    style: fabric.IObjectOptions['cornerStyle'];
+};
+
+interface PointIndexPolygon extends fabric.Polygon {
+    pointIndex: number;
+    __corner: string;
+    _setPositionDimensions: (...args: any[]) => any;
+}
+
+interface PointIndexControl extends fabric.Control {
+    pointIndex: number;
+}
+
+const actionHandler: fabric.Control['actionHandler'] = function (
+    eventData: MouseEvent,
+    transform: fabric.Transform,
+    x: number,
+    y: number
+) {
+    const polygon = transform.target as PointIndexPolygon,
+        currentControl = polygon.controls[
+            polygon.__corner
+        ] as PointIndexControl,
+        mouseLocalPosition = polygon.toLocalPoint(
+            new fabric.Point(x, y),
+            'center',
+            'center'
+        ),
+        polygonBaseSize = getObjectSizeWithStroke(polygon),
+        size = polygon._getTransformedDimensions(0, 0);
+    if (polygon.points == null) return false;
+    polygon.points[currentControl.pointIndex] = new fabric.Point(
+        (mouseLocalPosition.x * polygonBaseSize.x) / size.x +
+            polygon.pathOffset.x,
+        (mouseLocalPosition.y * polygonBaseSize.y) / size.y +
+            polygon.pathOffset.y
+    );
+    return true;
+};
+const anchorWrapper = function (
+    anchorIndex: number,
+    fn: fabric.Control['actionHandler']
+) {
+    return function (
+        eventData: MouseEvent,
+        transform: fabric.Transform,
+        x: number,
+        y: number
+    ) {
+        const fabricObject = transform.target as PointIndexPolygon;
+        if (fabricObject.points == null) return false;
+        const absolutePoint = fabric.util.transformPoint(
+                new fabric.Point(
+                    fabricObject.points[anchorIndex].x -
+                        fabricObject.pathOffset.x,
+                    fabricObject.points[anchorIndex].y -
+                        fabricObject.pathOffset.y
+                ),
+                fabricObject.calcTransformMatrix()
+            ),
+            actionPerformed = fn(eventData, transform, x, y),
+            // newDim = fabricObject._setPositionDimensions({}),
+            polygonBaseSize = getObjectSizeWithStroke(fabricObject),
+            newX =
+                (fabricObject.points[anchorIndex].x -
+                    fabricObject.pathOffset.x) /
+                polygonBaseSize.x,
+            newY =
+                (fabricObject.points[anchorIndex].y -
+                    fabricObject.pathOffset.y) /
+                polygonBaseSize.y;
+        const originX = (newX + 0.5) as any;
+        const originY = (newY + 0.5) as any;
+        fabricObject.setPositionByOrigin(absolutePoint, originX, originY);
+        return actionPerformed;
+    };
+};
+const getObjectSizeWithStroke = function (object: fabric.Object) {
+    const stroke = new fabric.Point(
+        object.strokeUniform ? 1 / object.scaleX! : 1,
+        object.strokeUniform ? 1 / object.scaleY! : 1
+    ).multiply(object.strokeWidth!);
+    return new fabric.Point(
+        object.width! + stroke.x,
+        object.height! + stroke.y
+    );
+};
+const polygonPositionHandler = function (
+    this: PointIndexControl,
+    dim: any,
+    finalMatrix: any,
+    fabricObject: any
+) {
+    const x =
+            fabricObject.points[this.pointIndex].x - fabricObject.pathOffset.x,
+        y = fabricObject.points[this.pointIndex].y - fabricObject.pathOffset.y;
+    // 求出在世界坐标系的位置
+    return fabric.util.transformPoint(
+        new fabric.Point(x, y), // 物体坐标系下的位置
+        fabric.util.multiplyTransformMatrices(
+            fabricObject.canvas.viewportTransform,
+            fabricObject.calcTransformMatrix()
+        )
+    );
+};
+function renderIconEdge(
+    ctx: CanvasRenderingContext2D,
+    left: number,
+    top: number,
+    styleOverride: any,
+    fabricObject: fabric.Object,
+    img: HTMLImageElement
+) {
+    utils.drawImg(
+        ctx,
+        left,
+        top,
+        img,
+        25,
+        25,
+        fabric.util.degreesToRadians(fabricObject.angle || 0)
+    );
+}
+
+class PolygonModifyPlugin implements IPluginTempl {
+    public isEdit: boolean;
+    private img: HTMLImageElement;
+    static pluginName = 'PolygonModifyPlugin';
+    static events = [];
+    static apis = ['toggleEdit', 'activeEdit', 'inActiveEdit'];
+
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this.isEdit = false;
+        const img = document.createElement('img');
+        img.src = edgeImg;
+        this.img = img;
+        this.init();
+    }
+    init() {
+        console.info('[PolygonModifyPlugin]: init');
+    }
+    _onDeselected: () => any = noop;
+    _ensureEvent(poly: fabric.Object) {
+        poly.off('deselected', this._onDeselected);
+    }
+    toggleEdit() {
+        this.isEdit ? this.inActiveEdit() : this.activeEdit();
+    }
+    activeEdit() {
+        this.isEdit = true;
+        const poly = this.canvas.getActiveObject() as fabric.Polygon;
+        if (poly && poly.type === 'polygon') {
+            this._ensureEvent(poly);
+            if (poly.points == null) return;
+            const lastControl = poly.points.length - 1;
+            const This = this;
+            poly.controls = poly.points.reduce<
+                Record<string, PointIndexControl>
+            >(function (acc, point, index) {
+                acc['p' + index] = <PointIndexControl>new fabric.Control({
+                    positionHandler: polygonPositionHandler,
+                    actionHandler: anchorWrapper(
+                        index > 0 ? index - 1 : lastControl,
+                        actionHandler
+                    ),
+                    actionName: 'modifyPolygon',
+                    render: (...args) => renderIconEdge(...args, This.img),
+                });
+                Object.defineProperty(acc['p' + index], 'pointIndex', {
+                    value: index,
+                });
+                return acc;
+            }, {});
+            poly.set({
+                objectCaching: false,
+            });
+            poly.hasBorders = !this.isEdit;
+            this.canvas.requestRenderAll();
+            this._onDeselected = () => this.inActiveEdit(poly);
+            poly.on('deselected', this._onDeselected);
+        }
+    }
+    inActiveEdit(poly?: fabric.Polygon) {
+        this.isEdit = false;
+        poly = poly || (this.canvas.getActiveObject() as fabric.Polygon);
+        if (poly && poly.type === 'polygon') {
+            poly.cornerColor = 'blue';
+            poly.cornerStyle = 'rect';
+            poly.controls = fabric.Object.prototype.controls;
+            poly.hasBorders = !this.isEdit;
+            poly.set({
+                objectCaching: true,
+            });
+            if (this._onDeselected) {
+                poly.off('deselected', this._onDeselected);
+                this._onDeselected = noop;
+            }
+        }
+        this.canvas.requestRenderAll();
+    }
+}
+
+export default PolygonModifyPlugin;

package/src/plugins/PrintPlugin.ts

@@ -0,0 +1,81 @@
+import { fabric } from '@hprint/core';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+import { io } from 'socket.io-client';
+
+type IPlugin = Pick<PrintPlugin, 'printPDF' | 'getPrinterList'>;
+
+export interface Option {
+    'printer-location': string;
+    'printer-make-and-model': string;
+    system_driverinfo: string;
+}
+
+export interface IPrinterItem {
+    name: string;
+    displayName: string;
+    description: string;
+    status: number;
+    isDefault: boolean;
+    options: Option;
+}
+
+export interface IPrintPDFOption {
+    width: number;
+    height: number;
+    base64: string;
+}
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+export default class PrintPlugin implements IPluginTempl {
+    static pluginName = 'PrintPlugin';
+    static apis = ['printPDF', 'getPrinterList'];
+
+    socket?: any;
+    isConnect = false;
+    printerList: IPrinterItem[] = [];
+
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this.editor = editor;
+        this.canvas = canvas;
+
+        this.socket = io('http://localhost:17521', {
+            transports: ['websocket'],
+            auth: {
+                token: 'vue-plugin-hiprint',
+            },
+        });
+
+        this.socket.on('connect', () => {
+            this.isConnect = true;
+            // globalThis.connect = true;
+            // TODO: Do something for your project
+        });
+
+        this.socket.on('printerList', (printerList: IPrinterItem[]) => {
+            console.log('printerList', printerList);
+            this.printerList = printerList;
+        });
+    }
+
+    printPDF(options: IPrintPDFOption) {
+        this.socket.emit('printPDF', {
+            ...options,
+            unit: 'mm',
+        });
+    }
+
+    getPrinterList() {
+        return this.printerList;
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}

package/src/plugins/PsdPlugin.ts

@@ -0,0 +1,52 @@
+import { fabric } from '@hprint/core';
+import { utils } from '@hprint/shared';
+import psdToJson from '../utils/psd';
+import Psd from '@webtoon/psd';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<PsdPlugin, 'insertPSD'>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+class PsdPlugin implements IPluginTempl {
+    static pluginName = 'PsdPlugin';
+    static apis = ['insertPSD'];
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {}
+
+    insertPSD(callback?: () => void) {
+        return new Promise((resolve, reject) => {
+            utils
+                .selectFiles({ accept: '.psd' })
+                .then((files) => {
+                    if (files && files.length > 0) {
+                        const file = files[0];
+                        const reader = new FileReader();
+                        reader.readAsText(file, 'UTF-8');
+                        reader.onload = async () => {
+                            const result = await file.arrayBuffer();
+                            // 解析PSD文件
+                            const psdFile = Psd.parse(result as ArrayBuffer);
+                            console.log(psdFile, '11111');
+                            const json = await psdToJson(psdFile);
+                            // 加载json
+                            this.loadJSON(json, callback);
+                            resolve('');
+                        };
+                    }
+                })
+                .catch(reject);
+        });
+    }
+
+    loadJSON(json: string, callback?: () => void) {
+        this.editor.loadJSON(json, callback);
+    }
+}
+
+export default PsdPlugin;