Merge pull request #210 from PRIME-TU-Delft/yustarandomname-complex-n…

…umbers

complex numbers applet

.gitignore

@@ -22,3 +22,4 @@ vite.config.ts.timestamp-*
 build-*
 
 **/*.log
+chromatic.log

chromatic.log

@@ -7,108 +7,17 @@ Authenticating with Chromatic
 Authenticated with Chromatic
     → Using project token '****************1f8a'
 Retrieving git information
+⚠ Using outdated package
+You are using an outdated version of the Chromatic CLI (v7.5.4).
+A new major version is available (v10.7.1).
+Run yarn upgrade chromatic --latest to upgrade.
 Retrieved git information
-    → Commit 'aafc802' on branch 'split-canvas'; found 1 parent build
+    → Commit 'de29afc' on branch '#67-oriented-area'; found 2 parent builds
 Collecting Storybook metadata
 Collected Storybook metadata
-    → Storybook 7.5.1 for Svelte; using the @storybook/sveltekit builder (7.5.1); supported addons found: Links, Essentials, Interactions
+    → Storybook 7.6.10 for Svelte; using the @storybook/sveltekit builder (7.6.10); supported addons found: Links, Essentials, Interactions
 Initializing build
 Initialized build
-    → Build 4 initialized
+    → Build 614 initialized
 Building your Storybook
-    → Running command: pnpm run build-storybook --output-dir /var/folders/9_/f1r1122x0z30nmvsjdphgnh40000gn/T/chromatic--64957-8I3Yuc4zViqV
-Storybook built in 14 seconds
-    → View build log at /Users/abeldebruijn/Documents/GitHub/turborepo-visuals/build-storybook.log
-Publish your built Storybook
-    → Validating Storybook files
-Publishing your built Storybook
-    → Retrieving target location
-    → Starting publish
-    → [                    ] 0%
-    → [                    ] 1%
-    → [=                   ] 4%
-    → [=                   ] 7%
-    → [==                  ] 12%
-    → [===                 ] 13%
-    → [===                 ] 15%
-    → [===                 ] 16%
-    → [====                ] 21%
-    → [====                ] 22%
-    → [=====               ] 23%
-    → [=====               ] 24%
-    → [=====               ] 27%
-    → [======              ] 28%
-    → [======              ] 32%
-    → [=======             ] 37%
-    → [========            ] 40%
-    → [========            ] 41%
-    → [=========           ] 46%
-    → [==========          ] 48%
-    → [==========          ] 49%
-    → [==========          ] 50%
-    → [==========          ] 52%
-    → [===========         ] 55%
-    → [===========         ] 56%
-    → [============        ] 58%
-    → [============        ] 60%
-    → [============        ] 62%
-    → [=============       ] 63%
-    → [=============       ] 64%
-    → [=============       ] 66%
-    → [==============      ] 68%
-    → [==============      ] 71%
-    → [==============      ] 72%
-    → [===============     ] 74%
-    → [===============     ] 77%
-    → [================    ] 79%
-    → [================    ] 80%
-    → [================    ] 82%
-    → [=================   ] 83%
-    → [=================   ] 84%
-    → [=================   ] 85%
-    → [=================   ] 86%
-    → [=================   ] 87%
-    → [==================  ] 88%
-    → [==================  ] 89%
-    → [==================  ] 90%
-    → [==================  ] 91%
-    → [==================  ] 92%
-    → [=================== ] 93%
-    → [=================== ] 95%
-    → [=================== ] 97%
-    → [====================] 98%
-    → [====================] 99%
-Publish complete in 17 seconds
-    → View your Storybook at https://64bd84b22e54c77ce9fcbc6b-ikpysqvuwf.chromatic.com
-Verifying your Storybook
-    → This may take a few minutes
-Started build 4
-    → View build details at https://www.chromatic.com/build?appId=64bd84b22e54c77ce9fcbc6b&number=4
-Running 22 tests
-    → This may take a few minutes
-ℹ Speed up Continuous Integration
-Your project is linked to GitHub so Chromatic will report results there.
-This means you can pass the --exit-once-uploaded flag to skip waiting for build results.
-Read more here: https://www.chromatic.com/docs/cli#chromatic-options
-    → [=                   ] 1/22  Slider › Default 
-    → [==                  ] 2/22  Arc › With color 
-    → [===                 ] 3/22  Arc › With points defined 
-    → [=====               ] 5/22  Arc › With width defined 
-    → [=====               ] 6/22  Arc › With distance defined 
-    → [======              ] 7/22  Canvas › Default 
-    → [=======             ] 8/22  Canvas › With title 
-    → [==========          ] 11/22  Draggable › With color 
-    → [===========         ] 12/22  Angle › Default 
-    → [============        ] 13/22  Angle › With Origin 
-    → [==============      ] 15/22  Angle › Force Round Angle 
-    → [===============     ] 16/22  Axis › Default 
-    → [================    ] 18/22  Canvas › Is Iframe 
-    → [=================   ] 19/22  Canvas › With Title 
-    → [==================  ] 20/22  Canvas › Multiple Slider 
-    → [=================== ] 21/22  Canvas › Canvas With Formulas 
-    → [====================] 22/22  Label › Default 
-✖ Found 22 visual changes: Review the changes at https://www.chromatic.com/build?appId=64bd84b22e54c77ce9fcbc6b&number=4
-
-ℹ For CI/CD use cases, this command failed with exit code 1
-Pass --exit-zero-on-changes to succeed this command regardless of changes.
-Pass --auto-accept-changes to succeed and automatically accept any changes.
+    → Running command: pnpm run build-storybook --output-dir /var/folders/9_/f1r1122x0z30nmvsjdphgnh40000gn/T/chromatic--87913-hCHeEZ2NWkkO

package.json

@@ -13,7 +13,7 @@
     "format": "prettier --plugin-search-dir . --write .",
     "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_7ac438918371f8a"
+    "chromatic": "npx chromatic --only-changed --project-token=chpt_7ac438918371f8a"
   },
   "dependencies": {
     "@mdi/js": "^7.2.96",

src/lib/components/AbstractCanvas.svelte

@@ -44,7 +44,7 @@
   }
 
   $: {
-    const params = $page.url?.searchParams;
+    const params = $page?.url?.searchParams;
     title = params?.get('title') || title;
   }
 
@@ -55,7 +55,7 @@
   }
 
   onMount(() => {
-    const params = $page.url?.searchParams;
+    const params = $page?.url?.searchParams;
 
     if (controls) {
       controls = controls.fromURL(params?.get('controls') || '') || controls;

src/lib/components/ShareWindow.svelte

@@ -21,8 +21,8 @@
   let urlInput: HTMLTextAreaElement;
 
   $: state = controls?.controls && getState($cameraStore);
-  $: url = $page.url?.origin + $page.url?.pathname;
-  $: refUrl = $page.url?.pathname.replace('/applet/', '');
+  $: url = $page?.url?.origin + $page.url?.pathname;
+  $: refUrl = $page?.url?.pathname.replace('/applet/', '');
   $: lastUrl = refUrl?.split('/')?.slice(-1)[0]; // Last part of the url
 
   /**

src/lib/d3-components/Angle.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { LINE_WIDTH } from '$lib/utils/AttributeDimensions';
+  import { PrimeColor } from '$lib/utils/PrimeColors';
+  import { arc, symbol, symbolTriangle } from 'd3';
+  import { Vector2 } from 'three';
+
+  export let color: PrimeColor = PrimeColor.black;
+  export let startAngle = 0;
+  export let endAngle = 0;
+  export let origin = new Vector2(0, 0);
+  export let width = LINE_WIDTH;
+  export let distance = 0.8;
+  export let hasHead = false;
+
+  $: d = arc()({
+    innerRadius: distance - width / 2,
+    outerRadius: distance + width / 2,
+    startAngle: startAngle + Math.PI / 2,
+    endAngle: endAngle + Math.PI / 2
+  });
+
+  const triangle = symbol()
+    .type(symbolTriangle)
+    .size(2 * width)();
+</script>
+
+<g transform="translate({origin.x},{origin.y})">
+  <path {d} fill={color} />
+</g>
+
+{#if hasHead}
+  <g
+    transform="rotate({(endAngle / Math.PI) *
+      180}) translate({distance}, 0) rotate(180) translate(0, {2 * Math.PI * width})"
+  >
+    <path transform="" d={triangle} fill={color} />
+  </g>
+{/if}

src/lib/d3-components/Arc.svelte

@@ -1,27 +1,46 @@
 <script lang="ts">
   import { Vector2 } from 'three';
   import { PrimeColor } from '$lib/utils/PrimeColors';
-  import { arc } from 'd3';
+  import { arc, symbol, symbolTriangle } from 'd3';
   import { LINE_WIDTH } from '$lib/utils/AttributeDimensions';
 
   export let color: PrimeColor = PrimeColor.black;
   export let points: [Vector2, Vector2] = [new Vector2(1, 0), new Vector2(0, 1)];
   export let origin = new Vector2(0, 0);
   export let width = LINE_WIDTH;
   export let distance = 0.8;
+  export let hasHead = false;
 
-  $: startAngle = points[0].angle();
-  $: endAngle = points[1].angle();
+  $: startAngle = Math.PI / 2 + points[0].angle();
+  $: endAngle = Math.PI / 2 + points[1].angle();
+  $: endPosition = points[1].clone().normalize().multiplyScalar(distance);
+
+  $: angleDelta = endAngle - startAngle;
+
+  $: adjustedStartAngle = angleDelta < -Math.PI ? startAngle + 2 * Math.PI : startAngle;
+  $: adjustedEndAngle = angleDelta < -Math.PI ? endAngle + 2 * Math.PI : endAngle;
+  $: headAngle = (adjustedEndAngle / Math.PI) * 180 + 90 + (angleDelta < 0 ? 180 : 0);
 
-  // Arc defined by D3
   $: d = arc()({
     innerRadius: distance - width / 2,
     outerRadius: distance + width / 2,
-    startAngle: Math.PI / 2 + startAngle,
-    endAngle: Math.PI / 2 + endAngle
+    startAngle: adjustedStartAngle,
+    endAngle: adjustedEndAngle
   });
+
+  const triangle = symbol().type(symbolTriangle).size(0.3)();
 </script>
 
 <g transform="translate({origin.x},{origin.y})">
   <path {d} fill={color} />
 </g>
+
+{#if hasHead}
+  <g transform="translate({endPosition.x}, {endPosition.y})">
+    <path
+      transform="rotate({headAngle}) scale({LINE_WIDTH * 15}) translate({0}, {LINE_WIDTH * 15})"
+      d={triangle}
+      fill={color}
+    />
+  </g>
+{/if}

src/lib/d3-components/Canvas.svelte

@@ -27,6 +27,7 @@
   export let isIframe = false;
   export let width = '100%';
   export let height = '100%';
+  export let showAxisNumbers = true;
 
   type G = $$Generic<readonly Controller<number | boolean>[]>;
   export let controls: Controls<G> | undefined = undefined;
@@ -54,7 +55,7 @@
   </D3Canvas>
 
   {#if $$slots.splitCanvas}
-    <D3Canvas width={totalWidth} {height} {...splitCanvas2DProps}>
+    <D3Canvas {showAxisNumbers} width={totalWidth} {height} {...splitCanvas2DProps}>
       <slot name="splitCanvas" />
     </D3Canvas>
   {:else if $$slots.splitCanvas3d}

src/lib/d3-components/D3Canvas.svelte

@@ -13,6 +13,7 @@
   export let height: Canvas2DProps['height'];
   export let tickLength: Canvas2DProps['tickLength'] = 30;
   export let gridType: Canvas2DProps['gridType'] = GridType.Square;
+  export let showAxisNumbers = true;
 
   const id = 'canvas-' + Math.random().toString(36).substr(2, 9);
 
@@ -51,8 +52,9 @@
           (2 * vmax)) /
           30})"
       >
+        <slot />
         <g transform="translate({-cameraPosition.x}, {-cameraPosition.y})">
-          <Axis length={tickLength} {gridType} />
+          <Axis {showAxisNumbers} length={tickLength} {gridType} />
           <slot />
         </g>
       </g>

src/lib/d3-components/Latex.svelte

@@ -10,8 +10,11 @@
   export let textSize: number = 13;
   export let position: Vector2 = new Vector2(0, 0);
   export let offset: Vector2 = new Vector2(0, 0);
+  export let extend: number = 0;
   export let color: string = 'black';
 
+  $: extendedOffset = position.clone().normalize().multiplyScalar(extend);
+
   let latexWrapper: SVGGElement;
 
   onMount(() => {
@@ -25,6 +28,7 @@
   bind:this={latexWrapper}
   fill={color}
   style="color: {color}"
-  transform="translate({position.x + offset.x}, {position.y + offset.y}) scale({(0.02 / 16) *
-    textSize} ,{(-0.02 / 16) * textSize})"
+  transform="translate({position.x + offset.x + extendedOffset.x}, {position.y +
+    offset.y +
+    extendedOffset.y}) scale({(0.02 / 16) * textSize} ,{(-0.02 / 16) * textSize})"
 />

src/lib/d3-components/Parallelogram.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Vector2 } from 'three';
+
+  export let points: [Vector2, Vector2, Vector2];
+  export let color: string = 'black';
+  export let strokeWidth: number = 1;
+
+  $: [a, b, c] = points.map((p) => p.toArray().join(','));
+
+  $: d = points[1].clone().add(points[2]).sub(points[0]).toArray().join(',');
+</script>
+
+<!-- @component
+  This component is used to draw a parallelogram in 2D. It needs three points to be defined and will automatically calculate the fourth point.
+ -->
+
+<polygon fill={color} stroke="black" stroke-width={strokeWidth * 0.05} points="{a} {b} {d} {c} " />

src/lib/d3-components/index.ts

@@ -7,6 +7,7 @@ export { default as Canvas2D } from './Canvas.svelte';
 export { default as InfiniteLine2D } from './InfiniteLine.svelte';
 export { default as Latex2D } from './Latex.svelte';
 export { default as Line2D } from './Line.svelte';
+export { default as Parallelogram } from './Parallelogram.svelte';
 export { default as Point2D } from './Point.svelte';
 export { default as RightAngle } from './RightAngle.svelte';
 export { default as Vector2D } from './Vector.svelte';

src/lib/d3-components/stories/Arc.stories.svelte

@@ -34,3 +34,14 @@
 <Story name="With origin defined" source args={{ origin: new Vector2(1, 1) }} />
 <Story name="With width defined" source args={{ width: 0.1 }} />
 <Story name="With distance defined" source args={{ distance: 1 }} />
+
+<Story
+  name="With arrow"
+  source
+  args={{ hasHead: true, points: [new Vector2(1, 1), new Vector2(-1, -1)] }}
+/>
+<Story
+  name="With arrow reversed"
+  source
+  args={{ hasHead: true, points: [new Vector2(-1, -1), new Vector2(1, 1)] }}
+/>

src/lib/d3-components/stories/Draggable.stories.svelte

@@ -18,6 +18,10 @@
   import { PrimeColor } from '$lib/utils/PrimeColors';
   import docsForStory from '$lib/utils/docsForStory';
   import { Vector2 } from 'three';
+  import { Vector2D } from '..';
+
+  let p1 = new Vector2(1, 2);
+  let p2 = new Vector2(2, 1);
 </script>
 
 <Template let:args>
@@ -48,10 +52,20 @@
       <!-- THESE are correct because they have unique ids -->
       <Draggable {...args} position={new Vector2(1, 2)} color={PrimeColor.darkGreen} id="a" />
       <Draggable {...args} position={new Vector2(2, 1)} color={PrimeColor.raspberry} id="b" />
+      <Vector2D direction={p1} length={p1.length()} color={PrimeColor.darkGreen} />
     </svelte:fragment>
   </Canvas>
 </Story>
 
 <Story name="With color" source args={{ color: PrimeColor.darkGreen, id: 'color' }} />
 
 <Story name="With position" source args={{ position: new Vector2(1, 2), id: 'position' }} />
+
+<Story
+  name="With snap"
+  parameters={docsForStory(
+    'When dragging, the circle will snap to the nearest grid position upon release.'
+  )}
+  source
+  args={{ position: new Vector2(1, 2), snap: true, id: 'snap' }}
+/>