From cef9024de17723ce4f4e77b5d6886a9ead9b2a69 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Fri, 6 Oct 2023 15:27:05 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E8=99=9A=E7=BA=BF=E7=BA=BF=E6=9D=A1/?= =?UTF-8?q?=E8=BE=B9=E6=A1=86=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/components/element/ElementOutline.vue | 4 ++-- .../ImageElement/ImageOutline/ImageEllipseOutline.vue | 4 ++-- .../ImageElement/ImageOutline/ImagePolygonOutline.vue | 4 ++-- .../element/ImageElement/ImageOutline/ImageRectOutline.vue | 4 ++-- .../components/element/LineElement/BaseLineElement.vue | 6 +++++- src/views/components/element/LineElement/index.vue | 6 +++++- .../components/element/ShapeElement/BaseShapeElement.vue | 4 ++-- src/views/components/element/ShapeElement/index.vue | 4 ++-- src/views/components/element/hooks/useElementOutline.ts | 7 +++++++ 9 files changed, 29 insertions(+), 14 deletions(-) diff --git a/src/views/components/element/ElementOutline.vue b/src/views/components/element/ElementOutline.vue index a5ec35f4..569bc0d3 100644 --- a/src/views/components/element/ElementOutline.vue +++ b/src/views/components/element/ElementOutline.vue @@ -14,7 +14,7 @@ :d="`M0,0 L${width},0 L${width},${height} L0,${height} Z`" :stroke="outlineColor" :stroke-width="outlineWidth" - :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" + :stroke-dasharray="strokeDashArray" > @@ -33,8 +33,8 @@ const props = defineProps<{ const { outlineWidth, - outlineStyle, outlineColor, + strokeDashArray, } = useElementOutline(toRef(props, 'outline')) diff --git a/src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue b/src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue index f4fbb359..db432676 100644 --- a/src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue +++ b/src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue @@ -17,7 +17,7 @@ :ry="height / 2" :stroke="outlineColor" :stroke-width="outlineWidth" - :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" + :stroke-dasharray="strokeDashArray" > @@ -35,8 +35,8 @@ const props = defineProps<{ const { outlineWidth, - outlineStyle, outlineColor, + strokeDashArray, } = useElementOutline(toRef(props, 'outline')) diff --git a/src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue b/src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue index 47a66a5c..c071b282 100644 --- a/src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue +++ b/src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue @@ -14,7 +14,7 @@ :d="createPath(width, height)" :stroke="outlineColor" :stroke-width="outlineWidth" - :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" + :stroke-dasharray="strokeDashArray" > @@ -33,8 +33,8 @@ const props = defineProps<{ const { outlineWidth, - outlineStyle, outlineColor, + strokeDashArray, } = useElementOutline(toRef(props, 'outline')) diff --git a/src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue b/src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue index b972b19d..e29b6baf 100644 --- a/src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue +++ b/src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue @@ -17,7 +17,7 @@ :height="height" :stroke="outlineColor" :stroke-width="outlineWidth" - :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" + :stroke-dasharray="strokeDashArray" > @@ -38,8 +38,8 @@ const props = withDefaults(defineProps<{ const { outlineWidth, - outlineStyle, outlineColor, + strokeDashArray, } = useElementOutline(toRef(props, 'outline')) diff --git a/src/views/components/element/LineElement/BaseLineElement.vue b/src/views/components/element/LineElement/BaseLineElement.vue index 87164ca8..481f50e2 100644 --- a/src/views/components/element/LineElement/BaseLineElement.vue +++ b/src/views/components/element/LineElement/BaseLineElement.vue @@ -71,7 +71,11 @@ const svgHeight = computed(() => { return height < 24 ? 24 : height }) -const lineDashArray = computed(() => props.elementInfo.style === 'dashed' ? '10, 5' : '0, 0') +const lineDashArray = computed(() => { + if (props.elementInfo.style !== 'dashed') return '0 0' + const size = props.elementInfo.width + return size <= 8 ? `${size * 5} ${size * 2.5}` : `${size * 5} ${size * 1.5}` +}) const path = computed(() => { return getLineElementPath(props.elementInfo) diff --git a/src/views/components/element/LineElement/index.vue b/src/views/components/element/LineElement/index.vue index fae1b086..392d3a68 100644 --- a/src/views/components/element/LineElement/index.vue +++ b/src/views/components/element/LineElement/index.vue @@ -93,7 +93,11 @@ const svgHeight = computed(() => { return height < 24 ? 24 : height }) -const lineDashArray = computed(() => props.elementInfo.style === 'dashed' ? '10 6' : '0 0') +const lineDashArray = computed(() => { + if (props.elementInfo.style !== 'dashed') return '0 0' + const size = props.elementInfo.width + return size <= 8 ? `${size * 5} ${size * 2.5}` : `${size * 5} ${size * 1.5}` +}) const path = computed(() => { return getLineElementPath(props.elementInfo) diff --git a/src/views/components/element/ShapeElement/BaseShapeElement.vue b/src/views/components/element/ShapeElement/BaseShapeElement.vue index 8cb9c745..2228f2ba 100644 --- a/src/views/components/element/ShapeElement/BaseShapeElement.vue +++ b/src/views/components/element/ShapeElement/BaseShapeElement.vue @@ -47,7 +47,7 @@ :fill="elementInfo.gradient ? `url(#base-gradient-${elementInfo.id})` : elementInfo.fill" :stroke="outlineColor" :stroke-width="outlineWidth" - :stroke-dasharray="outlineStyle === 'dashed' ? '10 5' : '0 0'" + :stroke-dasharray="strokeDashArray" > @@ -74,7 +74,7 @@ const props = defineProps<{ }>() const outline = computed(() => props.elementInfo.outline) -const { outlineWidth, outlineStyle, outlineColor } = useElementOutline(outline) +const { outlineWidth, outlineColor, strokeDashArray } = useElementOutline(outline) const shadow = computed(() => props.elementInfo.shadow) const { shadowStyle } = useElementShadow(shadow) diff --git a/src/views/components/element/ShapeElement/index.vue b/src/views/components/element/ShapeElement/index.vue index 062181d8..24460fe1 100644 --- a/src/views/components/element/ShapeElement/index.vue +++ b/src/views/components/element/ShapeElement/index.vue @@ -53,7 +53,7 @@ :fill="elementInfo.gradient ? `url(#editabel-gradient-${elementInfo.id})` : elementInfo.fill" :stroke="outlineColor" :stroke-width="outlineWidth" - :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" + :stroke-dasharray="strokeDashArray" > @@ -111,7 +111,7 @@ const handleSelectElement = (e: MouseEvent | TouchEvent, canMove = true) => { } const outline = computed(() => props.elementInfo.outline) -const { outlineWidth, outlineStyle, outlineColor } = useElementOutline(outline) +const { outlineWidth, outlineColor, strokeDashArray } = useElementOutline(outline) const shadow = computed(() => props.elementInfo.shadow) const { shadowStyle } = useElementShadow(shadow) diff --git a/src/views/components/element/hooks/useElementOutline.ts b/src/views/components/element/hooks/useElementOutline.ts index b2c16165..eff2938d 100644 --- a/src/views/components/element/hooks/useElementOutline.ts +++ b/src/views/components/element/hooks/useElementOutline.ts @@ -7,9 +7,16 @@ export default (outline: Ref) => { const outlineStyle = computed(() => outline.value?.style || 'solid') const outlineColor = computed(() => outline.value?.color || '#d14424') + const strokeDashArray = computed(() => { + if (outlineStyle.value !== 'dashed') return '0 0' + const size = outlineWidth.value + return size <= 6 ? `${size * 4.5} ${size * 2}` : `${size * 4} ${size * 1.5}` + }) + return { outlineWidth, outlineStyle, outlineColor, + strokeDashArray, } } \ No newline at end of file