Merge pull request #25 from tsaxking/chore-update-scripts-to-27051fcd…

…9f8cd70f3942b348534e33f8ec2a315f

Chore update scripts to 27051fc

client/entries/account/sign-in.ts

@@ -0,0 +1,9 @@
+import '../../utilities/imports';
+import SignIn from '../../views/components/SignIn.svelte';
+
+new SignIn({
+    target: document.body,
+    props: {
+        title: document.title,
+    },
+});

client/entries/account/sign-up.ts

@@ -0,0 +1,8 @@
+import '../../utilities/imports';
+import SignUp from '../../views/components/SignUp.svelte';
+new SignUp({
+    target: document.body,
+    props: {
+        title: document.title,
+    },
+});

client/entries/test/spline-viewer.ts

@@ -0,0 +1,188 @@
+import './../../utilities/imports';
+import { Canvas } from '../../models/canvas/canvas';
+import { Path } from '../../models/canvas/path';
+import { Circle } from '../../models/canvas/circle';
+import { Point } from '../../../shared/submodules/calculations/src/linear-algebra/point';
+import { Color } from '../../submodules/colors/color';
+import { Spline as S } from '../../../shared/submodules/calculations/src/linear-algebra/spline';
+import { DrawableEvent } from '../../models/canvas/drawable';
+import { Spline } from '../../models/canvas/spline';
+import { downloadText } from '../../utilities/downloads';
+
+const canvas = document.createElement('canvas');
+document.body.appendChild(canvas);
+document.body.classList.add('bg-dark', 'p-0', 'no-scroll', 'position-relative');
+
+const resetBtn = document.createElement('button');
+resetBtn.classList.add(
+    'btn',
+    'btn-secondary',
+    'position-absolute',
+    'top-0',
+    'start-0',
+    'm-2',
+);
+resetBtn.innerText = 'Reset';
+document.body.appendChild(resetBtn);
+
+const downloadBtn = document.createElement('button');
+downloadBtn.classList.add(
+    'btn',
+    'btn-secondary',
+    'position-absolute',
+    'top-0',
+    'end-0',
+    'm-2',
+);
+downloadBtn.innerText = 'Download JSON';
+document.body.appendChild(downloadBtn);
+
+const ctx = canvas.getContext('2d');
+if (!ctx) throw new Error('Canvas context is null');
+
+const c = new Canvas(ctx, {
+    events: [
+        'click',
+        'mousedown',
+        'mouseup',
+        'mousemove',
+        'mouseleave',
+        'touchstart',
+        'touchend',
+        'touchmove',
+        'touchcancel',
+    ],
+});
+
+const stop = () => (c.$animating = false);
+
+const spline = new S();
+
+const start = () => {
+    c.destroy();
+
+    const paths = {
+        y1: new Path([
+            [0, 0],
+            [0, 1],
+        ]),
+        'y0.25': new Path([
+            [0.25, 0],
+            [0.25, 1],
+        ]),
+        'y0.5': new Path([
+            [0.5, 0],
+            [0.5, 1],
+        ]),
+        'y0.75': new Path([
+            [0.75, 0],
+            [0.75, 1],
+        ]),
+        y0: new Path([
+            [1, 0],
+            [1, 1],
+        ]),
+        x1: new Path([
+            [0, 0],
+            [1, 0],
+        ]),
+        'x0.25': new Path([
+            [0, 0.25],
+            [1, 0.25],
+        ]),
+        'x0.5': new Path([
+            [0, 0.5],
+            [1, 0.5],
+        ]),
+        'x0.75': new Path([
+            [0, 0.75],
+            [1, 0.75],
+        ]),
+        x0: new Path([
+            [0, 1],
+            [1, 1],
+        ]),
+    };
+
+    c.add(
+        ...Object.values(paths).map((p) => {
+            p.$properties.line = {
+                color: Color.fromBootstrap('gray').toString('rgba'),
+                width: 1,
+            };
+            return p;
+        }),
+    );
+
+    spline.points = new Array(10).fill(0).map((_, i, a) => {
+        return new Point(i / a.length, 1 - i / a.length);
+    });
+
+    const circles = spline.points.map((_, i, a) => {
+        const cir = new Circle([i / a.length, 1 - i / a.length], 0.02);
+        cir.$properties.fill = {
+            color: Color.fromBootstrap('primary').toString('rgba'),
+        };
+
+        let dragging = false;
+        const start = () => (dragging = true);
+        const end = () => (dragging = false);
+
+        const move = (e: DrawableEvent) => {
+            if (!dragging) return;
+            cir.center = e.points[0];
+            spline.points[i].x = e.points[0][0];
+            spline.points[i].y = e.points[0][1];
+        };
+
+        cir.on('mousedown', start);
+        cir.on('touchstart', start);
+        cir.on('mouseup', end);
+        cir.on('touchend', end);
+        cir.on('mousemove', move);
+        cir.on('touchmove', move);
+
+        return cir;
+    });
+
+    const s = new Spline(spline, {
+        frames: 1000,
+    });
+
+    spline.magnitude = 5;
+
+    s.$properties.line = {
+        color: Color.fromBootstrap('primary').toString('rgba'),
+        width: 2,
+    };
+
+    c.add(...circles, s);
+
+    return c.animate();
+};
+
+const reset = () => {
+    stop();
+    start();
+};
+
+resetBtn.onclick = reset;
+downloadBtn.onclick = () => {
+    downloadText(
+        JSON.stringify(
+            new Array(1000).fill(0).map((_, i) => spline.ft(i / 1000)),
+        ),
+        'spline.json',
+    );
+};
+
+start();
+
+const setView = () => {
+    c.width = window.innerWidth;
+    c.height = window.innerHeight;
+};
+
+setView();
+
+window.onresize = setView;

client/models/canvas/background.ts

@@ -0,0 +1,32 @@
+import { copy } from '../../../shared/copy';
+import { Color } from '../../submodules/colors/color';
+import { Drawable } from './drawable';
+
+export class Background extends Drawable<Background> {
+    get color() {
+        return Color.parse(this.$properties.fill?.color || 'white');
+    }
+
+    set color(value: Color) {
+        this.$properties.fill = {
+            color: value.toString('rgba'),
+        };
+    }
+
+    draw(ctx: CanvasRenderingContext2D) {
+        const { width, height } = ctx.canvas;
+        ctx.fillStyle = this.color.toString('rgba');
+        ctx.fillRect(0, 0, width, height);
+    }
+
+    isIn(_point: [number, number]): boolean {
+        return true;
+    }
+
+    clone(): Background {
+        const b = new Background();
+        b.color = this.color;
+        copy(this, b);
+        return b;
+    }
+}

client/models/canvas/canvas.ts

@@ -2,6 +2,8 @@ import { Drawable, DrawableEvent } from './drawable';
 import { EventEmitter } from '../../../shared/event-emitter';
 import { attempt } from '../../../shared/attempt';
 import { Point2D } from '../../../shared/submodules/calculations/src/linear-algebra/point';
+import { Color } from '../../submodules/colors/color';
+import { Background } from './background';
 
 /**
  * Description placeholder
@@ -47,6 +49,7 @@ type CanvasOptions = {
      * @type {(keyof CanvasEvents)[]}
      */
     events: (keyof CanvasEvents)[];
+    background: Color;
 };
 
 /**
@@ -68,6 +71,8 @@ export class Canvas<T = unknown> {
         this.$data = data;
     }
 
+    public background: Background;
+
     /**
      * All drawables on the canvas
      * @date 1/25/2024 - 12:50:19 PM
@@ -145,6 +150,9 @@ export class Canvas<T = unknown> {
         this.$canvas = ctx.canvas;
         this.$ctx = ctx;
         this.$options = options;
+        this.background = new Background();
+        this.background.color = options.background || Color.fromName('white');
+        this.add(this.background);
 
         if (this.$options.events) {
             this.$options.events = this.$options.events.filter(
@@ -499,6 +507,7 @@ export class Canvas<T = unknown> {
      */
     clearDrawables() {
         this.$drawables.length = 0;
+        this.add(this.background);
     }
 
     /**

client/models/canvas/circle.ts

@@ -1,5 +1,8 @@
 import { Drawable } from './drawable';
-import { Point2D } from '../../../shared/submodules/calculations/src/linear-algebra/point';
+import {
+    Point,
+    Point2D,
+} from '../../../shared/submodules/calculations/src/linear-algebra/point';
 import { copy } from '../../../shared/copy';
 
 export class Circle extends Drawable<Circle> {
@@ -102,4 +105,10 @@ export class Circle extends Drawable<Circle> {
         copy(c, this);
         return c;
     }
+
+    // public get $Math() {
+    //     return {
+    //         center: new Point(this.center[0], this.center[1])
+    //     }
+    // }
 }

client/models/canvas/container.ts

@@ -50,7 +50,9 @@ export class Container extends Drawable<Container> {
     }
 
     clone(): Container {
-        const c = new Container(...this.$children.map((child) => child?.clone() || null));
+        const c = new Container(
+            ...this.$children.map((child) => child?.clone() || null),
+        );
         copy(this, c);
         return c;
     }

client/models/canvas/drawable.ts

@@ -64,6 +64,11 @@ export class Drawable<T = any> {
 
     public $canvas?: Canvas;
 
+    public get $Math() {
+        console.warn('Math not implemented on ' + this.constructor.name);
+        return {};
+    }
+
     constructor() {
         this.show();
 

client/models/canvas/sphere.ts

@@ -0,0 +1,11 @@
+import { Point } from '../../../shared/submodules/calculations/src/linear-algebra/point';
+import { Drawable } from './drawable';
+
+export class Sphere extends Drawable<Sphere> {
+    constructor(
+        public readonly center: Point,
+        public readonly radius: number,
+    ) {
+        super();
+    }
+}

client/models/canvas/spline.ts

@@ -0,0 +1,36 @@
+import { Drawable } from './drawable';
+import { Spline as S } from '../../../shared/submodules/calculations/src/linear-algebra/spline';
+
+type SplineOptions = {
+    frames: number;
+};
+
+export class Spline extends Drawable<Spline> {
+    constructor(
+        public readonly spline: S,
+        public readonly options: Partial<SplineOptions> = {},
+    ) {
+        super();
+    }
+
+    isIn(_point: [number, number]): boolean {
+        return false;
+    }
+
+    draw(ctx: CanvasRenderingContext2D) {
+        const { width, height } = ctx.canvas;
+        ctx.fillStyle = this.$properties.fill?.color || 'black';
+        ctx.strokeStyle = this.$properties.line?.color || 'black';
+
+        ctx.beginPath();
+        const { x, y } = this.spline.ft(0);
+        ctx.moveTo(x * width, y * height);
+
+        const frames = this.options.frames || 100;
+        for (let i = 1; i <= frames; i++) {
+            const { x, y } = this.spline.ft(i / frames);
+            ctx.lineTo(x * width, y * height);
+        }
+        ctx.stroke();
+    }
+}

client/utilities/imports.ts

@@ -19,4 +19,4 @@ import 'bootstrap/dist/js/bootstrap.bundle.min.js';
 
 // settings
 import { Settings } from '../models/settings';
-Settings.init();
+// Settings.init();