@hprint/core 0.0.1-alpha.0

package/src/interface/Editor.ts

@@ -0,0 +1,56 @@
+import type Editor from '@hprint/core';
+
+// IEditor类型包含插件实例，Editor不包含插件实例
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface IEditor extends Editor {}
+
+// 生命周期事件类型
+export type IEditorHooksType =
+    | 'hookImportBefore'
+    | 'hookImportAfter'
+    | 'hookSaveBefore'
+    | 'hookSaveAfter'
+    | 'hookTransform';
+
+// 插件实例
+export declare class IPluginTempl {
+    constructor(
+        canvas: fabric.Canvas,
+        editor: IEditor,
+        options?: IPluginOption
+    );
+    static pluginName: string;
+    static events: string[];
+    static apis: string[];
+    hotkeyEvent?: (name: string, e: KeyboardEvent) => void;
+    hookImportBefore?: (...args: unknown[]) => Promise<unknown>;
+    hookImportAfter?: (...args: unknown[]) => Promise<unknown>;
+    hookSaveBefore?: (...args: unknown[]) => Promise<unknown>;
+    hookSaveAfter?: (...args: unknown[]) => Promise<unknown>;
+    hookTransform?: (...args: unknown[]) => Promise<unknown>;
+    [propName: string]: any;
+    canvas?: fabric.Canvas;
+    editor?: IEditor;
+}
+
+export declare interface IPluginOption {
+    [propName: string]: unknown | undefined;
+}
+
+declare class IPluginClass2 extends IPluginTempl {
+    constructor();
+}
+// 插件class
+export declare interface IPluginClass {
+    new (
+        canvas: fabric.Canvas,
+        editor: Editor,
+        options?: IPluginOption
+    ): IPluginClass2;
+}
+
+export declare interface IPluginMenu {
+    text: string;
+    command?: () => void;
+    child?: IPluginMenu[];
+}

package/src/objects/CustomRect.js

@@ -0,0 +1,21 @@
+import { fabric } from 'fabric';
+
+fabric.Rect = fabric.util.createClass(fabric.Rect, {
+    type: 'rect',
+    initialize: function (options) {
+        options || (options = {});
+        this.callSuper('initialize', options);
+    },
+    _render(ctx) {
+        const roundValue = this.roundValue || 0;
+        this.rx = (1 / this.scaleX) * roundValue;
+        this.ry = (1 / this.scaleY) * roundValue;
+        this.callSuper('_render', ctx);
+    },
+});
+
+fabric.Rect.fromObject = function (object, callback) {
+    return fabric.Object._fromObject('Rect', object, callback);
+};
+
+export default fabric.Rect;

package/src/objects/CustomTextbox.js

@@ -0,0 +1,165 @@
+/*
+ * 文本框，修改两端对齐逻辑
+ */
+import { fabric } from 'fabric';
+
+fabric.Textbox = fabric.util.createClass(fabric.Textbox, {
+    type: 'textbox',
+
+    _renderChars: function (method, ctx, line, left, top, lineIndex) {
+        // set proper line offset
+        var lineHeight = this.getHeightOfLine(lineIndex),
+            isJustify = this.textAlign.indexOf('justify') !== -1,
+            actualStyle,
+            nextStyle,
+            charsToRender = '',
+            charBox,
+            boxWidth = 0,
+            timeToRender,
+            path = this.path,
+            shortCut =
+                !isJustify &&
+                this.charSpacing === 0 &&
+                this.isEmptyStyles(lineIndex) &&
+                !path,
+            isLtr = this.direction === 'ltr',
+            sign = this.direction === 'ltr' ? 1 : -1,
+            drawingLeft,
+            currentDirection = ctx.canvas.getAttribute('dir');
+        ctx.save();
+        if (currentDirection !== this.direction) {
+            ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl');
+            ctx.direction = isLtr ? 'ltr' : 'rtl';
+            ctx.textAlign = isLtr ? 'left' : 'right';
+        }
+        top -= (lineHeight * this._fontSizeFraction) / this.lineHeight;
+        if (shortCut) {
+            // render all the line in one pass without checking
+            // drawingLeft = isLtr ? left : left - this.getLineWidth(lineIndex);
+            this._renderChar(
+                method,
+                ctx,
+                lineIndex,
+                0,
+                line.join(''),
+                left,
+                top,
+                lineHeight
+            );
+            ctx.restore();
+            return;
+        }
+        for (var i = 0, len = line.length - 1; i <= len; i++) {
+            timeToRender = i === len || this.charSpacing || path;
+            charsToRender += line[i];
+            charBox = this.__charBounds[lineIndex][i];
+            if (boxWidth === 0) {
+                left += sign * (charBox.kernedWidth - charBox.width);
+                boxWidth += charBox.width;
+            } else {
+                boxWidth += charBox.kernedWidth;
+            }
+            if (isJustify && !timeToRender) {
+                if (this._reSpaceAndTab.test(line[i])) {
+                    timeToRender = true;
+                }
+            }
+            if (!timeToRender) {
+                // if we have charSpacing, we render char by char
+                actualStyle =
+                    actualStyle ||
+                    this.getCompleteStyleDeclaration(lineIndex, i);
+                nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1);
+                timeToRender = fabric.util.hasStyleChanged(
+                    actualStyle,
+                    nextStyle,
+                    false
+                );
+            }
+            // if (timeToRender) {
+            if (path) {
+                ctx.save();
+                ctx.translate(charBox.renderLeft, charBox.renderTop);
+                ctx.rotate(charBox.angle);
+                this._renderChar(
+                    method,
+                    ctx,
+                    lineIndex,
+                    i,
+                    charsToRender,
+                    -boxWidth / 2,
+                    0,
+                    lineHeight
+                );
+                ctx.restore();
+            } else {
+                drawingLeft = left;
+                this._renderChar(
+                    method,
+                    ctx,
+                    lineIndex,
+                    i,
+                    charsToRender,
+                    drawingLeft,
+                    top,
+                    lineHeight
+                );
+            }
+            charsToRender = '';
+            actualStyle = nextStyle;
+            left += sign * boxWidth;
+            boxWidth = 0;
+            // }
+        }
+        ctx.restore();
+    },
+    enlargeSpaces: function () {
+        var diffSpace,
+            currentLineWidth,
+            numberOfSpaces,
+            accumulatedSpace,
+            line,
+            charBound,
+            spaces;
+        for (var i = 0, len = this._textLines.length; i < len; i++) {
+            if (
+                this.textAlign !== 'justify' &&
+                (i === len - 1 || this.isEndOfWrapping(i))
+            ) {
+                continue;
+            }
+            accumulatedSpace = 0;
+            line = this._textLines[i];
+            currentLineWidth = this.getLineWidth(i);
+            if (
+                currentLineWidth < this.width &&
+                (spaces = this.textLines[i].split('')) &&
+                spaces.length > 1
+            ) {
+                numberOfSpaces = spaces.length;
+                diffSpace =
+                    (this.width - currentLineWidth) / (numberOfSpaces - 1);
+                for (var j = 0, jlen = line.length; j <= jlen; j++) {
+                    charBound = this.__charBounds[i][j];
+                    // if (this._reSpaceAndTab.test(line[j])) {
+                    charBound.left += accumulatedSpace;
+                    if (j < jlen - 1) {
+                        charBound.width += diffSpace;
+                        charBound.kernedWidth += diffSpace;
+                        accumulatedSpace += diffSpace;
+                    }
+                    // } else {
+                    //   charBound.left += accumulatedSpace;
+                    // }
+                }
+            }
+        }
+    },
+});
+
+fabric.Textbox.fromObject = function (options, callback) {
+    const { text } = options;
+    return callback(new fabric.Textbox(text, options));
+};
+
+export default fabric.Rect;

package/src/plugin.ts

@@ -0,0 +1,88 @@
+import Editor from './Editor';
+type IEditor = Editor;
+
+class FontPlugin {
+    public canvas: fabric.Canvas;
+    public editor: IEditor;
+    // 插件名称
+    static pluginName = 'FontPlugin';
+    // 挂载API名称
+    static apis = ['downFontByJSON'];
+    // 发布事件
+    static events = ['textEvent1', 'textEvent2'];
+    // 快捷键 keyCode hotkeys-js
+    public hotkeys: string[] = ['backspace', 'space'];
+    // 私有属性
+    repoSrc: string;
+
+    constructor(
+        canvas: fabric.Canvas,
+        editor: IEditor,
+        config: { repoSrc: string }
+    ) {
+        // 初始化
+        this.canvas = canvas;
+        this.editor = editor;
+        // 可插入外部配置
+        this.repoSrc = config.repoSrc;
+    }
+
+    // 钩子函数 hookImportAfter/hookSaveBefore/hookSaveAfter Promise
+    hookImportBefore(json: string) {
+        return this.downFontByJSON(json);
+    }
+
+    // 挂载API方法
+    downFontByJSON() {
+        //
+    }
+
+    // 私有方法 + 发布事件
+    _createFontCSS() {
+        const params = [];
+        this.editor.emit('textEvent1', params);
+    }
+
+    // 右键菜单
+    contextMenu() {
+        const selectedMode = this.editor.getSelectMode();
+        if (selectedMode === SelectMode.ONE) {
+            return [
+                null, // 分割线
+                {
+                    text: '翻转',
+                    hotkey: '❯',
+                    subitems: [
+                        {
+                            text: '水平翻转',
+                            hotkey: '|',
+                            onclick: () => this.flip('X'),
+                        },
+                        {
+                            text: '垂直翻转',
+                            hotkey: '-',
+                            onclick: () => this.flip('Y'),
+                        },
+                    ],
+                },
+            ];
+        }
+    }
+
+    // 快捷键
+    hotkeyEvent(eventName: string, { type }: KeyboardEvent) {
+        // eventName：hotkeys中的属性 backspace、space
+        // type：keyUp keyDown
+        // code：hotkeys-js Code
+        if (eventName === 'backspace' && type === 'keydown') {
+            this.del();
+        }
+    }
+
+    // 注销
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default FontPlugin;

package/src/styles/contextMenu.css

@@ -0,0 +1,60 @@
+.context {
+    display: inline-block;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    min-width: 270px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #fff;
+    background: #262933;
+    font-size: 9pt;
+    border: 1px solid #333333;
+    border-radius: 6px;
+    box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, 0.5);
+    padding: 3px 0px;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    z-index: 999;
+}
+
+.context .item {
+    padding: 4px 19px;
+    cursor: default;
+    color: inherit;
+}
+
+.context .item:hover {
+    background: #2777ff;
+}
+
+.context .item:hover .hotkey {
+    color: #fff;
+}
+
+.context .disabled {
+    color: #878b90;
+}
+
+.context .disabled:hover {
+    background: inherit;
+}
+
+.context .disabled:hover .hotkey {
+    color: #878b90;
+}
+
+.context .separator {
+    margin: 4px 0px;
+    height: 0;
+    padding: 0;
+    border-top: 1px solid #454545;
+}
+
+.hotkey {
+    color: #878b90;
+    float: right;
+}

package/src/utils/fabric-history.js

@@ -0,0 +1,232 @@
+import { fabric } from 'fabric';
+
+fabric.Canvas.prototype.initialize = (function (originalFn) {
+    return function (...args) {
+        originalFn.call(this, ...args);
+        this._historyInit();
+        return this;
+    };
+})(fabric.Canvas.prototype.initialize);
+
+/**
+ * Override the dispose function for the _historyDispose();
+ */
+fabric.Canvas.prototype.dispose = (function (originalFn) {
+    return function (...args) {
+        originalFn.call(this, ...args);
+        this._historyDispose();
+        return this;
+    };
+})(fabric.Canvas.prototype.dispose);
+
+/**
+ * Returns current state of the string of the canvas
+ */
+fabric.Canvas.prototype._historyNext = function () {
+    return JSON.stringify(this.toDatalessJSON(this.extraProps));
+};
+
+/**
+ * Returns an object with fabricjs event mappings
+ */
+fabric.Canvas.prototype._historyEvents = function () {
+    return {
+        'object:added': (e) => this._historySaveAction(e),
+        'object:removed': (e) => this._historySaveAction(e),
+        'object:modified': (e) => this._historySaveAction(e),
+        'object:skewing': (e) => this._historySaveAction(e),
+    };
+};
+
+/**
+ * Initialization of the plugin
+ */
+fabric.Canvas.prototype._historyInit = function () {
+    this.historyStack = [];
+    this.historyIndex = 0;
+    this.historyMaxLength = 100;
+    this.extraProps = [
+        'id',
+        'gradientAngle',
+        'selectable',
+        'hasControls',
+        'linkData',
+        'editable',
+        'extensionType',
+        'extension',
+    ];
+    this.historyNextState = this._historyNext();
+    // 需要两次操作的标记，为true时表示当前操作记录为最新记录，需要撤销两步，因为最顶层的是当前的最新记录，undo一次后后置为false
+    this.isLatestHistoryState = true;
+    // 正在读取历史记录的标记，为 true 时不允许 undo/redo
+    this.isLoadingHistory = false;
+
+    this.on(this._historyEvents());
+};
+
+/**
+ * Remove the custom event listeners
+ */
+fabric.Canvas.prototype._historyDispose = function () {
+    this.off(this._historyEvents());
+};
+
+/**
+ * It pushes the state of the canvas into history stack
+ */
+fabric.Canvas.prototype._historySaveAction = function (e) {
+    if (this.historyProcessing) return;
+    if (!e || (e.target && !e.target.excludeFromExport)) {
+        const json = this._historyNext();
+        // 当前操作记录非最新记录，更新记录前需要校正历史索引，不然会丢失一个记录（undo时撤销了两次记录）。理论上不会超出历史记录上限，不过还是加了限制
+        !this.isLatestHistoryState &&
+            (this.isLatestHistoryState = true) &&
+            this.historyIndex < this.historyMaxLength &&
+            this.historyIndex++;
+        // 每次的最新操作都要清空历史索引之后的记录，防止redo旧记录，不然可能会redo之前某个阶段的操作记录
+        this.historyStack.length > this.historyIndex &&
+            this.historyStack.splice(this.historyIndex);
+        // 最多保存 historyMaxLength 条记录
+        if (this.historyIndex >= this.historyMaxLength)
+            this.historyStack.shift();
+        this.historyIndex < this.historyMaxLength && this.historyIndex++;
+        this.historyStack.push(json);
+        this.historyNextState = this._historyNext();
+        this.fire('history:append', { json });
+    }
+};
+
+/**
+ * Undo to latest history.
+ * Pop the latest state of the history. Re-render.
+ * Also, pushes into redo history.
+ */
+fabric.Canvas.prototype.undo = function (callback) {
+    if (this.isLoadingHistory) return;
+    if (this.historyIndex <= 0) return;
+    // The undo process will render the new states of the objects
+    // Therefore, object:added and object:modified events will triggered again
+    // To ignore those events, we are setting a flag.
+    this.historyProcessing = true;
+
+    // 当前操作记录为最新记录，需要撤销两步，因为最顶层的是当前的最新记录
+    this.isLatestHistoryState &&
+        this.historyIndex-- &&
+        (this.isLatestHistoryState = false);
+    const history = this.historyStack[--this.historyIndex];
+    if (history) {
+        // Push the current state to the redo history
+        this.historyNextState = history;
+        this._loadHistory(history, 'history:undo', callback);
+    } else {
+        console.log(1111);
+        this.historyIndex < 0 && (this.historyIndex = 0);
+        this.historyProcessing = false;
+    }
+};
+
+/**
+ * Redo to latest undo history.
+ */
+fabric.Canvas.prototype.redo = function (callback) {
+    if (this.isLoadingHistory) return;
+    if (this.historyIndex >= this.historyStack.length) return;
+    // The undo process will render the new states of the objects
+    // Therefore, object:added and object:modified events will triggered again
+    // To ignore those events, we are setting a flag.
+    this.historyProcessing = true;
+    // 当前操作记录不是最新记录（被撤销过），需要恢复两步，抵消最初撤销时撤销两步的操作
+    !this.isLatestHistoryState &&
+        ++this.historyIndex &&
+        (this.isLatestHistoryState = true);
+    const history = this.historyStack[this.historyIndex];
+    if (history) {
+        // Every redo action is actually a new action to the undo history
+        this.historyNextState = history;
+        this._loadHistory(history, 'history:redo', callback);
+        this.historyIndex++;
+    } else {
+        this.historyProcessing = false;
+    }
+};
+
+// loadFromJSON 是异步操作，所以通过 isLoadingHistory = true 表示历史读取中，不可 undo/redo，
+// 不然当页面复杂且快速 undo/redo 多次后，可能会在之前的历史上 redo/undo
+fabric.Canvas.prototype._loadHistory = function (history, event, callback) {
+    this.isLoadingHistory = true;
+    var that = this;
+
+    // 需要把历史记录中的 workspace 的 evented 属性设置为 false，否则会导致历史记录恢复后，鼠标悬浮 workspace 出现可操作的样式
+    const workspaceHistory = history.objects?.find(
+        (item) => item.id === 'workspace'
+    );
+    workspaceHistory && (workspaceHistory.evented = false);
+
+    this.loadFromJSON(history, function () {
+        that.renderAll();
+        that.fire(event);
+        that.historyProcessing = false;
+        that.isLoadingHistory = false;
+
+        if (callback && typeof callback === 'function') callback();
+    });
+};
+
+/**
+ * Clear undo and redo history stacks
+ */
+fabric.Canvas.prototype.clearHistory = function (type) {
+    const one = this.historyStack.pop();
+    if (!type || !one) {
+        this.historyStack = [];
+        this.historyIndex = 0;
+        this.fire('history:clear');
+    } else {
+        this.historyStack = [one];
+        this.historyIndex = 1;
+        this.fire('history:clear');
+    }
+    this.isLatestHistoryState = true;
+};
+
+fabric.Canvas.prototype.clearUndo = function () {
+    this.historyStack.splice(this.historyIndex);
+};
+
+// 如果在做一些操作之后，需要撤销上一步的操作并刷新历史记录（想在监听modified事件后做些额外的操作并记录操作后的历史），可以调用这个方法
+fabric.Canvas.prototype.refreshHistory = function () {
+    this.historyProcessing = false;
+    this.historyStack.splice(--this.historyIndex);
+    this._historySaveAction();
+};
+
+/**
+ * On the history
+ */
+fabric.Canvas.prototype.onHistory = function () {
+    this.historyProcessing = false;
+
+    this._historySaveAction();
+};
+
+/**
+ * Check if there are actions that can be undone
+ */
+
+fabric.Canvas.prototype.canUndo = function () {
+    return this.historyIndex > 0;
+};
+
+/**
+ * Check if there are actions that can be redone
+ */
+fabric.Canvas.prototype.canRedo = function () {
+    return this.historyStack.length > this.historyIndex;
+};
+
+/**
+ * Off the history
+ */
+fabric.Canvas.prototype.offHistory = function () {
+    this.historyProcessing = true;
+};