Merge pull request #239 from PRIME-TU-Delft/svelte-5

Merge add-svelte-5 into main

.eslintignore

@@ -4,8 +4,7 @@ node_modules
 /build-netlify
 /storybook-static
 /.svelte-kit
-/package
-.netlify
+.netlify/*
 .env
 .env.*
 !.env.example

.eslintrc.cjs

@@ -1,12 +1,6 @@
 module.exports = {
   root: true,
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:svelte/recommended',
-    'plugin:storybook/recommended',
-    'prettier'
-  ],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:svelte/recommended', 'plugin:storybook/recommended', 'prettier', 'plugin:storybook/recommended'],
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
   parserOptions: {

.gitignore

@@ -1,26 +1,27 @@
 node_modules
-/build
-/storybook-static
+
+# Output
+.output
+.vercel
+.netlify
 /.svelte-kit
-/package
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
+/build
 
-# misc
+# OS
 .DS_Store
-*.pem
+Thumbs.db
 
-# local env files
+# Env
+.env
+.env.*
 !.env.example
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+!.env.test
 
-# Deploy
-.netlify/**
-build-*
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
 
+# Logs
 **/*.log
 chromatic.log
 

.npmrc

@@ -1,2 +1 @@
 engine-strict=true
-resolution-mode=highest

.nvmrc

@@ -0,0 +1 @@
+v22.2.0

.prettierrc

@@ -4,13 +4,5 @@
   "trailingComma": "none",
   "printWidth": 100,
   "plugins": ["prettier-plugin-svelte"],
-  "endOfLine": "lf",
-  "overrides": [
-    {
-      "files": "*.svelte",
-      "options": {
-        "parser": "svelte"
-      }
-    }
-  ]
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

.storybook/main.ts

@@ -1,20 +1,17 @@
 import type { StorybookConfig } from '@storybook/sveltekit';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx|svelte)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
   addons: [
+    '@storybook/addon-svelte-csf',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
-    '@storybook/addon-svelte-csf'
+    '@storybook/addon-interactions'
   ],
   framework: {
     name: '@storybook/sveltekit',
     options: {}
-  },
-  docs: {
-    autodocs: 'tag'
   }
 };
 export default config;

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
+  integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+"
+  crossorigin="anonymous"
+/>

.storybook/preview.ts

@@ -1,14 +1,22 @@
 import type { Preview } from '@storybook/svelte';
 
+import '../src/app.css';
+
 const preview: Preview = {
   parameters: {
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i
       }
+    },
+    options: {
+      storySort: {
+        order: ['Initialize', 'D3', '*']
+      }
     }
-  }
+  },
+  tags: ['autodocs']
 };
 
 export default preview;

README.md

@@ -8,6 +8,9 @@ We are using `pnpm` to install packages. To get started download [pnpm](https://
 
 ```bash
 pnpm install
+
+# Then to run the app locally
+pnpm dev
 ```
 
 ## What's inside?
@@ -16,14 +19,50 @@ pnpm install
 
 - `src/lib`: library with components for these applets
   - `/components`: UI components
-  - `/d3-components`: 2D components create with D3.js
-  - `/threlte-components`: 3D components create with threlte v5
+  - `/controls`: Controls like draggables, sliders and toggles for the applets
+  - `/d3`: 2D components created with D3.js
+  - `store`: Where the global state is preserved
+  - `/threlte`: 3D components created with threlte
   - `/utils`: Typescript functions used throughout the app
 
 ### Utilities
 
-This repo has some additional tools already setup for you:
+This repo has some additional tools already set-up for you:
 
-- [TypeScript](https://www.typescriptlang.org/) for static type checking
+- [TypeScript](https://www.typescriptlang.org/) for static type-checking
 - [ESLint](https://eslint.org/) for code linting
 - [Prettier](https://prettier.io) for code formatting
+
+## Url parameters
+
+<!-- Autocomplete makes a mess out of this table :( -->
+
+| Parameter | Description                                                                                                                                                                                                          | Default |
+| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| `iframe`  | This parameter is added by default and set to true for each applet in this book. Therefore, this parameter is not configurable for this book. When using an applet in a different context will change the bahaviour. | false   |
+| `title`   | A string that will be shown as the title of the applet when the applet is in fullscreen mode                                                                                                                         | ""      |
+
+### Control parameters
+
+> [!WARNING]
+> Work in progress
+
+### 2D Specific parameters
+
+> [!TIP]
+> You should add split-\* before the parameter to make it apply to the right scene
+
+| Parameter    | Description                                  | Default |
+| ------------ | -------------------------------------------- | ------- |
+| `position2D` | The position of the applet in the 2D scene   | 0,0     |
+| `zoom2D`     | The zoom level of the applet in the 2D scene | 1       |
+
+### 3D Specific parameters
+
+> [!TIP]
+> You should add split-\* before the parameter to make it apply to the right scene
+
+| Parameter    | Description                                  | Default |
+| ------------ | -------------------------------------------- | ------- |
+| `position3D` | The position of the applet in the 3D scene   | 0,0,0   |
+| `zoom3D`     | The zoom level of the applet in the 3D scene | 29      |

changelog.md

@@ -0,0 +1,83 @@
+# TODOS
+
+- [ ] Share -> Embed link is broken
+
+# Overal changes
+
+- Better and more consistant url parameters see [readme](./README.md?tab=readme-ov-file#url-parameters)
+- bind:controls -> {controls}
+- Clicking reset will animate sliders and subsequent changes back to the initial state
+- Reset and pause are now two different things
+  - reset -> resets the scene to the initial state
+  - pause -> pauses the scene and allows for scrolling
+- Pause is now called `Lock/unlock` to better represent the functionality
+- AbstractCanvas component is now Scene component
+
+## Renames
+
+- `d3-components` folder is now `d3`
+- `threlte-components` folder is now `threlte`
+- `activityStore.ts` is now `activity.svelte.ts`
+- `globalState.ts` is now `globalState.svelte.ts`
+
+## breaking changes in 3D
+
+### Canvas3D
+
+- It is no longer possible to set custom lights
+- Colours are the same as 2D colours
+
+### Axis3D
+
+- AxisSpacing is no longer reliable on zoom level
+- No longer is origin >30x rendered
+- A gizmo can be added to the axis for orientation
+
+### Latex3D
+
+- Prop `extend` (vector) has become -> offset (vector) and extend (number)
+- Prop `size` (number) -> `fontSize` (number)
+
+### Line3D
+
+- points ([Vector3, Vector3]) -> origin (Vector3) and endPoint (Vector3)
+
+### Vector3D
+
+- isAlwaysOnTop is now also applicable to the head of the vector
+- radius is resized
+- cone head now scales with radius
+- striped -> isDashed
+- let:endPoint is now accesible via `{#snippet children(endPoint)}`
+- `noNormalise` prop is added to prevent normalisation of the vector
+
+---
+
+---
+
+## Breaking changes in 2D
+
+- Colours are more vibrant and closer to the 2D colour set
+
+### Canvas2D:
+
+- It is no longer possible to set custom lights for 3D scenes
+- <svelte:template name="splitCanvas"> -> {#snippet splitCanvas2DChildren()}
+- <svelte:template name="splitCanvas3d"> -> {#snippet splitCanvas3DChildren()}
+
+### Vector2D:
+
+- let:endPoint is now accesible via `{#snippet children(endPoint)}`
+- `noNormalise` prop is added to prevent normalisation of the vector
+
+### Draggables2D
+
+- draggables are now part of controls and can be added to the canvas by using the `controls` prop
+- snap is now a function that is passed in the controls
+  - snap: (point: Vector2) => Vector2
+  - The default snap function can be found by importing `Draggable.snapToGrid`
+
+### Latex2D
+
+- No longer uses mathjax but is now rendered with katex
+- `size` (number) -> `fontSize` (number)

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:64bd84b22e54c77ce9fcbc6b",
+  "zip": true
+}

components.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://shadcn-svelte.com/schema.json",
-  "style": "new-york",
+  "style": "default",
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "src/app.postcss",
+    "css": "src/app.css",
     "baseColor": "slate"
   },
   "aliases": {
     "components": "$lib/components",
-    "utils": "$lib/utils"
+    "utils": "$lib/utils/shadcn-utils"
   },
   "typescript": true
 }

eslint.config.js

@@ -0,0 +1,39 @@
+import js from '@eslint/js';
+import ts from 'typescript-eslint';
+import svelte from 'eslint-plugin-svelte';
+import prettier from 'eslint-config-prettier';
+import globals from 'globals';
+
+/** @type {import('eslint').Linter.FlatConfig[]} */
+export default [
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...svelte.configs['flat/recommended'],
+  prettier,
+  ...svelte.configs['flat/prettier'],
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      }
+    }
+  },
+  {
+    files: ['**/*.svelte'],
+    languageOptions: {
+      parserOptions: {
+        parser: ts.parser
+      }
+    }
+  },
+  {
+    ignores: ['build/', '.svelte-kit/', 'dist/']
+  },
+  {
+    rules: {
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': ['warn']
+    }
+  }
+];