@hprint/plugins 0.0.1-alpha.0

package/src/plugins/QrCodePlugin.ts

@@ -0,0 +1,393 @@
+import { fabric } from '@hprint/core';
+import QRCodeStyling from 'qr-code-styling';
+import { utils } from '@hprint/shared';
+import { getUnit, processOptions, formatOriginValues } from '../utils/units';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<QrCodePlugin, 'addQrCode' | 'setQrCode' | 'getQrCodeTypes'>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin { }
+}
+
+// 二维码生成参数
+
+enum DotsType {
+    rounded = 'rounded',
+    dots = 'dots',
+    classy = 'classy',
+    classy_rounded = 'classy-rounded',
+    square = 'square',
+    extra_rounded = 'extra-rounded',
+}
+
+enum CornersType {
+    dot = 'dot',
+    square = 'square',
+    extra_rounded = 'extra-rounded',
+}
+
+enum cornersDotType {
+    dot = 'dot',
+    square = 'square',
+}
+
+enum errorCorrectionLevelType {
+    L = 'L',
+    M = 'M',
+    Q = 'Q',
+    H = 'H',
+}
+
+class QrParamsDefaults {
+    width = 300;
+    height = 300;
+    type = 'canvas' as const;
+    data = ' ';
+    margin = 10;
+    qrOptions = {
+        errorCorrectionLevel: 'M' as const,
+    };
+    dotsOptions = {
+        color: '#000000',
+        type: 'square' as const,
+    };
+    cornersSquareOptions = {
+        color: '#000000',
+        type: 'square' as const,
+    };
+    cornersDotOptions = {
+        color: '#000000',
+        type: 'square' as const,
+    };
+    backgroundOptions = {
+        color: '#ffffff',
+    };
+}
+
+class QrCodePlugin implements IPluginTempl {
+    static pluginName = 'QrCodePlugin';
+    static apis = ['addQrCode', 'setQrCode', 'getQrCodeTypes'];
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) { }
+
+    async hookTransform(object: any) {
+        if (object.extensionType === 'qrcode') {
+            const paramsOption = this._paramsToOption(object.extension);
+            const url = await this._getBase64Str(paramsOption);
+            object.src = url;
+        }
+    }
+
+    async _getBase64Str(options: any): Promise<string> {
+        const zoom = this.canvas.getZoom() || 1;
+        const dpr = (window && (window as any).devicePixelRatio) || 1;
+        let scale = zoom * dpr;
+        const maxScale = 4;
+        if (!Number.isFinite(scale) || scale <= 0) scale = 1;
+        scale = Math.min(scale, maxScale);
+
+        const scaledOptions = {
+            ...options,
+            width: Math.round((options.width || 300) * scale),
+            height: Math.round((options.height || options.width || 300) * scale),
+            margin: Math.round((options.margin || 0) * scale),
+        };
+        const qrCode = new QRCodeStyling(scaledOptions);
+        const blob = await qrCode.getRawData('png');
+        if (!blob) return '';
+        const base64Str = (await utils.blobToBase64(blob)) as string;
+        return base64Str || '';
+    }
+
+    _defaultBarcodeOption() {
+        return {
+            value: 'https://kuaitu.cc',
+            width: 300,
+            margin: 10,
+            errorCorrectionLevel: 'M',
+            dotsColor: '#000000',
+            dotsType: 'square',
+            cornersSquareColor: '#000000',
+            cornersSquareType: 'square',
+            cornersDotColor: '#000000',
+            cornersDotType: 'square',
+            background: '#ffffff',
+        };
+    }
+
+    /**
+     * 将内部参数转换为二维码库需要的参数
+     */
+    _paramsToOption(option: any) {
+        const hasW = Number.isFinite(option.width);
+        const hasH = Number.isFinite(option.height);
+        const size = hasW && hasH
+            ? Math.max(option.width, option.height)
+            : (hasW ? option.width : (hasH ? option.height : undefined));
+        const base = {
+            width: size,
+            height: size ?? option.width,
+            type: 'canvas',
+            data: option.value != null ? String(option.value) : undefined,
+            margin: option.margin,
+            qrOptions: {
+                errorCorrectionLevel: option.errorCorrectionLevel,
+            },
+            dotsOptions: {
+                color: option.dotsColor,
+                type: option.dotsType,
+            },
+            cornersSquareOptions: {
+                color: option.cornersSquareColor,
+                type: option.cornersSquareType,
+            },
+            cornersDotOptions: {
+                color: option.cornersDotColor,
+                type: option.cornersDotType,
+            },
+            backgroundOptions: {
+                color: option.background,
+            },
+        };
+        const defaultParams = new QrParamsDefaults();
+        const merged = Object.assign({}, defaultParams, base);
+        merged.qrOptions = Object.assign({}, defaultParams.qrOptions, base.qrOptions);
+        merged.dotsOptions = Object.assign({}, defaultParams.dotsOptions, base.dotsOptions);
+        merged.cornersSquareOptions = Object.assign({}, defaultParams.cornersSquareOptions, base.cornersSquareOptions);
+        merged.cornersDotOptions = Object.assign({}, defaultParams.cornersDotOptions, base.cornersDotOptions);
+        merged.backgroundOptions = Object.assign({}, defaultParams.backgroundOptions, base.backgroundOptions);
+
+        if (!merged.data || (typeof merged.data === 'string' && merged.data.trim() === '')) {
+            merged.data = defaultParams.data;
+        }
+        return merged;
+    }
+
+    private async _updateQrCodeImage(imgEl: fabric.Image, immediate = false) {
+        const extension = imgEl.get('extension');
+        if (!extension) return;
+        const updateFn = async () => {
+            const currentWidth = imgEl.getScaledWidth();
+            const currentHeight = imgEl.getScaledHeight();
+            const size = Math.max(currentWidth, currentHeight);
+            const options = {
+                ...extension,
+                width: size,
+                height: size,
+            };
+            const paramsOption = this._paramsToOption(options);
+            try {
+                const url = await this._getBase64Str(paramsOption);
+                await new Promise<void>((resolve) => {
+                    imgEl.setSrc(url, () => {
+                        this._setImageScale(imgEl, currentWidth, currentHeight);
+                        imgEl.set('extension', options);
+                        this.canvas.renderAll();
+                        resolve();
+                    });
+                });
+            } catch (error) {
+                console.error(error);
+            }
+        };
+        if (immediate) {
+            await updateFn();
+        } else {
+            setTimeout(updateFn, 300);
+        }
+    }
+
+    /**
+     * 设置图片缩放到目标宽高
+     */
+    private _setImageScale(
+        imgEl: fabric.Image,
+        targetWidth: number,
+        targetHeight: number
+    ) {
+        const imgWidth = imgEl.width || 0;
+        const imgHeight = imgEl.height || 0;
+        if (imgWidth > 0 && imgHeight > 0) {
+            const scaleX = targetWidth / imgWidth;
+            const scaleY = targetHeight / imgHeight;
+            imgEl.set({
+                scaleX,
+                scaleY,
+            });
+        }
+    }
+
+    /**
+     * 创建二维码，支持传入内容与样式，进行单位转换并存储原始尺寸
+     */
+    async addQrCode(
+        data?: string,
+        opts?: {
+            left?: number;
+            top?: number;
+            width?: number;
+            height?: number;
+            margin?: number;
+            errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+            dotsColor?: string;
+            dotsType?: string;
+            cornersSquareColor?: string;
+            cornersSquareType?: string;
+            cornersDotColor?: string;
+            cornersDotType?: string;
+            background?: string;
+        },
+        dpi?: number
+    ): Promise<fabric.Image> {
+        const option = {
+            ...this._defaultBarcodeOption(),
+            ...(opts || {}),
+            ...(data ? { value: data } : {}),
+        };
+        const unit = getUnit(this.editor);
+        const { processed, originByUnit } = processOptions(option, unit, dpi, ['left', 'top', 'width', 'height', 'margin']);
+        const finalOptionBase = { ...option, ...processed };
+        const finalOption = {
+            ...finalOptionBase,
+            width: Number.isFinite(finalOptionBase.width) && finalOptionBase.width > 0
+                ? finalOptionBase.width
+                : this._defaultBarcodeOption().width,
+            height: Number.isFinite(finalOptionBase.height) && finalOptionBase.height > 0
+                ? finalOptionBase.height
+                : finalOptionBase.width,
+            margin: Number.isFinite(finalOptionBase.margin) && finalOptionBase.margin >= 0
+                ? finalOptionBase.margin
+                : this._defaultBarcodeOption().margin,
+        };
+        const paramsOption = this._paramsToOption(finalOption);
+        const url = await this._getBase64Str(paramsOption);
+        return new Promise<fabric.Image>((resolve) => {
+            fabric.Image.fromURL(
+                url,
+                (imgEl) => {
+                    const safeLeft = Number.isFinite(processed.left)
+                        ? processed.left
+                        : 0;
+                    const safeTop = Number.isFinite(processed.top)
+                        ? processed.top
+                        : 0;
+                    imgEl.set({
+                        left: safeLeft,
+                        top: safeTop,
+                        extensionType: 'qrcode',
+                        extension: finalOption,
+                        imageSmoothing: false,
+                    });
+
+                    const targetWidth =
+                        typeof finalOption.width === 'number'
+                            ? finalOption.width
+                            : imgEl.width ?? 0;
+                    const targetHeight =
+                        typeof finalOption.height === 'number'
+                            ? finalOption.height
+                            : targetWidth;
+                    this._setImageScale(imgEl, targetWidth, targetHeight);
+
+                    const origin = originByUnit[unit] || {};
+                    const originMapped: Record<string, any> = { ...origin };
+                    if (
+                        originMapped.height === undefined &&
+                        originMapped.width !== undefined
+                    ) {
+                        originMapped.height = originMapped.width;
+                    }
+                    (imgEl as any)._originSize = { [unit]: originMapped };
+                    (imgEl as any).setExtension = async (fields: Record<string, any>) => {
+                        const currentExt = (imgEl.get('extension') as any) || {};
+                        const merged = { ...currentExt, ...(fields || {}) };
+                        imgEl.set('extension', merged);
+                        await this._updateQrCodeImage(imgEl, true);
+                    };
+                    (imgEl as any).setExtensionByUnit = async (
+                        fields: Record<string, any>,
+                        dpi?: number
+                    ) => {
+                        const curUnit = getUnit(this.editor);
+                        const { processed, originByUnit } = processOptions(fields || {}, curUnit, dpi);
+                        const precision = (this.editor as any).getPrecision?.();
+                        const formattedOrigin = formatOriginValues(originByUnit[curUnit] || {}, precision);
+                        const originSize = (imgEl as any)._originSize || {};
+                        const unitOrigin = originSize[curUnit] || {};
+                        unitOrigin.extension = { ...(unitOrigin.extension || {}), ...formattedOrigin };
+                        (imgEl as any)._originSize = { ...originSize, [curUnit]: unitOrigin };
+                        const currentExt = (imgEl.get('extension') as any) || {};
+                        const merged = { ...currentExt, ...processed };
+                        imgEl.set('extension', merged);
+                        await this._updateQrCodeImage(imgEl, true);
+                    };
+                    (imgEl as any).off?.('modified');
+                    (imgEl as any).off?.('scaled');
+                    imgEl.on('modified', async (event: any) => {
+                        const target = (event?.target as fabric.Image) || imgEl;
+                        await this._updateQrCodeImage(target, true);
+                    });
+                    imgEl.on('scaled', async () => {
+                        await this._updateQrCodeImage(imgEl, true);
+                    });
+                    resolve(imgEl);
+                },
+                { crossOrigin: 'anonymous' }
+            );
+        });
+    }
+
+    async setQrCode(option: any) {
+        try {
+            const paramsOption = this._paramsToOption(option);
+            const url = await this._getBase64Str(paramsOption);
+            const activeObject = this.canvas.getActiveObjects()[0];
+            fabric.Image.fromURL(
+                url,
+                (imgEl) => {
+                    imgEl.set({
+                        left: activeObject.left,
+                        top: activeObject.top,
+                        extensionType: 'qrcode',
+                        extension: { ...option },
+                    });
+                    imgEl.scaleToWidth(activeObject.getScaledWidth());
+                    imgEl.off('modified');
+                    imgEl.off('scaled');
+                    imgEl.on('modified', async (event: any) => {
+                        const target = (event?.target as fabric.Image) || imgEl;
+                        await this._updateQrCodeImage(target, true);
+                    });
+                    imgEl.on('scaled', async () => {
+                        await this._updateQrCodeImage(imgEl, true);
+                    });
+                    this.editor.del();
+                    this.canvas.add(imgEl);
+                    this.canvas.setActiveObject(imgEl);
+                },
+                { crossOrigin: 'anonymous' }
+            );
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    getQrCodeTypes() {
+        return {
+            DotsType: Object.values(DotsType),
+            CornersType: Object.values(CornersType),
+            cornersDotType: Object.values(cornersDotType),
+            errorCorrectionLevelType: Object.values(errorCorrectionLevelType),
+        };
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default QrCodePlugin;

package/src/plugins/ResizePlugin.ts

@@ -0,0 +1,274 @@
+import { fabric } from '@hprint/core';
+import { throttle } from 'lodash-es';
+import '../assets/style/resizePlugin.css';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPosition = 'left' | 'right' | 'top' | 'bottom';
+
+class ResizePlugin implements IPluginTempl {
+    static pluginName = 'ResizePlugin';
+    static events = [];
+    static apis = [];
+    workspaceEl!: HTMLElement;
+    // 最小画布尺寸
+    minSize = { width: 1, height: 1 };
+    // 控制条
+    barOpts = {
+        bWidth: 30, // 宽
+        bHeight: 6, // 高
+        bPadding: 10, // 离画布边缘的距离
+    };
+    hasCreatedBar = false;
+    isDragging = false;
+    dragEl: HTMLElement | null = null;
+    startPoints = { x: 0, y: 0 };
+    barOffset = { x: 0, y: 0 };
+    wsOffset: Record<'left' | 'top' | 'width' | 'height', number> = {
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0,
+    };
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this._init();
+        this._initResizeObserve();
+        this._addListeners();
+    }
+
+    _init() {
+        const workspaceEl = document.querySelector('#workspace') as HTMLElement;
+        if (!workspaceEl) {
+            throw new Error('element #workspace is missing, plz check!');
+        }
+        this.workspaceEl = workspaceEl;
+    }
+
+    // 初始化监听器
+    _initResizeObserve() {
+        const resizeObserver = new ResizeObserver(
+            throttle(() => {
+                this.renderBars();
+            }, 50)
+        );
+        resizeObserver.observe(this.workspaceEl);
+    }
+
+    // 渲染控制条具体位置
+    renderBars() {
+        const viewportTransform = this.canvas.viewportTransform;
+        const [scaleX, , , scaleY, offsetX, offsetY] = viewportTransform || [];
+        const workspace = this.getWorkspase() as Required<fabric.Rect>;
+        const wsWidth = workspace.width * scaleX;
+        const wsHeight = workspace.height * scaleY;
+        const wsLeft = workspace.left * scaleX;
+        const wsTop = workspace.top * scaleY;
+        const { bWidth, bHeight, bPadding } = this.barOpts;
+        if (!viewportTransform) return;
+        // 左控制条
+        const leftBar = this._getBarFromType('left');
+        leftBar.style.left = `${offsetX + wsLeft - bHeight - bPadding}px`;
+        leftBar.style.top = `${offsetY + wsTop + wsHeight / 2 - bWidth / 2}px`;
+        // 右控制条
+        const rightBar = this._getBarFromType('right');
+        rightBar.style.left = `${offsetX + wsLeft + wsWidth + bPadding}px`;
+        rightBar.style.top = `${offsetY + wsTop + wsHeight / 2 - bWidth / 2}px`;
+        // 上控制条
+        const topBar = this._getBarFromType('top');
+        topBar.style.left = `${offsetX + wsLeft + wsWidth / 2 - bWidth / 2}px`;
+        topBar.style.top = `${offsetY + wsTop - bHeight - bPadding}px`;
+        // 下控制条
+        const bottomBar = this._getBarFromType('bottom');
+        bottomBar.style.left = `${offsetX + wsLeft + wsWidth / 2 - bWidth / 2}px`;
+        bottomBar.style.top = `${offsetY + wsTop + wsHeight + bPadding}px`;
+        // 监听
+        if (!this.hasCreatedBar) {
+            this.hasCreatedBar = true;
+            this._watchDrag();
+        }
+    }
+
+    // 获取或创建控制条
+    _getBarFromType(type: IPosition) {
+        let bar = document.querySelector(`#resize-${type}-bar`) as HTMLElement;
+        if (bar) return bar;
+        bar = document.createElement('div');
+        bar.id = `resize-${type}-bar`;
+        bar.className = 'resize-bar';
+        if (['left', 'right'].includes(type)) {
+            bar.classList.add('horizontal');
+        } else {
+            bar.classList.add('vertical');
+        }
+        this.workspaceEl.appendChild(bar);
+        return bar;
+    }
+
+    // 监听拖拽相关事件
+    _watchDrag() {
+        const barList = Array.from(
+            document.getElementsByClassName('resize-bar')
+        ) as HTMLElement[];
+        barList.forEach((bar) => {
+            bar.addEventListener('mousedown', (e: MouseEvent) => {
+                this.isDragging = true;
+                this.dragEl = bar;
+                this.dragEl.classList.add('active');
+                this.startPoints = {
+                    x: e.clientX,
+                    y: e.clientY,
+                };
+                this.barOffset = {
+                    x: bar.offsetLeft,
+                    y: bar.offsetTop,
+                };
+                const workspace = this.getWorkspase() as Required<fabric.Rect>;
+                const { width, height, left, top } = workspace;
+                this.wsOffset = { width, height, left, top };
+            });
+        });
+        document.addEventListener('mousemove', this.eventHandler.onDragging);
+        document.addEventListener('mouseup', () => {
+            if (this.isDragging && this.dragEl) {
+                this.isDragging = false;
+                this.dragEl.classList.remove('active');
+                this.dragEl = null;
+                this.canvas.defaultCursor = 'default';
+            }
+        });
+    }
+
+    // 拖拽更新控制条及画布
+    onDragging(e: MouseEvent) {
+        if (this.isDragging && this.dragEl) {
+            const workspace = this.getWorkspase() as Required<fabric.Rect>;
+            const viewportTransform = this.canvas.viewportTransform;
+            const [scaleX, , , scaleY] = viewportTransform || [];
+            const deltaX = e.clientX - this.startPoints.x;
+            const deltaY = e.clientY - this.startPoints.y;
+            const deltaViewX = deltaX / scaleX;
+            const deltaViewY = deltaY / scaleY;
+            const type = this.dragEl.id.split('-')[1];
+            let tempLength = 0;
+            switch (type) {
+                case 'left':
+                    tempLength = Math.round(
+                        this.wsOffset.width - deltaViewX * 2
+                    );
+                    if (tempLength >= this.minSize.width) {
+                        this.dragEl.style.left = `${this.barOffset.x + deltaX}px`;
+                        workspace.set(
+                            'left',
+                            this.wsOffset.left + deltaViewX * 2
+                        );
+                        workspace.set('width', tempLength);
+                        this.editor.syncOriginSizeByUnit(tempLength, undefined);
+                    } else {
+                        workspace.set(
+                            'left',
+                            this.wsOffset.left +
+                            this.wsOffset.width -
+                            this.minSize.width
+                        );
+                        workspace.set('width', this.minSize.width);
+                        this.editor.syncOriginSizeByUnit(this.minSize.width, undefined);
+                    }
+                    break;
+                case 'right':
+                    tempLength = Math.round(
+                        this.wsOffset.width + deltaViewX * 2
+                    );
+                    if (tempLength >= this.minSize.width) {
+                        this.dragEl.style.left = `${this.barOffset.x + deltaX}px`;
+                        workspace.set('width', tempLength);
+                        this.editor.syncOriginSizeByUnit(tempLength, undefined);
+                    } else {
+                        workspace.set('width', this.minSize.width);
+                        this.editor.syncOriginSizeByUnit(this.minSize.width, undefined);
+                    }
+                    break;
+                case 'top':
+                    tempLength = Math.round(
+                        this.wsOffset.height - deltaViewY * 2
+                    );
+                    if (tempLength >= this.minSize.height) {
+                        this.dragEl.style.top = `${this.barOffset.y + deltaY}px`;
+                        workspace.set(
+                            'top',
+                            this.wsOffset.top + deltaViewY * 2
+                        );
+                        workspace.set('height', tempLength);
+                        this.editor.syncOriginSizeByUnit(undefined, tempLength);
+                    } else {
+                        workspace.set(
+                            'top',
+                            this.wsOffset.top +
+                            this.wsOffset.height -
+                            this.minSize.height
+                        );
+                        workspace.set('height', this.minSize.height);
+                        this.editor.syncOriginSizeByUnit(undefined, this.minSize.height);
+                    }
+                    break;
+                case 'bottom':
+                    tempLength = Math.round(
+                        this.wsOffset.height + deltaViewY * 2
+                    );
+                    if (tempLength >= this.minSize.height) {
+                        this.dragEl.style.top = `${this.barOffset.y + deltaY}px`;
+                        workspace.set('height', tempLength);
+                        this.editor.syncOriginSizeByUnit(undefined, tempLength);
+                    } else {
+                        workspace.set('height', this.minSize.height);
+                        this.editor.syncOriginSizeByUnit(undefined, this.minSize.height);
+                    }
+                    break;
+                default:
+                    break;
+            }
+
+            this.editor.setCenterFromObject(workspace);
+            workspace.clone((cloned: fabric.Rect) => {
+                this.canvas.clipPath = cloned;
+                this.canvas.requestRenderAll();
+            });
+            if (['left', 'right'].includes(type)) {
+                this.canvas.defaultCursor = 'ew-resize';
+            } else {
+                this.canvas.defaultCursor = 'ns-resize';
+            }
+            let curUnitWidth = workspace.width;
+            let curUnitHeight = workspace.height;
+            if (this.editor.getUnit() !== 'px') {
+                ({ width: curUnitWidth, height: curUnitHeight } = this.editor.getOriginSize());
+            }
+            this.editor.emit('sizeChange', { width: curUnitWidth, height: curUnitHeight });
+        }
+    }
+
+    // 事件句柄缓存
+    private eventHandler: Record<string, (...args: any) => void> = {
+        render: throttle(this.renderBars.bind(this), 50),
+        onDragging: throttle(this.onDragging.bind(this), 30),
+    };
+
+    // 监听画布渲染
+    _addListeners() {
+        this.canvas.on('after:render', this.eventHandler.render);
+    }
+
+    // 返回workspace对象
+    getWorkspase() {
+        return this.canvas
+            .getObjects()
+            .find((item) => item.id === 'workspace') as fabric.Rect;
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default ResizePlugin;