From b715809a346bee7d20a73d7c61a949424eaccfbf Mon Sep 17 00:00:00 2001 From: pipipi-pikachu <1171051090@qq.com> Date: Thu, 24 Dec 2020 16:54:52 +0800 Subject: [PATCH] rename --- src/configs/element.ts | 24 ++--- src/configs/lines.ts | 20 ++-- src/hooks/useAlignElementToCanvas.ts | 2 +- src/hooks/useCombineElement.ts | 10 +- src/hooks/useCreateElement.ts | 24 ++--- src/hooks/useDeleteElement.ts | 2 +- src/hooks/useLockElement.ts | 8 +- src/hooks/useMoveElement.ts | 2 +- src/hooks/useOrderElement.ts | 12 +-- src/hooks/usePasteTextClipboardData.ts | 8 +- src/hooks/useSelectAllElement.ts | 4 +- src/hooks/useSlideBackgroundStyle.ts | 5 +- src/mocks/index.ts | 63 +++++++------ src/store/getters.ts | 6 +- src/store/mutations.ts | 8 +- src/types/slides.ts | 92 +++++++++++-------- src/utils/element.ts | 4 +- src/utils/image.ts | 4 +- .../Editor/Canvas/MultiSelectOperate.vue | 2 +- src/views/Editor/Canvas/SlideBackground.vue | 3 +- .../Editor/Canvas/hooks/useDragElement.ts | 22 ++--- .../Editor/Canvas/hooks/useMouseSelection.ts | 8 +- .../Editor/Canvas/hooks/useRotateElement.ts | 2 +- .../Editor/Canvas/hooks/useScaleElement.ts | 58 ++++++------ .../Editor/Canvas/hooks/useSelectElement.ts | 28 +++--- src/views/Editor/Canvas/index.vue | 8 +- src/views/_common/ThumbnailSlide.vue | 2 +- .../_common/_element/EditableElement.vue | 4 +- src/views/_common/_element/ElementBorder.vue | 59 ------------ src/views/_common/_element/ElementOutline.vue | 69 ++++++++++++++ .../ImageElement/BaseImageElement.vue | 46 +++++----- .../ImageElement/ImageClipHandler.vue | 6 +- .../ImageElement/ImageEllipseBorder.vue | 66 ------------- .../ImageElement/ImageEllipseOutline.vue | 73 +++++++++++++++ .../ImageElement/ImagePolygonBorder.vue | 67 -------------- .../ImageElement/ImagePolygonOutline.vue | 74 +++++++++++++++ ...ageRectBorder.vue => ImageRectOutline.vue} | 43 +++++---- .../_common/_element/ImageElement/index.vue | 58 ++++++------ .../_element/TextElement/BaseTextElement.vue | 27 ++++-- .../_common/_element/TextElement/index.vue | 31 ++++--- .../_element/{ => hooks}/useCommonOperate.ts | 0 .../_element/hooks/useElementOutline.ts | 14 +++ .../_element/hooks/useElementShadow.ts | 14 +++ 43 files changed, 584 insertions(+), 498 deletions(-) delete mode 100644 src/views/_common/_element/ElementBorder.vue create mode 100644 src/views/_common/_element/ElementOutline.vue delete mode 100644 src/views/_common/_element/ImageElement/ImageEllipseBorder.vue create mode 100644 src/views/_common/_element/ImageElement/ImageEllipseOutline.vue delete mode 100644 src/views/_common/_element/ImageElement/ImagePolygonBorder.vue create mode 100644 src/views/_common/_element/ImageElement/ImagePolygonOutline.vue rename src/views/_common/_element/ImageElement/{ImageRectBorder.vue => ImageRectOutline.vue} (50%) rename src/views/_common/_element/{ => hooks}/useCommonOperate.ts (100%) create mode 100644 src/views/_common/_element/hooks/useElementOutline.ts create mode 100644 src/views/_common/_element/hooks/useElementShadow.ts diff --git a/src/configs/element.ts b/src/configs/element.ts index 690a034..266582a 100644 --- a/src/configs/element.ts +++ b/src/configs/element.ts @@ -1,14 +1,5 @@ const DEFAULT_COLOR = '#41464b' -export enum ElementTypes { - TEXT = '文本', - IMAGE = '图片', - SHAPE = '形状', - LINE = '线条', - CHART = '图表', - TABLE = '表格', -} - export const DEFAULT_TEXT = { left: 0, top: 0, @@ -23,17 +14,17 @@ export const DEFAULT_TEXT = { export const DEFAULT_IMAGE = { left: 0, top: 0, - lockRatio: true, + fixedRatio: true, } export const DEFAULT_SHAPE = { fill: DEFAULT_COLOR, - lockRatio: false, + fixedRatio: false, } export const DEFAULT_LINE = { style: 'solid', - marker: ['', ''], + points: ['', ''], width: 4, color: DEFAULT_COLOR, } @@ -48,8 +39,9 @@ export const DEFAULT_CHART = { export const DEFAULT_TABLE = { left: 0, top: 0, - isLock: false, - borderStyle: 'solid', - borderWidth: 2, - borderColor: DEFAULT_COLOR, + outline: { + width: 2, + style: 'solid', + color: DEFAULT_COLOR + }, } \ No newline at end of file diff --git a/src/configs/lines.ts b/src/configs/lines.ts index 5e3c083..5ae86f7 100644 --- a/src/configs/lines.ts +++ b/src/configs/lines.ts @@ -1,12 +1,12 @@ export const LINES = [ - { path: 'M0,0 L20,20', style: 'solid', marker: ['', ''] }, - { path: 'M0,0 L20,20', style: 'solid', marker: ['', 'arrow'] }, - { path: 'M0,0 L20,20', style: 'solid', marker: ['arrow', 'arrow'] }, - { path: 'M0,0 L20,20', style: 'solid', marker: ['', 'cusp'] }, - { path: 'M0,0 L20,20', style: 'solid', marker: ['cusp', 'cusp'] }, - { path: 'M0,0 L20,20', style: 'solid', marker: ['', 'dot'] }, - { path: 'M0,0 L20,20', style: 'solid', marker: ['dot', 'dot'] }, - { path: 'M0,0 L20,20', style: 'dashed', marker: ['', ''] }, - { path: 'M0,0 L20,20', style: 'dashed', marker: ['', 'arrow'] }, - { path: 'M0,0 L20,20', style: 'dashed', marker: ['arrow', 'arrow'] }, + { path: 'M0,0 L20,20', style: 'solid', points: ['', ''] }, + { path: 'M0,0 L20,20', style: 'solid', points: ['', 'arrow'] }, + { path: 'M0,0 L20,20', style: 'solid', points: ['arrow', 'arrow'] }, + { path: 'M0,0 L20,20', style: 'solid', points: ['', 'cusp'] }, + { path: 'M0,0 L20,20', style: 'solid', points: ['cusp', 'cusp'] }, + { path: 'M0,0 L20,20', style: 'solid', points: ['', 'dot'] }, + { path: 'M0,0 L20,20', style: 'solid', points: ['dot', 'dot'] }, + { path: 'M0,0 L20,20', style: 'dashed', points: ['', ''] }, + { path: 'M0,0 L20,20', style: 'dashed', points: ['', 'arrow'] }, + { path: 'M0,0 L20,20', style: 'dashed', points: ['arrow', 'arrow'] }, ] \ No newline at end of file diff --git a/src/hooks/useAlignElementToCanvas.ts b/src/hooks/useAlignElementToCanvas.ts index 196e2c7..cef27a5 100644 --- a/src/hooks/useAlignElementToCanvas.ts +++ b/src/hooks/useAlignElementToCanvas.ts @@ -20,7 +20,7 @@ export default () => { const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements)) for(const element of newElementList) { - if(!activeElementIdList.value.includes(element.elId)) continue + if(!activeElementIdList.value.includes(element.id)) continue if(command === ElementAlignCommands.TOP) { const offsetY = minY - 0 diff --git a/src/hooks/useCombineElement.ts b/src/hooks/useCombineElement.ts index 4770a79..683d316 100644 --- a/src/hooks/useCombineElement.ts +++ b/src/hooks/useCombineElement.ts @@ -22,16 +22,16 @@ export default () => { const combineElementList: PPTElement[] = [] for(const element of newElementList) { - if(activeElementIdList.value.includes(element.elId)) { + if(activeElementIdList.value.includes(element.id)) { element.groupId = groupId combineElementList.push(element) } } // 注意，组合元素的层级应该是连续的，所以需要获取该组元素中最顶层的元素，将组内其他成员从原位置移动到最顶层的元素的下面 - const combineElementMaxIndex = newElementList.findIndex(_element => _element.elId === combineElementList[combineElementList.length - 1].elId) - const combineElementIdList = combineElementList.map(_element => _element.elId) - newElementList = newElementList.filter(_element => !combineElementIdList.includes(_element.elId)) + const combineElementMaxIndex = newElementList.findIndex(_element => _element.id === combineElementList[combineElementList.length - 1].id) + const combineElementIdList = combineElementList.map(_element => _element.id) + newElementList = newElementList.filter(_element => !combineElementIdList.includes(_element.id)) const insertIndex = combineElementMaxIndex - combineElementList.length + 1 newElementList.splice(insertIndex, 0, ...combineElementList) @@ -48,7 +48,7 @@ export default () => { const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements)) for(const element of newElementList) { - if(activeElementIdList.value.includes(element.elId) && element.groupId) delete element.groupId + if(activeElementIdList.value.includes(element.id) && element.groupId) delete element.groupId } store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList }) addHistorySnapshot() diff --git a/src/hooks/useCreateElement.ts b/src/hooks/useCreateElement.ts index f46e808..7342f3c 100644 --- a/src/hooks/useCreateElement.ts +++ b/src/hooks/useCreateElement.ts @@ -35,12 +35,12 @@ export default () => { const createElement = (element: PPTElement) => { store.commit(MutationTypes.ADD_ELEMENT, element) - store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [element.elId]) + store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [element.id]) addHistorySnapshot() } - const createImageElement = (imgUrl: string) => { - getImageSize(imgUrl).then(({ width, height }) => { + const createImageElement = (src: string) => { + getImageSize(src).then(({ width, height }) => { const scale = width / height if(scale < VIEWPORT_ASPECT_RATIO && width > VIEWPORT_SIZE) { @@ -55,8 +55,8 @@ export default () => { createElement({ ...DEFAULT_IMAGE, type: 'image', - elId: createRandomCode(), - imgUrl, + id: createRandomCode(), + src, width, height, }) @@ -67,7 +67,7 @@ export default () => { createElement({ ...DEFAULT_CHART, type: 'chart', - elId: createRandomCode(), + id: createRandomCode(), chartType, data, }) @@ -87,7 +87,7 @@ export default () => { createElement({ ...DEFAULT_TABLE, type: 'table', - elId: createRandomCode(), + id: createRandomCode(), width: colCount * DEFAULT_CELL_WIDTH + DEFAULT_BORDER_WIDTH, height: rowCount * DEFAULT_CELL_HEIGHT + DEFAULT_BORDER_WIDTH, colSizes, @@ -101,7 +101,7 @@ export default () => { createElement({ ...DEFAULT_TEXT, type: 'text', - elId: createRandomCode(), + id: createRandomCode(), left, top, width, @@ -114,7 +114,7 @@ export default () => { createElement({ ...DEFAULT_SHAPE, type: 'shape', - elId: createRandomCode(), + id: createRandomCode(), left, top, width, @@ -123,17 +123,17 @@ export default () => { }) } - const createLineElement = (position: LineElementPosition, marker: [string, string], lineType: string) => { + const createLineElement = (position: LineElementPosition, points: [string, string], lineType: string) => { const { left, top, start, end } = position createElement({ ...DEFAULT_LINE, type: 'line', - elId: createRandomCode(), + id: createRandomCode(), left, top, start, end, - marker, + points, lineType, }) } diff --git a/src/hooks/useDeleteElement.ts b/src/hooks/useDeleteElement.ts index 2070272..76f1573 100644 --- a/src/hooks/useDeleteElement.ts +++ b/src/hooks/useDeleteElement.ts @@ -13,7 +13,7 @@ export default () => { const deleteElement = () => { if(!activeElementIdList.value.length) return - const newElementList = currentSlide.value.elements.filter(el => !activeElementIdList.value.includes(el.elId)) + const newElementList = currentSlide.value.elements.filter(el => !activeElementIdList.value.includes(el.id)) store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, []) store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList }) addHistorySnapshot() diff --git a/src/hooks/useLockElement.ts b/src/hooks/useLockElement.ts index 4c2eb29..dbde675 100644 --- a/src/hooks/useLockElement.ts +++ b/src/hooks/useLockElement.ts @@ -15,7 +15,7 @@ export default () => { const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements)) for(const element of newElementList) { - if(activeElementIdList.value.includes(element.elId)) element.isLock = true + if(activeElementIdList.value.includes(element.id)) element.lock = true } store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList }) addHistorySnapshot() @@ -26,14 +26,14 @@ export default () => { if(handleElement.groupId) { for(const element of newElementList) { - if(element.groupId === handleElement.groupId) element.isLock = false + if(element.groupId === handleElement.groupId) element.lock = false } return newElementList } for(const element of newElementList) { - if(element.elId === handleElement.elId) { - element.isLock = false + if(element.id === handleElement.id) { + element.lock = false break } } diff --git a/src/hooks/useMoveElement.ts b/src/hooks/useMoveElement.ts index 89a8d67..d2b4701 100644 --- a/src/hooks/useMoveElement.ts +++ b/src/hooks/useMoveElement.ts @@ -14,7 +14,7 @@ export default () => { const moveElement = (command: string) => { const newElementList = currentSlide.value.elements.map(el => { - if(activeElementIdList.value.includes(el.elId)) { + if(activeElementIdList.value.includes(el.id)) { let { left, top } = el switch(command) { case KEYS.LEFT: diff --git a/src/hooks/useOrderElement.ts b/src/hooks/useOrderElement.ts index 6801f18..8f1fca5 100644 --- a/src/hooks/useOrderElement.ts +++ b/src/hooks/useOrderElement.ts @@ -13,8 +13,8 @@ export default () => { // 获取组合元素层级范围（组合成员中的最大层级和最小层级） const getCombineElementIndexRange = (elementList: PPTElement[], combineElementList: PPTElement[]) => { - const minIndex = elementList.findIndex(_element => _element.elId === combineElementList[0].elId) - const maxIndex = elementList.findIndex(_element => _element.elId === combineElementList[combineElementList.length - 1].elId) + const minIndex = elementList.findIndex(_element => _element.id === combineElementList[0].id) + const maxIndex = elementList.findIndex(_element => _element.id === combineElementList[combineElementList.length - 1].id) return { minIndex, maxIndex } } @@ -53,7 +53,7 @@ export default () => { else { // 元素在元素列表中的层级 - const elementIndex = elementList.findIndex(item => item.elId === element.elId) + const elementIndex = elementList.findIndex(item => item.id === element.id) // 无法移动（已经处在顶层） if(elementIndex === elementList.length - 1) return null @@ -96,7 +96,7 @@ export default () => { } else { - const elementIndex = elementList.findIndex(item => item.elId === element.elId) + const elementIndex = elementList.findIndex(item => item.id === element.id) if(elementIndex === 0) return null const prevElement = copyOfElementList[elementIndex - 1] const movedElement = copyOfElementList.splice(elementIndex, 1)[0] @@ -133,7 +133,7 @@ export default () => { else { // 元素在元素列表中的层级 - const elementIndex = elementList.findIndex(item => item.elId === element.elId) + const elementIndex = elementList.findIndex(item => item.id === element.id) // 无法移动（已经处在顶层） if(elementIndex === elementList.length - 1) return null @@ -159,7 +159,7 @@ export default () => { } else { - const elementIndex = elementList.findIndex(item => item.elId === element.elId) + const elementIndex = elementList.findIndex(item => item.id === element.id) if(elementIndex === 0) return null copyOfElementList.splice(elementIndex, 1) copyOfElementList.unshift(element) diff --git a/src/hooks/usePasteTextClipboardData.ts b/src/hooks/usePasteTextClipboardData.ts index bdbfdde..f9c1a91 100644 --- a/src/hooks/usePasteTextClipboardData.ts +++ b/src/hooks/usePasteTextClipboardData.ts @@ -25,14 +25,14 @@ export default () => { if(groupId && !groupIdMap[groupId]) { groupIdMap[groupId] = createRandomCode() } - elIdMap[element.elId] = createRandomCode() + elIdMap[element.id] = createRandomCode() } - const currentSlideElementIdList = currentSlide.value.elements.map(el => el.elId) + const currentSlideElementIdList = currentSlide.value.elements.map(el => el.id) for(const element of elements) { - const inCurrentSlide = currentSlideElementIdList.includes(element.elId) + const inCurrentSlide = currentSlideElementIdList.includes(element.id) - element.elId = elIdMap[element.elId] + element.id = elIdMap[element.id] if(inCurrentSlide) { element.left = element.left + 10 diff --git a/src/hooks/useSelectAllElement.ts b/src/hooks/useSelectAllElement.ts index 29d54b2..87d70ad 100644 --- a/src/hooks/useSelectAllElement.ts +++ b/src/hooks/useSelectAllElement.ts @@ -8,8 +8,8 @@ export default () => { const currentSlide: Ref = computed(() => store.getters.currentSlide) const selectAllElement = () => { - const unlockedElements = currentSlide.value.elements.filter(el => !el.isLock) - const newActiveElementIdList = unlockedElements.map(el => el.elId) + const unlockedElements = currentSlide.value.elements.filter(el => !el.lock) + const newActiveElementIdList = unlockedElements.map(el => el.id) store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, newActiveElementIdList) } diff --git a/src/hooks/useSlideBackgroundStyle.ts b/src/hooks/useSlideBackgroundStyle.ts index 758ace1..41e7456 100644 --- a/src/hooks/useSlideBackgroundStyle.ts +++ b/src/hooks/useSlideBackgroundStyle.ts @@ -1,10 +1,11 @@ import { Ref, computed } from 'vue' +import { SlideBackground } from '@/types/slides' -export default (background: Ref<[string, string] | undefined>) => { +export default (background: Ref) => { const backgroundStyle = computed(() => { if(!background.value) return { backgroundColor: '#fff' } - const [type, value] = background.value + const { type, value } = background.value if(type === 'solid') return { backgroundColor: value } else if(type === 'image') return { backgroundImage: `url(${value}` } diff --git a/src/mocks/index.ts b/src/mocks/index.ts index 9afabc9..705c333 100644 --- a/src/mocks/index.ts +++ b/src/mocks/index.ts @@ -3,66 +3,71 @@ import { Slide } from '@/types/slides' export const slides: Slide[] = [ { id: 'xxx1', - background: ['solid', '#fff'], + background: { + type: 'solid', + value: '#fff', + }, elements: [ { - elId: 'xxx1', + id: 'xxx1', type: 'text', left: 190, top: 50, width: 320, height: 104, rotate: 0, - borderStyle: 'solid', - borderWidth: 4, - borderColor: '#5b7d89', - fill: 'rgba(220,220,220,0.8)', - shadow: '1px 1px 3px rgba(10,10,10,.5)', + fill: 'rgba(220, 220, 220, 0.8)', + shadow: { + h: 1, + v: 1, + blur: 3, + color: 'rgba(10, 10, 10, .5)' + }, opacity: 1, - lineHeight: 1.5, - segmentSpacing: 10, - isLock: false, + lock: false, content: '
一段测试文字，字号固定为28px
', }, { - elId: 'xxx3', + id: 'xxx3', type: 'image', left: 80, top: 250, width: 180, height: 180, rotate: 0, - borderStyle: 'solid', - borderWidth: 4, - borderColor: 'rgba(10,10,10,1)', - filter: '', + outline: { + width: 4, + style: 'solid', + color: '#333' + }, clip: { range: [[30, 0], [100, 70]], shape: 'ellipse' }, - lockRatio: false, - isLock: false, - imgUrl: 'https://img.lessonplan.cn/IMG/Show/ppt/3ab74e91-c34f-499d-9711-166e423d4dd6/1573622467064v2-7aa3ce420052983d91c6d01b47a7441d_hd.jpg', + fixedRatio: false, + lock: false, + src: 'https://img.lessonplan.cn/IMG/Show/ppt/3ab74e91-c34f-499d-9711-166e423d4dd6/1573622467064v2-7aa3ce420052983d91c6d01b47a7441d_hd.jpg', }, { - elId: 'xxx2', + id: 'xxx2', type: 'image', left: 750, top: 320, width: 150, height: 150, rotate: 0, - borderStyle: 'solid', - borderWidth: 6, - borderColor: 'rgba(10,10,10,1)', - filter: '', + outline: { + width: 6, + style: 'solid', + color: '#333' + }, clip: { range: [[0, 0], [100, 100]], shape: 'roundRect' }, - lockRatio: true, - isLock: false, - imgUrl: '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', + 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', }, ], }, @@ -70,7 +75,7 @@ export const slides: Slide[] = [ id: 'sajd172', elements: [ { - elId: 'yyx1', + id: 'yyx1', type: 'text', left: 590, top: 90, @@ -78,9 +83,7 @@ export const slides: Slide[] = [ height: 188, rotate: 0, opacity: 1, - lineHeight: 1.5, - segmentSpacing: 10, - isLock: false, + lock: false, content: '
😀 😐 😶 😜 🔔 ⭐ ⚡ 🔥 👍 💡 🔰 🎀 🎁 🥇 🏅 🏆 🎈 🎉 💎 🚧 ⛔ 📢 ⌛ ⏰ 🕒 🧩 🎵 📎 🔒 🔑 ⛳ 📌 📍 💬 📅 📈 📋 📜 📁 📱 💻 💾 🌏 🚚 🚡 🚢💧 🌐 🧭 💰 💳 🛒
', }, ], diff --git a/src/store/getters.ts b/src/store/getters.ts index 3c625cf..39854f2 100644 --- a/src/store/getters.ts +++ b/src/store/getters.ts @@ -13,20 +13,20 @@ export const getters: GetterTree = { if(!animations) return null const els = currentSlide.elements - const elIds = els.map(el => el.elId) + const elIds = els.map(el => el.id) return animations.filter(animation => elIds.includes(animation.elId)) }, activeElementList(state) { const currentSlide = state.slides[state.slideIndex] if(!currentSlide || !currentSlide.elements) return [] - return currentSlide.elements.filter(element => state.activeElementIdList.includes(element.elId)) + return currentSlide.elements.filter(element => state.activeElementIdList.includes(element.id)) }, handleElement(state) { const currentSlide = state.slides[state.slideIndex] if(!currentSlide || !currentSlide.elements) return null - return currentSlide.elements.find(element => state.handleElementId === element.elId) || null + return currentSlide.elements.find(element => state.handleElementId === element.id) || null }, canUndo(state) { diff --git a/src/store/mutations.ts b/src/store/mutations.ts index 7593327..cc9d1e5 100644 --- a/src/store/mutations.ts +++ b/src/store/mutations.ts @@ -6,7 +6,7 @@ import { FONT_NAMES } from '@/configs/fontName' import { isSupportFontFamily } from '@/utils/fontFamily' interface UpdateElementData { - elId: string | string[]; + id: string | string[]; props: Partial; } @@ -91,13 +91,13 @@ export const mutations: MutationTree = { }, [MutationTypes.UPDATE_ELEMENT](state, data: UpdateElementData) { - const { elId, props } = data - const elIdList = typeof elId === 'string' ? [elId] : elId + const { id, props } = data + const elIdList = typeof id === 'string' ? [id] : id const slideIndex = state.slideIndex const slide = state.slides[slideIndex] const elements = slide.elements.map(el => { - return elIdList.includes(el.elId) ? { ...el, ...props } : el + return elIdList.includes(el.id) ? { ...el, ...props } : el }) state.slides[slideIndex].elements = (elements as PPTElement[]) }, diff --git a/src/types/slides.ts b/src/types/slides.ts index 6a8ea05..fff51f5 100644 --- a/src/types/slides.ts +++ b/src/types/slides.ts @@ -1,4 +1,9 @@ -export type ElementType = 'text' | 'image' | 'shape' | 'line' | 'chart' | 'table' +export interface PPTElementShadow { + h: number; + v: number; + blur: number; + color: string; +} export enum ElementTypes { TEXT = 'text', @@ -10,58 +15,68 @@ export enum ElementTypes { } export interface PPTElementBaseProps { - elId: string; + id: string; left: number; top: number; - isLock?: boolean; + lock?: boolean; groupId?: string; } -export interface PPTElementSizeProps { +export interface PPTElementOutline { + style?: 'dashed' | 'solid'; + width?: number; + color?: string; +} + +export interface PPTTextElement extends PPTElementBaseProps { + type: 'text'; width: number; height: number; -} - -export interface PPTElementBorderProps { - borderStyle?: string; - borderWidth?: number; - borderColor?: string; -} - -export interface PPTTextElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps { - type: 'text'; content: string; rotate?: number; + outline?: PPTElementOutline; fill?: string; opacity?: number; - lineHeight?: number; - segmentSpacing?: number; - letterSpacing?: number; - shadow?: string; + shadow?: PPTElementShadow; } -export interface PPTImageElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps { +export interface ImageElementFilters { + 'blur': string; + 'brightness': string; + 'contrast': string; + 'grayscale': string; + 'saturate': string; + 'hue-rotate': string; + 'opacity': string; +} +export interface PPTImageElement extends PPTElementBaseProps { type: 'image'; - lockRatio: boolean; - imgUrl: string; + width: number; + height: number; + fixedRatio: boolean; + src: string; rotate?: number; - filter?: string; + outline?: PPTElementOutline; + filters?: ImageElementFilters; clip?: { range: [[number, number], [number, number]]; shape: 'rect' | 'roundRect' | 'ellipse' | 'triangle' | 'pentagon' | 'rhombus' | 'star'; }; flip?: { x?: number; y?: number }; - shadow?: string; + shadow?: PPTElementShadow; } -export interface PPTShapeElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps { +export interface PPTShapeElement extends PPTElementBaseProps { type: 'shape'; + width: number; + height: number; svgCode: string; - lockRatio: boolean; + fixedRatio: boolean; fill: string; rotate?: number; + outline?: PPTElementOutline; opacity?: number; - shadow?: string; + shadow?: PPTElementShadow; } export interface PPTLineElement extends PPTElementBaseProps { @@ -71,14 +86,17 @@ export interface PPTLineElement extends PPTElementBaseProps { width: number; style: string; color: string; - marker: [string, string]; + points: [string, string]; lineType: string; } -export interface PPTChartElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps { +export interface PPTChartElement extends PPTElementBaseProps { type: 'chart'; + width: number; + height: number; chartType: string; data: string; + outline?: PPTElementOutline; theme?: string; } @@ -88,8 +106,10 @@ export interface TableElementCell { content: string; bgColor: string; } -export interface PPTTableElement extends PPTElementBaseProps, PPTElementSizeProps { +export interface PPTTableElement extends PPTElementBaseProps { type: 'table'; + width: number; + height: number; borderTheme?: string; theme?: string; rowSizes: number[]; @@ -97,12 +117,7 @@ export interface PPTTableElement extends PPTElementBaseProps, PPTElementSizeProp data: TableElementCell[][]; } -export type PPTElement = PPTTextElement | - PPTImageElement | - PPTShapeElement | - PPTLineElement | - PPTChartElement | - PPTTableElement +export type PPTElement = PPTTextElement | PPTImageElement | PPTShapeElement | PPTLineElement | PPTChartElement | PPTTableElement export interface PPTAnimation { elId: string; @@ -110,9 +125,14 @@ export interface PPTAnimation { duration: number; } +export interface SlideBackground { + type: 'solid' | 'image'; + value: string; +} + export interface Slide { id: string; elements: PPTElement[]; - background?: [string, string]; + background?: SlideBackground; animations?: PPTAnimation[]; } \ No newline at end of file diff --git a/src/utils/element.ts b/src/utils/element.ts index 63f24d4..0ad4f4c 100644 --- a/src/utils/element.ts +++ b/src/utils/element.ts @@ -1,4 +1,4 @@ -import { PPTElement } from '@/types/slides' +import { ElementTypes, PPTElement } from '@/types/slides' // 获取矩形旋转后在画布中的位置范围 interface RotatedElementData { @@ -46,7 +46,7 @@ export const getRectRotatedRange = (element: RotatedElementData) => { export const getElementRange = (element: PPTElement) => { let minX, maxX, minY, maxY - if(element.type === 'line') { + if(element.type === ElementTypes.LINE) { minX = element.left maxX = element.left + Math.max(element.start[0], element.end[0]) minY = element.top diff --git a/src/utils/image.ts b/src/utils/image.ts index c4c41bf..84e7f80 100644 --- a/src/utils/image.ts +++ b/src/utils/image.ts @@ -4,10 +4,10 @@ interface ImageSize { } // 获取图片的原始宽高 -export const getImageSize = (imgUrl: string): Promise => { +export const getImageSize = (src: string): Promise => { return new Promise(resolve => { const img = document.createElement('img') - img.src = imgUrl + img.src = src img.style.opacity = '0' document.body.appendChild(img) diff --git a/src/views/Editor/Canvas/MultiSelectOperate.vue b/src/views/Editor/Canvas/MultiSelectOperate.vue index 0235567..5c7a277 100644 --- a/src/views/Editor/Canvas/MultiSelectOperate.vue +++ b/src/views/Editor/Canvas/MultiSelectOperate.vue @@ -52,7 +52,7 @@ export default defineComponent({ const store = useStore() const activeElementIdList = computed(() => store.state.activeElementIdList) const canvasScale = computed(() => store.state.canvasScale) - const localActiveElementList = computed(() => props.elementList.filter(el => activeElementIdList.value.includes(el.elId))) + const localActiveElementList = computed(() => props.elementList.filter(el => activeElementIdList.value.includes(el.id))) const range = reactive({ minX: 0, diff --git a/src/views/Editor/Canvas/SlideBackground.vue b/src/views/Editor/Canvas/SlideBackground.vue index 1234c6e..63a3015 100644 --- a/src/views/Editor/Canvas/SlideBackground.vue +++ b/src/views/Editor/Canvas/SlideBackground.vue @@ -14,6 +14,7 @@ import { Ref, computed, defineComponent } from 'vue' import { useStore } from 'vuex' import { State } from '@/store' +import { SlideBackground } from '@/types/slides' import GridLines from './GridLines.vue' import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle' @@ -25,7 +26,7 @@ export default defineComponent({ setup() { const store = useStore() const showGridLines = computed(() => store.state.showGridLines) - const background: Ref<[string, string] | undefined> = computed(() => store.getters.currentSlide.background) + const background: Ref = computed(() => store.getters.currentSlide.background) const { backgroundStyle } = useSlideBackgroundStyle(background) diff --git a/src/views/Editor/Canvas/hooks/useDragElement.ts b/src/views/Editor/Canvas/hooks/useDragElement.ts index 0f449f4..6324c68 100644 --- a/src/views/Editor/Canvas/hooks/useDragElement.ts +++ b/src/views/Editor/Canvas/hooks/useDragElement.ts @@ -19,7 +19,7 @@ export default ( const { addHistorySnapshot } = useHistorySnapshot() const dragElement = (e: MouseEvent, element: PPTElement) => { - if(!activeElementIdList.value.includes(element.elId)) return + if(!activeElementIdList.value.includes(element.id)) return let isMouseDown = true // 可视范围宽高，用于边缘对齐吸附 @@ -27,7 +27,7 @@ export default ( const edgeHeight = VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO const originElementList: PPTElement[] = JSON.parse(JSON.stringify(elementList.value)) - const originActiveElementList = originElementList.filter(el => activeElementIdList.value.includes(el.elId)) + const originActiveElementList = originElementList.filter(el => activeElementIdList.value.includes(el.id)) const sorptionRange = 3 const elOriginLeft = element.left @@ -40,7 +40,7 @@ export default ( let isMisoperation: boolean | null = null - const isActiveGroupElement = element.elId === activeGroupElementId.value + const isActiveGroupElement = element.id === activeGroupElementId.value // 收集对齐参考线 // 包括页面内出被操作元素以外的所有元素在页面内水平和垂直方向的范围和中心位置、页面边界和水平和垂直的中心位置 @@ -50,8 +50,8 @@ export default ( // 元素在页面内水平和垂直方向的范围和中心位置（需要特殊计算线条和被旋转的元素） for(const el of elementList.value) { if(el.type === ElementTypes.LINE) continue - if(isActiveGroupElement && el.elId === element.elId) continue - if(!isActiveGroupElement && activeElementIdList.value.includes(el.elId)) continue + if(isActiveGroupElement && el.id === element.id) continue + if(!isActiveGroupElement && activeElementIdList.value.includes(el.id)) continue let left, top, width, height if('rotate' in el && el.rotate) { @@ -145,7 +145,7 @@ export default ( targetMinY = yRange[0] targetMaxY = yRange[1] } - else if(element.type === 'line') { + else if(element.type === ElementTypes.LINE) { targetMinX = targetLeft targetMaxX = targetLeft + Math.max(element.start[0], element.end[0]) targetMinY = targetTop @@ -179,7 +179,7 @@ export default ( rightValues.push(xRange[1]) bottomValues.push(yRange[1]) } - else if(element.type === 'line') { + else if(element.type === ElementTypes.LINE) { leftValues.push(left) topValues.push(top) rightValues.push(left + Math.max(element.start[0], element.end[0])) @@ -265,19 +265,19 @@ export default ( // 非多选，或者当前操作的元素时激活的组合元素 if(activeElementIdList.value.length === 1 || isActiveGroupElement) { elementList.value = elementList.value.map(el => { - return el.elId === element.elId ? { ...el, left: targetLeft, top: targetTop } : el + return el.id === element.id ? { ...el, left: targetLeft, top: targetTop } : el }) } // 修改元素位置，如果需要修改位置的元素不是被操作的元素（例如多选下的操作） // 那么其他非操作元素要移动的位置通过操作元素的移动偏移量计算 else { - const handleElement = elementList.value.find(el => el.elId === element.elId) + const handleElement = elementList.value.find(el => el.id === element.id) if(!handleElement) return elementList.value = elementList.value.map(el => { - if(activeElementIdList.value.includes(el.elId)) { - if(el.elId === element.elId) { + if(activeElementIdList.value.includes(el.id)) { + if(el.id === element.id) { return { ...el, left: targetLeft, diff --git a/src/views/Editor/Canvas/hooks/useMouseSelection.ts b/src/views/Editor/Canvas/hooks/useMouseSelection.ts index 434f469..9b030cb 100644 --- a/src/views/Editor/Canvas/hooks/useMouseSelection.ts +++ b/src/views/Editor/Canvas/hooks/useMouseSelection.ts @@ -110,19 +110,19 @@ export default (elementList: Ref, viewportRef: Ref { if(inRangeElement.groupId) { - const inRangeElementIdList = inRangeElementList.map(inRangeElement => inRangeElement.elId) + const inRangeElementIdList = inRangeElementList.map(inRangeElement => inRangeElement.id) const groupElementList = elementList.value.filter(element => element.groupId === inRangeElement.groupId) - return groupElementList.every(groupElement => inRangeElementIdList.includes(groupElement.elId)) + return groupElementList.every(groupElement => inRangeElementIdList.includes(groupElement.id)) } return true }) - const inRangeElementIdList = inRangeElementList.map(inRangeElement => inRangeElement.elId) + const inRangeElementIdList = inRangeElementList.map(inRangeElement => inRangeElement.id) if(inRangeElementIdList.length) store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, inRangeElementIdList) mouseSelectionState.isShow = false diff --git a/src/views/Editor/Canvas/hooks/useRotateElement.ts b/src/views/Editor/Canvas/hooks/useRotateElement.ts index 4b8e776..44af8f4 100644 --- a/src/views/Editor/Canvas/hooks/useRotateElement.ts +++ b/src/views/Editor/Canvas/hooks/useRotateElement.ts @@ -59,7 +59,7 @@ export default (elementList: Ref, viewportRef: Ref element.elId === el.elId ? { ...el, rotate: angle } : el) + elementList.value = elementList.value.map(el => element.id === el.id ? { ...el, rotate: angle } : el) } document.onmouseup = () => { diff --git a/src/views/Editor/Canvas/hooks/useScaleElement.ts b/src/views/Editor/Canvas/hooks/useScaleElement.ts index 6dac273..26ac23e 100644 --- a/src/views/Editor/Canvas/hooks/useScaleElement.ts +++ b/src/views/Editor/Canvas/hooks/useScaleElement.ts @@ -102,8 +102,8 @@ export default ( const elOriginWidth = element.width const elOriginHeight = element.height - const isLockRatio = ctrlOrShiftKeyActive.value || ('lockRatio' in element && element.lockRatio) - const lockRatio = elOriginWidth / elOriginHeight + const fixedRatio = ctrlOrShiftKeyActive.value || ('fixedRatio' in element && element.fixedRatio) + const aspectRatio = elOriginWidth / elOriginHeight const elRotate = ('rotate' in element && element.rotate) ? element.rotate : 0 const rotateRadian = Math.PI * elRotate / 180 @@ -133,13 +133,13 @@ export default ( else { const edgeWidth = VIEWPORT_SIZE const edgeHeight = VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO - const isActiveGroupElement = element.elId === activeGroupElementId.value + const isActiveGroupElement = element.id === activeGroupElementId.value for(const el of elementList.value) { if('rotate' in el && el.rotate) continue if(el.type === ElementTypes.LINE) continue - if(isActiveGroupElement && el.elId === element.elId) continue - if(!isActiveGroupElement && activeElementIdList.value.includes(el.elId)) continue + if(isActiveGroupElement && el.id === element.id) continue + if(!isActiveGroupElement && activeElementIdList.value.includes(el.id)) continue const left = el.left const top = el.top @@ -236,9 +236,9 @@ export default ( let revisedY = (Math.cos(rotateRadian) * y - Math.sin(rotateRadian) * x) / canvasScale.value // 锁定宽高比例 - if(isLockRatio) { - if(command === OperatePoints.RIGHT_BOTTOM || command === OperatePoints.LEFT_TOP) revisedY = revisedX / lockRatio - if(command === OperatePoints.LEFT_BOTTOM || command === OperatePoints.RIGHT_TOP) revisedY = -revisedX / lockRatio + if(fixedRatio) { + if(command === OperatePoints.RIGHT_BOTTOM || command === OperatePoints.LEFT_TOP) revisedY = revisedX / aspectRatio + if(command === OperatePoints.LEFT_BOTTOM || command === OperatePoints.RIGHT_TOP) revisedY = -revisedX / aspectRatio } // 根据不同的操作点分别计算元素缩放后的大小和位置 @@ -297,18 +297,18 @@ export default ( let moveX = x / canvasScale.value let moveY = y / canvasScale.value - if(isLockRatio) { - if(command === OperatePoints.RIGHT_BOTTOM || command === OperatePoints.LEFT_TOP) moveY = moveX / lockRatio - if(command === OperatePoints.LEFT_BOTTOM || command === OperatePoints.RIGHT_TOP) moveY = -moveX / lockRatio + if(fixedRatio) { + if(command === OperatePoints.RIGHT_BOTTOM || command === OperatePoints.LEFT_TOP) moveY = moveX / aspectRatio + if(command === OperatePoints.LEFT_BOTTOM || command === OperatePoints.RIGHT_TOP) moveY = -moveX / aspectRatio } if(command === OperatePoints.RIGHT_BOTTOM) { const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, elOriginTop + elOriginHeight + moveY) moveX = moveX - offsetX moveY = moveY - offsetY - if(isLockRatio) { - if(offsetY) moveX = moveY * lockRatio - else moveY = moveX / lockRatio + if(fixedRatio) { + if(offsetY) moveX = moveY * aspectRatio + else moveY = moveX / aspectRatio } width = getSizeWithinRange(elOriginWidth + moveX) height = getSizeWithinRange(elOriginHeight + moveY) @@ -317,9 +317,9 @@ export default ( const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + elOriginHeight + moveY) moveX = moveX - offsetX moveY = moveY - offsetY - if(isLockRatio) { - if(offsetY) moveX = -moveY * lockRatio - else moveY = -moveX / lockRatio + if(fixedRatio) { + if(offsetY) moveX = -moveY * aspectRatio + else moveY = -moveX / aspectRatio } width = getSizeWithinRange(elOriginWidth - moveX) height = getSizeWithinRange(elOriginHeight + moveY) @@ -329,9 +329,9 @@ export default ( const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + moveY) moveX = moveX - offsetX moveY = moveY - offsetY - if(isLockRatio) { - if(offsetY) moveX = moveY * lockRatio - else moveY = moveX / lockRatio + if(fixedRatio) { + if(offsetY) moveX = moveY * aspectRatio + else moveY = moveX / aspectRatio } width = getSizeWithinRange(elOriginWidth - moveX) height = getSizeWithinRange(elOriginHeight - moveY) @@ -342,9 +342,9 @@ export default ( const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, elOriginTop + moveY) moveX = moveX - offsetX moveY = moveY - offsetY - if(isLockRatio) { - if(offsetY) moveX = -moveY * lockRatio - else moveY = -moveX / lockRatio + if(fixedRatio) { + if(offsetY) moveX = -moveY * aspectRatio + else moveY = -moveX / aspectRatio } width = getSizeWithinRange(elOriginWidth + moveX) height = getSizeWithinRange(elOriginHeight - moveY) @@ -374,7 +374,7 @@ export default ( } } - elementList.value = elementList.value.map(el => element.elId === el.elId ? { ...el, left, top, width, height } : el) + elementList.value = elementList.value.map(el => element.id === el.id ? { ...el, left, top, width, height } : el) } document.onmouseup = e => { @@ -396,7 +396,7 @@ export default ( const { minX, maxX, minY, maxY } = range const operateWidth = maxX - minX const operateHeight = maxY - minY - const lockRatio = operateWidth / operateHeight + const aspectRatio = operateWidth / operateHeight const startPageX = e.pageX const startPageY = e.pageY @@ -415,8 +415,8 @@ export default ( // 锁定宽高比例 if(ctrlOrShiftKeyActive.value) { - if(command === OperatePoints.RIGHT_BOTTOM || command === OperatePoints.LEFT_TOP) y = x / lockRatio - if(command === OperatePoints.LEFT_BOTTOM || command === OperatePoints.RIGHT_TOP) y = -x / lockRatio + if(command === OperatePoints.RIGHT_BOTTOM || command === OperatePoints.LEFT_TOP) y = x / aspectRatio + if(command === OperatePoints.LEFT_BOTTOM || command === OperatePoints.RIGHT_TOP) y = -x / aspectRatio } // 获取鼠标缩放时当前所有激活元素的范围 @@ -468,8 +468,8 @@ export default ( // 根据上面计算的比例，修改所有被激活元素的位置大小 // 宽高通过乘以对应的比例得到，位置通过将被操作元素在所有元素整体中的相对位置乘以对应比例获得 elementList.value = elementList.value.map(el => { - if((el.type === ElementTypes.IMAGE || el.type === ElementTypes.SHAPE) && activeElementIdList.value.includes(el.elId)) { - const originElement = originElementList.find(originEl => originEl.elId === el.elId) as PPTImageElement | PPTShapeElement + if((el.type === ElementTypes.IMAGE || el.type === ElementTypes.SHAPE) && activeElementIdList.value.includes(el.id)) { + const originElement = originElementList.find(originEl => originEl.id === el.id) as PPTImageElement | PPTShapeElement return { ...el, width: originElement.width * widthScale, diff --git a/src/views/Editor/Canvas/hooks/useSelectElement.ts b/src/views/Editor/Canvas/hooks/useSelectElement.ts index 90a6461..b978c57 100644 --- a/src/views/Editor/Canvas/hooks/useSelectElement.ts +++ b/src/views/Editor/Canvas/hooks/useSelectElement.ts @@ -19,25 +19,25 @@ export default ( if(!editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, true) // 如果被点击的元素处于未激活状态，则将他设置为激活元素（单选），或者加入到激活元素中（多选） - if(!activeElementIdList.value.includes(element.elId)) { + if(!activeElementIdList.value.includes(element.id)) { let newActiveIdList: string[] = [] if(ctrlOrShiftKeyActive.value) { - newActiveIdList = [...activeElementIdList.value, element.elId] + newActiveIdList = [...activeElementIdList.value, element.id] } - else newActiveIdList = [element.elId] + else newActiveIdList = [element.id] // 同时如果该元素是分组成员，需要将和他同组的元素一起激活 if(element.groupId) { const groupMembersId: string[] = [] elementList.value.forEach((el: PPTElement) => { - if(el.groupId === element.groupId) groupMembersId.push(el.elId) + if(el.groupId === element.groupId) groupMembersId.push(el.id) }) newActiveIdList = [...newActiveIdList, ...groupMembersId] } store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, uniq(newActiveIdList)) - store.commit(MutationTypes.SET_HANDLE_ELEMENT_ID, element.elId) + store.commit(MutationTypes.SET_HANDLE_ELEMENT_ID, element.id) } // 如果被点击的元素已激活，且按下了多选按钮，则取消其激活状态（除非该元素或分组是最后的一个激活元素） @@ -48,12 +48,12 @@ export default ( if(element.groupId) { const groupMembersId: string[] = [] elementList.value.forEach((el: PPTElement) => { - if(el.groupId === element.groupId) groupMembersId.push(el.elId) + if(el.groupId === element.groupId) groupMembersId.push(el.id) }) - newActiveIdList = activeElementIdList.value.filter(elId => !groupMembersId.includes(elId)) + newActiveIdList = activeElementIdList.value.filter(id => !groupMembersId.includes(id)) } else { - newActiveIdList = activeElementIdList.value.filter(elId => elId !== element.elId) + newActiveIdList = activeElementIdList.value.filter(id => id !== element.id) } if(newActiveIdList.length > 0) { @@ -62,11 +62,11 @@ export default ( } // 如果被点击的元素已激活，且没有按下多选按钮，且该元素不是当前操作元素，则将其设置为当前操作元素 - else if(handleElementId.value !== element.elId) { - store.commit(MutationTypes.SET_HANDLE_ELEMENT_ID, element.elId) + else if(handleElementId.value !== element.id) { + store.commit(MutationTypes.SET_HANDLE_ELEMENT_ID, element.id) } - else if(activeGroupElementId.value !== element.elId && element.groupId) { + else if(activeGroupElementId.value !== element.id && element.groupId) { const startPageX = e.pageX const startPageY = e.pageY @@ -75,7 +75,7 @@ export default ( const currentPageY = e.pageY if(startPageX === currentPageX && startPageY === currentPageY) { - activeGroupElementId.value = element.elId + activeGroupElementId.value = element.id ;(e.target as HTMLElement).onmouseup = null } } @@ -85,8 +85,8 @@ export default ( } const selectAllElement = () => { - const unlockedElements = elementList.value.filter(el => !el.isLock) - const newActiveElementIdList = unlockedElements.map(el => el.elId) + const unlockedElements = elementList.value.filter(el => !el.lock) + const newActiveElementIdList = unlockedElements.map(el => el.id) store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, newActiveElementIdList) } diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue index b682bca..1d6e5de 100644 --- a/src/views/Editor/Canvas/index.vue +++ b/src/views/Editor/Canvas/index.vue @@ -42,12 +42,12 @@ diff --git a/src/views/_common/_element/EditableElement.vue b/src/views/_common/_element/EditableElement.vue index 0cbf0ef..daf0cf7 100644 --- a/src/views/_common/_element/EditableElement.vue +++ b/src/views/_common/_element/EditableElement.vue @@ -2,7 +2,7 @@
{ - if(props.elementInfo.isLock) { + if(props.elementInfo.lock) { return [{ text: '解锁', icon: 'icon-unlock', diff --git a/src/views/_common/_element/ElementBorder.vue b/src/views/_common/_element/ElementBorder.vue deleted file mode 100644 index 54f7ef3..0000000 --- a/src/views/_common/_element/ElementBorder.vue +++ /dev/null @@ -1,59 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/views/_common/_element/ElementOutline.vue b/src/views/_common/_element/ElementOutline.vue new file mode 100644 index 0000000..139c515 --- /dev/null +++ b/src/views/_common/_element/ElementOutline.vue @@ -0,0 +1,69 @@ + + + + + \ No newline at end of file diff --git a/src/views/_common/_element/ImageElement/BaseImageElement.vue b/src/views/_common/_element/ImageElement/BaseImageElement.vue index fcd4583..04e622d 100644 --- a/src/views/_common/_element/ImageElement/BaseImageElement.vue +++ b/src/views/_common/_element/ImageElement/BaseImageElement.vue @@ -12,40 +12,34 @@
- - -
- - - - - - - - \ No newline at end of file diff --git a/src/views/_common/_element/ImageElement/ImageEllipseOutline.vue b/src/views/_common/_element/ImageElement/ImageEllipseOutline.vue new file mode 100644 index 0000000..9056379 --- /dev/null +++ b/src/views/_common/_element/ImageElement/ImageEllipseOutline.vue @@ -0,0 +1,73 @@ + + + + + \ No newline at end of file diff --git a/src/views/_common/_element/ImageElement/ImagePolygonBorder.vue b/src/views/_common/_element/ImageElement/ImagePolygonBorder.vue deleted file mode 100644 index 5424794..0000000 --- a/src/views/_common/_element/ImageElement/ImagePolygonBorder.vue +++ /dev/null @@ -1,67 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/views/_common/_element/ImageElement/ImagePolygonOutline.vue b/src/views/_common/_element/ImageElement/ImagePolygonOutline.vue new file mode 100644 index 0000000..589e98e --- /dev/null +++ b/src/views/_common/_element/ImageElement/ImagePolygonOutline.vue @@ -0,0 +1,74 @@ + + + + + \ No newline at end of file diff --git a/src/views/_common/_element/ImageElement/ImageRectBorder.vue b/src/views/_common/_element/ImageElement/ImageRectOutline.vue similarity index 50% rename from src/views/_common/_element/ImageElement/ImageRectBorder.vue rename to src/views/_common/_element/ImageElement/ImageRectOutline.vue index 9a6d569..9b7fd0d 100644 --- a/src/views/_common/_element/ImageElement/ImageRectBorder.vue +++ b/src/views/_common/_element/ImageElement/ImageRectOutline.vue @@ -1,6 +1,6 @@