优化调整辅助线等

design1.html

@@ -219,15 +219,15 @@
             overflow: hidden;
         }
 
-        /* 2. 替换：标尺样式 (改为 70% 透明 + 增加鼠标手势) */
+        /* 2. 替换：标尺样式 (改为更明显的颜色 + 增加鼠标手势) */
         .ruler-horizontal {
             position: absolute;
             top: 0;
             left: 0;
             height: 20px;
-            /* 改为 rgba 实现 70% 透明 */
+            /* 改为更明显的颜色，不透明度提高到 0.9 */
-            background-color: rgba(44, 44, 44, 0.7) !important;
+            background-color: rgba(44, 44, 44, 0.9) !important;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
             z-index: 1000;
             /* 鼠标移上去显示上下调整箭头，提示可拖拽 */
             cursor: row-resize;
@@ -238,9 +238,9 @@
             top: 0;
             left: 0;
             width: 20px;
-            /* 改为 rgba 实现 70% 透明 */
+            /* 改为更明显的颜色，不透明度提高到 0.9 */
-            background-color: rgba(44, 44, 44, 0.7) !important;
+            background-color: rgba(44, 44, 44, 0.9) !important;
-            border-right: 1px solid rgba(255, 255, 255, 0.1);
+            border-right: 1px solid rgba(255, 255, 255, 0.2);
             z-index: 1000;
             /* 鼠标移上去显示左右调整箭头 */
             cursor: col-resize;
@@ -252,22 +252,23 @@
             left: 0;
             width: 20px;
             height: 20px;
-            background-color: rgba(44, 44, 44, 0.7) !important;
+            background-color: rgba(44, 44, 44, 0.9) !important;
-            border-right: 1px solid rgba(255, 255, 255, 0.1);
+            border-right: 1px solid rgba(255, 255, 255, 0.2);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
             z-index: 1001;
         }
 
         /* 3. 新增：拖拽过程中的辅助线样式 */
         .guide-line-drag {
             position: absolute;
-            background-color: #00FFFF;
+            background-color: #0066FF;
-            /* 青色高亮 */
+            /* 深蓝色高亮 */
             z-index: 9999;
             pointer-events: none;
             /* 让鼠标穿透，不影响拖拽事件 */
-            box-shadow: 0 0 4px #00FFFF;
+            box-shadow: 0 0 6px #0066FF;
-            /* 发光效果 */
+            /* 增强发光效果 */
+            opacity: 0.9;
         }
     </style>
 </head>

design2.html

@@ -21,9 +21,12 @@
             top: 0;
             left: 0;
             height: 20px;
-            background-color: #2C2C2C;
+            /* 改为更明显的颜色，不透明度提高到 0.9 */
-            border-bottom: 1px solid #1E1E1E;
+            background-color: rgba(44, 44, 44, 0.9) !important;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
             z-index: 1000;
+            /* 鼠标移上去显示上下调整箭头，提示可拖拽 */
+            cursor: row-resize;
         }
 
         .ruler-vertical {
@@ -31,9 +34,12 @@
             top: 0;
             left: 0;
             width: 20px;
-            background-color: #2C2C2C;
+            /* 改为更明显的颜色，不透明度提高到 0.9 */
-            border-right: 1px solid #1E1E1E;
+            background-color: rgba(44, 44, 44, 0.9) !important;
+            border-right: 1px solid rgba(255, 255, 255, 0.2);
             z-index: 1000;
+            /* 鼠标移上去显示左右调整箭头 */
+            cursor: col-resize;
         }
 
         .ruler-corner {
@@ -42,15 +48,28 @@
             left: 0;
             width: 20px;
             height: 20px;
-            background-color: #2C2C2C;
+            background-color: rgba(44, 44, 44, 0.9) !important;
-            border-right: 1px solid #1E1E1E;
+            border-right: 1px solid rgba(255, 255, 255, 0.2);
-            border-bottom: 1px solid #1E1E1E;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
             z-index: 1001;
         }
 
         .canvas-wrapper {
             position: relative;
         }
+
+        /* 拖拽过程中的辅助线样式 */
+        .guide-line-drag {
+            position: absolute;
+            background-color: #0066FF;
+            /* 深蓝色高亮 */
+            z-index: 9999;
+            pointer-events: none;
+            /* 让鼠标穿透，不影响拖拽事件 */
+            box-shadow: 0 0 6px #0066FF;
+            /* 增强发光效果 */
+            opacity: 0.9;
+        }
     </style>
 </head>
 

lib/design1/core.js

@@ -2305,6 +2305,11 @@ function initCanvasEvents() {
             let idx = getIndex(event.target);
             if (idx <= 0) return;
             let objData = objs[idx - 1];
+            // 安全检查：确保 objData 存在且有 type 属性
+            if (!objData || typeof objData.type === 'undefined') {
+                console.warn('objData is undefined or missing type at index', idx - 1);
+                return;
+            }
             let target = event.target;
 
             if ([3, 4, 10].includes(objData.type)) {
@@ -2327,10 +2332,10 @@ function initCanvasEvents() {
         // 8. 【完美修复版】渲染后绘制：外部蒙版 + 中心圆孔 (修复三角形Bug)
         // ==================================================
         currentCanvas.on('after:render', function () {
+            const ctx = currentCanvas.getContext();
             let bgObj = (currentCanvas === canvas1) ? background_image1 : background_image2;
 
             if (bgObj) {
-                const ctx = currentCanvas.getContext();
                 const width = currentCanvas.width;
                 const height = currentCanvas.height;
 
@@ -2378,6 +2383,32 @@ function initCanvasEvents() {
                 ctx.fill();
                 ctx.restore();
             }
+            
+            // 在遮罩之后重新绘制辅助线，确保辅助线在最上层
+            const objects = currentCanvas.getObjects();
+            objects.forEach(obj => {
+                if (obj.isGuideLine) {
+                    ctx.save();
+                    // 应用对象的变换矩阵
+                    const m = obj.calcTransformMatrix();
+                    ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+                    
+                    // 设置透明度
+                    ctx.globalAlpha = obj.opacity || 1;
+                    
+                    // 应用阴影
+                    if (obj.shadow) {
+                        ctx.shadowColor = obj.shadow.color;
+                        ctx.shadowBlur = obj.shadow.blur;
+                        ctx.shadowOffsetX = obj.shadow.offsetX;
+                        ctx.shadowOffsetY = obj.shadow.offsetY;
+                    }
+                    
+                    // 使用 Fabric 对象的内置渲染方法
+                    obj._render(ctx);
+                    ctx.restore();
+                }
+            });
         });
     });
 }
@@ -2469,30 +2500,54 @@ function initRulers() {
 
     // --- 2. 在画布中创建辅助线 ---
     function createFabricGuide(type, domX, domY) {
-        // 计算画布内的逻辑坐标 (减去 margin 偏移，除以缩放)
+        // domX 和 domY 是相对于 canvas-wrapper 的坐标
-        let boxOffset = canvasBox.offset();
+        // 需要转换为相对于 canvas_box 的坐标，然后再转换为 Fabric 画布坐标
-        let wrapperOffset = canvasWrapper.offset();
         
-        // 计算相对于 canvasBox 的像素位置
+        // 获取 canvas_box 相对于 canvas-wrapper 的位置
-        let relX = domX - (boxOffset.left - wrapperOffset.left);
+        let boxPosition = canvasBox.position();
-        let relY = domY - (boxOffset.top - wrapperOffset.top);
+        let boxMarginLeft = parseFloat(canvasBox.css('margin-left')) || 0;
+        let boxMarginTop = parseFloat(canvasBox.css('margin-top')) || 0;
+        
+        // 计算相对于 canvas_box 的坐标（减去 box 在 wrapper 中的位置和 margin）
+        let relX = domX - boxPosition.left - boxMarginLeft;
+        let relY = domY - boxPosition.top - boxMarginTop;
         
         // 转为 Fabric 坐标 (除以 zoom)
         let canvasX = relX / zoom;
         let canvasY = relY / zoom;
 
-        // 构造线对象
+        // 获取画布的实际尺寸和可见区域尺寸
+        let canvasWidth = canvas.width || 10000;
+        let canvasHeight = canvas.height || 10000;
+        // 获取可见区域的尺寸（考虑缩放）
+        let visibleWidth = canvasWrapper.width() || canvasWidth;
+        let visibleHeight = canvasWrapper.height() || canvasHeight;
+        // 使用足够大的固定值，确保辅助线能够覆盖整个画布和可见区域
+        // 使用 100000 确保无论画布多大、如何缩放，都能覆盖整个可见区域
+        let lineExtent = 100000;
+
+        // 构造线对象，使用足够大的范围确保覆盖整个画布
+        // 线的起点和终点要足够远，确保覆盖整个可见区域
         let linePoints = [];
         if (type === 'horizontal') {
-            linePoints = [-5000, canvasY, 5000, canvasY];
+            // 水平线：从很远的左边到很远的右边
+            linePoints = [-lineExtent, canvasY, lineExtent, canvasY];
         } else {
-            linePoints = [canvasX, -5000, canvasX, 5000];
+            // 垂直线：从很远的上面到很远的下面
+            linePoints = [canvasX, -lineExtent, canvasX, lineExtent];
         }
 
         let guideLine = new fabric.Line(linePoints, {
-            stroke: '#00FFFF',
+            stroke: '#0066FF',
             strokeWidth: 1 / zoom,
-            strokeDashArray: [5, 5],
+            opacity: 0.9,
+            shadow: {
+                color: '#0066FF',
+                blur: 6,
+                offsetX: 0,
+                offsetY: 0,
+                affectStroke: true
+            },
             selectable: true,
             evented: true,
             hasControls: false,
@@ -2501,6 +2556,9 @@ function initRulers() {
             lockScalingX: true,
             lockScalingY: true,
             hoverCursor: type === 'horizontal' ? 'ns-resize' : 'ew-resize',
+            perPixelTargetFind: false,  // 使用边界框检测而不是像素检测
+            targetFindTolerance: 10,    // 增加点击容差，扩大可点击区域（像素）
+            padding: 10,                // 增加选择边界的内边距
             isGuideLine: true,
             ignoreSave: true
         });
@@ -2508,9 +2566,9 @@ function initRulers() {
         // 限制移动方向
         guideLine.on('moving', function (e) {
             if (type === 'horizontal') {
-                this.left = -5000;
+                this.left = -lineExtent;
             } else {
-                this.top = -5000;
+                this.top = -lineExtent;
             }
         });
 
@@ -2558,14 +2616,14 @@ function initRulers() {
         function drawHorizontal() {
             ctxH.clearRect(0, 0, currentCanvasWidth, rulerHeight);
 
-            ctxH.strokeStyle = '#999';
+            ctxH.strokeStyle = '#666';
             ctxH.lineWidth = 1;
             ctxH.beginPath();
             ctxH.moveTo(0, 19);
             ctxH.lineTo(currentCanvasWidth, 19);
             ctxH.stroke();
 
-            ctxH.fillStyle = '#CCC';
+            ctxH.fillStyle = '#888';
             ctxH.font = '9px Arial';
             ctxH.textAlign = 'left';
             ctxH.textBaseline = 'top';
@@ -2626,14 +2684,14 @@ function initRulers() {
         function drawVertical() {
             ctxV.clearRect(0, 0, rulerWidth, currentCanvasHeight);
 
-            ctxV.strokeStyle = '#999';
+            ctxV.strokeStyle = '#666';
             ctxV.lineWidth = 1;
             ctxV.beginPath();
             ctxV.moveTo(19, 0);
             ctxV.lineTo(19, currentCanvasHeight);
             ctxV.stroke();
 
-            ctxV.fillStyle = '#CCC';
+            ctxV.fillStyle = '#888';
             ctxV.font = '9px Arial';
             ctxV.textAlign = 'center';
             ctxV.textBaseline = 'middle';

lib/design1/output.js

@@ -14,7 +14,8 @@ function display_func(img1, img2, img3) {
     $("#component_type").text(language_str("bg"));//"背景"
     canvas1.discardActiveObject().renderAll();
     canvas2.discardActiveObject().renderAll();
-    let _objs1 = canvas1.getObjects();
+    // 过滤掉辅助线
+    let _objs1 = canvas1.getObjects().filter(obj => !obj.isGuideLine);
     let g1 = [];
     let g3 = [];
     let g5 = [];
@@ -24,9 +25,16 @@ function display_func(img1, img2, img3) {
     let black_top = 0;//黑色顶裁剪
     let all_left = 0;//预览图左裁剪
     let all_top = 0;//预览图顶裁剪
-    let list1 = [..._objs1]
+    // 过滤掉辅助线
+    let list1 = _objs1.filter(obj => !obj.isGuideLine);
     for (let item of list1) {
         let idx = getIndex(item, canvas1);
+        
+        // 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
+        if (idx != 0 && (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined')) {
+            continue;
+        }
+        
         //console.log("------");
         //console.log(item.getCoords());
         //console.log(getCoordsMinX(background_image.getCoords()));
@@ -149,7 +157,8 @@ function display_func(img1, img2, img3) {
         top: black_top,
         left: black_left
     });
-    let _objs2 = canvas2.getObjects();
+    // 过滤掉辅助线
+    let _objs2 = canvas2.getObjects().filter(obj => !obj.isGuideLine);
     let g2 = [];
     let g4 = [];
     let g6 = [];
@@ -160,7 +169,14 @@ function display_func(img1, img2, img3) {
     all_top = 0;
     all_left = 0;
     for (let item of _objs2) {
+        
         let idx = getIndex(item, canvas2);
+        
+        // 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
+        if (idx != 0 && (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined')) {
+            continue;
+        }
+        
         if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
             all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
         }
@@ -362,7 +378,9 @@ function output(callback = null, _save = save) {
             let black_top = 0;//黑色顶裁剪
             let all_left = 0;//预览图左裁剪
             let all_top = 0;//预览图顶裁剪
-            for (let item of _objs1) {
+            // 过滤掉辅助线
+            let filteredObjs1 = _objs1.filter(obj => !obj.isGuideLine);
+            for (let item of filteredObjs1) {
                 let idx = getIndex(item, canvas1);
 
                 if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
@@ -372,6 +390,12 @@ function output(callback = null, _save = save) {
                     all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
                 }
                 g3.push(fabric.util.object.clone(item));
+                
+                // 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
+                if (idx != 0 && (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined')) {
+                    continue;
+                }
+                
                 if (idx != 0 && (objs1[idx - 1].type == 10 || objs1[idx - 1].type == 4)) {
                     continue;//计数器 或 合成文字
                 }
@@ -485,8 +509,16 @@ function output(callback = null, _save = save) {
             black_top = 0;//黑色顶裁剪
             all_left = 0;//黑色左裁剪
             all_top = 0;//黑色顶裁剪
-            for (let item of _objs2) {
+            // 过滤掉辅助线
+            let filteredObjs2 = _objs2.filter(obj => !obj.isGuideLine);
+            for (let item of filteredObjs2) {
                 let idx = getIndex(item, canvas2);
+                
+                // 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
+                if (idx != 0 && (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined')) {
+                    continue;
+                }
+                
                 if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
                     all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
                 }
@@ -635,8 +667,19 @@ function output(callback = null, _save = save) {
             op.frontBlackPic = '';
             op.backBlackPic = '';
             for (let item of _objs1) {
+                // 跳过辅助线
+                if (item.isGuideLine) {
+                    continue;
+                }
+                
                 let idx = getIndex(item, canvas1);
                 if (idx == 0) continue;//background-image
+                
+                // 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
+                if (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined') {
+                    continue;
+                }
+                
                 let type = objs1[idx - 1].type;
                 if (type == 2) {
                     //out_pic
@@ -750,8 +793,19 @@ function output(callback = null, _save = save) {
             }
             //obj2
             for (let item of _objs2) {
+                // 跳过辅助线
+                if (item.isGuideLine) {
+                    continue;
+                }
+                
                 let idx = getIndex(item, canvas2);
                 if (idx == 0) continue;//background-image
+                
+                // 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
+                if (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined') {
+                    continue;
+                }
+                
                 let type = objs2[idx - 1].type;
                 if (type == 2) {
                     //out_pic
@@ -941,9 +995,31 @@ function cleanupSrcFields(jsonObjects, objsArray) {
 }
 
 function saveAs(op1, callback) {
+    // 临时移除辅助线，保存后再恢复
+    let guideLines1 = [];
+    let guideLines2 = [];
+    canvas1.getObjects().forEach((obj, index) => {
+        if (obj.isGuideLine) {
+            guideLines1.push(obj);
+            canvas1.remove(obj);
+        }
+    });
+    canvas2.getObjects().forEach((obj, index) => {
+        if (obj.isGuideLine) {
+            guideLines2.push(obj);
+            canvas2.remove(obj);
+        }
+    });
+    
     let j = canvas1.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
     let b = canvas2.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
 
+    // 恢复辅助线
+    guideLines1.forEach(obj => canvas1.add(obj));
+    guideLines2.forEach(obj => canvas2.add(obj));
+    canvas1.renderAll();
+    canvas2.renderAll();
+
     // 清理不需要的 src 字段
     cleanupSrcFields(j.objects, objs1);
     cleanupSrcFields(b.objects, objs2);
@@ -975,9 +1051,31 @@ function saveAs(op1, callback) {
 }
 
 function save(op1, callback) {
+    // 临时移除辅助线，保存后再恢复
+    let guideLines1 = [];
+    let guideLines2 = [];
+    canvas1.getObjects().forEach((obj, index) => {
+        if (obj.isGuideLine) {
+            guideLines1.push(obj);
+            canvas1.remove(obj);
+        }
+    });
+    canvas2.getObjects().forEach((obj, index) => {
+        if (obj.isGuideLine) {
+            guideLines2.push(obj);
+            canvas2.remove(obj);
+        }
+    });
+    
     let j = canvas1.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
     let b = canvas2.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
 
+    // 恢复辅助线
+    guideLines1.forEach(obj => canvas1.add(obj));
+    guideLines2.forEach(obj => canvas2.add(obj));
+    canvas1.renderAll();
+    canvas2.renderAll();
+
     // 清理不需要的 src 字段
     cleanupSrcFields(j.objects, objs1);
     cleanupSrcFields(b.objects, objs2);

lib/design2/core.js

@@ -301,11 +301,196 @@ function initRulers() {
     canvas1.on('after:render', function () {
         drawHorizontalRuler();
         drawVerticalRuler();
+        // 重新绘制辅助线（确保在遮罩之上）
+        const ctx = canvas1.getContext();
+        const objects = canvas1.getObjects();
+        objects.forEach(obj => {
+            if (obj.isGuideLine) {
+                ctx.save();
+                const m = obj.calcTransformMatrix();
+                ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+                ctx.globalAlpha = obj.opacity || 1;
+                if (obj.shadow) {
+                    ctx.shadowColor = obj.shadow.color;
+                    ctx.shadowBlur = obj.shadow.blur;
+                    ctx.shadowOffsetX = obj.shadow.offsetX;
+                    ctx.shadowOffsetY = obj.shadow.offsetY;
+                }
+                obj._render(ctx);
+                ctx.restore();
+            }
+        });
     });
     canvas2.on('after:render', function () {
         drawHorizontalRuler();
         drawVerticalRuler();
+        // 重新绘制辅助线（确保在遮罩之上）
+        const ctx = canvas2.getContext();
+        const objects = canvas2.getObjects();
+        objects.forEach(obj => {
+            if (obj.isGuideLine) {
+                ctx.save();
+                const m = obj.calcTransformMatrix();
+                ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+                ctx.globalAlpha = obj.opacity || 1;
+                if (obj.shadow) {
+                    ctx.shadowColor = obj.shadow.color;
+                    ctx.shadowBlur = obj.shadow.blur;
+                    ctx.shadowOffsetX = obj.shadow.offsetX;
+                    ctx.shadowOffsetY = obj.shadow.offsetY;
+                }
+                obj._render(ctx);
+                ctx.restore();
+            }
+        });
     });
+
+    // --- 辅助线功能 (参考 design1) ---
+    // canvasWrapper 已在上面声明，直接使用
+    const canvasBox = $('#canvas-div'); // design2 使用 canvas-div 作为容器
+
+    // 确保容器定位
+    if (canvasWrapper.css('position') === 'static') canvasWrapper.css('position', 'relative');
+
+    // 定义临时拖拽线 DOM
+    let $dragLine = null;
+
+    // 通用拖拽开始函数
+    const startDragGuide = (type, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        // 创建临时显示的线
+        $dragLine = $('<div class="guide-line-drag"></div>');
+        canvasWrapper.append($dragLine);
+
+        if (type === 'horizontal') {
+            // 从上往下拖 (水平线)
+            $dragLine.css({
+                left: 0, width: '100%', height: '1px', top: e.offsetY
+            });
+        } else {
+            // 从左往右拖 (垂直线)
+            $dragLine.css({
+                top: 0, height: '100%', width: '1px', left: e.offsetX
+            });
+        }
+
+        // 绑定 document 移动事件
+        $(document).on('mousemove.ruler', function (moveEvent) {
+            let wrapperOffset = canvasWrapper.offset();
+            if (type === 'horizontal') {
+                let relY = moveEvent.pageY - wrapperOffset.top;
+                $dragLine.css('top', relY + 'px');
+            } else {
+                let relX = moveEvent.pageX - wrapperOffset.left;
+                $dragLine.css('left', relX + 'px');
+            }
+        });
+
+        // 绑定松开事件 (创建真实的 Fabric 线)
+        $(document).on('mouseup.ruler', function (upEvent) {
+            $(document).off('mousemove.ruler mouseup.ruler');
+
+            if (!$dragLine) return;
+
+            // 获取最终位置
+            let wrapperOffset = canvasWrapper.offset();
+            let finalX = upEvent.pageX - wrapperOffset.left;
+            let finalY = upEvent.pageY - wrapperOffset.top;
+
+            // 移除临时线
+            $dragLine.remove();
+            $dragLine = null;
+
+            // 只有拖入画布区域才创建
+            if (finalX > rulerWidth && finalY > rulerHeight) {
+                createFabricGuide(type, finalX, finalY);
+            }
+        });
+    };
+
+    // 绑定到标尺 DOM
+    $('#ruler-h').off('mousedown').on('mousedown', (e) => startDragGuide('horizontal', e));
+    $('#ruler-v').off('mousedown').on('mousedown', (e) => startDragGuide('vertical', e));
+
+    // --- 在画布中创建辅助线 ---
+    function createFabricGuide(type, domX, domY) {
+        // domX 和 domY 是相对于 canvas-wrapper 的坐标
+        // 需要转换为相对于 canvas 的坐标，然后再转换为 Fabric 画布坐标
+        
+        // 获取 canvas 相对于 canvas-wrapper 的位置
+        let canvas1El = $('#canvas1');
+        let canvasPosition = canvas1El.position();
+        let canvasMarginLeft = parseFloat(canvas1El.css('margin-left')) || 0;
+        let canvasMarginTop = parseFloat(canvas1El.css('margin-top')) || 0;
+        
+        // 计算相对于 canvas 的坐标（减去 canvas 在 wrapper 中的位置和 margin）
+        let relX = domX - canvasPosition.left - canvasMarginLeft;
+        let relY = domY - canvasPosition.top - canvasMarginTop;
+        
+        // 转为 Fabric 坐标 (除以 zoom)
+        let canvasX = relX / zoom;
+        let canvasY = relY / zoom;
+
+        // 使用足够大的固定值，确保辅助线能够覆盖整个画布和可见区域
+        let lineExtent = 100000;
+
+        // 构造线对象
+        let linePoints = [];
+        if (type === 'horizontal') {
+            linePoints = [-lineExtent, canvasY, lineExtent, canvasY];
+        } else {
+            linePoints = [canvasX, -lineExtent, canvasX, lineExtent];
+        }
+
+        let guideLine = new fabric.Line(linePoints, {
+            stroke: '#0066FF',
+            strokeWidth: 1 / zoom,
+            opacity: 0.9,
+            shadow: {
+                color: '#0066FF',
+                blur: 6,
+                offsetX: 0,
+                offsetY: 0,
+                affectStroke: true
+            },
+            selectable: true,
+            evented: true,
+            hasControls: false,
+            hasBorders: false,
+            lockRotation: true,
+            lockScalingX: true,
+            lockScalingY: true,
+            hoverCursor: type === 'horizontal' ? 'ns-resize' : 'ew-resize',
+            perPixelTargetFind: false,
+            targetFindTolerance: 10,
+            padding: 10,
+            isGuideLine: true,
+            ignoreSave: true
+        });
+
+        // 限制移动方向
+        guideLine.on('moving', function (e) {
+            if (type === 'horizontal') {
+                this.left = -lineExtent;
+            } else {
+                this.top = -lineExtent;
+            }
+        });
+
+        // 确定应该添加到哪个 canvas（使用当前活动的 canvas）
+        let targetCanvas = canvas;
+        if (!targetCanvas || (targetCanvas !== canvas1 && targetCanvas !== canvas2)) {
+            // 如果没有活动的 canvas，默认使用 canvas1
+            targetCanvas = canvas1;
+        }
+
+        targetCanvas.add(guideLine);
+        targetCanvas.setActiveObject(guideLine);
+        targetCanvas.renderAll();
+    }
+
 }
 initRulers();
 $('#source_front').width(zoom * $('#source_front').width())
@@ -705,14 +890,20 @@ function handleObjectSelected(e) {
         return;
     }
 
-    // 2. 获取索引
+    // 2. 如果是辅助线，直接返回，不处理（在获取索引之前检查）
+    if (select_obj.isGuideLine) {
+        return;
+    }
+
+    // 3. 获取索引
     let i = getIndex(select_obj, canvas);
 
     if (i != 0) {
         // --- 选中了普通对象 ---
         --i; // 转换为 objs 数组下标
 
-        if (objs[i]) {
+        // 安全检查：确保 objs[i] 存在且有 type 属性
+        if (objs[i] && typeof objs[i].type !== 'undefined') {
             switch (objs[i].type) {
                 case 1: // 图片
                     $("#component_type").text(language_str("img"));
@@ -764,9 +955,15 @@ function handleObjectSelected(e) {
 
 function handleObjectMoving(e) {
     let obj = e.target;
+    // 跳过辅助线
+    if (obj.isGuideLine) {
+        updateControls();
+        return;
+    }
     let idx = getIndex(obj, canvas);
     // 圆形文本特殊处理
-    if (idx > 0 && idx <= objs.length && objs[idx - 1] && objs[idx - 1].type === 11 && $("#circle_text_center").prop("checked")) {
+    // 安全检查：确保 objs[idx - 1] 存在且有 type 属性
+    if (idx > 0 && idx <= objs.length && objs[idx - 1] && typeof objs[idx - 1].type !== 'undefined' && objs[idx - 1].type === 11 && $("#circle_text_center").prop("checked")) {
         let pointer = { x: obj.left, y: obj.top };
         let distance = getDisdance(pointer.x, pointer.y, canvas.width / 2, canvas.height / 2);
         let angleDeg = getDeg(pointer);
@@ -865,9 +1062,18 @@ function initCanvasEvents() {
         // 7. 对象修改后
         currentCanvas.on('object:modified', function (event) {
             if (currentCanvas.getActiveObjects().length > 1) return;
+            // 跳过辅助线
+            if (event.target.isGuideLine) {
+                return;
+            }
             let idx = getIndex(event.target, currentCanvas);
             if (idx <= 0) return;
             let objData = objs[idx - 1];
+            // 安全检查：确保 objData 存在且有 type 属性
+            if (!objData || typeof objData.type === 'undefined') {
+                console.warn('objData is undefined or missing type at index', idx - 1);
+                return;
+            }
             let target = event.target;
 
             if ([3, 4, 10].includes(objData.type)) {
@@ -1011,14 +1217,23 @@ function getIndex(target, _canvas = null) {
 }
 
 function getType(target) {
+    // 如果是辅助线，返回 null
+    if (target.isGuideLine) {
+        return null;
+    }
     let temp_objs = canvas.getObjects();
     let i = 0;
     for (let res of temp_objs) {
         if (target == res) {
+            // 安全检查：确保 objs[i] 存在且有 type 属性
+            if (!objs[i] || typeof objs[i].type === 'undefined') {
+                return null;
+            }
             return objs[i].type;
         }
         i++;
     }
+    return null;
 }
 
 function checkName(name) {
@@ -1658,7 +1873,8 @@ function display_func(img1, img2, img3) {
     $('#component_type').text(language_str('bg')) //"背景"
     canvas1.discardActiveObject().renderAll()
     canvas2.discardActiveObject().renderAll()
-    let _objs1 = canvas1.getObjects()
+    // 过滤掉辅助线
+    let _objs1 = canvas1.getObjects().filter(obj => !obj.isGuideLine)
     let g1 = []
     let g3 = []
     let g5 = []
@@ -1670,6 +1886,12 @@ function display_func(img1, img2, img3) {
     let all_top = 0 //预览图顶裁剪
     for (let item of _objs1) {
         let idx = getIndex(item, canvas1)
+        
+        // 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
+        if (idx != 0 && (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined')) {
+            continue
+        }
+        
         //console.log("------");
         //console.log(item.getCoords());
         //console.log(getCoordsMinX(background_image.getCoords()));
@@ -1683,6 +1905,7 @@ function display_func(img1, img2, img3) {
             all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
         }
         g3.push(fabric.util.object.clone(item))
+        
         if (idx != 0 && (objs1[idx - 1].type == 10 || objs1[idx - 1].type == 4)) {
             continue //计数器 或 合成文字
         }
@@ -1761,7 +1984,8 @@ function display_func(img1, img2, img3) {
         top: black_top / zoom,
         left: black_left / zoom
     })
-    let _objs2 = canvas2.getObjects()
+    // 过滤掉辅助线
+    let _objs2 = canvas2.getObjects().filter(obj => !obj.isGuideLine)
     let g2 = []
     let g4 = []
     let g6 = []
@@ -1773,6 +1997,12 @@ function display_func(img1, img2, img3) {
     all_left = 0
     for (let item of _objs2) {
         let idx = getIndex(item, canvas2)
+        
+        // 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
+        if (idx != 0 && (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined')) {
+            continue
+        }
+        
         if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
             all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
         }
@@ -1780,6 +2010,7 @@ function display_func(img1, img2, img3) {
             all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
         }
         g4.push(fabric.util.object.clone(item))
+        
         if (idx != 0 && (objs2[idx - 1].type == 10 || objs2[idx - 1].type == 4)) {
             continue //黑色字或计数器 或 合成文字
         }
@@ -1990,7 +2221,8 @@ function output(callback = null, _save = save) {
             $('#component_type').text(language_str('bg')) //"背景"
             canvas1.discardActiveObject().renderAll()
             canvas2.discardActiveObject().renderAll()
-            let _objs1 = canvas1.getObjects()
+            // 过滤掉辅助线
+            let _objs1 = canvas1.getObjects().filter(obj => !obj.isGuideLine)
             let g1 = []
             let g3 = []
             let g5 = [] //黑色图层
@@ -2002,6 +2234,11 @@ function output(callback = null, _save = save) {
             let all_top = 0 //预览图顶裁剪
             for (let item of _objs1) {
                 let idx = getIndex(item, canvas1)
+                
+                // 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
+                if (idx != 0 && (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined')) {
+                    continue
+                }
                 //console.log("------");
                 //console.log(item.getCoords());
                 //console.log(getCoordsMinX(background_image.getCoords()));
@@ -2093,7 +2330,8 @@ function output(callback = null, _save = save) {
                 top: black_top / zoom,
                 left: black_left / zoom
             })
-            let _objs2 = canvas2.getObjects()
+            // 过滤掉辅助线
+            let _objs2 = canvas2.getObjects().filter(obj => !obj.isGuideLine)
             let g2 = []
             let g4 = []
             let g6 = [] //黑色图层
@@ -2105,6 +2343,11 @@ function output(callback = null, _save = save) {
             all_top = 0 //黑色顶裁剪
             for (let item of _objs2) {
                 let idx = getIndex(item, canvas2)
+                
+                // 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
+                if (idx != 0 && (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined')) {
+                    continue
+                }
                 if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
                     all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                 }
@@ -2220,9 +2463,17 @@ function output(callback = null, _save = save) {
             //op.backBlPic = url6;
             op.frontBlackPic = desEncrypt(url5)
             op.backBlackPic = desEncrypt(url6)
-            for (let item of _objs1) {
+            // 过滤掉辅助线
+            let filteredObjs1 = _objs1.filter(obj => !obj.isGuideLine)
+            for (let item of filteredObjs1) {
                 let idx = getIndex(item, canvas1)
                 if (idx == 0) continue //background-image
+                
+                // 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
+                if (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined') {
+                    continue
+                }
+                
                 let type = objs1[idx - 1].type
                 if (type == 2) {
                     //out_pic
@@ -2357,9 +2608,17 @@ function output(callback = null, _save = save) {
                 }
             }
             //obj2
-            for (let item of _objs2) {
+            // 过滤掉辅助线
+            let filteredObjs2 = _objs2.filter(obj => !obj.isGuideLine)
+            for (let item of filteredObjs2) {
                 let idx = getIndex(item, canvas2)
                 if (idx == 0) continue //background-image
+                
+                // 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
+                if (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined') {
+                    continue
+                }
+                
                 let type = objs2[idx - 1].type
                 if (type == 2) {
                     //out_pic

lib/design2/output.js

@@ -15,7 +15,8 @@ function display_func(img1, img2, img3) {
     $('#component_type').text(language_str('bg')) //"背景"
     canvas1.discardActiveObject().renderAll()
     canvas2.discardActiveObject().renderAll()
-    let _objs1 = canvas1.getObjects()
+    // 过滤掉辅助线
+    let _objs1 = canvas1.getObjects().filter(obj => !obj.isGuideLine)
     let g1 = []
     let g3 = []
     let g5 = []
@@ -25,8 +26,15 @@ function display_func(img1, img2, img3) {
     let black_top = 0 //黑色顶裁剪
     let all_left = 0 //预览图左裁剪
     let all_top = 0 //预览图顶裁剪
-    for (let item of _objs1) {
+    // 过滤掉辅助线
+    let list1 = _objs1.filter(obj => !obj.isGuideLine)
+    for (let item of list1) {
         let idx = getIndex(item, canvas1)
+        
+        // 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
+        if (idx != 0 && (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined')) {
+            continue
+        }
         //console.log("------");
         //console.log(item.getCoords());
         //console.log(getCoordsMinX(background_image.getCoords()));
@@ -119,7 +127,8 @@ function display_func(img1, img2, img3) {
         top: black_top / zoom,
         left: black_left / zoom
     })
-    let _objs2 = canvas2.getObjects()
+    // 过滤掉辅助线
+    let _objs2 = canvas2.getObjects().filter(obj => !obj.isGuideLine)
     let g2 = []
     let g4 = []
     let g6 = []
@@ -129,8 +138,15 @@ function display_func(img1, img2, img3) {
     black_left = 0
     all_top = 0
     all_left = 0
-    for (let item of _objs2) {
+    // 过滤掉辅助线
+    let filteredObjs2 = _objs2.filter(obj => !obj.isGuideLine)
+    for (let item of filteredObjs2) {
         let idx = getIndex(item, canvas2)
+        
+        // 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
+        if (idx != 0 && (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined')) {
+            continue
+        }
         if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
             all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
         }
@@ -350,7 +366,8 @@ function output(callback = null, _save = save) {
             $('#component_type').text(language_str('bg')) //"背景"
             canvas1.discardActiveObject().renderAll()
             canvas2.discardActiveObject().renderAll()
-            let _objs1 = canvas1.getObjects()
+            // 过滤掉辅助线
+            let _objs1 = canvas1.getObjects().filter(obj => !obj.isGuideLine)
             let g1 = []
             let g3 = []
             let g5 = [] //黑色图层
@@ -360,8 +377,14 @@ function output(callback = null, _save = save) {
             let black_top = 0 //黑色顶裁剪
             let all_left = 0 //预览图左裁剪
             let all_top = 0 //预览图顶裁剪
+            // _objs1 已经在上面过滤过辅助线了，直接使用
             for (let item of _objs1) {
                 let idx = getIndex(item, canvas1)
+                
+                // 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
+                if (idx != 0 && (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined')) {
+                    continue
+                }
                 //console.log("------");
                 //console.log(item.getCoords());
                 //console.log(getCoordsMinX(background_image.getCoords()));
@@ -454,7 +477,8 @@ function output(callback = null, _save = save) {
                 top: black_top / zoom,
                 left: black_left / zoom
             })
-            let _objs2 = canvas2.getObjects()
+            // 过滤掉辅助线
+            let _objs2 = canvas2.getObjects().filter(obj => !obj.isGuideLine)
             let g2 = []
             let g4 = []
             let g6 = [] //黑色图层
@@ -464,8 +488,14 @@ function output(callback = null, _save = save) {
             black_top = 0 //黑色顶裁剪
             all_left = 0 //黑色左裁剪
             all_top = 0 //黑色顶裁剪
+            // _objs2 已经在上面过滤过辅助线了，直接使用
             for (let item of _objs2) {
                 let idx = getIndex(item, canvas2)
+                
+                // 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
+                if (idx != 0 && (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined')) {
+                    continue
+                }
                 if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
                     all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                 }
@@ -582,8 +612,14 @@ function output(callback = null, _save = save) {
             //op.backBlPic = url6;
             op.frontBlackPic = desEncrypt(url5)
             op.backBlackPic = desEncrypt(url6)
+            // _objs1 已经在上面过滤过辅助线了，直接使用
             for (let item of _objs1) {
                 let idx = getIndex(item, canvas1)
+                
+                // 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
+                if (idx != 0 && (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined')) {
+                    continue
+                }
                 if (idx == 0) continue //background-image
                 let type = objs1[idx - 1].type
                 if (type == 2) {
@@ -719,8 +755,14 @@ function output(callback = null, _save = save) {
                 }
             }
             //obj2
+            // _objs2 已经在上面过滤过辅助线了，直接使用
             for (let item of _objs2) {
                 let idx = getIndex(item, canvas2)
+                
+                // 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
+                if (idx != 0 && (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined')) {
+                    continue
+                }
                 if (idx == 0) continue //background-image
                 let type = objs2[idx - 1].type
                 if (type == 2) {
@@ -933,9 +975,31 @@ function cleanupSrcFields(jsonObjects, objsArray) {
 }
 
 function saveAs(op1, callback) {
+    // 临时移除辅助线，保存后再恢复
+    let guideLines1 = []
+    let guideLines2 = []
+    canvas1.getObjects().forEach((obj, index) => {
+        if (obj.isGuideLine) {
+            guideLines1.push(obj)
+            canvas1.remove(obj)
+        }
+    })
+    canvas2.getObjects().forEach((obj, index) => {
+        if (obj.isGuideLine) {
+            guideLines2.push(obj)
+            canvas2.remove(obj)
+        }
+    })
+    
     let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
     let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
 
+    // 恢复辅助线
+    guideLines1.forEach(obj => canvas1.add(obj))
+    guideLines2.forEach(obj => canvas2.add(obj))
+    canvas1.renderAll()
+    canvas2.renderAll()
+
     // 清理不需要的 src 字段
     cleanupSrcFields(j.objects, objs1);
     cleanupSrcFields(b.objects, objs2);
@@ -969,9 +1033,31 @@ function saveAs(op1, callback) {
 }
 
 function save(op1, callback) {
+    // 临时移除辅助线，保存后再恢复
+    let guideLines1 = []
+    let guideLines2 = []
+    canvas1.getObjects().forEach((obj, index) => {
+        if (obj.isGuideLine) {
+            guideLines1.push(obj)
+            canvas1.remove(obj)
+        }
+    })
+    canvas2.getObjects().forEach((obj, index) => {
+        if (obj.isGuideLine) {
+            guideLines2.push(obj)
+            canvas2.remove(obj)
+        }
+    })
+    
     let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
     let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
 
+    // 恢复辅助线
+    guideLines1.forEach(obj => canvas1.add(obj))
+    guideLines2.forEach(obj => canvas2.add(obj))
+    canvas1.renderAll()
+    canvas2.renderAll()
+
     // 清理不需要的 src 字段
     cleanupSrcFields(j.objects, objs1);
     cleanupSrcFields(b.objects, objs2);

lib/design2/ui.js

@@ -2576,10 +2576,22 @@ function handleObjectSelected() {
         $('#component_type').text(language_str('bg')) //comfirm
         return
     }
+    
+    // 如果是辅助线，直接返回，不处理
+    if (select_obj.isGuideLine) {
+        return
+    }
+    
     let i = getIndex(select_obj)
     if (i != 0) {
         //不是背景
         --i
+        
+        // 安全检查：确保 objs[i] 存在且有 type 属性
+        if (!objs[i] || typeof objs[i].type === 'undefined') {
+            return
+        }
+        
         switch (objs[i].type) {
             case 1:
                 //console.log("图片");
@@ -2721,10 +2733,22 @@ canvas1.on('mouse:down', (e) => {
     canvas = canvas1;
     objs = objs1;
     let select_obj = canvas.getActiveObject()
+    
+    // 如果是辅助线，直接返回，不处理
+    if (select_obj && select_obj.isGuideLine) {
+        return
+    }
+    
     let i = getIndex(select_obj, canvas)
     if (i != 0) {
         //不是背景
         --i
+        
+        // 安全检查：确保 objs[i] 存在且有 type 属性
+        if (!objs[i] || typeof objs[i].type === 'undefined') {
+            return
+        }
+        
         switch (objs[i].type) {
             case 1:
                 $('#component_type').text(language_str('img'))
@@ -2811,8 +2835,20 @@ canvas1.on('object:modified', function (event) {
     if (canvas1.getActiveObjects().length > 1) {
         return
     }
+    
+    // 跳过辅助线
+    if (event.target.isGuideLine) {
+        return
+    }
+    
     let idx = getIndex(event.target, canvas1);
     if (idx <= 0) return;
+    
+    // 安全检查：确保 objs[idx - 1] 存在且有 type 属性
+    if (!objs[idx - 1] || typeof objs[idx - 1].type === 'undefined') {
+        return
+    }
+    
     if (objs[idx - 1].type == 3) {
         event.target.fontSize *= event.target.scaleX
         event.target.fontSize = event.target.fontSize.toFixed(0)
@@ -3011,10 +3047,22 @@ canvas2.on('mouse:down', (e) => {
     canvas = canvas2;
     objs = objs2;
     let select_obj = canvas.getActiveObject()
+    
+    // 如果是辅助线，直接返回，不处理
+    if (select_obj && select_obj.isGuideLine) {
+        return
+    }
+    
     let i = getIndex(select_obj, canvas)
     if (i != 0) {
         //不是背景
         --i
+        
+        // 安全检查：确保 objs[i] 存在且有 type 属性
+        if (!objs[i] || typeof objs[i].type === 'undefined') {
+            return
+        }
+        
         switch (objs[i].type) {
             case 1:
                 $('#component_type').text(language_str('img'))
@@ -3097,8 +3145,20 @@ canvas2.on('object:modified', function (event) {
     if (canvas.getActiveObjects().length > 1) {
         return
     }
+    
+    // 跳过辅助线
+    if (event.target.isGuideLine) {
+        return
+    }
+    
     let idx = getIndex(event.target, canvas2);
     if (idx <= 0) return;
+    
+    // 安全检查：确保 objs[idx - 1] 存在且有 type 属性
+    if (!objs[idx - 1] || typeof objs[idx - 1].type === 'undefined') {
+        return
+    }
+    
     if (objs[idx - 1].type == 3) {
         event.target.fontSize *= event.target.scaleX
         event.target.fontSize = event.target.fontSize.toFixed(0)

package.json

@@ -3,49 +3,97 @@
   "version": "2.3.017",
   "description": "tools of design soon files",
   "main": "main.js",
-  "author": "Jerry <jerry@cardsoon.com>",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/cello847/soondesign"
-  },
-  "homepage": "https://soondesign.cardsoon.com",
-  "bugs": {
-    "url": "https://github.com/cello847/soondesign/issues"
-  },
   "scripts": {
-    "start": "electron-forge start",
+    "start": "electron .",
-    "package:x64": "electron-forge package --arch=x64",
+    "build": "electron-builder",
-    "package:arm64": "electron-forge package --arch=arm64",
+    "build:win": "electron-builder --win --x64",
-    "package:universal": "electron-forge package --arch=universal" 
+    "build:mac": "electron-builder --mac --x64",
-   },
+    "build:linux": "electron-builder --linux --x64",
+    "build:all": "electron-builder -mwl"
+  },
+    "build": {
+    "productName": "SoonDesign",
+    "appId": "com.SoonDesign",
+    "copyright": "",
+    "directories": {
+      "output": "build"
+    },
+    "extraFiles": [
+      "lib"
+    ],
+    "nsis": {
+      "oneClick": false,
+      "allowElevation": true,
+      "allowToChangeInstallationDirectory": true,
+      "installerIcon": "public/images/favicon.ico",
+      "uninstallerIcon": "public/images/favicon.ico",
+      "installerHeaderIcon": "public/images/favicon.ico",
+      "createDesktopShortcut": true,
+      "createStartMenuShortcut": true
+    },
+    "fileAssociations": [
+      {
+        "name": "SoonDesign file",
+        "ext": "soon",
+        "icon": "public/images/favicon.ico",
+        "description": "SoonDesign file associations"
+      }
+    ],
+    "asar": true,
+    "asarUnpack": [
+      "lib/**"
+    ],
+    "win": {
+      "icon":  "public/images/favicon.ico",
+      "requestedExecutionLevel": "asInvoker",
+      "target": [
+        {
+          "target": "nsis",
+          "arch": [
+            "x64"
+          ]
+        }
+      ]
+    },
+    "mac": {
+      "target": [
+        { "target": "dmg", "arch": ["x64"] },
+        { "target": "zip", "arch": ["x64"] }
+      ],
+      "category": "public.app-category.utilities",
+      "icon": "public/images/favicon.icns"
+    },
+    "linux": {
+      "target": [
+        { "target": "AppImage", "arch": ["x64"] },
+        { "target": "deb", "arch": ["x64"] }
+      ],
+      "category": "Utility",
+      "icon": "public/images/IconA256.png",
+      "desktop": {
+        "Name": "SoonDesign",
+        "Comment": "tools of design soon files"
+      }
+    }
+  },
   "electronPackagerConfig": {
     "packageManager": "npm",
-    "icon": "./public/images/favicon.icns"
+    "icon":  "./public/images/favicon.ico"
   },
-  "config": {
+  
-      "forge": {
+  "repository": "",
-        "packagerConfig": {
-          "icon": "./public/images/favicon.icns",
-          "asar": true,
-          "extraResource": [
-            "./help"
-          ],
-          "osxUniversal": {
-        }
-        }
-      }
-    },
   "keywords": [
-    "SoonDesign",
+    "Electron",
-    "soon",
+    "quick",
     "start",
     "tutorial",
     "demo"
   ],
+  "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@electron-forge/cli": "^6.2.0",
+    "electron": "^25.0.0",
-    "electron": "^25.0.0"
+    "electron-builder": "^23.3.3"
   },
   "dependencies": {
     "@electron/remote": "^2.0.8",
@@ -58,8 +106,5 @@
     "less": "^4.1.2",
     "less-loader": "^10.2.0",
     "save": "^2.9.0"
-  },
-  "optionalDependencies": {
-    "create-dmg": "^6.1.0"
   }
 }