@hprint/plugins 0.0.1-alpha.0

package/src/utils/psd.js

@@ -0,0 +1,432 @@
+import _ from 'lodash-es';
+import { v4 as uuid } from 'uuid';
+
+// 入口文件
+
+async function psdToJson(psdFile) {
+    // 初始化
+    const json = getTransform();
+
+    // 设置背景
+    const { clipPath, workspase } = getClipPath(psdFile);
+    json.clipPath = clipPath;
+    json.objects.push(workspase);
+
+    // 拍平
+    const list = flattenTree(psdFile.children);
+
+    // 转换
+    const fabricJhildren = await psdChildrenTransform(list);
+    json.objects.push(...fabricJhildren.reverse());
+
+    // 输出文件
+    const jsonStr = JSON.stringify(json, null, 2);
+    return jsonStr;
+}
+
+async function psdChildrenTransform(children) {
+    function attrTransform(childrens) {
+        const childrensFilter = childrens.filter((item) => {
+            if (item.text) {
+                item.type = 'text';
+            }
+            return !item.isHidden;
+        });
+        return childrensFilter.map(async (item) => {
+            // 公共属性映射
+            const commonAttr = baseUtils([
+                'left',
+                'top',
+                ['width', (info) => info.width + 50],
+                'height',
+                'name',
+                ['visible', () => true],
+                ['opacity', (info) => 255 / info.opacity],
+                ['id', uuid],
+            ])(item);
+
+            // 类型映射
+            const typeList = [
+                {
+                    sourceType: 'Layer',
+                    targetType: 'image',
+                    attr: [],
+                    async customTransform(item) {
+                        // 图片遮罩
+                        // const { maskData } = item.layerFrame.layerProperties;
+                        // let clipPath;
+                        // if (maskData) {
+                        //   clipPath = getAttrByType('rect');
+                        //   clipPath.left = maskData.left;
+                        //   clipPath.top = maskData.top;
+                        // }
+                        const base64 = await getLayerBse64(item);
+                        return {
+                            src: base64,
+                            // clipPath,
+                        };
+                    },
+                },
+                {
+                    sourceType: 'text',
+                    targetType: 'textbox',
+                    attr: ['text'],
+                    async customTransform(item) {
+                        const { FontSize, FillColor, Tracking } =
+                            item.textProperties.EngineDict.StyleRun.RunArray[0]
+                                .StyleSheet.StyleSheetData;
+                        return {
+                            charSpacing: Tracking,
+                            fontFamily: '站酷快乐体',
+                            fill: getColor(FillColor.Values),
+                            fontSize: FontSize || 12,
+                        };
+                    },
+                },
+            ];
+
+            const sourctTypeKey = 'type';
+            const transformTypeInfo = typeList.find(
+                (info) => info.sourceType === item[sourctTypeKey]
+            );
+            if (transformTypeInfo) {
+                const baseAttr = getAttrByType(transformTypeInfo.targetType);
+                const typeAttr = baseUtils(transformTypeInfo.attr)(item);
+                const customTransformAttr = transformTypeInfo.customTransform
+                    ? await transformTypeInfo.customTransform(item)
+                    : null;
+                return _.assign(
+                    baseAttr,
+                    commonAttr,
+                    baseAttr,
+                    typeAttr,
+                    customTransformAttr
+                );
+            }
+            return {
+                ...getAttrByType('textbox'),
+            };
+        });
+    }
+    const resault = await Promise.all(attrTransform(children));
+    return resault;
+}
+
+function getTransform() {
+    // 初始化
+    const json = {
+        version: '5.3.0',
+        objects: [],
+        clipPath: null,
+    };
+
+    return json;
+}
+
+function baseUtils(baseAttr) {
+    return function (item) {
+        const attrs = {
+            desc: {},
+        };
+        baseAttr.forEach((attrType) => {
+            // 直接转换
+            if (typeof attrType === 'string') {
+                const value = _.get(item, attrType);
+                _.set(attrs, attrType, value);
+            } else {
+                const [key, transform] = attrType;
+                if (typeof transform === 'function') {
+                    const value = transform(item);
+                    if (value) {
+                        _.set(attrs, key, value);
+                    }
+                } else {
+                    const value = _.get(item, transform);
+                    _.set(attrs, key, value);
+                }
+            }
+        });
+        return attrs;
+    };
+}
+
+function getAttrByType(type) {
+    const typeMap = {
+        group: {
+            type: 'group',
+            version: '5.3.0',
+            originX: 'left',
+            originY: 'top',
+            fill: 'rgb(0,0,0)',
+            stroke: null,
+            strokeWidth: 0,
+            strokeDashArray: null,
+            strokeLineCap: 'butt',
+            strokeDashOffset: 0,
+            strokeLineJoin: 'miter',
+            strokeUniform: false,
+            strokeMiterLimit: 4,
+            scaleX: 1,
+            scaleY: 1,
+            flipX: false,
+            flipY: false,
+            shadow: null,
+            visible: true,
+            backgroundColor: '',
+            fillRule: 'nonzero',
+            paintFirst: 'fill',
+            globalCompositeOperation: 'source-over',
+            skewX: 0,
+            skewY: 0,
+            selectable: true,
+            hasControls: true,
+        },
+        textbox: {
+            type: 'textbox',
+            version: '5.3.0',
+            originX: 'left',
+            originY: 'top',
+            fill: 'rgb(0,0,0)',
+            stroke: null,
+            strokeWidth: 1,
+            strokeDashArray: null,
+            strokeLineCap: 'butt',
+            strokeDashOffset: 0,
+            strokeLineJoin: 'miter',
+            strokeUniform: false,
+            strokeMiterLimit: 4,
+            scaleX: 1,
+            scaleY: 1,
+            angle: 0,
+            flipX: false,
+            flipY: false,
+            shadow: '',
+            backgroundColor: '',
+            fillRule: 'nonzero',
+            paintFirst: 'fill',
+            globalCompositeOperation: 'source-over',
+            skewX: 0,
+            skewY: 0,
+            fontFamily: 'arial',
+            fontWeight: 'normal',
+            fontSize: 80,
+            text: '诸事顺遂',
+            underline: false,
+            overline: false,
+            linethrough: false,
+            textAlign: 'left',
+            fontStyle: 'normal',
+            lineHeight: 1.16,
+            textBackgroundColor: '',
+            charSpacing: 0,
+            styles: [],
+            direction: 'ltr',
+            path: null,
+            pathStartOffset: 0,
+            pathSide: 'left',
+            pathAlign: 'baseline',
+            minWidth: 20,
+            splitByGrapheme: true,
+            selectable: true,
+            hasControls: true,
+        },
+        image: {
+            type: 'image',
+            version: '5.3.0',
+            originX: 'left',
+            originY: 'top',
+            fill: 'rgb(0,0,0)',
+            stroke: null,
+            strokeWidth: 0,
+            strokeDashArray: null,
+            strokeLineCap: 'butt',
+            strokeDashOffset: 0,
+            strokeLineJoin: 'miter',
+            strokeUniform: false,
+            strokeMiterLimit: 4,
+            scaleX: 1,
+            scaleY: 1,
+            angle: 0,
+            flipX: false,
+            flipY: false,
+            shadow: null,
+            backgroundColor: '',
+            fillRule: 'nonzero',
+            paintFirst: 'fill',
+            globalCompositeOperation: 'source-over',
+            skewX: 0,
+            skewY: 0,
+            cropX: 0,
+            cropY: 0,
+            selectable: true,
+            hasControls: true,
+            src: '',
+            crossOrigin: 'anonymous',
+            filters: [],
+        },
+        rect: {
+            type: 'rect',
+            version: '5.3.0',
+            originX: 'center',
+            originY: 'center',
+            left: 0,
+            top: 0,
+            width: 226,
+            height: 302,
+            fill: 'rgb(0,0,0)',
+            stroke: null,
+            strokeWidth: 1,
+            strokeDashArray: null,
+            strokeLineCap: 'butt',
+            strokeDashOffset: 0,
+            strokeLineJoin: 'miter',
+            strokeUniform: false,
+            strokeMiterLimit: 4,
+            scaleX: 1,
+            scaleY: 1,
+            angle: 0,
+            flipX: false,
+            flipY: false,
+            opacity: 1,
+            shadow: null,
+            visible: true,
+            backgroundColor: '',
+            fillRule: 'nonzero',
+            paintFirst: 'fill',
+            globalCompositeOperation: 'source-over',
+            skewX: 0,
+            skewY: 0,
+            rx: 0,
+            ry: 0,
+            selectable: true,
+            hasControls: true,
+            inverted: false,
+            absolutePositioned: false,
+        },
+    };
+    return typeMap[type];
+}
+
+function getClipPath(psdFile) {
+    const { width, height } = psdFile;
+    const clipPath = {
+        type: 'rect',
+        version: '5.3.0',
+        originX: 'left',
+        originY: 'top',
+        left: 0,
+        top: 0,
+        width: width,
+        height: height,
+        fill: 'rgba(255,255,255,1)',
+        stroke: null,
+        strokeWidth: 0,
+        strokeDashArray: null,
+        strokeLineCap: 'butt',
+        strokeDashOffset: 0,
+        strokeLineJoin: 'miter',
+        strokeUniform: false,
+        strokeMiterLimit: 4,
+        scaleX: 1,
+        scaleY: 1,
+        angle: 0,
+        flipX: false,
+        flipY: false,
+        opacity: 1,
+        shadow: null,
+        visible: true,
+        backgroundColor: '',
+        fillRule: 'nonzero',
+        paintFirst: 'fill',
+        globalCompositeOperation: 'source-over',
+        skewX: 0,
+        skewY: 0,
+        rx: 0,
+        ry: 0,
+        selectable: true,
+        hasControls: true,
+    };
+    const workspase = {
+        type: 'rect',
+        version: '5.3.0',
+        originX: 'left',
+        originY: 'top',
+        left: 0,
+        top: 0,
+        width: width,
+        height: height,
+        fill: 'rgba(255,255,255,1)',
+        stroke: null,
+        strokeWidth: 0,
+        strokeDashArray: null,
+        strokeLineCap: 'butt',
+        strokeDashOffset: 0,
+        strokeLineJoin: 'miter',
+        strokeUniform: false,
+        strokeMiterLimit: 4,
+        scaleX: 1,
+        scaleY: 1,
+        angle: 0,
+        flipX: false,
+        flipY: false,
+        // "opacity": 1,
+        shadow: null,
+        visible: true,
+        backgroundColor: '',
+        fillRule: 'nonzero',
+        paintFirst: 'fill',
+        globalCompositeOperation: 'source-over',
+        skewX: 0,
+        skewY: 0,
+        rx: 0,
+        ry: 0,
+        id: 'workspace',
+        selectable: false,
+        hasControls: true,
+    };
+    return { clipPath, workspase };
+}
+
+async function getLayerBse64(layer) {
+    try {
+        const compositeBuffer = await layer.composite();
+        const canvasElement = document.createElement('canvas');
+        const context = canvasElement.getContext('2d');
+        const imageData = new ImageData(
+            compositeBuffer,
+            layer.width,
+            layer.height
+        );
+        canvasElement.width = layer.width;
+        canvasElement.height = layer.height;
+        context.putImageData(imageData, 0, 0);
+        const base64 = canvasElement.toDataURL('image/png');
+        return base64;
+    } catch (error) {
+        return '';
+    }
+}
+
+function getColor(arr) {
+    const [, r, g, b] = arr;
+    return `rgb(${r * 255}, ${g * 255}, ${b * 255})`;
+}
+
+function flattenTree(tree) {
+    const result = [];
+
+    function traverse(nodes) {
+        nodes.forEach((node) => {
+            if (node.children) {
+                traverse(node.children); // 递归遍历子节点
+            } else {
+                result.push(node); // 将当前节点添加到结果数组中
+            }
+        });
+    }
+
+    traverse(tree);
+    return result;
+}
+
+export default psdToJson;

package/src/utils/ruler/guideline.ts

@@ -0,0 +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;

package/src/utils/ruler/index.ts

@@ -0,0 +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;