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

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

{"version":3,"file":"svg-base.vue2.mjs","sources":["../../../../../../src/components/design/svg/svg-base.vue"],"sourcesContent":["<template>\n    <svg ref=\"chartRef\" class=\"my-print-chart\">\n        <path class=\"u-path\" d=\"\" />\n        \n        <template v-if=\"displayDesign(element)\">\n            <line class=\"u-line\" v-for=\"(index) in svgOptions.controlLine\" :key=\"index\"/>\n            \n            <g class=\"u-point\" style=\"display: none\" v-for=\"(index) in svgOptions.allPoint\" :key=\"index\">\n                <circle r=\"3\" />\n            </g>\n            <g class=\"uv-point\" style=\"display: none\" v-for=\"(index) in svgOptions.virtualPoint\" :key=\"index\">\n                <circle r=\"3\" />\n            </g>\n        </template>\n    </svg>\n</template>\n\n<script setup lang=\"ts\">\nimport { onMounted, ref, watch } from 'vue-demi';\n\nimport * as d3Array from 'd3-array';\nimport * as d3Selection from 'd3-selection';\nimport * as d3Drag from 'd3-drag';\nimport { Line, MyElement, Point, PointClick, PointLabel } from '@myprint/design/types/entity';\nimport { dist, updateSvg } from '@myprint/design/utils/svgUtil';\nimport { Path } from 'd3-path';\nimport { elementHandleHandleStatusList } from '@myprint/design/constants/common';\nimport { D3DragEvent } from '@myprint/design/types/d3Type';\nimport { displayDesign } from '@myprint/design/utils/elementUtil';\n\nconst props = withDefaults(defineProps<{\n    element?: MyElement,\n    svgOptions: any,\n    draw: (chart: any) => void,\n    dragStart?: (subject: PointLabel) => void,\n    dragIng?: (subject: PointLabel, event: D3DragEvent, dx: number, dy: number) => void,\n    dragEnd?: (subject: PointLabel) => void,\n    changeSize?: () => boolean,\n    doubleClick?: (subject: PointLabel) => void,\n}>(), {\n    element: () => ({} as MyElement),\n    svgOptions: () => {\n        return {\n            width: 0,\n            height: 0,\n            controlLine: [] as Array<Line>,\n            centerPoint: {} as Point,\n            controlPointScale: {} as PointLabel,\n            controlPointResize: {} as PointLabel,\n            controlPointEndDragStart: {} as Point,\n            // svg 形状点\n            allPoint: [] as Array<PointLabel>,\n            virtualPoint: [] as Array<PointLabel>,\n            drawAuxiliary: false\n        };\n    },\n    draw: () => {\n    },\n    dragStart: () => {\n    },\n    dragIng: (_subject: PointLabel, _event: D3DragEvent, _dx: number, _dy: number) => {\n    },\n    dragEnd: () => {\n    },\n    doubleClick: () => {\n    },\n    changeSize: () => {\n        return false;\n    }\n});\n\nlet path: Path;\n\nconst chartRef = ref();\nlet subject: PointLabel = undefined!, dx, dy;\nlet startX, startY;\nlet dragFun;\nlet lastClickPoint: PointClick = undefined!;\n\nwatch(() => props.element.runtimeOption.status, (n, _o) => {\n    // console.log(o, n)\n    props.svgOptions.drawAuxiliary = elementHandleHandleStatusList.includes(n) && !props.element.lock;\n    updateSvg(chartRef.value, props.svgOptions, props.draw);\n    draggable();\n});\n\nwatch(() => props.element.lock, (_n, _o) => {\n    props.svgOptions.drawAuxiliary = elementHandleHandleStatusList.includes(props.element.runtimeOption.status) && !props.element.lock;\n    updateSvg(chartRef.value, props.svgOptions, props.draw);\n    draggable();\n});\n\nwatch([() => props.element.width, () => props.element.height], (_n, _o) => {\n    const renderIs = props.changeSize();\n    if (renderIs) {\n        updateSvg(chartRef.value, props.svgOptions, props.draw);\n    }\n});\n\nwatch([() => props.element.option.color, () => props.element.option.background, () => props.element.option.opacity], (_n, _o) => {\n    updateSvg(chartRef.value, props.svgOptions, props.draw);\n});\nonMounted(() => {\n    props.svgOptions.element = props.element;\n    dragFun = d3Drag\n        .drag()\n        .subject(dragSubject)\n        .on('start', event => {\n            if (subject) {\n                d3Selection.select(chartRef.value).style('cursor', 'grabbing');\n                dx = subject.x - event.x;\n                dy = subject.y - event.y;\n                props.dragStart(subject);\n                \n                startX = event.x;\n                startY = event.y;\n                \n                if (subject.type == 'virtual') {\n                    const insertIndex = subject.insertIndex;\n                    subject.insertIndex = undefined!;\n                    subject.type = undefined!;\n                    props.svgOptions.allPoint.splice(insertIndex, 0, subject);\n                    props.svgOptions.linePoints.splice(insertIndex, 0, subject);\n                    updateSvg(chartRef.value, props.svgOptions, props.draw);\n                }\n            }\n        })\n        .on('drag', event => {\n            if (subject) {\n                props.dragIng(subject, event, dx, dy);\n            }\n        })\n        .on('end', (event) => {\n            if (subject) {\n                if (startX == event.x && startY == event.y) {\n                    // console.log(\"click\");\n                    // props.dragEnd(subject!)\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.doubleClick(subject!);\n                            lastClickPoint = undefined!;\n                        } else {\n                            lastClickPoint = {\n                                x: startX,\n                                y: startY,\n                                clickTimestamp: timestamp\n                            };\n                        }\n                    }\n                } else {\n                    props.dragEnd(subject!);\n                }\n                // event\n            }\n            d3Selection.select(chartRef.value).style('cursor', null);\n            \n            updateSvg(chartRef.value, props.svgOptions, props.draw);\n        })\n        .on('start.render drag.render end.render', () =>\n            updateSvg(chartRef.value, props.svgOptions, props.draw)\n        );\n    updateSvg(chartRef.value, props.svgOptions, props.draw);\n});\n\nfunction draggable() {\n    if (!props.svgOptions.drawAuxiliary) {\n        d3Selection.select(chartRef.value)\n            .on('mousemove', null)\n            .on('.drag', null);\n        d3Selection.select(chartRef.value).style('cursor', null);\n    } else {\n        d3Selection.select(chartRef.value)\n            .on('mousemove', event => dragSubject({ sourceEvent: event }))\n            .call(dragFun);\n    }\n}\n\nfunction dragSubject(event) {\n    // 拖动开始判断是哪个\n    // console.log(event)\n    // 拖动的鼠标的位置\n    if (!props.svgOptions.allPoint) {\n        return null;\n    }\n    const p = d3Selection.pointer(event.sourceEvent, chartRef.value);\n    // console.log(p)\n    // 找到的最近的点\n    subject = d3Array.least(props.svgOptions.allPoint, (a, b) => dist(p, a) - dist(p, b))!;\n    // console.log(subject)\n    // 拖动范围\n    if (dist(p, subject) > 12) subject = undefined!;\n    \n    if (subject == null && props.svgOptions.virtualPoint && props.svgOptions.virtualPoint.length > 0) {\n        subject = d3Array.least(props.svgOptions.virtualPoint, (a, b) => dist(p, a) - dist(p, b))!;\n        if (dist(p, subject) > 12) subject = undefined!;\n    }\n    \n    if (subject)\n        d3Selection.select(chartRef.value)\n            .style('cursor', 'hand')\n            .style('cursor', 'grab');\n    else d3Selection.select(chartRef.value).style('cursor', null);\n    return subject;\n}\n</script>\n"],"names":[],"mappings":"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"}