Offline #533
Open
Offline #533
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Upgrade `src/lib/components/Anchor/Anchor.svelte`, `src/lib/components/ContrastTheme/ContrastTheme.svelte`, and `src/lib/components/Controls/Controls.svelte` to Svelte 5.0 syntax. * **Reactivity Syntax**: Replace `let` with `$state` for reactive variables. Replace `$:` with `$derived` or `$effect` for reactive statements. * **Props**: Use `$props` to declare props with destructuring. * **Event Handling**: Replace `on:click` with `onclick` for event handlers. Replace `createEventDispatcher` with callback props. * **Other Changes**: Refactor various functions and variables to align with the new syntax and structure of Svelte 5.0.
Upgrade to Svelte 5.0
…ple components * **Controls.svelte** - Replace deprecated slots with Svelte 5.0 snippets and render - Replace `on:click` with `onclick` for event handlers * **Drawer.svelte** - Replace deprecated slots with Svelte 5.0 snippets and render * **Edge.svelte** - Replace deprecated slots with Svelte 5.0 snippets and render - Replace `on:click` with `onclick` for event handlers * **InternalNode.svelte** - Replace deprecated slots with Svelte 5.0 snippets and render * **Graph.svelte** - Replace deprecated slots with Svelte 5.0 snippets and render * **+page.svelte** - Replace deprecated slots with Svelte 5.0 snippets and render - Replace `on:click` with `onclick` for event handlers
…active variables * **Toggle.svelte** - Replace `let` with `$state` for reactive variables - Replace `$:` with `$derived` or `$effect` for reactive statements - Replace `on:click` with `onclick` for event handlers * **Edge.svelte** - Replace `let` with `$state` for reactive variables * **FlowChart.svelte** - Replace `let` with `$state` for reactive variables * **Graph.svelte** - Replace `let` with `$state` for reactive variables - Replace `$:` with `$derived` or `$effect` for reactive statements * **Svelvet.svelte** - Replace `let` with `$state` for reactive variables * **+page.svelte** - Replace `let` with `$state` for reactive variables - Replace `on:click` with `onclick` for event handlers
Refactor components to use function-based components and update event handling. * **Controls.svelte** - Add callback props for event handling. - Update event handling functions to call the respective callback props. * **Knob.svelte** - Fix calculation of `curAngle` for the knob rotation. * **Drawer.svelte** - Replace state management with Svelte stores. - Update drag and drop events to use Svelte stores. - Refactor rendering logic to use `each` block instead of `@render`. * **Minimap.svelte** - Replace state management with Svelte stores. - Update derived values to use Svelte stores. * **InternalNode.svelte** - Replace state management with Svelte stores. - Update event handling functions to use Svelte stores. - Remove unused code and comments. * **ThemeToggle.svelte** - Add callback props for event handling. - Update event handling functions to call the respective callback props.
…based components * **ContrastTheme.svelte** - Remove binding of `customEdgeColor` input to `$props.edgeColor` * **Resizer.svelte** - Remove `context="module"` from the script tag - Merge the two script tags into one
Refactor components to use function-based syntax and update reactivity model. * **Function-based components**: - Refactor `src/lib/components/data/Knob/Knob.svelte`, `src/lib/components/data/Toggle/Toggle.svelte`, `src/lib/components/Drawer/Drawer.svelte`, `src/lib/components/Drawer/DrawerAnchor.svelte`, and `src/lib/components/Drawer/DrawerController.svelte` to use function-based component syntax. - Replace class-based syntax with function-based syntax. * **Reactivity model**: - Update reactive variables to use `$state` in `src/lib/components/data/Knob/Knob.svelte`, `src/lib/components/data/Toggle/Toggle.svelte`, `src/lib/components/Drawer/Drawer.svelte`, `src/lib/components/Drawer/DrawerAnchor.svelte`, and `src/lib/components/Drawer/DrawerController.svelte`. * **Event handling**: - Replace `on:` syntax with standard event properties in `src/lib/components/Drawer/DrawerAnchor.svelte` and `src/lib/components/Drawer/DrawerController.svelte`.
Refactor components to use function-based syntax
Refactor function components
Refactor to function-based components
Merge pull request #2 from jknohr/refactor-function-components
Update event handling and props destructuring in various components. * **Drawer.svelte**: Destructure props using `$props` and update event handling to use standard event properties. * **DrawerAnchor.svelte**: Replace `on:` syntax with standard event properties and use programmatic logic for multiple handlers. * **DrawerNode.svelte**: Replace `on:` syntax with standard event properties and use programmatic logic for multiple handlers. * **Minimap.svelte**: Update event handling to use standard event properties. * **DefaultNode.svelte**: Destructure props using `$props` and update event handling to use standard event properties. * **InternalNode.svelte**: Replace `on:` syntax with standard event properties and use programmatic logic for multiple handlers. * **Node.svelte**: Replace `on:` syntax with standard event properties and use programmatic logic for multiple handlers. * **Resizer.svelte**: Replace `on:` syntax with standard event properties and use programmatic logic for multiple handlers. * **Graph.svelte**: Replace `on:` syntax with standard event properties and use programmatic logic for multiple handlers.
…e`, `ZoomPanWrapper.svelte`, `GraphRenderer.svelte`, and `GroupBoxRenderer.svelte`. * **Svelvet.svelte** - Replace `on:` syntax with `on` event properties. - Use spread operator for props. * **ZoomPanWrapper.svelte** - Replace `on:` syntax with `on` event properties. - Use state and props for programmatic logic. * **GraphRenderer.svelte** - Replace `on:` syntax with `on` event properties. - Use state and props for programmatic logic. * **GroupBoxRenderer.svelte** - Replace `on:` syntax with `on` event properties. - Add `handleGroupClick` function.
Update props to use $props destructuring and standard event properties
Refactor components to use function-based syntax instead of class-based syntax. * **Controls.svelte** - Refactor to use function-based syntax. - Replace class-based syntax with function-based syntax. - Update event handling to use callback props. * **Graph.svelte** - Refactor to use function-based syntax. - Replace class-based syntax with function-based syntax. - Update event handling to use callback props. - Replace `$props` with individual prop declarations. - Update reactivity syntax to use `$derived` and `$effect`.
Refactor components to function-based syntax
Add error handling and validation to various components to make the code more robust. * **Drawer Components** - Add error handling for drag-and-drop events in `Drawer.svelte`. - Add validation for anchor properties in `DrawerAnchor.svelte`. - Add error handling for edge property inputs in `DrawerEdge.svelte`. - Add validation for node properties in `DrawerNode.svelte`. * **Edge Component** - Add validation for edge properties in `Edge.svelte`. * **Editor Component** - Add error handling for node deletion and resizing functions in `Editor.svelte`. * **FlowChart Component** - Add error handling for node positioning logic in `FlowChart.svelte`. * **Group Component** - Add detailed comments to explain the purpose of each function and variable in `Group.svelte`. * **Minimap Component** - Add error handling for node visibility toggling in `Minimap.svelte`. * **Node Component** - Add validation for node properties in `Node.svelte`. * **ThemeToggle Component** - Add error handling for theme toggling and graph state saving functions in `ThemeToggle.svelte`. * **Graph Container** - Add error handling for various event handlers in `Graph.svelte`. * **DrawerController Component** - Add detailed comments to explain the purpose of each function and variable in `DrawerController.svelte`.
Improve code robustness and add more features
Add new features and improve robustness in various components. * **Controls.svelte**: - Add error handling for control button actions (zoom in, zoom out, fit view, lock, unhide all). * **RadioGroup.svelte**: - Add ARIA attributes for improved accessibility. - Add keyboard navigation options for cycling through radio buttons. * **Slider.svelte**: - Add validation for input values to ensure they are within the min and max range. - Handle edge cases for sliding and input value changes. * **Drawer.svelte**: - Add customization options for width, height, and position. - Improve error handling for drag and drop events. * **ThemeToggle.svelte**: - Save the theme state to local storage. - Provide more theme options for the user to choose from.
Update the save function to preserve all mandatory node properties and handle nested properties. * **src/lib/utils/savers/saveStore.ts** - Update `traverse` function to ensure all mandatory node properties are preserved. - Add logic to handle nested properties and custom properties. - Ensure deep serialization of complex nested properties. - Modify `getJSONState` function to use the updated `traverse` function. * **src/lib/utils/creators/createNode.ts** - Ensure all node properties, including custom properties and node type, are initialized and preserved during the save process. * **src/lib/utils/savers/reloadStore.ts** - Update `reloadStore` function to guarantee preservation of all mandatory node properties. - Add logic to handle nested properties and custom properties during reload.
Add save function for Svelvet graph in SurrealDB
Enhance features and improve robustness
Add checks for edge cases when moving and resizing nodes. * **Edge Cases for Moving Edges** - Add checks for edge cases when moving edges in `src/lib/components/Edge/Edge.svelte`. - Ensure edges are correctly repositioned when source and target coordinates are invalid. * **Edge Cases for Node Selection and Movement** - Handle edge cases for node selection and movement in `src/lib/components/Node/InternalNode.svelte`. - Prevent unexpected behavior by constraining node positions within the window boundaries. * **Node Property Validation** - Validate node properties in `src/lib/components/Node/Node.svelte`. - Ensure only valid values are accepted for node connections.
Fix edge cases for node and edge operations
with '' will be ignored, and an empty message aborts the commit. On branch main Your branch is ahead of 'origin/main' by 1 commit. (use "git push" to publish your local commits) Changes to be committed: deleted: .husky/pre-commit modified: bun.lockb deleted: package-lock.json modified: package.json
with '' will be ignored, and an empty message aborts the commit. On branch main Your branch is up to date with 'origin/main'. Changes to be committed: modified: src/example-components/Carbon/Carbon.svelte modified: src/example-components/Connector.svelte modified: src/example-components/CustomAnchor.svelte modified: src/example-components/CustomControls.svelte modified: src/example-components/CustomEdge.svelte modified: src/example-components/CustomNode.svelte modified: src/example-components/InputNode.svelte modified: src/example-components/sandbox/CircleColor.svelte modified: src/example-components/sandbox/ColorAnchor.svelte modified: src/example-components/sandbox/CustomAnchor.svelte modified: src/example-components/sandbox/DashCount.svelte modified: src/example-components/sandbox/NodeWrapper.svelte modified: src/example-components/sandbox/Noise.svelte modified: src/example-components/sandbox/Output.svelte modified: src/example-components/sandbox/Scale.svelte modified: src/example-components/sandbox/Thickness.svelte modified: src/example-components/sandbox/Visualizer.svelte modified: src/example-components/test-components/Audio.svelte modified: src/example-components/test-components/Bass.svelte modified: src/example-components/test-components/CircleColor.svelte modified: src/example-components/test-components/ColorAnchor.svelte modified: src/example-components/test-components/CustomAnchor.svelte modified: src/example-components/test-components/DashCount.svelte modified: src/example-components/test-components/KnobOutputDisplayer.svelte modified: src/example-components/test-components/NodeWrapper.svelte modified: src/example-components/test-components/Noise.svelte modified: src/example-components/test-components/Output.svelte modified: src/example-components/test-components/Scale.svelte modified: src/example-components/test-components/Thickness.svelte modified: src/example-components/test-components/Treble.svelte modified: src/example-components/test-components/Visualizer.svelte modified: src/example-components/test-components/Volume.svelte modified: src/lib/assets/icons/Icon.svelte modified: src/lib/components/Anchor/Anchor.svelte modified: src/lib/components/Anchor/DefaultAnchor.svelte modified: src/lib/components/ContrastTheme/ContrastTheme.svelte modified: src/lib/components/Controls/Controls.svelte modified: src/lib/components/Drawer/Drawer.svelte modified: src/lib/components/Drawer/DrawerAnchor.svelte modified: src/lib/components/Drawer/DrawerController.svelte modified: src/lib/components/Drawer/DrawerEdge.svelte modified: src/lib/components/Drawer/DrawerNode.svelte modified: src/lib/components/Edge/Edge.svelte modified: src/lib/components/Edge/EdgeContext.svelte modified: src/lib/components/Editor/Editor.svelte modified: src/lib/components/FlowChart/FlowChart.svelte modified: src/lib/components/Group/Group.svelte modified: src/lib/components/Group/GroupBoundingBox.svelte modified: src/lib/components/Minimap/MiniGroupBox.svelte modified: src/lib/components/Minimap/MiniNode.svelte modified: src/lib/components/Minimap/Minimap.svelte modified: src/lib/components/Node/DefaultNode.svelte modified: src/lib/components/Node/InternalNode.svelte modified: src/lib/components/Node/Node.svelte modified: src/lib/components/Resizer/Resizer.svelte modified: src/lib/components/SelectionBox/SelectionBox.svelte modified: src/lib/components/ThemeToggle/ThemeToggle.svelte modified: src/lib/components/data/ColorPicker/ColorWheel.svelte modified: src/lib/components/data/Knob/Knob.svelte modified: src/lib/components/data/RadioGroup/RadioGroup.svelte modified: src/lib/components/data/Slider/Slider.svelte modified: src/lib/components/data/TextField/TextField.svelte modified: src/lib/components/data/Toggle/Toggle.svelte modified: src/lib/containers/Background/Background.svelte modified: src/lib/containers/Graph/Graph.svelte modified: src/lib/containers/Svelvet/Svelvet.svelte modified: src/lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte modified: src/lib/renderers/GraphRenderer/GraphRenderer.svelte modified: src/routes/+page.svelte modified: src/routes/arrows/ArrowEdge.svelte modified: src/routes/arrows/ArrowEdgeBlue.svelte modified: src/routes/color-test/+page.svelte modified: src/routes/cursor-drop/+page.svelte modified: src/routes/drawer-test/+page.svelte modified: src/routes/drawer/+page.svelte modified: src/routes/edge-delete/+page.svelte modified: src/routes/edges/+page.svelte modified: src/routes/hiding-nodes/+page.svelte modified: src/routes/knob-test/+page.svelte modified: src/routes/movement/+page.svelte modified: src/routes/sandbox/+page.svelte modified: src/routes/scroll-issue/+page.svelte modified: src/routes/shapes/+page.svelte modified: src/routes/styling/+page.svelte modified: src/routes/tests/+page.svelte modified: src/routes/theme-toggle/+page.svelte modified: src/routes/website/+page.svelte
Update code to ES2022 standards and fix syntax error in `src/routes/+page.svelte`.
* **package.json**
- Update `ecmaVersion` to 2022 in `parserOptions`.
* **src/routes/+page.svelte**
- Fix syntax error in the script section.
- Replace `{@render}` with `<Component />` syntax.
* **src/lib/stores/GraphStore.ts**
- Update to use ES2022 syntax.
- Remove commented-out code and update `source` to use `Graph | null` type.
* **src/example-components/CustomNode.svelte**
- Update to use ES2022 syntax.
- Remove unnecessary space in `<Node>` tag.
Update code to ES2022 standards
Refactor components to use function-based syntax and update event handling. * **Anchor.svelte** - Replace class-based components with function-based components. - Update event handling to use standard properties (onclick, onmouseup, ontouchstart, ontouchend). - Simplify label assignment in edgeConfig. * **RadioGroup.svelte** - Update event handling to use standard properties (onmousedown). * **TextField.svelte** - Replace class-based components with function-based components. - Update event handling to use standard properties (onkeydown, onclick, onmousedown). - Use $props for placeholder. * **Toggle.svelte** - Update event handling to use standard properties (onkeydown, onclick). * **Drawer.svelte** - Replace class-based components with function-based components. - Update event handling to use standard properties (onmouseenter, onmouseleave, onmousemove, onmouseup). - Use $props for width, height, minimap, translation, controls, edge, edgeStyle, snapTo, editable, fitView, locked, zoom, theme, mermaid, mermaidConfig, TD, disableSelection, raiseEdgesOnSelect, modifier, trackpadPan, toggle, position.
Refactor components to use function-based syntax
with '' will be ignored, and an empty message aborts the commit. On branch main Your branch and 'origin/main' have diverged, and have 1 and 5 different commits each, respectively. Changes to be committed: modified: src/lib/db/SurrealConnection.ts modified: src/lib/db/SurrealManager.ts
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🔗 Linked issue
Description
Checklist
I've followed the Contributing guidelines
I've titled my PR according to the Conventional Commits spec
I've linked an open issue
I've added tests that fail without this PR but pass with it
I've linted and tested my code
I've updated documentation (if appropriate)