e4e22dee20
After some initial smaller fixes, it turned out that I had broken
the red line used when linking fields. Fixing this was not trivial
as I found myself battling a lot of small bugs relating to scale
and translation in the existing code. This was made extra difficult
as a lot of coordinates were calculated when necessary in
Canvas.jsx.
This commit attempts to simplify the coordinate management in a few
different ways:
* There are now two distinct coordinate systems in use, typically
referred to as "spaces". Screen space and diagram space.
* Diagram space is no longer measured in pixels (though the
dimension-less measure used instead still maps to pixels at 100%
zoom).
* The canvas now exposes helper methods for transforming between
spaces.
* Zoom and translation is now managed via the svg viewBox property.
* This makes moving items in diagram space much easier as the
coordinates remain constant regardless of zoom level.
* The canvas now wraps the current mouse position in a context
object, making mouse movement much easier to work with.
* The transform.pan property now refers to the center of the screen.
A new feature in this commit is that scroll wheel zoom is now based
on the current cursor location, making the diagram more convenient
to move around in.
I have tried to focus on Canvas.jsx and avoid changes that might be
desctructive on existing save files. I also believe more refactors
and abstractions could be introduced based on these changes to make
the diagram even easier to work with. However, I deem that out of
scope for now.
61 lines
1.7 KiB
JSON
61 lines
1.7 KiB
JSON
{
|
|
"name": "client-vite",
|
|
"private": true,
|
|
"version": "0.0.0",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "vite build",
|
|
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
|
"preview": "vite preview"
|
|
},
|
|
"dependencies": {
|
|
"@codemirror/lang-json": "^6.0.1",
|
|
"@codemirror/lang-sql": "^6.6.3",
|
|
"@douyinfe/semi-ui": "^2.51.3",
|
|
"@lexical/react": "^0.12.5",
|
|
"@uiw/codemirror-theme-github": "^4.21.25",
|
|
"@uiw/codemirror-theme-vscode": "^4.21.25",
|
|
"@uiw/react-codemirror": "^4.21.25",
|
|
"@vercel/analytics": "^1.2.2",
|
|
"axios": "^1.6.2",
|
|
"classnames": "^2.5.1",
|
|
"dexie": "^3.2.4",
|
|
"dexie-react-hooks": "^1.1.7",
|
|
"file-saver": "^2.0.5",
|
|
"framer-motion": "^10.18.0",
|
|
"html-to-image": "^1.11.11",
|
|
"i18next": "^23.11.4",
|
|
"i18next-browser-languagedetector": "^8.0.0",
|
|
"jsonschema": "^1.4.1",
|
|
"jspdf": "^2.5.1",
|
|
"lexical": "^0.12.5",
|
|
"node-sql-parser": "^5.0.0",
|
|
"react": "^18.2.0",
|
|
"react-dom": "^18.2.0",
|
|
"react-hotkeys-hook": "^4.4.1",
|
|
"react-i18next": "^14.1.1",
|
|
"react-router-dom": "^6.21.0",
|
|
"url": "^0.11.1",
|
|
"usehooks-ts": "^3.1.0"
|
|
},
|
|
"devDependencies": {
|
|
"@types/react": "^18.2.43",
|
|
"@types/react-dom": "^18.2.17",
|
|
"@vitejs/plugin-react": "^4.2.1",
|
|
"autoprefixer": "^10.4.16",
|
|
"eslint": "^8.55.0",
|
|
"eslint-config-prettier": "^9.1.0",
|
|
"eslint-plugin-react": "^7.33.2",
|
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
"eslint-plugin-react-refresh": "^0.4.5",
|
|
"postcss": "^8.4.32",
|
|
"prettier": "3.2.5",
|
|
"tailwindcss": "^3.3.6",
|
|
"vite": "^5.0.11"
|
|
},
|
|
"overrides": {
|
|
"follow-redirects": "^1.15.4"
|
|
}
|
|
}
|