From 618db3370f2c30fd59b5d1a1ff751ef5d4196d49 Mon Sep 17 00:00:00 2001 From: zxc <1171051090@qq.com> Date: Wed, 11 Sep 2024 20:40:34 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=B8=80=E4=BA=9B=E5=9F=BA=E7=A1=80?= =?UTF-8?q?=E5=BD=A2=E7=8A=B6=E8=A1=A5=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/configs/shapes.ts | 73 ++++++++++++++++++++++- src/hooks/useCreateElement.ts | 1 + src/views/Editor/CanvasTool/LinePool.vue | 5 +- src/views/Editor/CanvasTool/ShapePool.vue | 5 +- 4 files changed, 78 insertions(+), 6 deletions(-) diff --git a/src/configs/shapes.ts b/src/configs/shapes.ts index 6b3de4ef..61ab9567 100644 --- a/src/configs/shapes.ts +++ b/src/configs/shapes.ts @@ -12,6 +12,7 @@ export interface ShapePoolItem { outlined?: boolean pptxShapeType?: string title?: string + withborder?: boolean } interface ShapeListItem { @@ -399,7 +400,7 @@ export const SHAPE_LIST: ShapeListItem[] = [ }, { viewBox: [200, 200], - path: 'M 100 0 L 0 90 L 50 200 L 150 200 L 200 90 L 100 0 Z', + path: `M100,0 L200,76.6 L161.8,200 L38.2,200 L0,76.6 Z`, pptxShapeType: 'pentagon', }, { @@ -411,6 +412,10 @@ export const SHAPE_LIST: ShapeListItem[] = [ viewBox: [200, 200], path: 'M 100 0 L 0 60 L 0 140 L 100 200 L 200 140 L 200 60 L 100 0 Z' }, + { + viewBox: [200, 200], + path: `M100,0 L170.71,29.29 L200,100 L170.71,170.71 L100,200 L29.29,170.71 L0,100 L29.29,29.29 Z`, + }, { viewBox: [200, 200], path: 'M 60 0 L 140 0 L 200 60 L 200 140 L 140 200 L 60 200 L 0 140 L 0 60 L 60 0 Z', @@ -467,10 +472,26 @@ export const SHAPE_LIST: ShapeListItem[] = [ path: 'M 70 0 L 70 70 L 0 70 L 0 130 L 70 130 L 70 200 L 130 200 L 130 130 L 200 130 L 200 70 L 130 70 L 130 0 L 70 0 Z', pathFormula: ShapePathFormulasKeys.PLUS, }, + { + viewBox: [200, 200], + path: 'M 0 70 L 200 70 L 200 130 L 0 130 Z', + }, { viewBox: [200, 200], path: 'M 40 0 L 0 40 L 60 100 L 0 160 L 40 200 L 100 140 L 160 200 L 200 160 L 140 100 L 200 40 L 160 0 L 100 60 L 40 0 Z' }, + { + viewBox: [200, 200], + path: 'M 0 80 L 200 80 L 200 120 L 0 120 Z M 100 0 A 25 25 0 1 1 100 50 A 25 25 0 1 1 100 0 M 100 200 A 25 25 0 1 1 100 150 A 25 25 0 1 1 100 200' + }, + { + viewBox: [200, 200], + path: 'M 0 30 L 200 30 L 200 80 L 0 80 Z M 0 120 L 200 120 L 200 170 L 0 170 Z', + }, + { + viewBox: [200, 200], + path: 'M 120 0 L 170 0 L 150 40 L 200 40 L 200 80 L 130 80 L 110 120 L 200 120 L 200 160 L 90 160 L 70 200 L 20 200 L 40 160 L 0 160 L 0 120 L 60 120 L 80 80 L 0 80 L 0 40 L 100 40 Z', + }, { viewBox: [200, 200], path: 'M 0 0 L 200 0 L 200 160 L 100 160 L 60 200 L 60 160 L 0 160 Z', @@ -531,7 +552,55 @@ export const SHAPE_LIST: ShapeListItem[] = [ }, { viewBox: [200, 200], - path: 'M 200 0 C 80 40 80 160 200 200 C -60 200 -60 0 200 0 Z', + path: 'M 100 0 A 50 50 0 1 0 200 120 A 100 100 0 1 1 100 0 Z' + }, + { + viewBox: [200, 200], + path: 'M 120 0 L 100 80 L 200 80 L 80 200 L 100 120 L 0 120 L 120 0 Z' + }, + { + viewBox: [200, 200], + path: 'M 30 50 Q 40 -20 120 10 Q 180 -10 180 40 Q 210 70 190 100 C 210 140 180 170 160 170 Q 140 210 100 180 C 70 210 20 190 30 150 C -10 140 -10 80 30 50', + }, + { + viewBox: [200, 200], + path: 'M 100 0 L 0 100 L 100 200 L 200 100 L 100 0 Z M 200 100 L 0 100', + withborder: true, + }, + { + viewBox: [200, 200], + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z M 170 30 L 30 170', + withborder: true, + }, + { + viewBox: [200, 200], + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z M 30 30 L 170 170', + withborder: true, + }, + { + viewBox: [200, 200], + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z M 170 30 L 30 170 M 30 30 L 170 170', + withborder: true, + }, + { + viewBox: [200, 200], + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z M 200 100 L 0 100 M 100 0 L 100 200', + withborder: true, + }, + { + viewBox: [200, 200], + path: 'M 160 0 A 40 100 0 1 1 160 200 L 40 200 A 40 100 0 1 1 40 0 L 160 0 Z M 160 200 A 40 100 0 1 1 160 0', + withborder: true, + }, + { + viewBox: [200, 200], + path: 'M 0 40 A 50 20 0 1 1 200 40 L 200 160 A 50 20 0 1 1 0 160 L 0 40 Z M 200 40 A 50 20 0 1 1 0 40', + withborder: true, + }, + { + viewBox: [200, 200], + path: 'M 200 0 L 50 0 L 0 50 L 0 200 L 150 200 L 200 150 L 200 0 Z M 200 0 L 150 50 M 150 50 L 0 50 M 150 50 L 150 200', + withborder: true, }, ], }, diff --git a/src/hooks/useCreateElement.ts b/src/hooks/useCreateElement.ts index 3d79c221..a9fef573 100644 --- a/src/hooks/useCreateElement.ts +++ b/src/hooks/useCreateElement.ts @@ -228,6 +228,7 @@ export default () => { rotate: 0, ...supplement, } + if (data.withborder) newElement.outline = theme.value.outline if (data.special) newElement.special = true if (data.pathFormula) { newElement.pathFormula = data.pathFormula diff --git a/src/views/Editor/CanvasTool/LinePool.vue b/src/views/Editor/CanvasTool/LinePool.vue index 41a10656..f0ac8e77 100644 --- a/src/views/Editor/CanvasTool/LinePool.vue +++ b/src/views/Editor/CanvasTool/LinePool.vue @@ -72,11 +72,12 @@ const selectLine = (line: LinePoolItem) => { } .category-name { width: 100%; - font-size: 13px; + font-size: 12px; margin-bottom: 10px; border-left: 4px solid #aaa; background-color: #eee; - padding: 2px 0 2px 10px; + padding: 3px 0 3px 8px; + color: #555; } .line-list { @include flex-grid-layout(); diff --git a/src/views/Editor/CanvasTool/ShapePool.vue b/src/views/Editor/CanvasTool/ShapePool.vue index fd1e051e..279c2265 100644 --- a/src/views/Editor/CanvasTool/ShapePool.vue +++ b/src/views/Editor/CanvasTool/ShapePool.vue @@ -41,11 +41,12 @@ const selectShape = (shape: ShapePoolItem) => { } .category-name { width: 100%; - font-size: 13px; + font-size: 12px; margin-bottom: 10px; border-left: 4px solid #aaa; background-color: #eee; - padding: 2px 0 2px 10px; + padding: 3px 0 3px 8px; + color: #555; } .shape-list { @include flex-grid-layout();