label-print-design/es/components/design/svg/draw-panel.vue2.mjs.map

操作简单，组件丰富的一站式打印解决方案打印设计器

{"version":3,"file":"draw-panel.vue2.mjs","sources":["../../../../../../src/components/design/svg/draw-panel.vue"],"sourcesContent":["<template>\n    <img alt=\"\" class=\"my-print-draw_panel_img\" v-if=\"displayPreview(element)\" :src=\"data.imgSrc\">\n    <canvas ref=\"canvasRef\" class=\"my-print-draw_panel\" />\n</template>\n\n<script setup lang=\"ts\">\nimport * as d3Shape from 'd3-shape';\nimport { CurveGenerator } from 'd3-shape';\nimport * as d3Selection from 'd3-selection';\nimport * as d3Drag from 'd3-drag';\nimport { DragBehavior, DraggedElementBaseType } from 'd3-drag';\nimport { onMounted, reactive, ref, watch } from 'vue-demi';\nimport { MyElement, PointClick } from '@myprint/design/types/entity';\nimport { unit2px } from '@myprint/design/utils/devicePixelRatio';\nimport { douglasPeucker } from '@myprint/design/utils/utils';\nimport { checkInput, moveableEditing } from '@myprint/design/plugins/moveable/moveable';\nimport { displayPreview, getRecursionParentPanel } from '@myprint/design/utils/elementUtil';\n\nconst canvasRef = ref();\nconst data = reactive({\n    context: {} as CanvasRenderingContext2D,\n    curve: {} as CurveGenerator,\n    strokes: [] as Array<Array<number>>,\n    redo: [],\n    imgSrc: '',\n    // stroke: 'black',\n    strokeWidth: 5,\n    dragFun: {} as DragBehavior<DraggedElementBaseType, any, any>,\n    doubleClick: {} as DragBehavior<DraggedElementBaseType, any, any>\n} as any);\nlet startX: number, startY: number;\nlet lastClickPoint: PointClick = undefined!;\n\nconst props = withDefaults(defineProps<{\n    element?: MyElement\n}>(), {\n    element: () => ({} as MyElement)\n});\n\nwatch(() => props.element.runtimeOption.status, (n, _o) => {\n    if (n == 'HANDLE_ED') {\n        // 监听双击事件\n        d3Selection.select(data.context.canvas)\n            .on('click', (event) => {\n                startX = event.x;\n                startY = event.y;\n                const timestamp = Date.now();\n                if (lastClickPoint == undefined) {\n                    lastClickPoint = {\n                        x: startX,\n                        y: startY,\n                        clickTimestamp: timestamp\n                    };\n                } else {\n                    if (startX == lastClickPoint.x && startY == lastClickPoint.y && timestamp - lastClickPoint.clickTimestamp < 350) {\n                        props.element.runtimeOption.status = 'HANDLE_EDIT_ING';\n                        \n                        checkInput();\n                        \n                        moveableEditing();\n                        \n                        // console.log('double-click');\n                        lastClickPoint = undefined!;\n                    } else {\n                        lastClickPoint = {\n                            x: startX,\n                            y: startY,\n                            clickTimestamp: timestamp\n                        };\n                    }\n                }\n            });\n    } else if (n == 'HANDLE_EDIT_ING') {\n        d3Selection.select(data.context.canvas)\n            .call(data.dragFun)\n        ;\n    } else {\n        d3Selection.select(data.context.canvas)\n            .on('.drag', null)\n            .on('click', null);\n    }\n    render();\n});\n\nwatch([() => props.element.width, () => props.element.height], (_n, _o) => {\n    canvasRef.value.width = unit2px(props.element.width, getRecursionParentPanel(props.element)) * 2;\n    canvasRef.value.height = unit2px(props.element.height, getRecursionParentPanel(props.element)) * 2;\n    render();\n});\nwatch([() => props.element.option.borderAll], (_n, _o) => {\n    render();\n});\nwatch([() => props.element.data], (_n, _o) => {\n    initData();\n    render();\n});\n\nfunction initData() {\n    const list = JSON.parse(props.element.data);\n    data.strokes = [];\n    for (let listElement of list) {\n        listElement.data['stroke'] = listElement['stroke'];\n        listElement.data['strokeWidth'] = listElement['strokeWidth'];\n        data.strokes.push(listElement.data);\n    }\n}\n\nif (props.element.data) {\n    initData();\n}\n\nonMounted(() => {\n    data.context = canvasRef.value.getContext('2d');\n    data.curve = d3Shape.curveBasis(data.context);\n    \n    data.context.lineJoin = 'round';\n    data.context.lineCap = 'round';\n    \n    data.dragFun = d3Drag.drag()\n        .container(data.context.canvas)\n        .subject(dragsubject)\n        .on('start drag', dragged)\n        .on('end', darggend)\n        .on('start.render drag.render', render);\n    \n    \n    canvasRef.value.width = props.element.runtimeOption.width * 2;\n    canvasRef.value.height = props.element.runtimeOption.height * 2;\n    \n    render();\n});\n\nfunction darggend() {\n    // 调用路径压缩函数\n    const pathList: any[] = [];\n    for (let stroke of data.strokes) {\n        const compressedPath = douglasPeucker(stroke, 1.0);\n        \n        pathList.push({\n            stroke: stroke['stroke'],\n            strokeWidth: stroke['strokeWidth'],\n            data: compressedPath\n        });\n    }\n    props.element.data = JSON.stringify(pathList);\n    // console.log(data.strokes)\n    // console.log(props.element.data)\n    // console.log(\"Original Path:\", originalPath);\n    // console.log(\"Compressed Path:\", compressedPath);\n}\n\nfunction render() {\n    // console.log(123)\n    data.context.clearRect(0, 0, props.element.runtimeOption.width * 2, props.element.runtimeOption.height * 2);\n    \n    if (props.element.option.background) {\n        data.context.fillStyle = props.element.option.background;\n        data.context.fillRect(0, 0, props.element.runtimeOption.width * 2, props.element.runtimeOption.height * 2);\n    }\n    \n    if (props.element.option.borderAll) {\n        data.context.strokeStyle = 'black';\n        data.context.lineWidth = 2;\n        data.context.strokeRect(1, 1, props.element.runtimeOption.width * 2 - 2.5, props.element.runtimeOption.height * 2 - 2.5);\n    }\n    for (const stroke of data.strokes) {\n        data.context.strokeStyle = stroke['stroke'];\n        data.context.lineWidth = stroke['strokeWidth'];\n        data.context.beginPath();\n        data.curve.lineStart();\n        \n        for (const point of stroke) {\n            data.curve.point(point[0], point[1]);\n        }\n        \n        if (stroke.length === 1) data.curve.point(stroke[0][0], stroke[0][1]);\n        data.curve.lineEnd();\n        data.context.stroke();\n    }\n    \n    data.imgSrc = canvasRef.value.toDataURL();\n    // data.context.canvas.value = data.strokes;\n    // context.canvas.dispatchEvent(new CustomEvent(\"input\"));\n}\n\nfunction dragsubject() {\n    const currentStroke = [];\n    currentStroke['stroke'] = props.element.option.color ? props.element.option.color : 'black';\n    currentStroke['strokeWidth'] = data.strokeWidth;\n    data.strokes.push(currentStroke);\n    data.redo.length = 0;\n    return currentStroke;\n}\n\n// Add to the stroke when dragging.\nfunction dragged({ subject, x, y }) {\n    subject.push([x * 2, y * 2]);\n}\n\n// function _drawer() {\n//\n//   // data.context.canvas.undo = () => {\n//   //   if (strokes.length === 0) return;\n//   //   redo.push(strokes.pop());\n//   //   render();\n//   // };\n//   //\n//   // data.context.canvas.redo = stroke => {\n//   //   if (redo.length === 0) return;\n//   //   strokes.push(redo.pop());\n//   //   render();\n//   // };\n//\n//   // Create a new empty stroke at the start of a drag gesture.\n//\n//\n// }\n</script>\n"],"names":[],"mappings":"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"}