capture 처리 추가

src/common/common.js

@@ -214,6 +214,7 @@ export const SAVE_KEY = [
   'isSortedPoints',
   'isMultipleOf45',
   'from',
+  'originColor',
 ]
 
 export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype, fabric.Group.prototype]

src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx

@@ -103,11 +103,11 @@ export default function CircuitTrestleSetting({ id }) {
   }, [])
 
   const capture = async (type) => {
-    beforeCapture()
+    beforeCapture(type)
 
     await handleCanvasToPng(type)
 
-    afterCapture()
+    afterCapture(type)
 
     return new Promise((resolve) => {
       setTimeout(() => {
@@ -117,11 +117,23 @@ export default function CircuitTrestleSetting({ id }) {
   }
 
   // 캡쳐 전 처리
-  const beforeCapture = () => {
+  const beforeCapture = (type) => {
     setCanvasZoom(100)
     canvas.set({ zoom: 1 })
     canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
 
+    const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+    const circuitNumberTexts = canvas.getObjects().filter((obj) => obj.name === 'circuitNumber')
+
+    if (type === 2) {
+      modules.forEach((module) => {
+        module.set({ originColor: module.fill, fill: null, strokeWidth: 2 })
+      })
+      circuitNumberTexts.forEach((text) => {
+        text.set({ visible: false })
+      })
+    }
+
     canvas.renderAll()
 
     // roof polygon들의 중간점 계산
@@ -169,13 +181,27 @@ export default function CircuitTrestleSetting({ id }) {
   }
 
   // 캡쳐 후 처리
-  const afterCapture = () => {
+  const afterCapture = (type) => {
     setCanvasZoom(100)
     canvas.set({ zoom: 1 })
     canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
     changeFontSize('lengthText', lengthText.fontSize.value)
     changeFontSize('circuitNumber', circuitNumberText.fontSize.value)
     changeFontSize('flowText', flowText.fontSize.value)
+
+    const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+    const circuitNumberTexts = canvas.getObjects().filter((obj) => obj.name === 'circuitNumber')
+    if (type === 2) {
+      modules.forEach((module) => {
+        module.set({
+          fill: module.originColor,
+          strokeWidth: 0.3,
+        })
+      })
+      circuitNumberTexts.forEach((text) => {
+        text.set({ visible: true })
+      })
+    }
     canvas.renderAll()
   }