Add typescript source demos

src-ts/animations/animation.ts

@@ -0,0 +1,28 @@
+import * as d3 from "d3";
+import { CoordinatesSystem } from "../cubicons/coordinateSys";
+import { Geometry } from "../cubicons/geometry";
+import { MathText } from "../cubicons/text";
+
+export const DEFAULT_EASE = d3.easeCubic;
+
+type TYPES = CoordinatesSystem | Geometry | MathText;
+
+export class Animation {
+    cubicon: any;
+    duration: number;
+    ease: Function;
+
+    constructor({
+        cubicon,
+        duration,
+        ease,
+    }: {
+        cubicon: TYPES;
+        duration?: number;
+        ease?: Function;
+    }) {
+        this.cubicon = cubicon;
+        this.duration = duration || 0;
+        this.ease = ease || DEFAULT_EASE;
+    }
+}

src-ts/animations/create.ts

@@ -0,0 +1,104 @@
+import { Animation } from "./animation";
+import { ANIME } from "../cubicons/constants";
+import { Circle, Line, Rectangle, Square, Vector } from "../cubicons/geometry";
+import { AxisProjector, Point } from "../cubicons/coordinateSys";
+
+type CREATE_TYPES =
+    | (Rectangle | Square | Circle | Line | Vector)
+    | (Point | AxisProjector);
+
+export class Create extends Animation {
+    constructor({
+        cubicon,
+        duration = ANIME.CREATE,
+        ease,
+    }: {
+        cubicon: CREATE_TYPES;
+        duration?: number;
+        ease?: Function;
+    }) {
+        super({ cubicon: cubicon, duration: duration, ease: ease });
+    }
+
+    play(sleepTime: number) {
+        this.#create(this.cubicon, sleepTime);
+    }
+
+    #create(cubicon: CREATE_TYPES, sleepTime: number) {
+        switch (cubicon.cubType) {
+            case "geometry": {
+                switch (cubicon.geoType) {
+                    case "line":
+                    case "vector": {
+                        this.#lineCreation(sleepTime);
+                        break;
+                    }
+                    default: {
+                        this.#shapeCreation(sleepTime);
+                        break;
+                    }
+                }
+                break;
+            }
+            case "coordinate-system": {
+                switch (cubicon.coordSysObjType) {
+                    case "axis-projector": {
+                        this.#lineCreation(sleepTime);
+                    }
+                    case "point": {
+                        this.#shapeCreation(sleepTime);
+                    }
+                }
+            }
+        }
+    }
+
+    #lineCreation(sleepTime: number) {
+        this.cubicon.lineStroke
+            .attr("x2", this.cubicon.WstartPoint.x)
+            .attr("y2", this.cubicon.WstartPoint.y);
+
+        this.cubicon.lineStroke
+            .transition()
+            .ease(this.ease)
+            .delay(this.cubicon.elapsedTime + sleepTime)
+            .duration(this.duration)
+            .attr("x2", this.cubicon.WendPoint.x)
+            .attr("y2", this.cubicon.WendPoint.y);
+
+        this.cubicon.elapsedTime += this.duration + sleepTime;
+
+        if (this.cubicon.constructor.name === "Vector") {
+            const drawArrowHeadAnimTime = 1500;
+            this.cubicon.arrowHead
+                .style("opacity", 0)
+                .transition()
+                .ease(this.ease)
+                .delay(this.cubicon.elapsedTime - 500)
+                .duration(drawArrowHeadAnimTime)
+                .style("opacity", 1);
+
+            this.cubicon.elapsedTime += drawArrowHeadAnimTime - 500;
+        }
+    }
+
+    #shapeCreation(sleepTime: number) {
+        this.cubicon.stroke.style("fill-opacity", 0);
+
+        const lineLen = this.cubicon.stroke.node().getTotalLength();
+        this.cubicon.stroke
+            .attr("stroke-dasharray", lineLen + ", " + lineLen)
+            .attr("stroke-dashoffset", lineLen);
+
+        this.cubicon.stroke
+            .transition()
+            .ease(this.ease)
+            .delay(this.cubicon.elapsedTime + sleepTime)
+            .duration(this.duration)
+            .attr("stroke-dashoffset", 0)
+            .style("fill", this.cubicon.fillColor)
+            .style("fill-opacity", this.cubicon.fillOpacity);
+
+        this.cubicon.elapsedTime += this.duration + sleepTime;
+    }
+}

src-ts/animations/drawAxes.ts

@@ -0,0 +1,74 @@
+import * as d3 from "d3";
+import { Animation } from "./animation";
+
+export class DrawAxes extends Animation {
+    #xNums;
+    #yNums;
+    #delayEach;
+
+    constructor(axes) {
+        super({ cubicon: axes });
+
+        this.#xNums = -this.cubicon.xRange[0] + this.cubicon.xRange[1];
+        this.#yNums = -this.cubicon.yRange[0] + this.cubicon.yRange[1];
+
+        this.#delayEach = 100;
+
+        this.arrowDuration = 600;
+        this.duration =
+            Math.max(
+                (this.#xNums + 2) * this.#delayEach,
+                (this.#yNums + 2) * this.#delayEach
+            ) + this.arrowDuration;
+    }
+
+    play(sleepTime) {
+        this.#drawAxis(this.cubicon.xAxis, sleepTime);
+        this.#drawAxis(this.cubicon.yAxis, sleepTime);
+
+        this.cubicon.elapsedTime += this.duration + sleepTime;
+    }
+
+    #drawAxis(axis, sleepTime) {
+        /// Draw axis
+        const path = axis.select("path.domain");
+        const l = path.node().getTotalLength();
+
+        path.attr("stroke-dasharray", l + ", " + l).attr(
+            "stroke-dashoffset",
+            l
+        );
+        path.transition()
+            .ease(this.ease)
+            .delay(this.cubicon.elapsedTime + sleepTime)
+            .duration(this.duration)
+            .attr("stroke-dashoffset", 0);
+
+        /// Mark ticks
+        axis.selectAll("g.tick")
+            .attr("opacity", 0)
+            .data(d3.range(0, this.#xNums + 1, 1))
+            .transition()
+            .ease(this.ease)
+            .delay(
+                (d) =>
+                    this.cubicon.elapsedTime + sleepTime + this.#delayEach * d
+            )
+            .duration(this.duration)
+            .attr("opacity", 1);
+
+        /// Fade in axes' arrows
+        axis.select("defs marker path")
+            .attr("opacity", 0)
+            .data(d3.range(0, this.#yNums + 1, 1))
+            .transition()
+            .ease(this.ease)
+            .delay(
+                this.cubicon.elapsedTime +
+                    sleepTime +
+                    this.#delayEach * this.#xNums
+            )
+            .duration(this.arrowDuration)
+            .attr("opacity", 1);
+    }
+}