From f429561668cb2fcac9643fc6966b7daf83d88325 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu <1171051090@qq.com> Date: Mon, 1 Feb 2021 21:54:53 +0800 Subject: [PATCH] =?UTF-8?q?bug=E4=BF=AE=E5=A4=8D=E5=92=8C=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/configs/shapes.ts | 8 + src/hooks/usePasteTextClipboardData.ts | 6 +- src/hooks/useSlideHandler.ts | 7 +- src/mocks/index.ts | 178 +----------------- src/prosemirror/utils.ts | 2 +- src/views/Editor/Canvas/GridLines.vue | 2 +- src/views/Editor/Canvas/SlideBackground.vue | 2 +- .../ElementStylePanel/TextStylePanel.vue | 9 +- 8 files changed, 28 insertions(+), 186 deletions(-) diff --git a/src/configs/shapes.ts b/src/configs/shapes.ts index e29a5da6..81dd8dda 100644 --- a/src/configs/shapes.ts +++ b/src/configs/shapes.ts @@ -77,6 +77,10 @@ export const SHAPE_LIST = [ viewBox: 200, path: 'M 50 0 L 200 0 L 150 200 L 0 200 L 50 0 Z' }, + { + viewBox: 200, + path: 'M 0 0 L 150 0 L 200 200 L 50 200 L 0 0 Z' + }, { viewBox: 200, path: 'M 50 0 L 150 0 L 200 200 L 0 200 L 50 0 Z' @@ -117,6 +121,10 @@ export const SHAPE_LIST = [ viewBox: 200, path: 'M 200 0 L 200 200 L 0 200 L 0 100 L 200 0 Z' }, + { + viewBox: 200, + path: 'M 0 0 L 200 100 L 200 200 L 0 200 L 0 0 Z' + }, { viewBox: 200, path: 'M 50 0 L 150 0 L 150 50 L 200 50 L 200 150 L 150 150 L 150 200 L 50 200 L 50 150 L 0 150 L 0 50 L 50 50 L 50 0 Z' diff --git a/src/hooks/usePasteTextClipboardData.ts b/src/hooks/usePasteTextClipboardData.ts index d0930669..755084bd 100644 --- a/src/hooks/usePasteTextClipboardData.ts +++ b/src/hooks/usePasteTextClipboardData.ts @@ -48,8 +48,10 @@ export default () => { } const pasteSlide = (slide: Slide) => { - const newSlide = { ...slide, id: createRandomCode() } - store.commit(MutationTypes.ADD_SLIDE, newSlide) + store.commit(MutationTypes.ADD_SLIDE, { + ...slide, + id: createRandomCode(8), + }) addHistorySnapshot() } diff --git a/src/hooks/useSlideHandler.ts b/src/hooks/useSlideHandler.ts index bd834622..5ebbcc99 100644 --- a/src/hooks/useSlideHandler.ts +++ b/src/hooks/useSlideHandler.ts @@ -61,11 +61,16 @@ export default () => { } const copyAndPasteSlide = () => { - store.commit(MutationTypes.ADD_SLIDE, currentSlide.value) + store.commit(MutationTypes.ADD_SLIDE, { + ...currentSlide.value, + id: createRandomCode(8), + }) addHistorySnapshot() } const deleteSlide = () => { + if(slidesLength.value === 1) return message.warning('无法继续删除') + store.commit(MutationTypes.DELETE_SLIDE, currentSlide.value.id) addHistorySnapshot() } diff --git a/src/mocks/index.ts b/src/mocks/index.ts index e6e3bc5f..d3e54e70 100644 --- a/src/mocks/index.ts +++ b/src/mocks/index.ts @@ -2,181 +2,7 @@ import { Slide } from '@/types/slides' export const slides: Slide[] = [ { - id: 'xsxa123', - elements: [ - { - id: 'sdasaxs', - type: 'chart', - left: 680, - top: 20, - width: 300, - height: 300, - chartType: 'line', - themeColor: '#d70206', - data: { - labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], - series: [ - [5, 2, 4, 2, 10], - ], - }, - }, - { - id: '1213asa', - type: 'table', - left: 20, - top: 20, - width: 400, - height: 108, - colWidths: [0.25, 0.25, 0.25, 0.25], - outline: { - width: 1, - style: 'solid', - color: '#999', - }, - data: [ - [ - { id: '1', colspan: 1, rowspan: 1, text: '1' }, - { id: '2', colspan: 1, rowspan: 1, text: '2' }, - { id: '3', colspan: 1, rowspan: 1, text: '3' }, - { id: '4', colspan: 1, rowspan: 1, text: '4' }, - ], - [ - { id: '6', colspan: 1, rowspan: 1, text: '6' }, - { id: '7', colspan: 1, rowspan: 1, text: '7' }, - { id: '8', colspan: 1, rowspan: 1, text: '8' }, - { id: '9', colspan: 1, rowspan: 1, text: '9' }, - ], - [ - { id: '11', colspan: 1, rowspan: 1, text: '11' }, - { id: '12', colspan: 1, rowspan: 1, text: '12' }, - { id: '13', colspan: 1, rowspan: 1, text: '13' }, - { id: '14', colspan: 1, rowspan: 1, text: '14' }, - ], - ], - }, - ], - }, - { - id: 'xxx1', - background: { - type: 'solid', - color: '#fff', - }, - elements: [ - { - id: 'xxx1', - type: 'text', - left: 190, - top: 50, - width: 320, - height: 104, - rotate: 0, - shadow: { - h: 1, - v: 1, - blur: 3, - color: 'rgba(10, 10, 10, .5)' - }, - opacity: 1, - lock: false, - content: '

一段测试文字，字号固定为28px

', - }, - { - id: 'xxx3', - type: 'image', - left: 80, - top: 250, - width: 180, - height: 180, - rotate: 0, - outline: { - width: 4, - style: 'solid', - color: '#333' - }, - clip: { - range: [[30, 0], [100, 70]], - shape: 'ellipse' - }, - fixedRatio: false, - lock: false, - src: 'https://img.lessonplan.cn/IMG/Show/ppt/3ab74e91-c34f-499d-9711-166e423d4dd6/1573622467064v2-7aa3ce420052983d91c6d01b47a7441d_hd.jpg', - }, - { - id: 'xxx2', - type: 'image', - left: 750, - top: 320, - width: 150, - height: 150, - rotate: 0, - fixedRatio: true, - lock: false, - src: 'https://img.lessonplan.cn/IMG/Show/ppt/3ab74e91-c34f-499d-9711-166e423d4dd6/62d9adb3-e7a6-4dc4-a352-095cffb49f08/b1be1a2f-f893-47d3-a8a3-eac7d04d395f/1596159381259v2-b2c69096d25ae16bf6ca09e30add3e65_hd.jpg', - }, - ], - animations: [ - { - elId: 'xxx1', - type: 'rotateIn', - duration: 1000, - }, - { - elId: 'xxx2', - type: 'zoomIn', - duration: 1000, - }, - ], - }, - { - id: 'sajd172', - elements: [ - { - id: 'yyx1', - type: 'text', - left: 590, - top: 90, - width: 220, - height: 188, - rotate: 0, - opacity: 1, - lock: false, - content: '
😀 😐 😶 😜 🔔 ⭐ ⚡ 🔥 👍 💡 🔰 🎀 🎁 🥇 🏅 🏆 🎈 🎉 💎 🚧 ⛔ 📢 ⌛ ⏰ 🕒 🧩 🎵 📎 🔒 🔑 ⛳ 📌 📍 💬 📅 📈 📋 📜 📁 📱 💻 💾 🌏 🚚 🚡 🚢💧 🌐 🧭 💰 💳 🛒
', - }, - { - id: 'xsfdas', - type: 'line', - width: 2, - left: 100, - top: 400, - end: [0, 0], - start: [300, 120], - style: 'solid', - color: '#888', - points: ['', 'arrow'], - }, - { - id: 'xxx7', - type: 'shape', - left: 130, - top: 50, - width: 150, - height: 150, - rotate: 0, - fill: '#eebc29', - opacity: 0.9, - fixedRatio: false, - lock: false, - viewBox: 1024, - path: 'M721.35111111 475.59111111H302.64888889c-5.00622222 0-9.10222222 4.096-9.10222222 9.10222222v54.61333334c0 5.00622222 4.096 9.10222222 9.10222222 9.10222222h418.70222222c5.00622222 0 9.10222222-4.096 9.10222222-9.10222222v-54.61333334c0-5.00622222-4.096-9.10222222-9.10222222-9.10222222z M512 2.27555555C230.51377778 2.27555555 2.27555555 230.51377778 2.27555555 512s228.23822222 509.72444445 509.72444445 509.72444445 509.72444445-228.23822222 509.72444445-509.72444445S793.48622222 2.27555555 512 2.27555555z m0 932.97777778c-233.69955555 0-423.25333333-189.55377778-423.25333333-423.25333333s189.55377778-423.25333333 423.25333333-423.25333333 423.25333333 189.55377778 423.25333333 423.25333333-189.55377778 423.25333333-423.25333333 423.25333333z', - } - ], - animations: [ - { - elId: 'yyx1', - type: 'flipInX', - duration: 1000, - }, - ], + id: 'test123456', + elements: [], }, ] \ No newline at end of file diff --git a/src/prosemirror/utils.ts b/src/prosemirror/utils.ts index 39c079a9..0bfb66ad 100644 --- a/src/prosemirror/utils.ts +++ b/src/prosemirror/utils.ts @@ -86,7 +86,7 @@ export const getTextAttrs = (view: EditorView) => { 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 fontsize = getAttrValue(view, 'fontsize', 'fontsize') || '20px' const fontname = getAttrValue(view, 'fontname', 'fontname') || '微软雅黑' const align = getAttrValueInSelection(view, 'align') || 'left' const isBulletList = isActiveOfParentNodeType('bullet_list', view.state) diff --git a/src/views/Editor/Canvas/GridLines.vue b/src/views/Editor/Canvas/GridLines.vue index 23fb3cfa..186ea5c5 100644 --- a/src/views/Editor/Canvas/GridLines.vue +++ b/src/views/Editor/Canvas/GridLines.vue @@ -26,7 +26,7 @@ export default defineComponent({ setup() { const store = useStore() const canvasScale = computed(() => store.state.canvasScale) - const background = computed(() => store.getters.currentSlide.background) + const background = computed(() => store.getters.currentSlide?.background) const gridColor = computed(() => { if(!background.value || background.value.type === 'image') return 'rgba(100, 100, 100, 0.5)' diff --git a/src/views/Editor/Canvas/SlideBackground.vue b/src/views/Editor/Canvas/SlideBackground.vue index 3bb6a2d6..f8934ab6 100644 --- a/src/views/Editor/Canvas/SlideBackground.vue +++ b/src/views/Editor/Canvas/SlideBackground.vue @@ -22,7 +22,7 @@ export default defineComponent({ setup() { const store = useStore() const showGridLines = computed(() => store.state.showGridLines) - const background = computed(() => store.getters.currentSlide.background) + const background = computed(() => store.getters.currentSlide?.background) const { backgroundStyle } = useSlideBackgroundStyle(background) diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue index 3bae31a1..06b98cc1 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue @@ -343,7 +343,7 @@ export default defineComponent({ code: false, color: '#000', backcolor: '#000', - fontsize: '12px', + fontsize: '20px', fontname: '微软雅黑', align: 'left', bulletList: false, @@ -354,10 +354,11 @@ export default defineComponent({ const availableFonts = computed(() => store.state.availableFonts) const fontSizeOptions = [ '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px', - '36px', '40px', '44px', '48px', '54px', '60px', '66px', '72px', '80px', + '36px', '40px', '44px', '48px', '54px', '60px', '66px', '72px', '76px', + '80px', '88px', '96px', '104px', '112px', '120px', ] - const lineHeightOptions = [0.5, 1.0, 1.2, 1.5, 1.8, 2.0, 3.0] - const wordSpaceOptions = [0, 1, 2, 3, 4, 5, 8] + const lineHeightOptions = [0.9, 1.0, 1.15, 1.2, 1.4, 1.5, 1.8, 2.0, 2.5, 3.0] + const wordSpaceOptions = [0, 1, 2, 3, 4, 5, 6, 8, 10] const updateRichTextAttrs = (attr: TextAttrs) => richTextAttrs.value = attr