all ts errors resolved. electron app builds

rabbit-ear · Oct 8, 2024 · 78534cd · 78534cd
1 parent 3b4456b
commit 78534cd
Show file tree

Hide file tree

Showing 110 changed files with 1,675 additions and 2,621 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -31,5 +31,11 @@ module.exports = {
         functions: "always-multiline",
       },
     ],
+    // additional rules.
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { varsIgnorePattern: "^_", argsIgnorePattern: "^_" },
+    ],
   },
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "main": "./out/main/index.js",
   "author": "Kraft",
   "license": "GPLv3",
+  "type": "commonjs",
   "scripts": {
     "format": "prettier --plugin prettier-plugin-svelte --write .",
     "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",

diff --git a/src/renderer/model/model.svelte.ts b/src/renderer/model/model.svelte.ts
@@ -7,7 +7,20 @@ import { excludeS } from "rabbit-ear/math/compare.js";
 
 export type Shape = {
   name: string;
-  params: object;
+  params: {
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    cx?: number;
+    cy?: number;
+    r?: number;
+    d?: string;
+  };
 };
 
 const intersectLines = (a, b): [number, number] => {
@@ -33,11 +46,14 @@ export const shapeToElement = ({ name, params }: Shape): SVGElement | undefined
       return ear.svg.circle(params.cx, params.cy, params.r);
     case "path":
       return ear.svg.path(params.d);
+    default:
+      return undefined;
   }
 };
 
 // temporarily returns all circles, that's all.
-const getShapesInRect = (shapes: Shape[], rect): number[] => {
+//const getShapesInRect = (shapes: Shape[], rect): number[] => {
+const getShapesInRect = (shapes: Shape[]): number[] => {
   return shapes
     .map(({ name }, i) => (name === "circle" ? i : undefined))
     .filter((a) => a !== undefined);
@@ -52,8 +68,10 @@ export class Model {
   // snap points
   snapPoints: [number, number][] = $state([]);
 
-  selectedInsideRect(rect): void {
-    this.selected = getShapesInRect(this.shapes, rect);
+  //selectedInsideRect(rect): void {
+  selectedInsideRect(): void {
+    //this.selected = getShapesInRect(this.shapes, rect);
+    this.selected = getShapesInRect(this.shapes);
   }
 
   push(...newShapes: Shape[]): void {
@@ -114,6 +132,10 @@ export class Model {
   constructor() {
     this.#effects = [this.#makeIntersectionsEffect()];
   }
+
+  dealloc(): void {
+    this.#effects.forEach((fn) => fn());
+  }
 }
 
 //export const model = new Model();

diff --git a/src/renderer/ui/UI.svelte.ts b/src/renderer/ui/UI.svelte.ts
@@ -15,7 +15,7 @@ export class UI {
     WebGLViewport,
   };
 
-  get tool(): UITool {
+  get tool(): UITool | undefined {
     return this.#tool;
   }
   // no need to set the tool directly. use a string ("line", "zoom"), the tool's name.

diff --git a/src/renderer/ui/components/DebugPanel.svelte b/src/renderer/ui/components/DebugPanel.svelte
@@ -3,20 +3,20 @@
   import { SVGViewport } from "../viewport/SVGViewport/SVGViewport.svelte.ts";
   import { WebGLViewport } from "../viewport/WebGLViewport/WebGLViewport.svelte.ts";
 
-  const logModel = () => {
+  const logModel = (): void => {
     console.log($state.snapshot(app.model.shapes));
   };
-  const newSVG = () => {
+  const newSVG = (): void => {
     app.ui?.viewports.push(new SVGViewport());
   };
-  const newWebGL = () => {
+  const newWebGL = (): void => {
     app.ui?.viewports.push(new WebGLViewport());
   };
-  const removeView = () => {
+  const removeView = (): void => {
     app.ui?.viewports.pop();
   };
 
-  const toggleSVGHandedness = () => {
+  const toggleSVGHandedness = (): void => {
     SVGViewport.settings.rightHanded = !SVGViewport.settings.rightHanded;
   };
   //<input type="checkbox" id="verticalUp" checked={renderer.view.verticalUp}/>

diff --git a/src/renderer/ui/components/SVG/SVGCanvas.svelte b/src/renderer/ui/components/SVG/SVGCanvas.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { SVGAttributes } from "svelte/elements";
   import type { Snippet } from "svelte";
 
   interface PropsType {
@@ -14,7 +15,7 @@
     ontouchend?: (e: TouchEvent) => void;
     ontouchcancel?: (e: TouchEvent) => void;
     children?: Snippet;
-    rest?: any[];
+    //props?: unknown[];
   }
 
   let {
@@ -30,16 +31,19 @@
     ontouchend,
     ontouchcancel,
     children,
-    ...rest
-  }: PropsType = $props();
+    ...props
+  }: PropsType & SVGAttributes<SVGSVGElement> = $props();
+
+  const onfocus = (): void => {};
+  const onblur = (): void => {};
 </script>
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
   role="presentation"
   bind:this={svg}
-  onfocus={() => {}}
-  onblur={() => {}}
+  {onfocus}
+  {onblur}
   {viewBox}
   {onmousedown}
   {onmousemove}
@@ -50,7 +54,7 @@
   {ontouchmove}
   {ontouchend}
   {ontouchcancel}
-  {...rest}>
+  {...props}>
   {#if children}
     {@render children()}
   {/if}

diff --git a/src/renderer/ui/components/SVG/SVGElements.svelte b/src/renderer/ui/components/SVG/SVGElements.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
+  import type { SVGAttributes } from "svelte/elements";
   import { shapeToElement, type Shape } from "../../../model/model.svelte.ts";
 
   type PropsType = {
     elements: Shape[];
   };
 
-  const { elements, ...rest }: PropsType = $props();
+  const { elements, ...props }: PropsType & SVGAttributes<SVGGElement> = $props();
 
   let g: SVGGElement;
 
   const svgElements = $derived(
     elements.map(shapeToElement).filter((a) => a !== undefined),
   );
 
-  const remove = (el: Element) => {
+  const remove = (el: Element): void => {
     while (el.children.length) {
       el.removeChild(el.children[0]);
     }
@@ -25,4 +26,4 @@
   });
 </script>
 
-<g bind:this={g} {...rest} />
+<g bind:this={g} {...props} />
diff --git a/src/renderer/ui/components/SVG/SVGTouchCanvas.svelte b/src/renderer/ui/components/SVG/SVGTouchCanvas.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { SVGAttributes } from "svelte/elements";
   import type { Snippet } from "svelte";
   import SVGCanvas from "./SVGCanvas.svelte";
   import type {
@@ -22,9 +23,22 @@
     ontouchend?: (e: ViewportTouchEvent) => void;
     ontouchcancel?: (e: ViewportTouchEvent) => void;
     children?: Snippet;
-    rest?: any[];
+    //props?: unknown[];
   }
 
+  type SVGWithoutEvents = Omit<
+    SVGAttributes<SVGSVGElement>,
+    | "onmousedown"
+    | "onmousemove"
+    | "onmouseup"
+    | "onmouseleave"
+    | "onwheel"
+    | "ontouchmove"
+    | "ontouchstart"
+    | "ontouchend"
+    | "ontouchcancel"
+  >;
+
   let {
     svg = $bindable(),
     viewBox = "0 0 1 1",
@@ -39,14 +53,14 @@
     ontouchend: touchend,
     ontouchcancel: touchcancel,
     children,
-    ...rest
-  }: PropsType = $props();
+    ...props
+  }: PropsType & SVGWithoutEvents = $props();
 
   const getSVG = (e: MouseEvent | TouchEvent): SVGSVGElement => {
     if (svg) {
       return svg;
     }
-    const foundSVG = findInParents(e.target, "svg") as SVGSVGElement;
+    const foundSVG = findInParents(e.target as Element, "svg") as SVGSVGElement;
     return foundSVG;
   };
 
@@ -73,21 +87,20 @@
       point: convertToViewBox(getSVG(e), [e.x, e.y]),
     });
 
-  const onmousedown = (e: MouseEvent) => mousedown?.(formatMouseEvent(e));
-  const onmousemove = (e: MouseEvent) => mousemove?.(formatMouseEvent(e));
-  const onmouseup = (e: MouseEvent) => mouseup?.(formatMouseEvent(e));
-  const onmouseleave = (e: MouseEvent) => mouseleave?.(formatMouseEvent(e));
-  const onwheel = (e: WheelEvent) => wheel?.(formatWheelEvent(e));
-  const ontouchmove = (e: TouchEvent) => touchmove?.(formatTouchEvent(e));
-  const ontouchstart = (e: TouchEvent) => touchstart?.(formatTouchEvent(e));
-  const ontouchend = (e: TouchEvent) => touchend?.(formatTouchEvent(e));
-  const ontouchcancel = (e: TouchEvent) => touchcancel?.(formatTouchEvent(e));
+  const onmousedown = (e: MouseEvent): void => mousedown?.(formatMouseEvent(e));
+  const onmousemove = (e: MouseEvent): void => mousemove?.(formatMouseEvent(e));
+  const onmouseup = (e: MouseEvent): void => mouseup?.(formatMouseEvent(e));
+  const onmouseleave = (e: MouseEvent): void => mouseleave?.(formatMouseEvent(e));
+  const onwheel = (e: WheelEvent): void => wheel?.(formatWheelEvent(e));
+  const ontouchmove = (e: TouchEvent): void => touchmove?.(formatTouchEvent(e));
+  const ontouchstart = (e: TouchEvent): void => touchstart?.(formatTouchEvent(e));
+  const ontouchend = (e: TouchEvent): void => touchend?.(formatTouchEvent(e));
+  const ontouchcancel = (e: TouchEvent): void => touchcancel?.(formatTouchEvent(e));
 </script>
 
 <SVGCanvas
   bind:svg
   {viewBox}
-  {invertVertical}
   {onmousedown}
   {onmousemove}
   {onmouseup}
@@ -97,7 +110,7 @@
   {ontouchmove}
   {ontouchend}
   {ontouchcancel}
-  {...rest}>
+  {...props}>
   {#if children}
     {@render children()}
   {/if}

diff --git a/src/renderer/ui/components/ToolbarButton.svelte b/src/renderer/ui/components/ToolbarButton.svelte
@@ -11,13 +11,11 @@
   const className = $derived(
     [name, highlighted].filter((a) => a !== undefined).join(" "),
   );
+
+  const onclick = (): void => app.ui?.setToolName(name);
 </script>
 
-<button
-  title={name}
-  class={className}
-  disabled={false}
-  onclick={() => app.ui?.setToolName(name)}>
+<button title={name} class={className} disabled={false} {onclick}>
   {#if Icon}
     <Icon></Icon>
   {/if}

diff --git a/src/renderer/ui/components/WebGL/WebGLCanvas.svelte b/src/renderer/ui/components/WebGL/WebGLCanvas.svelte
@@ -43,14 +43,14 @@
     ontouchstart?: (e: TouchEvent) => void;
     ontouchend?: (e: TouchEvent) => void;
     ontouchcancel?: (e: TouchEvent) => void;
-    redraw?: Function;
+    redraw?: () => void;
   };
 
   let {
     graph = {},
     perspective = "orthographic",
     renderStyle = "creasePattern",
-    canvasSize: boundCanvasSize = $bindable([0, 0]),
+    canvasSize = $bindable([0, 0]),
     projectionMatrix: boundProjectionMatrix = $bindable([...identity4x4]),
     viewMatrix = [...identity4x4],
     layerNudge = 0.01,
@@ -82,17 +82,17 @@
   let { gl, version } = $derived(
     canvas ? initializeWebGL(canvas) : { gl: undefined, version: 0 },
   );
-  let canvasSize: [number, number] = $state([1, 1]);
+  //let canvasSize: [number, number] = $state([1, 1]);
   let modelMatrix = $derived(makeModelMatrix(graph));
   let modelViewMatrix = $derived(multiplyMatrices4(viewMatrix, modelMatrix));
   let projectionMatrix = $derived(makeProjectionMatrix(canvasSize, perspective, fov));
 
   $effect(() => {
     boundProjectionMatrix = [...projectionMatrix];
   });
-  $effect(() => {
-    boundCanvasSize = [...canvasSize];
-  });
+  //$effect(() => {
+  //  boundCanvasSize = [...canvasSize];
+  //});
 
   let uniformOptions = $derived({
     projectionMatrix,
@@ -140,9 +140,9 @@
 
   let uniforms = $derived(models.map((model) => model.makeUniforms(uniformOptions)));
 
-  const deallocModels = () => models.forEach((model) => deallocModel(gl, model));
+  const deallocModels = (): void => models.forEach((model) => deallocModel(gl, model));
 
-  const onresize = () => {
+  const onresize = (): void => {
     if (!gl || !canvas) {
       return;
     }

diff --git a/src/renderer/ui/components/WebGL/WebGLTouchCanvas.svelte b/src/renderer/ui/components/WebGL/WebGLTouchCanvas.svelte
@@ -13,7 +13,6 @@
     graph: FOLD;
     perspective: string;
     renderStyle: string;
-    // projectionMatrix: number[],
     viewMatrix: number[];
     layerNudge?: number;
     fov?: number;
@@ -36,14 +35,13 @@
     ontouchstart?: (e: ViewportTouchEvent) => void;
     ontouchend?: (e: ViewportTouchEvent) => void;
     ontouchcancel?: (e: ViewportTouchEvent) => void;
-    redraw?: Function;
+    redraw?: () => void;
   };
 
   let {
     graph = {},
     perspective = "orthographic",
     renderStyle = "creasePattern",
-    // projectionMatrix = [...identity4x4],
     viewMatrix = [...identity4x4],
     layerNudge = 0.01,
     fov = 30.25,
@@ -97,15 +95,15 @@
       ),
     });
 
-  const onmousedown = (e: MouseEvent) => mousedown?.(formatMouseEvent(e));
-  const onmousemove = (e: MouseEvent) => mousemove?.(formatMouseEvent(e));
-  const onmouseup = (e: MouseEvent) => mouseup?.(formatMouseEvent(e));
-  const onmouseleave = (e: MouseEvent) => mouseleave?.(formatMouseEvent(e));
-  const onwheel = (e: WheelEvent) => wheel?.(formatWheelEvent(e));
-  const ontouchmove = (e: TouchEvent) => touchmove?.(formatTouchEvent(e));
-  const ontouchstart = (e: TouchEvent) => touchstart?.(formatTouchEvent(e));
-  const ontouchend = (e: TouchEvent) => touchend?.(formatTouchEvent(e));
-  const ontouchcancel = (e: TouchEvent) => touchcancel?.(formatTouchEvent(e));
+  const onmousedown = (e: MouseEvent): void => mousedown?.(formatMouseEvent(e));
+  const onmousemove = (e: MouseEvent): void => mousemove?.(formatMouseEvent(e));
+  const onmouseup = (e: MouseEvent): void => mouseup?.(formatMouseEvent(e));
+  const onmouseleave = (e: MouseEvent): void => mouseleave?.(formatMouseEvent(e));
+  const onwheel = (e: WheelEvent): void => wheel?.(formatWheelEvent(e));
+  const ontouchmove = (e: TouchEvent): void => touchmove?.(formatTouchEvent(e));
+  const ontouchstart = (e: TouchEvent): void => touchstart?.(formatTouchEvent(e));
+  const ontouchend = (e: TouchEvent): void => touchend?.(formatTouchEvent(e));
+  const ontouchcancel = (e: TouchEvent): void => touchcancel?.(formatTouchEvent(e));
 
   // <!-- viewMatrix={Renderer.ViewMatrix} -->
 </script>