From d245de2a40567756a53ba095dff71fe15d1409ff Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Fri, 19 Aug 2022 20:03:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=AB=96=E5=90=91?= =?UTF-8?q?=E6=96=87=E6=9C=AC=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components.d.ts | 14 ++- src/hooks/useCreateElement.ts | 11 ++- src/hooks/useExport.ts | 1 + src/hooks/usePasteTextClipboardData.ts | 2 +- src/plugins/component.ts | 2 +- src/plugins/icon.ts | 4 + src/types/edit.ts | 1 + src/types/slides.ts | 3 + .../Canvas/Operate/TextElementOperate.vue | 5 +- .../Editor/Canvas/hooks/useCommonOperate.ts | 7 ++ .../Editor/Canvas/hooks/useDropImageOrText.ts | 2 +- .../hooks/useInsertFromCreateSelection.ts | 6 +- src/views/Editor/CanvasTool/index.vue | 85 +++++++++++++++++-- .../Mobile/MobileEditor/SlideToolbar.vue | 2 +- .../element/TextElement/BaseTextElement.vue | 6 +- .../components/element/TextElement/index.vue | 44 +++++++--- 16 files changed, 167 insertions(+), 28 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index a7754f85..9696e83d 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -1,11 +1,21 @@ import { icons } from '@/plugins/icon' import { components } from '@/plugins/component' +import FileInput from '@/components/FileInput.vue' +import CheckboxButton from '@/components/CheckboxButton.vue' +import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue' +import ColorPicker from '@/components/ColorPicker/index.vue' +import FullscreenSpin from '@/components/FullscreenSpin.vue' + type Icon = typeof icons -type CustomComponent = typeof components declare module 'vue' { - export interface GlobalComponents extends Icon, CustomComponent { + export interface GlobalComponents extends Icon { + FileInput: typeof FileInput + CheckboxButton: typeof CheckboxButton + CheckboxButtonGroup: typeof CheckboxButtonGroup + ColorPicker: typeof ColorPicker + FullscreenSpin: typeof FullscreenSpin // antd 组件 InputNumber: typeof import('ant-design-vue')['InputNumber'] diff --git a/src/hooks/useCreateElement.ts b/src/hooks/useCreateElement.ts index d05a30c6..780f7e4f 100644 --- a/src/hooks/useCreateElement.ts +++ b/src/hooks/useCreateElement.ts @@ -172,8 +172,16 @@ export default () => { * @param position 位置大小信息 * @param content 文本内容 */ - const createTextElement = (position: CommonElementPosition, content = '') => { + + interface CreateTextData { + content?: string + vertical?: boolean + } + const createTextElement = (position: CommonElementPosition, data?: CreateTextData) => { const { left, top, width, height } = position + const content = data?.content || '' + const vertical = data?.vertical || false + const id = nanoid(10) createElement({ type: 'text', @@ -186,6 +194,7 @@ export default () => { rotate: 0, defaultFontName: theme.value.fontName, defaultColor: theme.value.fontColor, + vertical, }, () => { setTimeout(() => { const editorRef: HTMLElement | null = document.querySelector(`#editable-element-${id} .ProseMirror`) diff --git a/src/hooks/useExport.ts b/src/hooks/useExport.ts index 38f77c78..173d1bbe 100644 --- a/src/hooks/useExport.ts +++ b/src/hooks/useExport.ts @@ -442,6 +442,7 @@ export default () => { if (el.outline?.width) options.line = getOutlineOption(el.outline) if (el.opacity !== undefined) options.transparency = (1 - el.opacity) * 100 if (el.paragraphSpace !== undefined) options.paraSpaceBefore = el.paragraphSpace * 0.75 + if (el.vertical) options.vert = 'eaVert' pptxSlide.addText(textProps, options) } diff --git a/src/hooks/usePasteTextClipboardData.ts b/src/hooks/usePasteTextClipboardData.ts index ec37d3e7..3348384b 100644 --- a/src/hooks/usePasteTextClipboardData.ts +++ b/src/hooks/usePasteTextClipboardData.ts @@ -22,7 +22,7 @@ export default () => { top: 0, width: 600, height: 50, - }, text) + }, { content: text }) } /** diff --git a/src/plugins/component.ts b/src/plugins/component.ts index ce0d9549..f9a47f1a 100644 --- a/src/plugins/component.ts +++ b/src/plugins/component.ts @@ -6,7 +6,7 @@ import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue' import ColorPicker from '@/components/ColorPicker/index.vue' import FullscreenSpin from '@/components/FullscreenSpin.vue' -export const components = { +const components = { FileInput, CheckboxButton, CheckboxButtonGroup, diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 7a38604d..45f9b8a4 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -107,6 +107,8 @@ import { Square, Round, Needle, + TextRotationNone, + TextRotationDown, } from '@icon-park/vue-next' export const icons = { @@ -215,6 +217,8 @@ export const icons = { IconSquare: Square, IconRound: Round, IconNeedle: Needle, + IconTextRotationNone: TextRotationNone, + IconTextRotationDown: TextRotationDown, } export default { diff --git a/src/types/edit.ts b/src/types/edit.ts index 9c4b05ef..91202b6c 100644 --- a/src/types/edit.ts +++ b/src/types/edit.ts @@ -80,6 +80,7 @@ export interface CreateElementSelectionData { export interface CreatingTextElement { type: 'text' + vertical?: boolean } export interface CreatingShapeElement { type: 'shape' diff --git a/src/types/slides.ts b/src/types/slides.ts index 36dfe1d7..f3e3dcb8 100644 --- a/src/types/slides.ts +++ b/src/types/slides.ts @@ -139,6 +139,8 @@ interface PPTBaseElement { * textIndent?: 段落首行缩进 * * paragraphSpace?: 段间距,默认 5px + * + * vertical?: 竖向文本 */ export interface PPTTextElement extends PPTBaseElement { type: 'text' @@ -153,6 +155,7 @@ export interface PPTTextElement extends PPTBaseElement { shadow?: PPTElementShadow textIndent?: number paragraphSpace?: number + vertical?: boolean } diff --git a/src/views/Editor/Canvas/Operate/TextElementOperate.vue b/src/views/Editor/Canvas/Operate/TextElementOperate.vue index b11a51c0..38c169f8 100644 --- a/src/views/Editor/Canvas/Operate/TextElementOperate.vue +++ b/src/views/Editor/Canvas/Operate/TextElementOperate.vue @@ -10,7 +10,7 @@