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 {
 class Brush extends ComponentInterface {
-	constructor(fabricObj) {
-		super();
-		this.color = new Color(fabricObj.stroke);
-		this.paths = fabricObj.path;
-		this.size = fabricObj.strokeWidth;
-	}
+  constructor(fabricObj) {
+    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 {
 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
-		} else {
-			const rgba = colorData.substring(5, colorData.length - 1).split(",");
-			this.r = parseInt(rgba[0]);
-			this.g = parseInt(rgba[1]);
-			this.b = parseInt(rgba[2]);
-			this.a = parseFloat(rgba[3]);
-		}
-	}
+  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;
+    } else {
+      const rgba = colorData.substring(5, colorData.length - 1).split(",");
+      this.r = parseInt(rgba[0]);
+      this.g = parseInt(rgba[1]);
+      this.b = parseInt(rgba[2]);
+      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;
\ No newline at end of file
+export default Color;

 class ComponentInterface {
 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;
\ No newline at end of file
+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 {
 class Text extends ComponentInterface {
-	constructor(fabricObj) {
-		super();
-		this.color = new Color(fabricObj.fill);
-		this.text = {
-			plain:fabricObj.text,
-			splited:Hangul.disassemble(fabricObj.text)
-		};
-		this.position = {
-			top:fabricObj.top,
-			left:fabricObj.left
-		}
-		this.font = {
-			size:fabricObj.fontSize,
-			style:fabricObj.fontStyle,
-			weight:fabricObj.fontWeight,
-			family:fabricObj.fontFamily
-		}
-	}
+  constructor(fabricObj) {
+    const textSplited = Hangul.disassemble(fabricObj.text);
+
+    super(textSplited.length);
+    this.color = new Color(fabricObj.fill);
+    this.text = {
+      plain: fabricObj.text,
+      splited: textSplited,
+    };
+    this.position = {
+      top: fabricObj.top,
+      left: fabricObj.left,
+    };
+    this.font = {
+      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 = {
 const Component = {
-	Brush,
-	Text
+  Brush,
+  Text,
 };
 };
 
 
-export default Component;
\ No newline at end of file
+export default Component;

 import GIF from "gifencoder";
 import GIF from "gifencoder";
-import {fabric} from "fabric"
+import { fabric } from "fabric";
 import Component from "./components";
 import Component from "./components";
 
 
 class GifGenerator {
 class GifGenerator {
@@ -30,14 +30,21 @@ class GifGenerator {
   make() {
   make() {
     const fabricObjs = this.canvas.getObjects();
     const fabricObjs = this.canvas.getObjects();
     const objs = [];
     const objs = [];
-    
+
     fabricObjs.map((fabricObj) => {
     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);
     console.log(objs);
   }
   }