From 0988cbae9057a6734982b6fef9c071c672189210 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu <1171051090@qq.com> Date: Sun, 27 Dec 2020 20:31:46 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=9B=E5=BB=BA=E5=85=83?= =?UTF-8?q?=E7=B4=A0=E5=8C=BA=E5=9F=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/constants.ts | 1 + src/store/index.ts | 2 + src/store/mutations.ts | 4 + src/types/edit.ts | 5 + .../Editor/Canvas/ElementCreateSelection.vue | 205 ++++++++++++++++++ src/views/Editor/Canvas/index.vue | 15 +- src/views/Editor/CanvasTool/index.vue | 13 +- src/views/Editor/useHotkey.ts | 7 +- 8 files changed, 244 insertions(+), 8 deletions(-) create mode 100644 src/views/Editor/Canvas/ElementCreateSelection.vue diff --git a/src/store/constants.ts b/src/store/constants.ts index e3b8daeb..644d5084 100644 --- a/src/store/constants.ts +++ b/src/store/constants.ts @@ -9,6 +9,7 @@ export enum MutationTypes { SET_EDITORAREA_FOCUS = 'setEditorAreaFocus', SET_DISABLE_HOTKEYS_STATE = 'setDisableHotkeysState', SET_GRID_LINES_STATE = 'setGridLinesState', + SET_CREATING_ELEMENT_TYPE = 'setCreatingElementType', SET_AVAILABLE_FONTS = 'setAvailableFonts', SET_TOOLBAR_STATE = 'setToolbarState', diff --git a/src/store/index.ts b/src/store/index.ts index b3b7a3bb..b5586f1d 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -20,6 +20,7 @@ export interface State { editorAreaFocus: boolean; disableHotkeys: boolean; showGridLines: boolean; + creatingElementType: string; availableFonts: FontName[]; toolbarState: ToolbarState; slides: Slide[]; @@ -40,6 +41,7 @@ const state: State = { editorAreaFocus: false, disableHotkeys: false, showGridLines: false, + creatingElementType: '', availableFonts: [], toolbarState: 'slideStyle', slides: slides, diff --git a/src/store/mutations.ts b/src/store/mutations.ts index ab0d70c2..5de11744 100644 --- a/src/store/mutations.ts +++ b/src/store/mutations.ts @@ -49,6 +49,10 @@ export const mutations: MutationTree = { state.showGridLines = show }, + [MutationTypes.SET_CREATING_ELEMENT_TYPE](state, type: string) { + state.creatingElementType = type + }, + [MutationTypes.SET_AVAILABLE_FONTS](state) { state.availableFonts = FONT_NAMES.filter(font => isSupportFontFamily(font.en)) }, diff --git a/src/types/edit.ts b/src/types/edit.ts index 90197ec1..096aacac 100644 --- a/src/types/edit.ts +++ b/src/types/edit.ts @@ -80,4 +80,9 @@ export interface ImageClipedEmitData { width: number; height: number; }; +} + +export interface CreateElementSelectionData { + start: [number, number]; + end: [number, number]; } \ No newline at end of file diff --git a/src/views/Editor/Canvas/ElementCreateSelection.vue b/src/views/Editor/Canvas/ElementCreateSelection.vue new file mode 100644 index 00000000..ed882ec3 --- /dev/null +++ b/src/views/Editor/Canvas/ElementCreateSelection.vue @@ -0,0 +1,205 @@ + + + + + \ No newline at end of file diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue index 72625561..318b2d52 100644 --- a/src/views/Editor/Canvas/index.vue +++ b/src/views/Editor/Canvas/index.vue @@ -7,6 +7,10 @@ v-contextmenu="contextmenus" v-click-outside="removeEditorAreaFocus" > +
- + - - + +
@@ -27,7 +27,7 @@