xctc-utils 1.6.49 → 1.6.50

package/dist/config/index.d.ts

@@ -0,0 +1,60 @@
+export declare const configDefaultValue: {
+    canvasDefaultValue: {
+        width: number;
+        height: number;
+        fireRightClick: boolean;
+        stopContextMenu: boolean;
+        backgroundImgUrl: string;
+        left: number;
+        top: number;
+        angle: number;
+        selection: boolean;
+        selectable: boolean;
+        strokeWidth: number;
+        scaleX: number;
+        scaleY: number;
+        stroke: string;
+        fill: string;
+        transparentCorners: boolean;
+        cornerColor: string;
+        hasControls: boolean;
+        hasRotatingPoint: boolean;
+        hasBorders: boolean;
+        lockMovementX: boolean;
+        lockMovementY: boolean;
+        lockScalingFlip: boolean;
+    };
+};
+export declare const configVar: {
+    canvasVar: {
+        canvasDataSource: null;
+        zoomDataSource: string;
+        dragLastPosDataSource: string;
+        dragElementDataSource: string;
+        targetObjectDataSource: string;
+        mousePointerDataSource: string;
+        canvasCreateElementsDataSource: never[];
+        canvasCreateTargetElementsDataSource: never[];
+        createSelectionRectDataSource: never[];
+        canvasSelectionElementsDataSource: never[];
+        mouseWheelPointerDataSource: string;
+        defaultCreateDataList: never[];
+        canvasConfig: string;
+        callBackEventConfig: string;
+        canvasHandleConfig: string;
+        canvasBackgroundImageTarget: string;
+        renderCanvasStatus: number;
+        mouseClickType: number;
+        mouseRightClickStatus: boolean;
+        mouseDragStatus: boolean;
+        canvasDragStatus: boolean;
+        canvasSelectionStatus: boolean;
+        createSelectionStatus: number;
+        canvasMenuShowStatus: boolean;
+        mouseClickTargetObjectStatus: number;
+        mouseWheelStatus: boolean;
+        canvasAllSelectionStatus: boolean;
+        defaultCreateDataListStatus: number;
+        mouseCanvasInRangeStatus: boolean;
+    };
+};

package/dist/config/index.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configVar = exports.configDefaultValue = void 0;
+exports.configDefaultValue = {
+    canvasDefaultValue: {
+        width: 1000,
+        height: 800,
+        fireRightClick: true,
+        stopContextMenu: true,
+        backgroundImgUrl: "",
+        left: 0,
+        top: 0,
+        // repeat: 'no-repeat',
+        angle: 0,
+        selection: true,
+        selectable: true,
+        strokeWidth: 4,
+        scaleX: 1,
+        scaleY: 1,
+        stroke: "",
+        fill: "",
+        transparentCorners: false,
+        cornerColor: "",
+        hasControls: true,
+        hasRotatingPoint: true,
+        hasBorders: true,
+        lockMovementX: true,
+        lockMovementY: true,
+        lockScalingFlip: true // 防止翻转
+    }
+};
+exports.configVar = {
+    canvasVar: {
+        canvasDataSource: null,
+        zoomDataSource: "100",
+        dragLastPosDataSource: "",
+        dragElementDataSource: "",
+        targetObjectDataSource: "",
+        mousePointerDataSource: "",
+        canvasCreateElementsDataSource: [],
+        canvasCreateTargetElementsDataSource: [],
+        createSelectionRectDataSource: [],
+        canvasSelectionElementsDataSource: [],
+        mouseWheelPointerDataSource: "",
+        defaultCreateDataList: [],
+        canvasConfig: "",
+        callBackEventConfig: "",
+        canvasHandleConfig: "",
+        canvasBackgroundImageTarget: "",
+        renderCanvasStatus: 0,
+        mouseClickType: 0,
+        mouseRightClickStatus: false,
+        mouseDragStatus: false,
+        canvasDragStatus: true,
+        canvasSelectionStatus: true,
+        createSelectionStatus: 0,
+        canvasMenuShowStatus: false,
+        mouseClickTargetObjectStatus: 0,
+        mouseWheelStatus: false,
+        canvasAllSelectionStatus: false,
+        defaultCreateDataListStatus: 0,
+        mouseCanvasInRangeStatus: false, // 鼠标是否在画布范围内
+    }
+};

package/dist/config/type.d.ts

@@ -0,0 +1,2 @@
+export interface CanvasOptions {
+}

package/dist/config/type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/event/changed.d.ts

@@ -0,0 +1,3 @@
+export declare function PreviousStepFn(): void;
+export declare function ResetElementSizeFn(): void;
+export declare const xx: {};

package/dist/event/changed.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.xx = exports.ResetElementSizeFn = exports.PreviousStepFn = void 0;
+function PreviousStepFn() {
+    var _ = this;
+    if (!_.canvasDataSource) {
+        return;
+    }
+    var list = _.canvasCreateElementsDataSource;
+    var len = list.length;
+    if (len) {
+        var targetElement_1 = list[len - 1];
+        if (targetElement_1) {
+            _.canvasDataSource.remove(targetElement_1);
+            _.canvasCreateElementsDataSource.splice(len - 1, 1);
+            var index = _.canvasCreateTargetElementsDataSource.findIndex(function (citem) { return citem.id == targetElement_1.id; });
+            if (index >= 0) {
+                _.canvasCreateTargetElementsDataSource.splice(index, 1);
+            }
+        }
+        _.canvasDataSource.requestRenderAll();
+    }
+}
+exports.PreviousStepFn = PreviousStepFn;
+function ResetElementSizeFn() {
+    var _a;
+    var _ = this;
+    if (!_.canvasDataSource) {
+        return;
+    }
+    var _b = _.canvasConfig.actions, actions = _b === void 0 ? "" : _b;
+    var backgroundImage = ((_a = _.canvasDataSource) === null || _a === void 0 ? void 0 : _a.backgroundImage) || "";
+    var zoomValue = (actions === null || actions === void 0 ? void 0 : actions.zoom) || 1;
+    var scaleX = (backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.scaleX) || 1;
+    var scaleY = (backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.scaleY) || 1;
+    if (zoomValue != 1) {
+        // _.canvasDataSource.zoom = zoomValue
+        scaleX = scaleX * zoomValue;
+        scaleY = scaleY * zoomValue;
+    }
+    if (backgroundImage) {
+        // backgroundImage.set({
+        //     scaleX:scaleX,
+        //     scaleY:scaleY,
+        // })
+    }
+    // 默认加载完对象后，如果自动放大画布，则画布上元素的坐标需要做与画布同级别的缩放处理
+    _.canvasDataSource.forEachObject(function (obj) {
+        if (obj.elementType === 'icon') {
+            // 重新计算位置
+            // obj.set({
+            //     left: obj.left * zoomValue,
+            //     top: obj.top * zoomValue,
+            // })
+            // obj.setCoords(); // 更新对象的坐标
+        }
+    });
+    _.canvasDataSource.requestRenderAll();
+}
+exports.ResetElementSizeFn = ResetElementSizeFn;
+exports.xx = {};

package/dist/event/drop.d.ts

@@ -0,0 +1,2 @@
+export declare function RegisterMouseDropEventFn(options: any): void;
+export declare function DragCreateElementDataFn(data: any): void;

package/dist/event/drop.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragCreateElementDataFn = exports.RegisterMouseDropEventFn = void 0;
+var is_1 = require("../is");
+function RegisterMouseDropEventFn(options) {
+    if (!(0, is_1.isObject)(options)) {
+        return;
+    }
+    console.log("registerMouseDropEventFn");
+    var _ = this;
+    // 画布元素距离浏览器左侧和顶部的距离
+    var offset = {
+        left: _.canvasDataSource.getSelectionElement().getBoundingClientRect().left,
+        top: _.canvasDataSource.getSelectionElement().getBoundingClientRect().top
+    };
+    // 鼠标坐标转换成画布的坐标（未经过缩放和平移的坐标）
+    var point = {
+        x: options.e.x - offset.left,
+        y: options.e.y - offset.top,
+    };
+    // 转换后的坐标，restorePointerVpt 不受视窗变换的影响
+    var pointerVpt = _.canvasDataSource.restorePointerVpt(point);
+    //创建元素
+    _.mousePointerDataSource = pointerVpt;
+    _.createDragElementFn();
+    if (!_.mouseDragStatus) {
+        _.mouseDragStatus = true;
+    }
+}
+exports.RegisterMouseDropEventFn = RegisterMouseDropEventFn;
+function DragCreateElementDataFn(data) {
+    if (!(0, is_1.isObject)(data)) {
+        return;
+    }
+    var _ = this;
+    if (!_.canvasDataSource) {
+        return;
+    }
+    _.dragElementDataSource = data;
+    _.targetObjectDataSource = data;
+}
+exports.DragCreateElementDataFn = DragCreateElementDataFn;

package/dist/event/mouse-down.d.ts

@@ -0,0 +1 @@
+export declare function RegisterMouseDownEventFn(options: any): void;

package/dist/event/mouse-down.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RegisterMouseDownEventFn = void 0;
+var is_1 = require("../is");
+function RegisterMouseDownEventFn(options) {
+    if (!(0, is_1.isObject)(options)) {
+        return;
+    }
+    var _ = this;
+    _.mouseCanvasInRangeStatus = true;
+    _.mouseWheelPointerDataSource = options;
+    var event = options.e;
+    var activeTarget = options.target || options.activeTarget;
+    console.log("activeTarget==", activeTarget);
+    _.mouseDragStatus = false;
+    _.mouseWheelStatus = false;
+    _.mouseClickType = (options === null || options === void 0 ? void 0 : options.button) || 1; // 鼠标点击类型 1 左键 2中间滚轮 3右键
+    console.log("mouseClickType==", _.mouseClickType);
+    if (_.mouseRightClickStatus) {
+        // 如果当前处于右键状态，则不再继续执行任何操作
+        // 如果菜单属于显示状态，则关闭菜单
+        if (_.canvasMenuShowStatus) {
+            _.canvasMenuShowStatus = false;
+            _.mouseRightClickStatus = false;
+            _.hiddenRightClickMenuFn();
+        }
+        return;
+    }
+    // 鼠标左键点击操作
+    if (_.mouseClickType == 1) {
+        // 开启全选操作，禁止画布拖拽
+        if (_.canvasAllSelectionStatus) {
+            _.dragLastPosDataSource.open = false;
+            _.hiddenRightClickMenuFn();
+            return;
+        }
+        // 自定义绘制选择框选状态--开始绘制
+        if (_.canvasSelectionStatus) {
+            console.log("自定义绘制选择框选状态--开始绘制");
+            _.createSelectionStatus = 1;
+            var pointer = _.canvasDataSource.getPointer(options.e);
+            _.mousePointerDataSource = { x: pointer.x, y: pointer.y };
+            _.createSelectionRectFn(options);
+            return;
+        }
+        // 如果是鼠标左键点击画布，且此时处于右键状态，则关闭右键菜单，并将菜单状态初始化
+        if (_.mouseRightClickStatus) {
+            console.log("关闭右键菜单，并将菜单状态初始化");
+            _.mouseRightClickStatus = false;
+            _.canvasMenuShowStatus = false;
+            _.dragLastPosDataSource.open = true;
+            _.dragLastPosDataSource.lastPosX = event.clientX;
+            _.dragLastPosDataSource.lastPosY = event.clientY;
+            _.canvasDragStatus = true;
+            _.hiddenRightClickMenuFn();
+            return;
+        }
+        // 点击画布上的对象执行操作
+        if (activeTarget) {
+            // 画布上的数据对象被点击
+            if ((activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.elementKey) == "data") {
+                _.mouseClickTargetObjectStatus = 1;
+                return;
+            }
+            // 画布上的自定义绘制框被点击
+            if ((activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.renderType) == "frameSelection") {
+                _.mouseClickTargetObjectStatus = 1;
+                return;
+            }
+        }
+        else {
+            if (!_.canvasDragStatus) {
+                setTimeout(function () {
+                    _.canvasDragStatus = true;
+                }, 0);
+            }
+        }
+        // 画布可拖拽状态
+        if (_.canvasDragStatus) {
+            // 如果当前点击了底层画布，则允许底层画布可以拖拽
+            console.log("允许底层画布可以拖拽");
+            if (!activeTarget) {
+                // 如果没有获取到具体的目标对象，则默认是点击了画布底图，即开启画布的拖拽
+                _.dragLastPosDataSource.open = true;
+                _.dragLastPosDataSource.lastPosX = event.clientX;
+                _.dragLastPosDataSource.lastPosY = event.clientY;
+                return;
+            }
+        }
+        else {
+            console.log("3333");
+            _.dragLastPosDataSource.open = false;
+            return;
+        }
+    }
+    // 中间滚轮操作，仅仅允许缩放，禁止拖拽操作
+    if (_.mouseClickType == 2) {
+        _.dragLastPosDataSource.open = false;
+    }
+    // 鼠标右键操作
+    if (_.mouseClickType == 3) {
+        // 激活右键状态
+        _.mouseRightClickStatus = true;
+        _.canvasMenuShowStatus = true;
+        // 创建右键选择菜单列表
+        _.createRightClickMenuFn(options);
+    }
+}
+exports.RegisterMouseDownEventFn = RegisterMouseDownEventFn;

package/dist/event/mouse-move.d.ts

@@ -0,0 +1 @@
+export declare function RegisterMouseMoveEventFn(options: any): void;

package/dist/event/mouse-move.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RegisterMouseMoveEventFn = void 0;
+var is_1 = require("../is");
+function RegisterMouseMoveEventFn(options) {
+    if (!(0, is_1.isObject)(options)) {
+        return;
+    }
+    var _ = this;
+    // 监听鼠标是否在画布范围内移动
+    var pointer = _.canvasDataSource.getPointer(options.e);
+    var inRange = pointer.x >= 0 && pointer.x <= _.canvasDataSource.width &&
+        pointer.y >= 0 && pointer.y <= _.canvasDataSource.height;
+    _.mouseCanvasInRangeStatus = inRange;
+    // 鼠标不在画布内，终止行为
+    if (!inRange) {
+        return;
+    }
+    var activeTarget = options.target || options.activeTarget;
+    _.mouseDragStatus = true;
+    _.mouseWheelStatus = true;
+    _.mouseWheelPointerDataSource = options;
+    if (_.mouseRightClickStatus) {
+        // 如果当前处于右键状态，则不再继续执行任何操作
+        return;
+    }
+    if (_.dragLastPosDataSource.open) {
+        var evt = options.e;
+        var vpt = _.canvasDataSource.viewportTransform;
+        vpt[4] += evt.clientX - _.dragLastPosDataSource.lastPosX;
+        vpt[5] += evt.clientY - _.dragLastPosDataSource.lastPosY;
+        _.canvasDataSource.requestRenderAll(); // 异步更新画板，提升性能
+        _.dragLastPosDataSource.lastPosX = evt.clientX;
+        _.dragLastPosDataSource.lastPosY = evt.clientY;
+        return;
+    }
+    // 画布上的对象被点击
+    if ((activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.elementKey) == "data") {
+        _.mouseClickTargetObjectStatus = 2;
+        return;
+    }
+    // 画布上的自定义绘制框被点击
+    if ((activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.renderType) == "frameSelection") {
+        _.mouseClickTargetObjectStatus = 2;
+        return;
+    }
+    // 更新自定义绘制图像数据
+    if (_.canvasSelectionStatus) {
+        _.createSelectionStatus = 2;
+        _.updateSelectionRectFn(options);
+        return;
+    }
+}
+exports.RegisterMouseMoveEventFn = RegisterMouseMoveEventFn;

package/dist/event/mouse-up.d.ts

@@ -0,0 +1 @@
+export declare function RegisterMouseUpEventFn(options: any): void;

package/dist/event/mouse-up.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RegisterMouseUpEventFn = void 0;
+var is_1 = require("../is");
+function RegisterMouseUpEventFn(options) {
+    if (!(0, is_1.isObject)(options)) {
+        return;
+    }
+    var _ = this;
+    // 鼠标不在画布内，终止行为
+    if (!_.mouseCanvasInRangeStatus) {
+        return;
+    }
+    var activeTarget = options.target || options.activeTarget;
+    var _a = _.callBackEventConfig || {}, activeTargetElementBackFn = _a.activeTargetElementBackFn, activeTargetSelectionRectBackFn = _a.activeTargetSelectionRectBackFn;
+    _.mouseWheelPointerDataSource = options;
+    console.log("activeTarget==", activeTarget);
+    console.log("_.canvasDataSource==", _.canvasDataSource.backgroundImage);
+    setTimeout(function () {
+        _.mouseWheelStatus = false;
+    }, 0);
+    if (_.mouseRightClickStatus) {
+        // 如果当前处于右键状态，则不再继续执行任何操作
+        return;
+    }
+    // 画布上的对象被点击
+    if ((activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.elementKey) == "data") {
+        // 如果是点击对象操作，并未执行拖动，则执行点击的回调函数
+        if (_.mouseClickTargetObjectStatus == 1) {
+            if (activeTargetElementBackFn instanceof Function) {
+                activeTargetElementBackFn(activeTarget);
+            }
+        }
+        setTimeout(function () {
+            _.mouseClickTargetObjectStatus = 3;
+        }, 0);
+        return;
+    }
+    if ((activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.renderType) == "frameSelection") {
+        // 点击了画布上自定义绘制的选择框
+        if (_.mouseClickTargetObjectStatus == 1) {
+            if (activeTargetSelectionRectBackFn instanceof Function) {
+                activeTargetSelectionRectBackFn(activeTarget);
+            }
+        }
+        setTimeout(function () {
+            _.mouseClickTargetObjectStatus = 3;
+        }, 0);
+        return;
+    }
+    // 允许画布拖动操作
+    if (_.dragLastPosDataSource.open) {
+        _.canvasDataSource.setViewportTransform(_.canvasDataSource.viewportTransform);
+        _.dragLastPosDataSource.open = false;
+        return;
+    }
+    // 右键选择自定义绘制框，并且绘制完成，抬起鼠标，结束当次绘制
+    if (_.canvasSelectionStatus && _.mouseClickType == 1) {
+        _.createSelectionRectFinishFn(options);
+        return;
+    }
+    // _.canvasDataSource.selection = true;
+    setTimeout(function () {
+        _.mouseDragStatus = false;
+    }, 0);
+}
+exports.RegisterMouseUpEventFn = RegisterMouseUpEventFn;

package/dist/event/mouse-wheel.d.ts

@@ -0,0 +1 @@
+export declare function RegisterMouseWheelEventFn(options: any): void;

package/dist/event/mouse-wheel.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RegisterMouseWheelEventFn = void 0;
+var is_1 = require("../is");
+function RegisterMouseWheelEventFn(options) {
+    var _a;
+    if (!(0, is_1.isObject)(options)) {
+        return;
+    }
+    var _ = this;
+    _.mouseWheelPointerDataSource = options;
+    if (!_.canvasDataSource) {
+        return;
+    }
+    if ((_a = _.canvasConfig) === null || _a === void 0 ? void 0 : _a.zoom) {
+        _.registerZoomHandleFn(options);
+    }
+}
+exports.RegisterMouseWheelEventFn = RegisterMouseWheelEventFn;

package/dist/handle/create.d.ts

@@ -0,0 +1,9 @@
+export declare const xx: {};
+export declare function CreateDragElementFn(data: any): void;
+export declare function InitElement2CanvasFn(list: any[]): void;
+export declare function CreateCanvasSvgElementFn(fabric: any, item: any, index?: number): void;
+export declare function CreateCanvasImageElementFn(fabric: any, item: any, index?: number): void;
+export declare function CreateSelectionRectFn(fabric: any): void;
+export declare function CreateAllSelectionRectFn(fabric: any): void;
+export declare function CreateRightClickMenuFn(options: any): void;
+export declare function CreateElementFn(domVal: any, id: string, index?: number): void;