label-print-design/es/components/design/svg/svg-bezier-curve-three.vue2.mjs.map

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

{"version":3,"file":"svg-bezier-curve-three.vue2.mjs","sources":["../../../../../../src/components/design/svg/svg-bezier-curve-three.vue"],"sourcesContent":["<template>\n    <svg-base\n        :element=\"element\"\n        :svgOptions=\"svgOptions\"\n        :draw=\"draw\"\n        :dragStart=\"dragStart\"\n        :dragIng=\"dragIng\"\n        :dragEnd=\"dragEnd\"\n    />\n</template>\n\n<script setup lang=\"ts\">\nimport { reactive } from 'vue-demi';\n\nimport * as d3Path from 'd3-path';\nimport { Path } from 'd3-path';\nimport { Line, MyElement, Point, PointLabel } from '@myprint/design/types/entity';\nimport { unit2px } from '@myprint/design/utils/devicePixelRatio';\nimport { moveableDragOffsetResize } from '@myprint/design/plugins/moveable/moveable';\nimport SvgBase from '@myprint/design/components/design/svg/svg-base.vue';\nimport { bezier3 } from '@myprint/design/utils/bezierUtil';\nimport { stringify } from '@myprint/design/utils/utils';\nimport { computeLineAngle, rotatePoint } from '@myprint/design/utils/svgUtil';\nimport { getRecursionParentPanel } from '@myprint/design/utils/elementUtil';\n\nconst props = withDefaults(defineProps<{\n    element?: MyElement\n}>(), {\n    element: () => ({} as MyElement)\n});\n\nlet path: Path;\nlet orgPoint;\n\nconst svgOptions = reactive({\n    width: 0,\n    height: 0,\n    rotateControl: {},\n    centerPoint: {} as Point,\n    // 辅助线\n    controlLine: [] as Array<Line>,\n    \n    rotateLineStart: {} as PointLabel,\n    rotateLineEnd: {} as PointLabel,\n    rotateLineEndDragPoint: {} as PointLabel,\n    // controlPointLineStart: {} as PointLabel,\n    // controlPointLineEnd: {} as PointLabel,\n    controlPointList: [] as Array<PointLabel>,\n    // svg 形状点\n    linePoints: [] as PointLabel[],\n    allPoint: [] as Array<PointLabel>,\n    drawAuxiliary: false\n});\n\nsvgOptions.width = unit2px(props.element.width, getRecursionParentPanel(props.element));\nsvgOptions.height = unit2px(props.element.height, getRecursionParentPanel(props.element));\n// console.log(svgOptions)\ninitPoint();\n\nfunction draw() {\n    path = d3Path.path() as Path;\n    \n    path.moveTo(svgOptions.linePoints[0].x, svgOptions.linePoints[0].y);\n    path.bezierCurveTo(svgOptions.controlPointList[0].x, svgOptions.controlPointList[0].y,\n        svgOptions.controlPointList[1].x, svgOptions.controlPointList[1].y,\n        svgOptions.linePoints[1].x, svgOptions.linePoints[1].y);\n    return path;\n}\n\nfunction initPoint() {\n    // svgOptions.controlPointLineStart = {x: 0, y: svgOptions.height / 2, label: \"scale\"}\n    // svgOptions.controlPointLineEnd = {x: svgOptions.width, y: svgOptions.height / 2, label: \"resize\"}\n    // svgOptions.controlPointList = [\n    //   {x: svgOptions.width / 3, y: svgOptions.height, label: \"resize\"},\n    //   {x: svgOptions.width / 3 * 2, y: 0, label: \"resize\"},\n    // ]\n    // svgOptions.linePoints = [svgOptions.controlPointLineStart, svgOptions.controlPointLineEnd]\n    \n    const data = JSON.parse(props.element.data);\n    svgOptions.linePoints = data.points;\n    svgOptions.controlPointList = data.controlPoints;\n    for (let controlPoint of svgOptions.controlPointList) {\n        controlPoint.type = 'control';\n    }\n    \n    svgOptions.rotateLineStart = { x: svgOptions.width / 2, y: svgOptions.height / 2 } as PointLabel;\n    svgOptions.rotateLineEnd = { x: svgOptions.width / 2, y: -20, type: 'rotate' } as PointLabel;\n    \n    svgOptions.allPoint = [...svgOptions.linePoints, ...svgOptions.controlPointList, svgOptions.rotateLineEnd];\n    \n    svgOptions.controlLine = [{ start: svgOptions.linePoints[0], end: svgOptions.controlPointList[0] },\n        { start: svgOptions.linePoints[1], end: svgOptions.controlPointList[1] },\n        { start: svgOptions.rotateLineStart, end: svgOptions.rotateLineEnd }];\n}\n\nfunction dragStart(subject: PointLabel) {\n    if (subject.type == 'rotate') {\n        orgPoint = JSON.parse(JSON.stringify(svgOptions.allPoint));\n        svgOptions.rotateLineEndDragPoint = { ...svgOptions.rotateLineEnd };\n    }\n}\n\nfunction dragIng(subject: PointLabel, event, dx, dy) {\n    subject.x = event.x + dx;\n    subject.y = event.y + dy;\n    \n    if (subject.type == 'rotate') {\n        const angle = computeLineAngle({\n                start: svgOptions.rotateLineStart,\n                end: svgOptions.rotateLineEndDragPoint\n            },\n            { start: svgOptions.rotateLineStart, end: { x: subject.x, y: subject.y } });\n        // console.log(angle)\n        const centerX = svgOptions.width / 2;\n        const centerY = svgOptions.height / 2;\n        for (let i = 0; i < 4; i++) {\n            let point = orgPoint[i];\n            const po = rotatePoint(centerX, centerY, point.x, point.y, angle);\n            // console.log(po)\n            svgOptions.allPoint[i].x = po.x;\n            svgOptions.allPoint[i].y = po.y;\n        }\n    }\n}\n\nfunction dragEnd() {\n    const bezierProperties = bezier3(svgOptions.allPoint[0], svgOptions.allPoint[2], svgOptions.allPoint[3], svgOptions.allPoint[1]);\n    // console.log(bezierProperties)\n    // console.log(\"Bezier curve height: \" + bezierProperties.height);\n    // console.log(\"Lowest point on Bezier curve: \" + bezierProperties.minY);\n    // console.log(\"Highest point on Bezier curve: \" + bezierProperties.maxY);\n    // const rect = computedShapeBound(svgOptions.linePoints)\n    // console.log(bezierProperties)\n    moveableDragOffsetResize(bezierProperties.x, bezierProperties.y, bezierProperties.width, bezierProperties.height, props.element);\n    \n    svgOptions.width = bezierProperties.width;\n    svgOptions.height = bezierProperties.height;\n    // props.element.width = rect.width\n    // 偏移svg\n    for (let allPointElement of svgOptions.allPoint) {\n        allPointElement.x -= bezierProperties.x;\n        allPointElement.y -= bezierProperties.y;\n    }\n    \n    svgOptions.rotateLineStart.x = bezierProperties.width / 2;\n    svgOptions.rotateLineStart.y = bezierProperties.height / 2;\n    svgOptions.rotateLineEnd.x = bezierProperties.width / 2;\n    svgOptions.rotateLineEnd.y = -20;\n    \n    props.element.data = stringify({\n        points: svgOptions.linePoints,\n        controlPoints: svgOptions.controlPointList\n    }, 'type');\n}\n\n</script>\n"],"names":[],"mappings":"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"}