Merge branch 'feat/component' into develop

@@ -21,6 +21,7 @@
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "gifencoder": "^2.0.1",
+    "hangul-js": "^0.2.6",
     "stream": "0.0.2"
   }
 }

+import ComponentInterface from "./ComponentInterface";
+import Color from "./Color";
+import { fabric } from "fabric";
+
+class Brush extends ComponentInterface {
+  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;

+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]);
+    }
+  }
+
+  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 { fabric } from "fabric";
+
+class Text extends ComponentInterface {
+  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;

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

 import GIF from "gifencoder";
+import { fabric } from "fabric";
+import Component from "./components";
 
 class GifGenerator {
   constructor(canvas) {
@@ -13,17 +15,39 @@ class GifGenerator {
     this.gif.setQuality(10);
   }
 
-  addFrame(delay = 0) {
+  _addFrame(delay = 0) {
     this.gif.setDelay(delay);
     this.gif.addFrame(this.canvas.getContext());
   }
 
-  render() {
+  _render() {
     this.gif.finish();
     const byte = new Uint8Array(this.gif.out.data);
 
     return new Blob([byte], { type: "image/gif" });
   }
+
+  make() {
+    const fabricObjs = this.canvas.getObjects();
+    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));
+      }
+    });
+
+    objs.map((obj) => {
+      while (!obj.end()) {
+        console.log(obj.getCurrentFabricObject());
+        obj.next();
+      }
+    });
+
+    console.log(objs);
+  }
 }
 
 window.GifGenerator = GifGenerator;