From d30c5da7a1ff9ac3ade7438af1586e6a2a6f8b9e Mon Sep 17 00:00:00 2001 From: Nevermore <15972699417@163.com> Date: Sun, 8 Sep 2024 17:03:00 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=8E=86=E5=8F=B2=E8=AE=B0?= =?UTF-8?q?=E5=BD=95bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/modules/template.ts | 3 +- src/views/Canvas/usePixi.ts | 2 +- .../CanvasRight/Backgrounds/ElementFill.vue | 4 +- .../Components/ElementPosition.vue | 4 +- .../ElementStylePanel/BarCodeStylePanel.vue | 2 +- .../ElementStylePanel/LineStylePanel.vue | 14 ++-- .../ElementStylePanel/QRCodeStylePanel.vue | 2 +- .../ElementStylePanel/TextboxStylePanel.vue | 66 +++++++------------ 8 files changed, 39 insertions(+), 58 deletions(-) diff --git a/src/store/modules/template.ts b/src/store/modules/template.ts index a9cf68d0..b734dca2 100644 --- a/src/store/modules/template.ts +++ b/src/store/modules/template.ts @@ -90,9 +90,10 @@ export const useTemplatesStore = defineStore('Templates', { modifedElement(target: FabricObject, options: Record,) { const [ canvas ] = useCanvas() const { addHistorySnapshot } = useHistorySnapshot() + const index = canvas._objects.findIndex(item => item.id === target.id) const data: Snapshot = { type: SnapshotType.MODIFY, - index: canvas._objects.indexOf(target), + index, target: target.toObject(propertiesToInclude), tid: this.templateId } diff --git a/src/views/Canvas/usePixi.ts b/src/views/Canvas/usePixi.ts index 4fbb1edc..306edff1 100644 --- a/src/views/Canvas/usePixi.ts +++ b/src/views/Canvas/usePixi.ts @@ -49,7 +49,7 @@ export const handleFilter = (worker: Worker) => { await element.setSrc(data.res) element.dirty = true canvas.renderAll() - templatesStore.modifedElement() + // templatesStore.modifedElement() } }); } diff --git a/src/views/Editor/CanvasRight/Backgrounds/ElementFill.vue b/src/views/Editor/CanvasRight/Backgrounds/ElementFill.vue index 00ecb180..5a900540 100644 --- a/src/views/Editor/CanvasRight/Backgrounds/ElementFill.vue +++ b/src/views/Editor/CanvasRight/Backgrounds/ElementFill.vue @@ -393,9 +393,9 @@ const updateBackground = (props: Partial) => { if (!canvasObject.value) return; const color = props.color ? props.color : (handleElement.value as TextboxElement).color; const opacity = props.opacity !== undefined ? props.opacity : 1 - canvasObject.value.set({ fill: props.fill, color, fillType: background.value.fillType, background: { ...background.value, ...props }, opacity }); + // canvasObject.value.set({ fill: props.fill, color, fillType: background.value.fillType, background: { ...background.value, ...props }, opacity }); canvas.renderAll(); - templatesStore.modifedElement(); + templatesStore.modifedElement(canvasObject.value, { fill: props.fill, color, fillType: background.value.fillType, background: { ...background.value, ...props }, opacity: opacity ? opacity : 1 }); }; // 修改上传背景 diff --git a/src/views/Editor/CanvasRight/Components/ElementPosition.vue b/src/views/Editor/CanvasRight/Components/ElementPosition.vue index ee7cebd3..7a382c73 100644 --- a/src/views/Editor/CanvasRight/Components/ElementPosition.vue +++ b/src/views/Editor/CanvasRight/Components/ElementPosition.vue @@ -238,9 +238,7 @@ const changeRotate45 = (command: "+" | "-") => { else if (command === "-") _rotate = _rotate - 45; if (_rotate < -180) _rotate = -180; if (_rotate > 180) _rotate = 180; - canvasObject.value.angle = _rotate; - canvas.renderAll(); - templatesStore.modifedElement(); + templatesStore.modifedElement(canvasObject.value, {angle: _rotate}); }; diff --git a/src/views/Editor/CanvasRight/ElementStylePanel/BarCodeStylePanel.vue b/src/views/Editor/CanvasRight/ElementStylePanel/BarCodeStylePanel.vue index 2867fd1d..4f6e6215 100644 --- a/src/views/Editor/CanvasRight/ElementStylePanel/BarCodeStylePanel.vue +++ b/src/views/Editor/CanvasRight/ElementStylePanel/BarCodeStylePanel.vue @@ -140,7 +140,7 @@ const generateBarCode = async () => { if (!barcode) return; const src = `data:image/svg+xml;base64,` + btoa(new XMLSerializer().serializeToString(barcode)); await handleElement.value.setSrc(src); - templatesStore.modifedElement(); + templatesStore.modifedElement(handleElement.value, { src }); canvas.renderAll(); }; diff --git a/src/views/Editor/CanvasRight/ElementStylePanel/LineStylePanel.vue b/src/views/Editor/CanvasRight/ElementStylePanel/LineStylePanel.vue index 1a1a8721..4e99cf0b 100644 --- a/src/views/Editor/CanvasRight/ElementStylePanel/LineStylePanel.vue +++ b/src/views/Editor/CanvasRight/ElementStylePanel/LineStylePanel.vue @@ -67,24 +67,28 @@ const lineStyle = ref(handleElement.value.strokeDashArray ? 1 : 0) const updateStrokeColor = (color: string) => { if (!handleElement.value) return handleElement.value.stroke = color - updateTemplateElement() + updateTemplateElement({stroke: color}) } const changeLineStyle = () => { if (!handleElement.value) return const strokeDashArray = lineStyle.value === 1 ? [6, 6] : null handleElement.value.set({strokeDashArray}) - updateTemplateElement() + updateTemplateElement({strokeDashArray}) } const changeLineMode = (value: LinePoint, mode: 'start' | 'end') => { handleElement.value.setLineMode(value, mode) - updateTemplateElement() + let options: Record = { 'startStyle': value } + if (mode === 'end') { + options = {'endStyle': value } + } + updateTemplateElement(options) } -const updateTemplateElement = () => { +const updateTemplateElement = (options: Record) => { canvas.renderAll() - templatesStore.modifedElement() + templatesStore.modifedElement(handleElement.value, options) } diff --git a/src/views/Editor/CanvasRight/ElementStylePanel/QRCodeStylePanel.vue b/src/views/Editor/CanvasRight/ElementStylePanel/QRCodeStylePanel.vue index 84a8372c..272bacac 100644 --- a/src/views/Editor/CanvasRight/ElementStylePanel/QRCodeStylePanel.vue +++ b/src/views/Editor/CanvasRight/ElementStylePanel/QRCodeStylePanel.vue @@ -135,7 +135,7 @@ const generateQRCode = async (style?: QRCodeType) => { const src = `data:image/svg+xml;base64,` + btoa(generateQRCodeMap[codeStyle](encodeData)) const qrcodeElement = canvasObject.value as QRCodeElement await qrcodeElement.setSrc(src) - templatesStore.modifedElement() + templatesStore.modifedElement(qrcodeElement, { src }) canvas.renderAll() } diff --git a/src/views/Editor/CanvasRight/ElementStylePanel/TextboxStylePanel.vue b/src/views/Editor/CanvasRight/ElementStylePanel/TextboxStylePanel.vue index 981a4440..6eba0795 100644 --- a/src/views/Editor/CanvasRight/ElementStylePanel/TextboxStylePanel.vue +++ b/src/views/Editor/CanvasRight/ElementStylePanel/TextboxStylePanel.vue @@ -293,17 +293,17 @@ const handleElementFontFamily = (fontFamily: string) => { } else { handleElement.value.set({fontFamily}) + templatesStore.modifedElement(handleElement.value, {fontFamily}) } - templatesStore.modifedElement() canvas.renderAll() } -// +// 修改输入字体大小 const handleElementInputSize = (val: string) => { val = val.replace(/[^\d]/g, '') if (val) { - console.log('handleSize:', val) handleElement.value.set({fontSize: val}) + templatesStore.modifedElement(handleElement.value, {fontSize: val}) } } @@ -316,8 +316,8 @@ const handleElementFontSize = (fontSize: string) => { } else { handleElement.value.set({fontSize}) + templatesStore.modifedElement(handleElement.value, {fontSize}) } - templatesStore.modifedElement() canvas.renderAll() } @@ -328,10 +328,8 @@ const updateFontColor = (fill: string) => { handleElement.value.setSelectionStyles({fill}) } else { - handleElement.value.set({fill, color: fill}) + templatesStore.modifedElement(handleElement.value, {fill, color: fill}) } - templatesStore.modifedElement() - canvas.renderAll() } // 修改背景颜色 @@ -345,9 +343,8 @@ const updateBackgroundColor = (backgroundColor: string) => { } else { handleElement.value.set(changeData) + templatesStore.modifedElement(handleElement.value, changeData) } - templatesStore.modifedElement() - canvas.renderAll() } // 修改字体大小 @@ -359,8 +356,8 @@ const handleElementFontsize = (mode: string) => { } else { handleElement.value.set({fontSize}) + templatesStore.modifedElement(handleElement.value, {fontSize}) } - templatesStore.modifedElement() canvas.renderAll() } @@ -368,7 +365,6 @@ const handleElementFontsize = (mode: string) => { const handleElementBlod = () => { const fontBold = 'bold', fontNormal = 'normal' if (handleElement.value.isEditing) { - console.log('handleElement.value:', handleElement.value.styles) const blodState = handleElement.value.getSelectionStyles().find(item => item.fontWeight !== fontBold) if (!blodState || (JSON.stringify(blodState) === '{}' && handleElement.value.fontWeight === fontBold)) { handleElement.value.setSelectionStyles({'fontWeight': fontNormal}) @@ -381,6 +377,7 @@ const handleElementBlod = () => { const elementStyle = handleElement.value.styles if (handleElement.value.fontWeight === fontBold) { handleElement.value.set({fontWeight: fontNormal}) + templatesStore.modifedElement(handleElement.value, {fontWeight: fontNormal}) for (let i in elementStyle) { for (let j in elementStyle[i]) { (elementStyle[i][j] as TextboxElement).set({fontWeight: fontNormal}) @@ -389,6 +386,7 @@ const handleElementBlod = () => { } else { handleElement.value.set({fontWeight: fontBold}) + templatesStore.modifedElement(handleElement.value, {fontWeight: fontBold}) for (let i in elementStyle) { for (let j in elementStyle[i]) { (elementStyle[i][j] as TextboxElement).set({fontWeight: fontBold}) @@ -397,8 +395,6 @@ const handleElementBlod = () => { } } } - templatesStore.modifedElement() - canvas.renderAll() } // 修改斜体 @@ -410,9 +406,9 @@ const handleElementItalic = () => { } else { handleElement.value.set({fontStyle}) + templatesStore.modifedElement(handleElement.value, {fontStyle}) } - templatesStore.modifedElement() - canvas.renderAll() + } // 修改删除线 @@ -422,9 +418,8 @@ const handleElementLinethrough = () => { } else { handleElement.value.set({linethrough: !handleElement.value.linethrough}) + templatesStore.modifedElement(handleElement.value, {linethrough: !handleElement.value.linethrough}) } - templatesStore.modifedElement() - canvas.renderAll() } // 修改中划线 @@ -434,9 +429,8 @@ const handleElementUnderline = () => { } else { handleElement.value.set({underline: !handleElement.value.underline}) + templatesStore.modifedElement(handleElement.value, {underline: !handleElement.value.underline}) } - templatesStore.modifedElement() - canvas.renderAll() } // 修改字体居中 @@ -446,9 +440,8 @@ const handleTextAlign = (textAlign: string) => { } else { handleElement.value.set({textAlign}) + templatesStore.modifedElement(handleElement.value, {textAlign}) } - templatesStore.modifedElement() - canvas.renderAll() } // 修改缩进 @@ -459,8 +452,7 @@ const handleElementCharSpacing = (mode: '+' | '-') => { } const charSpacing = mode === '+' ? handleCharSpacing + 10 : handleCharSpacing - 10 handleElement.value.set({ charSpacing }) - templatesStore.modifedElement() - canvas.renderAll() + templatesStore.modifedElement(handleElement.value, { charSpacing }) } const changeLineHeight = (lineHeight: number) => { @@ -469,9 +461,8 @@ const changeLineHeight = (lineHeight: number) => { } else { handleElement.value.set({lineHeight}) + templatesStore.modifedElement(handleElement.value, { lineHeight }) } - templatesStore.modifedElement() - canvas.renderAll() } const changeCharSpacing = (charSpacing: number) => { @@ -480,8 +471,9 @@ const changeCharSpacing = (charSpacing: number) => { } else { handleElement.value.set({charSpacing}) + templatesStore.modifedElement(handleElement.value, {charSpacing}) } - templatesStore.modifedElement() + canvas.renderAll() } @@ -500,7 +492,7 @@ const handleElementArrange = (status: boolean) => { if (activeObject) canvas.remove(activeObject) canvas.discardActiveObject() canvas.add(textElement) - templatesStore.modifedElement() + templatesStore.addElement(textElement) canvas.setActiveObject(textElement) mainStore.setCanvasObject(textElement) canvas.renderAll() @@ -539,35 +531,21 @@ const handleElementDeformation = () => { } canvas.add(text) handleElement.value.set({visible: false}) - templatesStore.modifedElement() + templatesStore.addElement(text) canvas.setActiveObject(text) canvas.renderAll() } -const handleElementStyleClear = () => { - handleElement.value.cleanStyle('fontWeight') - templatesStore.modifedElement() - canvas.renderAll() -} - const changeArcTextRadius = (val: number) => { (handleElement.value as ArcText).setRadius(val) - canvas.renderAll() + templatesStore.modifedElement(handleElement.value, { radius: val }) } const changeArcTextStatus = (showCurvature: boolean) => { (handleElement.value as ArcText).set({showCurvature}) - canvas.renderAll() + templatesStore.modifedElement(handleElement.value, { showCurvature }) } -onMounted(() => { - // const fontsizeSelect = document.querySelector('.fontsize input') - // if (!fontsizeSelect) return - // // fontsizeSelect.addEventListener('input', (val: any) => { - // // console.log('val:', val) - // // val.target.value = val.target.value.replace(/[^\d]/g,'') - // // }) -})