@hprint/plugins 0.0.1-alpha.0

package/src/assets/lock.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="black" fill="white" stroke-opacity="0.3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 11V10C9 8.34 9.5 7 12 7C14.5 7 15 8.34 15 10V11" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 14.6C12.3314 14.6 12.6 14.3314 12.6 14C12.6 13.6687 12.3314 13.4 12 13.4C11.6686 13.4 11.4 13.6687 11.4 14C11.4 14.3314 11.6686 14.6 12 14.6Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5 17H9.5C7.5 17 7 16.5 7 14.5V13.5C7 11.5 7.5 11 9.5 11H14.5C16.5 11 17 11.5 17 13.5V14.5C17 16.5 16.5 17 14.5 17Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/middlecontrol.svg

@@ -0,0 +1,17 @@
+<svg width="12" height="24" viewBox="0 0 12 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<rect x="4" y="4" width="4" height="16" rx="2" fill="white"/>
+<rect x="4.25" y="4.25" width="3.5" height="15.5" rx="1.75" stroke="black" stroke-opacity="0.3" stroke-width="0.5"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="12" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.137674 0 0 0 0 0.190937 0 0 0 0 0.270833 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/assets/middlecontrolhoz.svg

@@ -0,0 +1,17 @@
+<svg width="24" height="12" viewBox="0 0 24 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<rect x="20" y="4" width="4" height="16" rx="2" transform="rotate(90 20 4)" fill="white"/>
+<rect x="19.75" y="4.25" width="3.5" height="15.5" rx="1.75" transform="rotate(90 19.75 4.25)" stroke="black" stroke-opacity="0.3" stroke-width="0.5"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="24" height="12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.137674 0 0 0 0 0.190937 0 0 0 0 0.270833 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/assets/rotateicon.svg

@@ -0,0 +1,20 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<circle cx="9" cy="9" r="5" fill="white"/>
+<circle cx="9" cy="9" r="4.75" stroke="black" stroke-opacity="0.3" stroke-width="0.5"/>
+</g>
+<path d="M10.8047 11.1242L9.49934 11.1242L9.49934 9.81885" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.94856 6.72607L8.25391 6.72607L8.25391 8.03142" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.69517 6.92267C10.007 7.03301 10.2858 7.22054 10.5055 7.46776C10.7252 7.71497 10.8787 8.01382 10.9517 8.33642C11.0247 8.65902 11.0148 8.99485 10.9229 9.31258C10.831 9.63031 10.6601 9.91958 10.4262 10.1534L9.49701 11.0421M8.25792 6.72607L7.30937 7.73554C7.07543 7.96936 6.90454 8.25863 6.81264 8.57636C6.72073 8.89408 6.71081 9.22992 6.78381 9.55251C6.8568 9.87511 7.01032 10.174 7.23005 10.4212C7.44978 10.6684 7.72855 10.8559 8.04036 10.9663" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="18" height="18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.137674 0 0 0 0 0.190937 0 0 0 0 0.270833 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/assets/style/resizePlugin.css

@@ -0,0 +1,27 @@
+.resize-bar {
+    border-radius: 3px;
+    background-color: rgba(160, 160, 160, 0.6);
+    position: absolute;
+}
+.resize-bar:hover {
+    background-color: #328cff;
+}
+.resize-bar.horizontal {
+    width: 6px;
+    height: 30px;
+}
+.resize-bar.vertical {
+    width: 30px;
+    height: 6px;
+}
+.resize-bar.active {
+    background-color: #328cff;
+}
+#resize-left-bar,
+#resize-right-bar {
+    cursor: ew-resize;
+}
+#resize-top-bar,
+#resize-bottom-bar {
+    cursor: ns-resize;
+}

package/src/index.ts

@@ -0,0 +1,121 @@
+import { IPluginTempl } from '@hprint/core'
+import { SelectEvent, SelectMode } from './types/eventType';
+// 导入所有插件
+import UnitPlugin from './plugins/UnitPlugin';
+import DringPlugin from './plugins/DringPlugin';
+import AlignGuidLinePlugin from './plugins/AlignGuidLinePlugin';
+import ControlsPlugin from './plugins/ControlsPlugin';
+import ControlsRotatePlugin from './plugins/ControlsRotatePlugin';
+import CenterAlignPlugin from './plugins/CenterAlignPlugin';
+import LayerPlugin from './plugins/LayerPlugin';
+import CopyPlugin from './plugins/CopyPlugin';
+import MoveHotKeyPlugin from './plugins/MoveHotKeyPlugin';
+import DeleteHotKeyPlugin from './plugins/DeleteHotKeyPlugin';
+import GroupPlugin from './plugins/GroupPlugin';
+import DrawLinePlugin from './plugins/DrawLinePlugin';
+import GroupTextEditorPlugin from './plugins/GroupTextEditorPlugin';
+import GroupAlignPlugin from './plugins/GroupAlignPlugin';
+import WorkspacePlugin from './plugins/WorkspacePlugin';
+import MaskPlugin from './plugins/MaskPlugin';
+import HistoryPlugin from './plugins/HistoryPlugin';
+import FlipPlugin from './plugins/FlipPlugin';
+import RulerPlugin from './plugins/RulerPlugin';
+import MaterialPlugin from './plugins/MaterialPlugin';
+import WaterMarkPlugin from './plugins/WaterMarkPlugin';
+import FontPlugin from './plugins/FontPlugin';
+import PolygonModifyPlugin from './plugins/PolygonModifyPlugin';
+import DrawPolygonPlugin from './plugins/DrawPolygonPlugin';
+import FreeDrawPlugin from './plugins/FreeDrawPlugin';
+import PathTextPlugin from './plugins/PathTextPlugin';
+import PsdPlugin from './plugins/PsdPlugin';
+import SimpleClipImagePlugin from './plugins/SimpleClipImagePlugin';
+import BarCodePlugin from './plugins/BarCodePlugin';
+import QrCodePlugin from './plugins/QrCodePlugin';
+import ImageStroke from './plugins/ImageStroke';
+import ResizePlugin from './plugins/ResizePlugin';
+import LockPlugin from './plugins/LockPlugin';
+import AddBaseTypePlugin from './plugins/AddBaseTypePlugin';
+import PrintPlugin from './plugins/PrintPlugin';
+import CreateElementPlugin from './plugins/CreateElementPlugin';
+
+// 对象形式导出所有插件
+const pluginsObject: { [key: string]: IPluginTempl } = {
+    UnitPlugin,
+    DringPlugin,
+    AlignGuidLinePlugin,
+    ControlsPlugin,
+    ControlsRotatePlugin,
+    CenterAlignPlugin,
+    LayerPlugin,
+    CopyPlugin,
+    MoveHotKeyPlugin,
+    DeleteHotKeyPlugin,
+    GroupPlugin,
+    DrawLinePlugin,
+    GroupTextEditorPlugin,
+    GroupAlignPlugin,
+    WorkspacePlugin,
+    MaskPlugin,
+    HistoryPlugin,
+    FlipPlugin,
+    RulerPlugin,
+    MaterialPlugin,
+    WaterMarkPlugin,
+    FontPlugin,
+    PolygonModifyPlugin,
+    DrawPolygonPlugin,
+    FreeDrawPlugin,
+    PathTextPlugin,
+    PsdPlugin,
+    SimpleClipImagePlugin,
+    BarCodePlugin,
+    QrCodePlugin,
+    ImageStroke,
+    ResizePlugin,
+    LockPlugin,
+    AddBaseTypePlugin,
+    PrintPlugin,
+    CreateElementPlugin,
+};
+
+// 数组形式导出所有插件
+const pluginsList: IPluginTempl[] = [
+    UnitPlugin,
+    DringPlugin,
+    AlignGuidLinePlugin,
+    ControlsPlugin,
+    ControlsRotatePlugin,
+    CenterAlignPlugin,
+    LayerPlugin,
+    CopyPlugin,
+    MoveHotKeyPlugin,
+    DeleteHotKeyPlugin,
+    GroupPlugin,
+    DrawLinePlugin,
+    GroupTextEditorPlugin,
+    GroupAlignPlugin,
+    WorkspacePlugin,
+    MaskPlugin,
+    HistoryPlugin,
+    FlipPlugin,
+    RulerPlugin,
+    MaterialPlugin,
+    WaterMarkPlugin,
+    FontPlugin,
+    PolygonModifyPlugin,
+    DrawPolygonPlugin,
+    FreeDrawPlugin,
+    PathTextPlugin,
+    PsdPlugin,
+    SimpleClipImagePlugin,
+    BarCodePlugin,
+    QrCodePlugin,
+    ImageStroke,
+    ResizePlugin,
+    LockPlugin,
+    AddBaseTypePlugin,
+    PrintPlugin,
+    CreateElementPlugin,
+];
+
+export { pluginsObject, pluginsList, SelectEvent, SelectMode };

package/src/objects/Arrow.js

@@ -0,0 +1,47 @@
+import { fabric } from '@hprint/core';
+
+fabric.Arrow = fabric.util.createClass(fabric.Line, {
+    type: 'arrow',
+    superType: 'drawing',
+    initialize(points, options) {
+        if (!points) {
+            const { x1, x2, y1, y2 } = options;
+            points = [x1, y1, x2, y2];
+        }
+        options = options || {};
+        this.callSuper('initialize', points, options);
+    },
+    _render(ctx) {
+        this.callSuper('_render', ctx);
+        ctx.save();
+        // 乘或除对应的scaleX(Y)，抵消元素放缩造成的影响，使箭头不会变形
+        ctx.scale(1 / this.scaleX, 1 / this.scaleY);
+        const xDiff = (this.x2 - this.x1) * this.scaleX;
+        const yDiff = (this.y2 - this.y1) * this.scaleY;
+        const angle = Math.atan2(yDiff, xDiff);
+        ctx.translate(
+            ((this.x2 - this.x1) / 2) * this.scaleX,
+            ((this.y2 - this.y1) / 2) * this.scaleY
+        );
+        ctx.rotate(angle);
+        ctx.beginPath();
+        // Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
+        ctx.moveTo(0, 0);
+        ctx.lineTo(-10, 5);
+        ctx.lineTo(-10, -5);
+        ctx.closePath();
+        ctx.lineWidth = this.lineWidth;
+        ctx.strokeStyle = this.stroke;
+        ctx.fillStyle = this.fill;
+        ctx.stroke();
+        ctx.fill();
+        ctx.restore();
+    },
+});
+
+fabric.Arrow.fromObject = (options, callback) => {
+    const { x1, x2, y1, y2 } = options;
+    return callback(new fabric.Arrow([x1, y1, x2, y2], options));
+};
+
+export default fabric.Arrow;

package/src/objects/ThinTailArrow.js

@@ -0,0 +1,50 @@
+import { fabric } from '@hprint/core';
+
+fabric.ThinTailArrow = fabric.util.createClass(fabric.Line, {
+    type: 'thinTailArrow',
+    superType: 'drawing',
+    initialize(points, options) {
+        if (!points) {
+            const { x1, x2, y1, y2 } = options;
+            points = [x1, y1, x2, y2];
+        }
+        options = options || {};
+        this.callSuper('initialize', points, options);
+    },
+    _render(ctx) {
+        ctx.save();
+        // 乘或除对应的scaleX(Y)，抵消元素放缩造成的影响，使箭头不会变形
+        ctx.scale(1 / this.scaleX, 1 / this.scaleY);
+        const xDiff = (this.x2 - this.x1) * this.scaleX;
+        const yDiff = (this.y2 - this.y1) * this.scaleY;
+        ctx.translate(-xDiff / 2, -yDiff / 2);
+        // 箭头方位角
+        const angle = Math.atan2(yDiff, xDiff);
+        ctx.rotate(angle);
+        // 箭头总长(最小长度是20)
+        let length = Math.hypot(xDiff, yDiff);
+        length = length < 20 ? 20 : length;
+        // 绘制箭头
+        ctx.beginPath();
+        ctx.moveTo(0, 0);
+        ctx.lineTo(length - 18, -5);
+        ctx.lineTo(length - 20, -12);
+        ctx.lineTo(length, 0);
+        ctx.lineTo(length - 20, 12);
+        ctx.lineTo(length - 18, 5);
+        ctx.lineTo(0, 0);
+        ctx.lineWidth = this.strokeWidth;
+        ctx.strokeStyle = this.stroke;
+        ctx.fillStyle = this.fill;
+        ctx.stroke();
+        ctx.fill();
+        ctx.restore();
+    },
+});
+
+fabric.ThinTailArrow.fromObject = (options, callback) => {
+    const { x1, x2, y1, y2 } = options;
+    return callback(new fabric.ThinTailArrow([x1, y1, x2, y2], options));
+};
+
+export default fabric.ThinTailArrow;

package/src/plugins/AddBaseTypePlugin.ts

@@ -0,0 +1,107 @@
+import { fabric, IEditor, IPluginTempl } from '@hprint/core';
+import { v4 as uuid } from 'uuid';
+
+type IPlugin = Pick<AddBaseTypePlugin, 'addObject' | 'createImgByElement'>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin { }
+}
+
+export default class AddBaseTypePlugin implements IPluginTempl {
+    static pluginName = 'AddBaseTypePlugin';
+    static apis = ['addObject', 'createImgByElement'];
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this.editor = editor;
+        this.canvas = canvas;
+    }
+
+    addObject(
+        item: fabric.Object,
+        optons?: {
+            event: DragEvent;
+            scale: boolean;
+            center: boolean;
+        }
+    ) {
+        const { event = false, scale = false, center = true } = optons || {};
+        item.set({
+            id: uuid(),
+        });
+        scale && this._toScale(item);
+        event && this._toEvent(item, event);
+        this.canvas.add(item);
+        if (!event && center) {
+            this._toCenter(item);
+        }
+        item.syncOriginSizeByUnit(['left', 'top']);
+        this.canvas.setActiveObject(item);
+        this.canvas.renderAll();
+        this.editor.saveState();
+    }
+
+    _toEvent(item: fabric.Object, event: DragEvent) {
+        const { left, top } = this.canvas
+            .getSelectionElement()
+            .getBoundingClientRect();
+        if (event.x < left || event.y < top || item.width === undefined) return;
+        const point = {
+            x: event.x - left,
+            y: event.y - top,
+        };
+        const pointerVpt = this.canvas.restorePointerVpt(point);
+        item.set({
+            left: pointerVpt.x,
+            top: pointerVpt.y,
+        });
+    }
+
+    _toCenter(item: fabric.Object) {
+        // this.canvas.setActiveObject(item);
+        this.editor.positionV2(item, 'center');
+    }
+
+    _toScale(item: fabric.Object) {
+        const { width } = this.editor.getWorkspase();
+        if (width === undefined) return;
+        item.scaleToWidth(width / 2);
+    }
+
+    createImgByElement(target: HTMLImageElement) {
+        return new Promise((resolve) => {
+            const imgType = this.getImageExtension(target.src);
+            if (imgType === 'svg') {
+                fabric.loadSVGFromURL(target.src, (objects) => {
+                    const item = fabric.util.groupSVGElements(objects, {
+                        shadow: '',
+                        fontFamily: 'arial',
+                        name: 'svg元素',
+                    });
+                    resolve(item);
+                });
+            } else {
+                fabric.Image.fromURL(
+                    target.src,
+                    (imgEl) => {
+                        resolve(imgEl);
+                    },
+                    { crossOrigin: 'anonymous' }
+                );
+            }
+        });
+    }
+
+    getImageExtension(imageUrl: string) {
+        const pathParts = imageUrl.split('/');
+        const filename = pathParts[pathParts.length - 1];
+        const fileParts = filename.split('.');
+        return fileParts[fileParts.length - 1];
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}