From 6b67e87699e4ea69bb4fe0a0056c3e0cdb8fa5ec Mon Sep 17 00:00:00 2001 From: pipipi-pikachu <1171051090@qq.com> Date: Tue, 5 Jan 2021 22:28:29 +0800 Subject: [PATCH] update --- src/prosemirror/utils.ts | 40 ++- src/utils/emitter.ts | 4 +- .../Editor/Toolbar/ElementAnimationPanel.vue | 34 +-- .../ElementStylePanel/TextStylePanel.vue | 227 +++++++++++++++--- src/views/Editor/Toolbar/SlideStylePanel.vue | 21 +- .../element/TextElement/BaseTextElement.vue | 2 + .../components/element/TextElement/index.vue | 17 +- 7 files changed, 264 insertions(+), 81 deletions(-) diff --git a/src/prosemirror/utils.ts b/src/prosemirror/utils.ts index d7183ff3..1f8cf642 100644 --- a/src/prosemirror/utils.ts +++ b/src/prosemirror/utils.ts @@ -74,4 +74,42 @@ export const getAttrValueInSelection = (view: EditorView, attr: string) => { return keepChecking }) return value -} \ No newline at end of file +} + +export const getTextAttrs = (view: EditorView) => { + const isBold = isActiveMark(view, 'strong') + const isEm = isActiveMark(view, 'em') + const isUnderline = isActiveMark(view, 'underline') + const isStrikethrough = isActiveMark(view, 'strikethrough') + const isSuperscript = isActiveMark(view, 'superscript') + const isSubscript = isActiveMark(view, 'subscript') + const isCode = isActiveMark(view, 'code') + const color = getAttrValue(view, 'forecolor', 'color') || '#000' + const backcolor = getAttrValue(view, 'backcolor', 'backcolor') || '#000' + const fontsize = getAttrValue(view, 'fontsize', 'fontsize') || '12px' + const fontname = getAttrValue(view, 'fontname', 'fontname') || '微软雅黑' + const align = getAttrValueInSelection(view, 'align') + const isBulletList = isActiveOfParentNodeType('bullet_list', view.state) + const isOrderedList = isActiveOfParentNodeType('ordered_list', view.state) + const isBlockquote = isActiveOfParentNodeType('blockquote', view.state) + + return { + bold: isBold, + em: isEm, + underline: isUnderline, + strikethrough: isStrikethrough, + superscript: isSuperscript, + subscript: isSubscript, + code: isCode, + color: color, + backcolor: backcolor, + fontsize: fontsize, + fontname: fontname, + align: align, + bulletList: isBulletList, + orderedList: isOrderedList, + blockquote: isBlockquote, + } +} + +export type TextAttrs = ReturnType \ No newline at end of file diff --git a/src/utils/emitter.ts b/src/utils/emitter.ts index bf3d682f..aa70c5e5 100644 --- a/src/utils/emitter.ts +++ b/src/utils/emitter.ts @@ -1,6 +1,8 @@ import mitt, { Emitter } from 'mitt' -export enum EMITTER_EVENTS {} +export enum EmitterEvents { + UPDATE_TEXT_STATE = 'UPDATE_TEXT_STATE', +} const emitter: Emitter = mitt() diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue index dafa3b2b..cf0dcc73 100644 --- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue +++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue @@ -6,16 +6,18 @@
{{type.name}}：
-
+
-
{{item.name}}
+ > + {{item.name}} +
@@ -130,9 +132,6 @@ export default defineComponent({ margin-right: -12px; padding-right: 12px; } -.pool-type { - @include grid-layout-wrapper(); -} .type-title { width: 100%; font-size: 13px; @@ -141,25 +140,18 @@ export default defineComponent({ background-color: #eee; padding-left: 10px; } +.pool-item-wrapper { + @include grid-layout-wrapper(); +} .pool-item { @include grid-layout-item(4, 24%); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; margin-bottom: 10px; + height: 40px; + line-height: 40px; + text-align: center; + background-color: #f5f5f5; cursor: pointer; - - .box { - width: 30px; - height: 30px; - background-color: #eee; - margin-bottom: 5px; - } - .label { - text-align: center; - } } .sequence-item { diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue index 92e0c476..6e711c61 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue @@ -3,88 +3,171 @@ - - - + + + + + + + + + + + + - - - - + + + + + + + + + + + + - - - + + + - - + +
行间距：
- - Jack - Lucy - Disabled - yiminghe + {{item}}
字间距：
- - Jack - Lucy - Disabled - yiminghe + {{item}}
- - - - +
+
描边样式：
+ +
+
+
描边颜色：
+ +
+
+
描边粗细：
+ +
+ + + +
+
水平阴影：
+ +
+
+
垂直阴影：
+ +
+
+
模糊距离：
+ +
+
+
阴影颜色：
+ +
+ +
透明度：
- +
@@ -137,4 +279,15 @@ export default defineComponent({ align-items: center; margin-bottom: 10px; } +.color-btn { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.color-block { + width: 16px; + height: 3px; + margin-top: 1px; +} \ No newline at end of file diff --git a/src/views/Editor/Toolbar/SlideStylePanel.vue b/src/views/Editor/Toolbar/SlideStylePanel.vue index 2f3f5fa7..98a1565e 100644 --- a/src/views/Editor/Toolbar/SlideStylePanel.vue +++ b/src/views/Editor/Toolbar/SlideStylePanel.vue @@ -1,32 +1,13 @@ \ No newline at end of file diff --git a/src/views/components/element/TextElement/BaseTextElement.vue b/src/views/components/element/TextElement/BaseTextElement.vue index 1e8b6088..ec9f6fe9 100644 --- a/src/views/components/element/TextElement/BaseTextElement.vue +++ b/src/views/components/element/TextElement/BaseTextElement.vue @@ -14,6 +14,8 @@ backgroundColor: elementInfo.fill, opacity: elementInfo.opacity, textShadow: shadowStyle, + lineHeight: elementInfo.lineHeight, + letterSpacing: (elementInfo.wordSpace || 0) + 'px', }" > @@ -43,6 +45,8 @@ import { EditorView } from 'prosemirror-view' import { PPTTextElement } from '@/types/slides' import { ContextmenuItem } from '@/components/Contextmenu/types' import { initProsemirrorEditor } from '@/prosemirror/' +import { getTextAttrs } from '@/prosemirror/utils' +import emitter, { EmitterEvents } from '@/utils/emitter' import useElementShadow from '@/views/components/element/hooks/useElementShadow' import useHistorySnapshot from '@/hooks/useHistorySnapshot' @@ -113,6 +117,16 @@ export default defineComponent({ addHistorySnapshot() }, 500, { trailing: true }) + const handleClick = debounce(function() { + const attr = getTextAttrs(editorView) + emitter.emit(EmitterEvents.UPDATE_TEXT_STATE, attr) + }, 50, { trailing: true }) + + const handleKeydown = () => { + handleInput() + handleClick() + } + const textContent = computed(() => props.elementInfo.content) watch(textContent, () => { if(!editorView) return @@ -130,7 +144,8 @@ export default defineComponent({ handleDOMEvents: { focus: handleFocus, blur: handleBlur, - keydown: handleInput, + keydown: handleKeydown, + click: handleClick, }, editable: () => editable.value, })