xctc-utils 1.6.47 → 1.6.49

package/README.md

@@ -260,4 +260,7 @@ useUtils.findIdcardAge(idcard)
 #### 将数据复制到剪贴板函数
 ```
 useUtils.handleCopyValue(val)
-```
+```
+
+
+#### npm run build   npm publish

package/dist/canvas/index.d.ts

@@ -0,0 +1,81 @@
+export default class CanvasHooks {
+    canvasDataSource: any;
+    zoomDataSource: string;
+    dragLastPosDataSource: any;
+    dragElementDataSource: any;
+    targetObjectDataSource: any;
+    mousePointerDataSource: any;
+    canvasCreateElementsDataSource: any[];
+    canvasCreateTargetElementsDataSource: any[];
+    createSelectionRectDataSource: any;
+    canvasSelectionElementsDataSource: any[];
+    mouseWheelPointerDataSource: any;
+    defaultCreateDataList: any[];
+    private canvasConfig;
+    callBackEventConfig: any;
+    canvasHandleConfig: any;
+    canvasBackgroundImageTarget: any;
+    renderCanvasStatus: number;
+    mouseClickType: number;
+    mouseRightClickStatus: boolean;
+    mouseDragStatus: boolean;
+    canvasDragStatus: boolean;
+    canvasSelectionStatus: boolean;
+    createSelectionStatus: number;
+    canvasMenuShowStatus: boolean;
+    mouseClickTargetObjectStatus: number;
+    canvasAllSelectionStatus: boolean;
+    mouseWheelStatus: boolean;
+    defaultCreateDataListStatus: boolean;
+    mouseCanvasInRangeStatus: boolean;
+    constructor(config: any);
+    get canvasConfigData(): any;
+    createCanvasFn(config?: any): void;
+    disposeCanvasFn(): void;
+    canvasConfigDataFn(config: any): void;
+    registerCallBackEventFn(config?: any): void;
+    registerAllEventHandleFn(): void;
+    registerCanvasZoomChangeEventFn(): void;
+    registerMouseDropEventFn(options: any): void;
+    registerMouseOverEventFn(options: any): void;
+    registerMouseOutEventFn(options: any): void;
+    registerMouseDownEventFn(options: any): void;
+    registerMouseMoveEventFn(options: any): void;
+    registerMouseUpEventFn(options: any): void;
+    registerMouseWheelEventFn(options: any): void;
+    registerZoomHandleFn(options: any): void;
+    dragCreateElementDataFn(data: any): void;
+    createDragElementFn(): void;
+    initElement2CanvasFn(list: any[]): void;
+    getCreateElementStatusFn(index: any): void;
+    createCanvasSvgElementFn(item: any, index?: number): void;
+    createCanvasImageElementFn(item: any, index?: number): void;
+    getSelectionAllElementsFn(): any[] | undefined;
+    getSelectionElementsFn(item: any): any[] | undefined;
+    createSelectionRectFn(): void;
+    createAllSelectionRectFn(): void;
+    removeAllSelectionRectFn(): void;
+    updateSelectionRectFn(options: any): void;
+    createSelectionRectFinishFn(options: any): void;
+    getDomFn(id: string): false | HTMLElement;
+    init(): void;
+    elementSizeFn(id: string): {
+        height: number;
+        width: number;
+    };
+    createRightClickMenuFn(options: any): void;
+    hiddenRightClickMenuFn(): void;
+    createElementFn(domVal: any, id: string, index?: number): any;
+    previousStepFn(): void;
+    removeElementFn(id: any): void;
+    removeAllElementFn(): void;
+    resetElementSizeFn(): void;
+    setCanvasBaseConfigFn(zoom: any): void;
+    getCanvasActionDataFn(): {
+        zoom: any;
+        x: number;
+        y: number;
+        left: number;
+        top: number;
+    } | undefined;
+}

package/dist/canvas/index.js

@@ -0,0 +1,1087 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var fabric_1 = require("fabric");
+// 初始化画布创建时需要的参数-默认值
+var defaultConfig = {
+    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 // 防止翻转
+};
+var CanvasHooks = /** @class */ (function () {
+    function CanvasHooks(config) {
+        this.canvasDataSource = null;
+        this.zoomDataSource = "100";
+        this.canvasBackgroundImageTarget = null;
+        this.dragLastPosDataSource = "";
+        this.dragElementDataSource = "";
+        this.targetObjectDataSource = "";
+        this.mousePointerDataSource = "";
+        this.createSelectionRectDataSource = "";
+        this.canvasCreateElementsDataSource = [];
+        this.canvasSelectionElementsDataSource = [];
+        this.canvasCreateTargetElementsDataSource = [];
+        this.mouseWheelPointerDataSource = "";
+        this.defaultCreateDataList = [];
+        this.canvasConfig = config;
+        this.callBackEventConfig = "";
+        this.canvasHandleConfig = "";
+        this.renderCanvasStatus = 0;
+        this.mouseRightClickStatus = false;
+        this.mouseClickType = 0;
+        this.mouseDragStatus = false;
+        this.canvasDragStatus = true;
+        this.canvasSelectionStatus = false;
+        this.createSelectionStatus = 0;
+        this.canvasMenuShowStatus = false;
+        this.mouseClickTargetObjectStatus = 0;
+        this.canvasAllSelectionStatus = false;
+        this.mouseWheelStatus = false;
+        this.defaultCreateDataListStatus = false;
+        this.mouseCanvasInRangeStatus = false;
+        if (config === null || config === void 0 ? void 0 : config.init) {
+            // 是否默认加载画布
+            this.createCanvasFn();
+        }
+    }
+    Object.defineProperty(CanvasHooks.prototype, "canvasConfigData", {
+        get: function () {
+            return this.canvasConfig;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // 创建画布
+    CanvasHooks.prototype.createCanvasFn = function (config) {
+        var _ = this;
+        _.renderCanvasStatus = 1;
+        var canvasId = "";
+        // config 配置数据必须有画布ID参数
+        if (config && Object.keys(config).length && !config.hasOwnProperty("id")) {
+            console.error("createCanvasFn函数接收的参数必须包含画布对应的id");
+            return;
+        }
+        if (config && config.hasOwnProperty("id")) {
+            _.canvasConfig = config;
+            if (!_.getDomFn(_.canvasConfig.id)) {
+                console.error("未查询到id=" + _.canvasConfig.id + "的canvas元素");
+                return;
+            }
+        }
+        // 初始化画布渲染时的配置参数
+        var data = __assign(__assign({}, defaultConfig), _.canvasConfig);
+        if (!_.canvasConfig.hasOwnProperty("width")) {
+            data['width'] = _.elementSizeFn("canvasContainer").width;
+        }
+        if (!_.canvasConfig.hasOwnProperty("height")) {
+            data['height'] = _.elementSizeFn("canvasContainer").height;
+        }
+        var imgUrl = (data === null || data === void 0 ? void 0 : data.backgroundImgUrl) || "";
+        console.log("canvas--options", data);
+        canvasId = data.id;
+        if (imgUrl) {
+            fabric_1.fabric.Image.fromURL(imgUrl, function (img) {
+                _.renderCanvasStatus = 2;
+                _.canvasBackgroundImageTarget = img;
+                var _a = _.canvasConfig.actions, actions = _a === void 0 ? "" : _a;
+                var zoomValue = (actions === null || actions === void 0 ? void 0 : actions.zoom) || 1;
+                if (!_.canvasDataSource) {
+                    _.canvasDataSource = new fabric_1.fabric.Canvas(canvasId, __assign({}, data));
+                    if (zoomValue != 1) {
+                        _.canvasDataSource.setZoom(zoomValue);
+                    }
+                }
+                var canvasWidth = _.canvasDataSource.getWidth();
+                var canvasHeight = _.canvasDataSource.getHeight();
+                var imgWidth = img.width;
+                var imgHeight = img.height;
+                var scaleX = 1;
+                var scaleY = 1;
+                if (canvasWidth && canvasHeight && imgWidth && imgHeight) {
+                    var imageAspectRatio = imgWidth / imgHeight;
+                    var canvasAspectRatio = canvasWidth / canvasHeight;
+                    if (imageAspectRatio > canvasAspectRatio) {
+                        // 图片更宽，基于高度缩放
+                        scaleY = canvasHeight / imgHeight;
+                        scaleX = scaleY * imageAspectRatio;
+                    }
+                    else {
+                        // 图片更高或宽高比相同，基于宽度缩放
+                        scaleX = canvasWidth / imgWidth;
+                        scaleY = scaleX / imageAspectRatio;
+                    }
+                }
+                console.log("原始比例：", { scaleX: scaleX, scaleY: scaleY, width: imgWidth, height: imgHeight });
+                _.canvasDataSource.setBackgroundImage(img, _.canvasDataSource.renderAll.bind(_.canvasDataSource), {
+                    originX: 'left',
+                    originY: 'top',
+                    left: 0,
+                    top: 0,
+                    // scaleX: scaleX,
+                    // scaleY: scaleY,
+                    width: imgWidth,
+                    height: imgHeight,
+                });
+                _.renderCanvasStatus = 3;
+                _.registerAllEventHandleFn();
+                _.canvasDataSource.renderAll();
+                callBack(_.canvasDataSource);
+            });
+        }
+        else {
+            if (!_.canvasDataSource) {
+                _.canvasDataSource = new fabric_1.fabric.Canvas(canvasId, __assign({}, data));
+                _.renderCanvasStatus = 3;
+                _.registerAllEventHandleFn();
+                _.canvasDataSource.renderAll();
+                callBack(_.canvasDataSource);
+            }
+        }
+        // 如果配置里面有回调函数，则将当前画布数据对象返回
+        function callBack(data) {
+            var _a;
+            var cb = ((_a = _.canvasConfig) === null || _a === void 0 ? void 0 : _a.cb) || "";
+            if (cb instanceof Function) {
+                cb(data);
+            }
+        }
+    };
+    // 销毁画布
+    CanvasHooks.prototype.disposeCanvasFn = function () {
+        var _a, _b;
+        if (this.canvasDataSource) {
+            var el = (_a = this.canvasDataSource) === null || _a === void 0 ? void 0 : _a.getElement();
+            (_b = this.canvasDataSource) === null || _b === void 0 ? void 0 : _b.dispose();
+            el === null || el === void 0 ? void 0 : el.remove(); // 删除canvasDataSource元素
+            this.canvasDataSource = null;
+        }
+    };
+    // 关于画布相关配置数据
+    CanvasHooks.prototype.canvasConfigDataFn = function (config) {
+        /**
+         *  rightButtonsDataSource 画布右键菜单列表数据
+        */
+        this.canvasHandleConfig = config || {};
+    };
+    // 注册回调事件--页面生成画布实例的时候，调用该函数
+    CanvasHooks.prototype.registerCallBackEventFn = function (config) {
+        console.log("canvasDataSource--", this.canvasDataSource);
+        if (!this.canvasDataSource) {
+            return;
+        }
+        if (config) {
+            this.callBackEventConfig = config;
+        }
+    };
+    // 执行注册事件
+    CanvasHooks.prototype.registerAllEventHandleFn = function () {
+        var _ = this;
+        _.dragLastPosDataSource = {
+            open: false,
+            lastPosX: null,
+            lastPosY: null,
+        };
+        console.log("registerAllEventHandleFn");
+        // 鼠标进入画布画布
+        _.canvasDataSource.on("mouse:over", function (options) {
+            _.registerMouseOverEventFn(options);
+        });
+        // 注册鼠标按下事件
+        _.canvasDataSource.on("mouse:down", function (options) {
+            _.registerMouseDownEventFn(options);
+        });
+        // 鼠标在画布内移动
+        _.canvasDataSource.on("mouse:move", function (options) {
+            _.registerMouseMoveEventFn(options);
+        });
+        // 鼠标移除画布
+        _.canvasDataSource.on("mouse:out", function (options) {
+            _.registerMouseOutEventFn(options);
+        });
+        // 鼠标抬起
+        _.canvasDataSource.on("mouse:up", function (options) {
+            _.registerMouseUpEventFn(options);
+        });
+        // 注册滚动事件
+        _.canvasDataSource.on('mouse:wheel', function (options) {
+            _.registerMouseWheelEventFn(options);
+        });
+        _.canvasDataSource.on('drop', function (options) {
+            _.registerMouseDropEventFn(options);
+        });
+        //监听画布缩放状态
+        _.canvasDataSource.on('zoom:changed', function (options) {
+            _.registerCanvasZoomChangeEventFn(options);
+        });
+    };
+    // 注册画布发生缩放监听事件
+    CanvasHooks.prototype.registerCanvasZoomChangeEventFn = function () {
+        var _ = this;
+        var zoom = _.canvasDataSource.getZoom();
+    };
+    // 拖拽事件注册
+    CanvasHooks.prototype.registerMouseDropEventFn = function (options) {
+        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;
+        console.log("_.mouseDragStatus=", _.mouseDragStatus);
+        _.createDragElementFn();
+        if (!_.mouseDragStatus) {
+            _.mouseDragStatus = true;
+        }
+    };
+    // 鼠标进入画布
+    CanvasHooks.prototype.registerMouseOverEventFn = function (options) {
+        console.log("registerMouseOutEventFn");
+        var _ = this;
+        _.mouseCanvasInRangeStatus = true;
+    };
+    // 鼠标移出画布
+    CanvasHooks.prototype.registerMouseOutEventFn = function (options) {
+        console.log("registerMouseOutEventFn");
+        var _ = this;
+        _.mouseCanvasInRangeStatus = false;
+    };
+    // 注册鼠标按下事件
+    CanvasHooks.prototype.registerMouseDownEventFn = function (options) {
+        console.log("registerMouseDownEventFn");
+        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);
+        }
+    };
+    // 注册鼠标移动事件
+    CanvasHooks.prototype.registerMouseMoveEventFn = function (options) {
+        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;
+        }
+    };
+    // 注册鼠标抬起事件
+    CanvasHooks.prototype.registerMouseUpEventFn = function (options) {
+        console.log("registerMouseUpEventFn");
+        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);
+    };
+    // 注册鼠标滚动事件
+    CanvasHooks.prototype.registerMouseWheelEventFn = function (options) {
+        var _a;
+        console.log("registerMouseWheelEventFn");
+        var _ = this;
+        _.mouseWheelPointerDataSource = options;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        if ((_a = _.canvasConfig) === null || _a === void 0 ? void 0 : _a.zoom) {
+            _.registerZoomHandleFn(options);
+        }
+    };
+    // 滚动事件操作--画布缩放监听
+    CanvasHooks.prototype.registerZoomHandleFn = function (options) {
+        var _a;
+        console.log("registerZoomHandleFn");
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        // 滚轮，向上滚一下是 -100，向下滚一下是 100
+        var delta = options.e.deltaY;
+        var zoom = _.canvasDataSource.getZoom(); // 获取画布当前缩放值
+        console.log("registerZoomHandleFn--zoom=", zoom);
+        zoom += 0.001 * delta;
+        if (zoom > 10)
+            zoom = 10; // 限制最大缩放级别
+        if (zoom < 0.2)
+            zoom = 0.2; // 限制最小缩放级别
+        _.zoomDataSource = (zoom * 100).toFixed(0);
+        // 以鼠标所在位置为原点缩放
+        _.canvasDataSource.zoomToPoint({
+            x: options.e.offsetX,
+            y: options.e.offsetY
+        }, zoom // 传入修改后的缩放级别
+        );
+        var fn = ((_a = _.callBackEventConfig) === null || _a === void 0 ? void 0 : _a.zoomListenEvent) || "";
+        if (fn && fn instanceof Function) {
+            fn(zoom, _.zoomDataSource);
+        }
+    };
+    // 页面上发生拖拽时，拖拽完成后的数据存储函数
+    CanvasHooks.prototype.dragCreateElementDataFn = function (data) {
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        _.dragElementDataSource = data;
+        _.targetObjectDataSource = data;
+    };
+    // 拖拽进入画布元素创建
+    CanvasHooks.prototype.createDragElementFn = function () {
+        var _a, _b, _c, _d, _e;
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        var type = ((_a = _.dragElementDataSource) === null || _a === void 0 ? void 0 : _a.renderType) || "image";
+        var top = (_b = _.mousePointerDataSource) === null || _b === void 0 ? void 0 : _b.y;
+        var left = ((_c = _.mousePointerDataSource) === null || _c === void 0 ? void 0 : _c.x) - (((_d = _.dragElementDataSource) === null || _d === void 0 ? void 0 : _d.width) / 2);
+        // 同一个对象是否允许多次创建 createMode = multiple 允许 传其他或不传不允许
+        _.targetObjectDataSource = _.dragElementDataSource;
+        if (!((_e = _.targetObjectDataSource) === null || _e === void 0 ? void 0 : _e.id)) {
+            console.error("拖入画布的元素没有唯一标识id字段，不能创建！");
+            return;
+        }
+        var item = __assign(__assign({}, _.dragElementDataSource), { top: top, left: left });
+        // 拖拽数据类型为SVG图片对象
+        if (type == "svg") {
+            _.createCanvasSvgElementFn(item);
+        }
+        else {
+            _.createCanvasImageElementFn(item);
+        }
+    };
+    // 默认加载一个列表数据到画布
+    CanvasHooks.prototype.initElement2CanvasFn = function (list) {
+        var _ = this;
+        _.defaultCreateDataListStatus = false;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        if (list === null || list === void 0 ? void 0 : list.length) {
+            _.defaultCreateDataList = list;
+            list.forEach(function (item, index) {
+                if (item.hasOwnProperty("left") && item.hasOwnProperty("top")) {
+                    var type = (item === null || item === void 0 ? void 0 : item.renderType) || "image";
+                    if (type == "svg") {
+                        _.createCanvasSvgElementFn(item, index);
+                    }
+                    else {
+                        _.createCanvasImageElementFn(item, index);
+                    }
+                }
+            });
+        }
+    };
+    CanvasHooks.prototype.getCreateElementStatusFn = function (index) {
+        var _ = this;
+        var list = _.defaultCreateDataList;
+        if (index >= 0 && (list === null || list === void 0 ? void 0 : list.length)) {
+            if (index == list.length - 1) {
+                setTimeout(function () {
+                    _.resetElementSizeFn();
+                }, 100);
+            }
+        }
+    };
+    // 创建SVG到画布
+    CanvasHooks.prototype.createCanvasSvgElementFn = function (item, index) {
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        var createDragElementBackFn = (_.callBackEventConfig || {}).createDragElementBackFn;
+        fabric_1.fabric.loadSVGFromURL(item === null || item === void 0 ? void 0 : item.address, function (objects) {
+            var svgObject = (objects === null || objects === void 0 ? void 0 : objects.length) ? objects[0] : "";
+            if (!svgObject) {
+                return;
+            }
+            console.log("createCanvasSvgElementFn-item=", item);
+            svgObject.set(__assign({ evented: true, originX: 'left', originY: 'top' }, item));
+            _.canvasDataSource.add(svgObject);
+            _.canvasDataSource.requestRenderAll();
+            _.mousePointerDataSource = null;
+            _.canvasCreateElementsDataSource.push(svgObject);
+            _.canvasCreateTargetElementsDataSource.push(svgObject);
+            _.getCreateElementStatusFn(index);
+            if (createDragElementBackFn instanceof Function) {
+                createDragElementBackFn(_.dragElementDataSource);
+            }
+            setTimeout(function () {
+                _.mouseDragStatus = false;
+            }, 0);
+        });
+    };
+    // 创建图片到画布
+    CanvasHooks.prototype.createCanvasImageElementFn = function (item, index) {
+        var _a;
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        var createDragElementBackFn = (_.callBackEventConfig || {}).createDragElementBackFn;
+        fabric_1.fabric.Image.fromURL((_a = _.dragElementDataSource) === null || _a === void 0 ? void 0 : _a.address, function (img) {
+            img.set(__assign({}, item));
+            _.canvasDataSource.add(img);
+            _.canvasCreateElementsDataSource.push(img);
+            _.canvasCreateTargetElementsDataSource.push(img);
+            _.mousePointerDataSource = null;
+            _.canvasDataSource.requestRenderAll();
+            _.getCreateElementStatusFn(index);
+            setTimeout(function () {
+                _.mouseDragStatus = false;
+            }, 0);
+            if (createDragElementBackFn instanceof Function) {
+                createDragElementBackFn(_.dragElementDataSource);
+            }
+        }, function (exception) {
+            // 图片加载失败后的操作
+            console.error('createElement-exception-exception: ', exception);
+            // 这里可以显示文案或者进行其他错误处理
+        });
+    };
+    // 获取到所有被框选的对象
+    CanvasHooks.prototype.getSelectionAllElementsFn = function () {
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        var dataList = [];
+        var selection = _.canvasSelectionElementsDataSource || [];
+        // 检查哪些图标在选择框内
+        _.canvasDataSource.forEachObject(function (obj) {
+            var isTarget = false;
+            selection.map(function (item) {
+                if (obj.intersectsWithObject(item)) {
+                    isTarget = true;
+                }
+            });
+            if (isTarget && (obj === null || obj === void 0 ? void 0 : obj.elementKey) == "data") {
+                dataList.push(obj);
+            }
+        });
+        return dataList;
+    };
+    // 获取到指定选择框内被框选的对象
+    CanvasHooks.prototype.getSelectionElementsFn = function (item) {
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        var dataList = [];
+        // 检查哪些图标在选择框内
+        _.canvasDataSource.forEachObject(function (obj) {
+            if (item && obj.intersectsWithObject(item) && (obj === null || obj === void 0 ? void 0 : obj.elementKey) == "data") {
+                dataList.push(obj);
+            }
+        });
+        return dataList;
+    };
+    // 创建自定义图像
+    CanvasHooks.prototype.createSelectionRectFn = function () {
+        var _a, _b;
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        _.createSelectionRectDataSource = new fabric_1.fabric.Rect({
+            left: (_a = _.mousePointerDataSource) === null || _a === void 0 ? void 0 : _a.x,
+            top: (_b = _.mousePointerDataSource) === null || _b === void 0 ? void 0 : _b.y,
+            width: 0,
+            height: 0,
+            fill: 'rgba(0,0,255,0.1)',
+            stroke: 'blue',
+            // fill:"transparent",
+            strokeWidth: 1,
+            hasControls: true,
+            hasBorders: true,
+            selectable: true,
+            evented: true,
+            hoverCursor: 'move',
+            renderType: "frameSelection", // 代表框选
+        });
+        _.canvasDataSource.add(_.createSelectionRectDataSource);
+        _.canvasDataSource.requestRenderAll();
+    };
+    // 创建全选框
+    CanvasHooks.prototype.createAllSelectionRectFn = function () {
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        _.createSelectionRectDataSource = new fabric_1.fabric.Rect({
+            left: 0,
+            top: 0,
+            width: _.canvasDataSource.getWidth(),
+            height: _.canvasDataSource.getHeight(),
+            fill: 'rgba(0,0,255,0.1)',
+            stroke: 'blue',
+            // fill:"transparent",
+            strokeWidth: 1,
+            hasControls: false,
+            hasBorders: false,
+            selectable: false,
+            evented: true,
+            hoverCursor: 'move',
+            renderType: "frameSelection", // 代表框选
+        });
+        _.canvasDataSource.add(_.createSelectionRectDataSource);
+        _.canvasDataSource.requestRenderAll();
+    };
+    // 删除全选对象选择框
+    CanvasHooks.prototype.removeAllSelectionRectFn = function () {
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        _.canvasDataSource.remove(_.createSelectionRectDataSource);
+        _.canvasDataSource.requestRenderAll();
+    };
+    // 自定义选择框绘制数据更新
+    CanvasHooks.prototype.updateSelectionRectFn = function (options) {
+        var _a, _b;
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        if (_.createSelectionRectDataSource) {
+            var pointer = _.canvasDataSource.getPointer(options.e);
+            var width = pointer.x - ((_a = _.mousePointerDataSource) === null || _a === void 0 ? void 0 : _a.x);
+            var height = pointer.y - ((_b = _.mousePointerDataSource) === null || _b === void 0 ? void 0 : _b.y);
+            _.createSelectionRectDataSource.set({ width: Math.abs(width), height: Math.abs(height) });
+            // _.createSelectionRectDataSource.setCoords(); // 更新控制点坐标
+            _.canvasDataSource.requestRenderAll();
+            _.createSelectionStatus = 3;
+            setTimeout(function () {
+                _.createSelectionStatus = 0;
+            }, 0);
+        }
+    };
+    // 自定义选择框绘制完成
+    CanvasHooks.prototype.createSelectionRectFinishFn = function (options) {
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        _.canvasSelectionStatus = false;
+        _.isRightClick = false;
+        _.canvasDragStatus = true;
+        _.mouseRightClickStatus = false;
+        if (_.createSelectionRectDataSource) {
+            _.canvasSelectionElementsDataSource.push(_.createSelectionRectDataSource);
+            _.canvasCreateElementsDataSource.push(_.createSelectionRectDataSource);
+            _.createSelectionRectDataSource.setCoords(); // 更新控制点坐标
+            _.createSelectionRectDataSource = null; // 清除引用，结束绘制
+        }
+    };
+    // 获取对应的DOM元素
+    CanvasHooks.prototype.getDomFn = function (id) {
+        if (!id)
+            return false;
+        var dom = document.getElementById(id);
+        if (id && dom instanceof HTMLElement) {
+            return dom;
+        }
+        return false;
+    };
+    CanvasHooks.prototype.init = function () {
+        var _ = this;
+    };
+    // 获取画布容器的宽高
+    CanvasHooks.prototype.elementSizeFn = function (id) {
+        var _ = this;
+        var box = _.getDomFn(id);
+        if (!box) {
+            console.error("canvas外层必须套一层id=canvasContainer的DOM元素");
+        }
+        var height = box.clientHeight;
+        var width = box.clientWidth;
+        return {
+            height: height,
+            width: width
+        };
+    };
+    // 右键菜单管理
+    CanvasHooks.prototype.createRightClickMenuFn = function (options) {
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        var rightButtonsDataSource = (_.canvasHandleConfig || {}).rightButtonsDataSource;
+        var rightButtonMenuClickBackFn = (_.callBackEventConfig || {}).rightButtonMenuClickBackFn;
+        if (!(rightButtonsDataSource === null || rightButtonsDataSource === void 0 ? void 0 : rightButtonsDataSource.length)) {
+            return;
+        }
+        var canvasContainer = _.getDomFn("canvasContainer");
+        var oldMenuBox = _.getDomFn("menuBox");
+        if (canvasContainer && oldMenuBox) {
+            canvasContainer === null || canvasContainer === void 0 ? void 0 : canvasContainer.removeChild(oldMenuBox);
+        }
+        var menuBox = _.createElementFn("menuBox", "div");
+        if (rightButtonsDataSource === null || rightButtonsDataSource === void 0 ? void 0 : rightButtonsDataSource.length) {
+            var ulBox_1 = _.createElementFn("ulBox", "ul");
+            ulBox_1.style = "\n            list-style-type: none;\n            padding:0px;\n            margin:0px;\n            ";
+            var liStype_1 = "\n            padding:8px 12px;\n            cursor: pointer;\n            border-radius:4px;\n            font-size:16px;\n            ";
+            rightButtonsDataSource.forEach(function (item, index) {
+                var liItem = _.createElementFn("li", "liBox".concat(index + 1), index);
+                liItem.innerHTML = (item === null || item === void 0 ? void 0 : item.label) || "请传入label值";
+                liItem.style = liStype_1;
+                liItem.className = "right-menu-button";
+                liItem.addEventListener("click", function (event) {
+                    // 点击右键菜单回调函数
+                    console.log("rightButtonMenuClickBackFn==", rightButtonMenuClickBackFn);
+                    if (rightButtonMenuClickBackFn instanceof Function) {
+                        rightButtonMenuClickBackFn(event.target['data-index']);
+                    }
+                    _.canvasMenuShowStatus = false;
+                    _.mouseRightClickStatus = false;
+                    _.hiddenRightClickMenuFn();
+                });
+                liItem.addEventListener('mousemove', function () {
+                    var lists = document.getElementsByClassName("right-menu-button");
+                    for (var i = 0; i < lists.length; i++) {
+                        var element = lists[i];
+                        element.style.backgroundColor = "#fff";
+                        element.style.color = "#333";
+                    }
+                    liItem.style.backgroundColor = '#0AC496';
+                    liItem.style.color = '#fff';
+                    liItem.style.fontWeight = "bold";
+                });
+                ulBox_1.appendChild(liItem);
+            });
+            menuBox.appendChild(ulBox_1);
+        }
+        if (menuBox) {
+            menuBox.id = "menuBox";
+            // 显示菜单，设置右键菜单位置
+            // 获取菜单组件的宽高
+            var menuWidth = menuBox.offsetWidth;
+            var menuHeight = menuBox.offsetHeight;
+            // 当前鼠标位置
+            var pointX = options.pointer.x;
+            var pointY = options.pointer.y;
+            // 计算菜单出现的位置
+            // 如果鼠标靠近画布右侧，菜单就出现在鼠标指针左侧
+            if (_.canvasDataSource.width - pointX <= menuWidth) {
+                pointX -= menuWidth;
+            }
+            // 如果鼠标靠近画布底部，菜单就出现在鼠标指针上方
+            if (_.canvasDataSource.height - pointY <= menuHeight) {
+                pointY -= menuHeight;
+            }
+            // 将菜单展示出来
+            menuBox.style = "\n            visibility: visible;\n            left: ".concat(pointX, "px;\n            top: ").concat(pointY, "px;\n            z-index: 10000000;\n            padding:16px 12px;\n            border-radius:4px;\n            background-color:#fff;\n            position: absolute;\n            box-shadow: h-shadow v-shadow blur spread color inset;\n            ");
+            if (canvasContainer) {
+                canvasContainer.appendChild(menuBox);
+                _.isRightClick = true;
+                _.canvasDragStatus = false; // 进行右键操作时，先禁用画布拖拽操作功能
+            }
+            else {
+                console.error("请在canvas元素外层包一个DIV容器，且id='canvasContainer'");
+            }
+        }
+    };
+    CanvasHooks.prototype.hiddenRightClickMenuFn = function () {
+        var _ = this;
+        var canvasContainer = _.getDomFn("canvasContainer");
+        var menuBox = _.getDomFn("menuBox");
+        if (canvasContainer && menuBox) {
+            canvasContainer === null || canvasContainer === void 0 ? void 0 : canvasContainer.removeChild(menuBox);
+        }
+    };
+    // 在画布上动态创建对象
+    CanvasHooks.prototype.createElementFn = function (domVal, id, index) {
+        var _ = this;
+        var element = _.getDomFn(id);
+        if (element) {
+            return;
+        }
+        else {
+            if (domVal) {
+                var dom = document.createElement(domVal);
+                dom.id = id;
+                if (typeof index == "undefined") {
+                    index = 0;
+                }
+                if (index >= 0) {
+                    dom['data-index'] = index;
+                }
+                return dom;
+            }
+            return;
+        }
+    };
+    // 执行返回上一步操作
+    CanvasHooks.prototype.previousStepFn = function () {
+        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();
+        }
+    };
+    // 移除画布上指定对象
+    CanvasHooks.prototype.removeElementFn = function (id) {
+        if (!id) {
+            return;
+        }
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        var list = _.canvasCreateElementsDataSource;
+        var targetElement = list.find(function (obj) {
+            return obj.id === id;
+        });
+        if (targetElement) {
+            _.canvasDataSource.remove(targetElement);
+        }
+        _.canvasDataSource.requestRenderAll();
+    };
+    // 清空画布上所有对象
+    CanvasHooks.prototype.removeAllElementFn = function () {
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        var list = _.canvasCreateElementsDataSource;
+        _.createSelectionRectDataSource = [];
+        _.canvasCreateElementsDataSource = [];
+        _.createSelectionRectDataSource = [];
+        _.dragElementDataSource = [];
+        _.canvasSelectionElementsDataSource = [];
+        _.canvasCreateTargetElementsDataSource = [];
+        _.defaultCreateDataList = [];
+        list.map(function (item) {
+            if (item) {
+                _.canvasDataSource.remove(item);
+            }
+        });
+        _.canvasDataSource.requestRenderAll();
+    };
+    // 对于画布出现缩放的情况，加载进入的数据会产生偏移处理
+    // 问题未解决，备注
+    CanvasHooks.prototype.resetElementSizeFn = function () {
+        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;
+        console.log("resetElementSizeFn-zoomValue=", zoomValue);
+        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();
+    };
+    CanvasHooks.prototype.setCanvasBaseConfigFn = function (zoom) {
+        var _a;
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        if (!zoom) {
+            return;
+        }
+        var x = 0;
+        var y = 0;
+        if ((_a = _.mouseWheelPointerDataSource) === null || _a === void 0 ? void 0 : _a.e) {
+            var _b = _.mouseWheelPointerDataSource.e, _c = _b.offsetX, offsetX = _c === void 0 ? 0 : _c, _d = _b.offsetY, offsetY = _d === void 0 ? 0 : _d;
+            x = offsetX;
+            y = offsetY;
+        }
+        _.canvasDataSource.zoomToPoint({
+            x: x,
+            y: y
+        }, zoom // 传入修改后的缩放级别
+        );
+        _.canvasDataSource.requestRenderAll();
+    };
+    CanvasHooks.prototype.getCanvasActionDataFn = function () {
+        var _a, _b, _c, _d, _e;
+        var _ = this;
+        if (!_.canvasDataSource) {
+            return;
+        }
+        var zoom = _.canvasDataSource.getZoom();
+        console.log("getCanvasActionDataFn--zoom=", zoom);
+        var x = 0;
+        var y = 0;
+        var left = 0;
+        var top = 0;
+        if ((_a = _.mouseWheelPointerDataSource) === null || _a === void 0 ? void 0 : _a.e) {
+            var _f = _.mouseWheelPointerDataSource.e, _g = _f.offsetX, offsetX = _g === void 0 ? 0 : _g, _h = _f.offsetY, offsetY = _h === void 0 ? 0 : _h;
+            x = offsetX;
+            y = offsetY;
+            left = ((_c = (_b = _.mouseWheelPointerDataSource) === null || _b === void 0 ? void 0 : _b.absolutePointer) === null || _c === void 0 ? void 0 : _c.x) || 0;
+            top = ((_e = (_d = _.mouseWheelPointerDataSource) === null || _d === void 0 ? void 0 : _d.absolutePointer) === null || _e === void 0 ? void 0 : _e.y) || 0;
+        }
+        return {
+            zoom: zoom,
+            x: x,
+            y: y,
+            left: left,
+            top: top,
+        };
+    };
+    return CanvasHooks;
+}());
+exports.default = CanvasHooks;

package/dist/index.js

@@ -33,6 +33,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var storage = __importStar(require("./storage"));
 var utils = __importStar(require("./utils"));
@@ -44,5 +47,8 @@ var isType = __importStar(require("./is"));
 var modal = __importStar(require("./modal"));
 var params = __importStar(require("./params"));
 var iframe = __importStar(require("./iframe"));
-var obj = __assign(__assign(__assign({}, storage), utils), { weixin: __assign({}, weixin), crypto: __assign({}, crypto), date: __assign({}, time), format: __assign({}, format), type: __assign({}, isType), modal: __assign({}, modal), params: __assign({}, params), iframe: __assign({}, iframe) });
+var canvas_1 = __importDefault(require("./canvas"));
+var obj = __assign(__assign(__assign({}, storage), utils), { weixin: __assign({}, weixin), crypto: __assign({}, crypto), date: __assign({}, time), format: __assign({}, format), type: __assign({}, isType), modal: __assign({}, modal), params: __assign({}, params), iframe: __assign({}, iframe), canvas: {
+        CanvasHooks: canvas_1.default,
+    } });
 exports.default = obj;

package/dist/weixin/index.js

@@ -394,9 +394,10 @@ function configReady(config) {
                 signature: data === null || data === void 0 ? void 0 : data.signature, //必填，生成的签名
             };
             var wx = initSdk();
+            console.log("wx.config.data：", obj);
             wx.config(obj);
             wx.ready(function (res) {
-                (0, index_1.useSessionStorage)("configReadySuccess", "wx.ready");
+                (0, index_1.useSessionStorage)("configReadySuccess-wx.ready", res);
                 if (config['cb'] && typeof config.cb === "function")
                     config.cb();
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xctc-utils",
-  "version": "1.6.47",
+  "version": "1.6.49",
   "description": "localStorage存储\r ```\r sessionStorage存储\r ```\r crypto-js加密、解密\r ```\r 微信授权登录、微信分享\r ```\r 设备环境获取\r ```\r 是否是微信浏览器\r ```\r 时间戳转时间，字符串转时间戳",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "crypto-js": "^4.1.1",
+    "fabric": "^5.3.0",
     "weixin-js-sdk": "^1.6.0"
   },
   "repository": {