Brush, Text 동작 추가

-import ComponentInterface from "./ComponentInterface"
-import Color from "./Color"
+import ComponentInterface from "./ComponentInterface";
+import Color from "./Color";
+import { fabric } from "fabric";
 
 class Brush extends ComponentInterface {
   constructor(fabricObj) {
-		super();
+    super(fabricObj.path.length);
     this.color = new Color(fabricObj.stroke);
     this.paths = fabricObj.path;
     this.size = fabricObj.strokeWidth;
+    this.position = {
+      top: fabricObj.top,
+      left: fabricObj.left,
+    };
+  }
+
+  getCurrentFabricObject() {
+    const paths = this.paths.filter((_, i) => i < this.state.current);
+    if (paths.length > 0) {
+      const popCount = paths[paths.length - 1].length - 3;
+      for (let i = 0; i < popCount; i++) {
+        paths[paths.length - 1].pop();
+      }
+      paths[paths.length - 1][0] = "L";
+    }
+    return new fabric.Path(paths, {
+      top: this.position.top,
+      left: this.position.left,
+      stroke: this.color.getRgba(),
+      strokeWidth: this.size,
+    });
+  }
+
+  next() {
+    return this.addState(10);
   }
 }
 
-export default Brush
\ No newline at end of file
+export default Brush;

 class Color {
   constructor(colorData) {
-		if(colorData[0] == "#") {
-			this.r = parseInt(colorData.substring(1, 3), 16)
-			this.g = parseInt(colorData.substring(3, 5), 16)
-			this.b = parseInt(colorData.substring(5, 7), 16)
-			this.a = 1
+    if (colorData[0] == "#") {
+      this.r = parseInt(colorData.substring(1, 3), 16);
+      this.g = parseInt(colorData.substring(3, 5), 16);
+      this.b = parseInt(colorData.substring(5, 7), 16);
+      this.a = 1;
     } else {
       const rgba = colorData.substring(5, colorData.length - 1).split(",");
       this.r = parseInt(rgba[0]);
@@ -13,6 +13,16 @@ class Color {
       this.a = parseFloat(rgba[3]);
     }
   }
+
+  getColorCode() {
+    return `#${this.r.toString(16)}${this.g.toString(16)}${this.b.toString(
+      16
+    )}`;
+  }
+
+  getRgba() {
+    return `rgba(${this.r},${this.g},${this.b},${this.a})`;
+  }
 }
 
 export default Color;

 class ComponentInterface {
+  constructor(maxState) {
+    this.state = {
+      current: 0,
+      max: maxState,
+    };
+  }
 
+  getCurrentFabricObject() {}
+
+  addState(count = 1) {
+    if (this.state.current == this.state.max) {
+      this.state.current++;
+    } else {
+      this.state.current = Math.min(this.state.current + count, this.state.max);
+    }
+  }
+
+  end() {
+    return this.state.current == this.state.max + 1;
+  }
 }
 
 export default ComponentInterface;

-import ComponentInterface from "./ComponentInterface"
-import Color from "./Color"
-import Hangul from "hangul-js"
+import ComponentInterface from "./ComponentInterface";
+import Color from "./Color";
+import Hangul from "hangul-js";
+import { fabric } from "fabric";
 
 class Text extends ComponentInterface {
   constructor(fabricObj) {
-		super();
+    const textSplited = Hangul.disassemble(fabricObj.text);
+
+    super(textSplited.length);
     this.color = new Color(fabricObj.fill);
     this.text = {
-			plain:fabricObj.text,
-			splited:Hangul.disassemble(fabricObj.text)
+      plain: fabricObj.text,
+      splited: textSplited,
     };
     this.position = {
-			top:fabricObj.top,
-			left:fabricObj.left
-		}
+      top: fabricObj.top,
+      left: fabricObj.left,
+    };
     this.font = {
-			size:fabricObj.fontSize,
-			style:fabricObj.fontStyle,
-			weight:fabricObj.fontWeight,
-			family:fabricObj.fontFamily
+      size: fabricObj.fontSize,
+      style: fabricObj.fontStyle,
+      weight: fabricObj.fontWeight,
+      family: fabricObj.fontFamily,
+    };
   }
+
+  getCurrentFabricObject() {
+    return new fabric.Text(
+      Hangul.assemble(
+        this.text.splited.filter((_, i) => i < this.state.current)
+      ),
+      {
+        top: this.position.top,
+        left: this.position.left,
+        fontFamily: this.font.family,
+        fontSize: this.font.size,
+        fontWeight: this.font.weight,
+        fontStyle: this.font.style,
+        fill: this.color.getColorCode(),
+      }
+    );
+  }
+
+  next() {
+    return this.addState();
   }
 }
 
-export default Text
\ No newline at end of file
+export default Text;

-import Brush from "./Brush"
-import Text from "./Text"
+import Brush from "./Brush";
+import Text from "./Text";
 
 const Component = {
   Brush,
-	Text
+  Text,
 };
 
 export default Component;

 import GIF from "gifencoder";
-import {fabric} from "fabric"
+import { fabric } from "fabric";
 import Component from "./components";
 
 class GifGenerator {
@@ -32,12 +32,19 @@ class GifGenerator {
     const objs = [];
 
     fabricObjs.map((fabricObj) => {
-      if(fabricObj instanceof fabric.Path) {
-        objs.push(new Component.Brush(fabricObj))
-      } else if(fabricObj.text !== undefined) {
-        objs.push(new Component.Text(fabricObj))
+      if (fabricObj instanceof fabric.Path) {
+        objs.push(new Component.Brush(fabricObj));
+      } else if (fabricObj.text !== undefined) {
+        objs.push(new Component.Text(fabricObj));
       }
-    })
+    });
+
+    objs.map((obj) => {
+      while (!obj.end()) {
+        console.log(obj.getCurrentFabricObject());
+        obj.next();
+      }
+    });
 
     console.log(objs);
   }