egli/Example-Automerge-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rewrite of central components to svelte 5, code is working

Browse Source
This commit is contained in:
Stephan Egli 2025-01-17 13:02:56 +01:00
parent f8d3f528a5
commit 9400cc6a41
9 changed files with 444 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -9,19 +9,7 @@
</head> </head>
<body> <body>
<div id="app"></div>
<!-- Bereich für Buttons, um neue Formen anzulegen -->
<div id="controls">
<button id="addCircleButton">Kreis hinzufügen</button>
<button id="addTriangleButton">Dreieck hinzufügen</button>
</div>
<!-- Canvas, auf dem wir die Formen zeichnen -->
<svg id="shapesCanvas" width="800" height="600"
style="border: 1px solid black;"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
</svg>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

264
package-lock.json generated
View File

@ -11,13 +11,40 @@
"@automerge/automerge-repo": "^1.2.1", "@automerge/automerge-repo": "^1.2.1",
"@automerge/automerge-repo-network-websocket": "^1.2.1", "@automerge/automerge-repo-network-websocket": "^1.2.1",
"@automerge/automerge-repo-storage-indexeddb": "^1.2.1", "@automerge/automerge-repo-storage-indexeddb": "^1.2.1",
"svelte": "^5.0.0-next.272",
"vite-plugin-top-level-await": "^1.4.4", "vite-plugin-top-level-await": "^1.4.4",
"vite-plugin-wasm": "^3.4.1" "vite-plugin-wasm": "^3.4.1"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"@types/node": "^20.0.0",
"typescript": "^5.0.0",
"vite": "^6.0.5" "vite": "^6.0.5"
} }
}, },
"node_modules/@ampproject/remapping": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
"license": "Apache-2.0",
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.24"
},
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@ampproject/remapping/node_modules/@jridgewell/trace-mapping": {
"version": "0.3.25",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
"license": "MIT",
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@automerge/automerge": { "node_modules/@automerge/automerge": {
"version": "2.2.8", "version": "2.2.8",
"resolved": "https://registry.npmjs.org/@automerge/automerge/-/automerge-2.2.8.tgz", "resolved": "https://registry.npmjs.org/@automerge/automerge/-/automerge-2.2.8.tgz",
@ -558,6 +585,30 @@
"node": ">=18" "node": ">=18"
} }
}, },
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.8",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
"license": "MIT",
"dependencies": {
"@jridgewell/set-array": "^1.2.1",
"@jridgewell/sourcemap-codec": "^1.4.10",
"@jridgewell/trace-mapping": "^0.3.24"
},
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/gen-mapping/node_modules/@jridgewell/trace-mapping": {
"version": "0.3.25",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
"license": "MIT",
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@jridgewell/resolve-uri": { "node_modules/@jridgewell/resolve-uri": {
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@ -567,6 +618,15 @@
"node": ">=6.0.0" "node": ">=6.0.0"
} }
}, },
"node_modules/@jridgewell/set-array": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
"license": "MIT",
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/sourcemap-codec": { "node_modules/@jridgewell/sourcemap-codec": {
"version": "1.5.0", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
@ -859,6 +919,46 @@
"win32" "win32"
] ]
}, },
"node_modules/@sveltejs/vite-plugin-svelte": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-5.0.3.tgz",
"integrity": "sha512-MCFS6CrQDu1yGwspm4qtli0e63vaPCehf6V7pIMP15AsWgMKrqDGCPFF/0kn4SP0ii4aySu4Pa62+fIRGFMjgw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
"debug": "^4.4.0",
"deepmerge": "^4.3.1",
"kleur": "^4.1.5",
"magic-string": "^0.30.15",
"vitefu": "^1.0.4"
},
"engines": {
"node": "^18.0.0 || ^20.0.0 || >=22"
},
"peerDependencies": {
"svelte": "^5.0.0",
"vite": "^6.0.0"
}
},
"node_modules/@sveltejs/vite-plugin-svelte-inspector": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-4.0.1.tgz",
"integrity": "sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==",
"dev": true,
"license": "MIT",
"dependencies": {
"debug": "^4.3.7"
},
"engines": {
"node": "^18.0.0 || ^20.0.0 || >=22"
},
"peerDependencies": {
"@sveltejs/vite-plugin-svelte": "^5.0.0",
"svelte": "^5.0.0",
"vite": "^6.0.0"
}
},
"node_modules/@swc/core": { "node_modules/@swc/core": {
"version": "1.10.4", "version": "1.10.4",
"resolved": "https://registry.npmjs.org/@swc/core/-/core-1.10.4.tgz", "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.10.4.tgz",
@ -1103,13 +1203,12 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "22.10.5", "version": "20.17.14",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.5.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.14.tgz",
"integrity": "sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==", "integrity": "sha512-w6qdYetNL5KRBiSClK/KWai+2IMEJuAj+EujKCumalFOwXtvOXaEan9AuwcRID2IcOIAWSIfR495hBtgKlx2zg==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"undici-types": "~6.20.0" "undici-types": "~6.19.2"
} }
}, },
"node_modules/acorn": { "node_modules/acorn": {
@ -1124,6 +1223,15 @@
"node": ">=0.4.0" "node": ">=0.4.0"
} }
}, },
"node_modules/acorn-typescript": {
"version": "1.4.13",
"resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
"integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
"license": "MIT",
"peerDependencies": {
"acorn": ">=8.9.0"
}
},
"node_modules/acorn-walk": { "node_modules/acorn-walk": {
"version": "8.3.4", "version": "8.3.4",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
@ -1142,6 +1250,24 @@
"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/aria-query": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
"license": "Apache-2.0",
"engines": {
"node": ">= 0.4"
}
},
"node_modules/axobject-query": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
"license": "Apache-2.0",
"engines": {
"node": ">= 0.4"
}
},
"node_modules/base-x": { "node_modules/base-x": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/base-x/-/base-x-4.0.0.tgz", "resolved": "https://registry.npmjs.org/base-x/-/base-x-4.0.0.tgz",
@ -1198,6 +1324,15 @@
"cbor-extract": "^2.2.0" "cbor-extract": "^2.2.0"
} }
}, },
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/create-require": { "node_modules/create-require": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@ -1221,6 +1356,16 @@
} }
} }
}, },
"node_modules/deepmerge": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/detect-libc": { "node_modules/detect-libc": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
@ -1280,6 +1425,21 @@
"@esbuild/win32-x64": "0.24.2" "@esbuild/win32-x64": "0.24.2"
} }
}, },
"node_modules/esm-env": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
"license": "MIT"
},
"node_modules/esrap": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.3.tgz",
"integrity": "sha512-Xddc1RsoFJ4z9nR7W7BFaEPIp4UXoeQ0+077UdWLxbafMQFyU79sQJMk7kxNgRwQ9/aVgaKacCHC2pUACGwmYw==",
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
}
},
"node_modules/eventemitter3": { "node_modules/eventemitter3": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
@ -1306,6 +1466,15 @@
"node": "^8.16.0 || ^10.6.0 || >=11.0.0" "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
} }
}, },
"node_modules/is-reference": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
"license": "MIT",
"dependencies": {
"@types/estree": "^1.0.6"
}
},
"node_modules/isomorphic-ws": { "node_modules/isomorphic-ws": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz", "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz",
@ -1315,6 +1484,31 @@
"ws": "*" "ws": "*"
} }
}, },
"node_modules/kleur": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/locate-character": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
"license": "MIT"
},
"node_modules/magic-string": {
"version": "0.30.17",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
"integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.0"
}
},
"node_modules/make-error": { "node_modules/make-error": {
"version": "1.3.6", "version": "1.3.6",
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
@ -1441,6 +1635,31 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/svelte": {
"version": "5.18.0",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.18.0.tgz",
"integrity": "sha512-/Eb81lB8bVUxQPmkPVNBYrU9cZ544+9hE91ZUUXTMf7eWcGW84N1hS3gvv/XsUNOWLLg3IicXP2qa8W3KpTUHA==",
"license": "MIT",
"dependencies": {
"@ampproject/remapping": "^2.3.0",
"@jridgewell/sourcemap-codec": "^1.5.0",
"@types/estree": "^1.0.5",
"acorn": "^8.12.1",
"acorn-typescript": "^1.4.13",
"aria-query": "^5.3.1",
"axobject-query": "^4.1.0",
"clsx": "^2.1.1",
"esm-env": "^1.2.1",
"esrap": "^1.4.3",
"is-reference": "^3.0.3",
"locate-character": "^3.0.0",
"magic-string": "^0.30.11",
"zimmerframe": "^1.1.2"
},
"engines": {
"node": ">=18"
}
},
"node_modules/tiny-typed-emitter": { "node_modules/tiny-typed-emitter": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-typed-emitter/-/tiny-typed-emitter-2.1.0.tgz", "resolved": "https://registry.npmjs.org/tiny-typed-emitter/-/tiny-typed-emitter-2.1.0.tgz",
@ -1495,7 +1714,6 @@
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
"integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==", "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
"license": "Apache-2.0", "license": "Apache-2.0",
"peer": true,
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",
"tsserver": "bin/tsserver" "tsserver": "bin/tsserver"
@ -1505,11 +1723,10 @@
} }
}, },
"node_modules/undici-types": { "node_modules/undici-types": {
"version": "6.20.0", "version": "6.19.8",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
"integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==", "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
"license": "MIT", "license": "MIT"
"peer": true
}, },
"node_modules/uuid": { "node_modules/uuid": {
"version": "9.0.1", "version": "9.0.1",
@ -1637,6 +1854,25 @@
"vite": "^2 || ^3 || ^4 || ^5 || ^6" "vite": "^2 || ^3 || ^4 || ^5 || ^6"
} }
}, },
"node_modules/vitefu": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.5.tgz",
"integrity": "sha512-h4Vflt9gxODPFNGPwp4zAMZRpZR7eslzwH2c5hn5kNZ5rhnKyRJ50U+yGCdc2IRaBs8O4haIgLNGrV5CrpMsCA==",
"dev": true,
"license": "MIT",
"workspaces": [
"tests/deps/*",
"tests/projects/*"
],
"peerDependencies": {
"vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
},
"peerDependenciesMeta": {
"vite": {
"optional": true
}
}
},
"node_modules/ws": { "node_modules/ws": {
"version": "8.18.0", "version": "8.18.0",
"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
@ -1676,6 +1912,12 @@
"engines": { "engines": {
"node": ">=6" "node": ">=6"
} }
},
"node_modules/zimmerframe": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
"license": "MIT"
} }
} }
} }

6
package.json
View File

@ -9,14 +9,16 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"devDependencies": { "devDependencies": {
"vite": "^6.0.5", "@sveltejs/vite-plugin-svelte": "^5.0.3",
"@types/node": "^20.0.0",
"typescript": "^5.0.0", "typescript": "^5.0.0",
"@types/node": "^20.0.0" "vite": "^6.0.5"
}, },
"dependencies": { "dependencies": {
"@automerge/automerge-repo": "^1.2.1", "@automerge/automerge-repo": "^1.2.1",
"@automerge/automerge-repo-network-websocket": "^1.2.1", "@automerge/automerge-repo-network-websocket": "^1.2.1",
"@automerge/automerge-repo-storage-indexeddb": "^1.2.1", "@automerge/automerge-repo-storage-indexeddb": "^1.2.1",
"svelte": "^5.0.0-next.272",
"vite-plugin-top-level-await": "^1.4.4", "vite-plugin-top-level-await": "^1.4.4",
"vite-plugin-wasm": "^3.4.1" "vite-plugin-wasm": "^3.4.1"
} }

116
src/components/Canvas.svelte Normal file
View File

@ -0,0 +1,116 @@
<script lang="ts">
import Circle from './shapes/Circle.svelte';
import Triangle from './shapes/Triangle.svelte';
import type { Shape } from '../types';
import type { DocHandle } from "@automerge/automerge-repo";
import type { AppDocument } from '../types';
import { updateDocWithNewCircle, updateDocWithNewTriangle, updateDocWithShapeMove } from '../docManager';
const { handle } = $props<{
handle: DocHandle<AppDocument>;
}>();
let shapes = $state<Shape[]>([]);
let draggedShape = $state<{ id: string, startX: number, startY: number } | null>(null);
// Automerge document subscription
$effect(() => {
const doc = handle.docSync();
if (doc) {
shapes = doc.shapes;
}
});
handle.on("change", ({ doc }) => {
if (doc) {
shapes = doc.shapes;
}
});
function handleDragStart(e: MouseEvent, shape: Shape) {
const svg = document.getElementById('shapesCanvas') as SVGSVGElement;
if (!svg) return;
const point = svg.createSVGPoint();
point.x = e.clientX;
point.y = e.clientY;
const { x, y } = point.matrixTransform(svg.getScreenCTM()!.inverse());
draggedShape = { id: String(shape.id), startX: x, startY: y };
}
function handleDragMove(e: MouseEvent) {
if (!draggedShape) return;
const svg = document.getElementById('shapesCanvas') as SVGSVGElement;
if (!svg) return;
const point = svg.createSVGPoint();
point.x = e.clientX;
point.y = e.clientY;
const { x, y } = point.matrixTransform(svg.getScreenCTM()!.inverse());
updateDocWithShapeMove(draggedShape.id, x, y);
}
function addTestCircle() {
updateDocWithNewCircle(100, 100, 30);
}
function addTestTriangle() {
updateDocWithNewTriangle(200, 200, 220, 220, 180, 220);
}
</script>
<div class="container">
<svg
id="shapesCanvas"
viewBox="0 0 800 600"
on:mouseup={() => draggedShape = null}
on:mousemove={handleDragMove}
>
{#each shapes as shape (shape.id)}
{#if shape.type === 'circle'}
<Circle
id={String(shape.id)}
x={shape.x}
y={shape.y}
radius={shape.radius}
color={shape.color}
on:mousedown={(e: MouseEvent) => handleDragStart(e, shape)}
/>
{:else if shape.type === 'triangle'}
<Triangle
id={String(shape.id)}
coordinates={shape.coordinates.map(c => [c.x, c.y]).flat() as [number, number, number, number, number, number]}
color={shape.color}
on:mousedown={(e: MouseEvent) => handleDragStart(e, shape)}
/>
{/if}
{/each}
</svg>
<div class="controls">
<button on:click={addTestCircle}>Add Circle</button>
<button on:click={addTestTriangle}>Add Triangle</button>
</div>
</div>
<style>
.container {
width: 100%;
height: 100vh;
position: relative;
}
svg {
width: 100%;
height: 100%;
}
.controls {
position: absolute;
top: 10px;
left: 10px;
}
</style>

18
src/components/shapes/Circle.svelte Normal file
View File

@ -0,0 +1,18 @@
<script lang="ts">
const { id, x, y, radius, color } = $props<{
id: string;
x: number;
y: number;
radius: number;
color: string;
}>();
</script>
<circle
{id}
cx={x}
cy={y}
r={radius}
fill={color}
on:mousedown
/>

19
src/components/shapes/Triangle.svelte Normal file
View File

@ -0,0 +1,19 @@
<script lang="ts">
const { id, coordinates, color } = $props<{
id: string;
coordinates: [number, number, number, number, number, number];
color: string;
}>();
let points = $state(coordinates.join(' '));
$effect(() => {
points = coordinates.join(' ');
});
</script>
<polygon
{id}
{points}
fill={color}
on:mousedown
/>

28
src/docManager.ts
View File

@ -19,26 +19,21 @@ export async function initRepo(): Promise<DocHandle<AppDocument>> {
if (rootDocUrl && isValidAutomergeUrl(rootDocUrl)) { if (rootDocUrl && isValidAutomergeUrl(rootDocUrl)) {
handle = repo.find<AppDocument>(rootDocUrl); handle = repo.find<AppDocument>(rootDocUrl);
await handle.whenReady();
handle.change((doc: AppDocument) => {
if (!doc.schemaVersion) {
doc.schemaVersion = 1;
}
});
} else { } else {
handle = repo.create<AppDocument>({ handle = repo.create<AppDocument>();
schemaVersion: CURRENT_SCHEMA_VERSION, handle.change((doc: AppDocument) => {
shapes: [] doc.schemaVersion = CURRENT_SCHEMA_VERSION;
doc.shapes = [];
}); });
await handle.whenReady();
document.location.hash = handle.url; document.location.hash = handle.url;
} }
await handle.whenReady();
return handle; return handle;
} }
export const updateDocWithNewCircle = (x: number, y: number, radius: number) => { export function updateDocWithNewCircle(x: number, y: number, radius: number): void {
console.log('Adding circle:', { x, y, radius }); // Debug log
handle.change((doc: AppDocument) => { handle.change((doc: AppDocument) => {
const circle: CircleShape = { const circle: CircleShape = {
id: Date.now(), id: Date.now(),
@ -48,11 +43,15 @@ export const updateDocWithNewCircle = (x: number, y: number, radius: number) =>
radius, radius,
color: "red" color: "red"
}; };
if (!doc.shapes) {
doc.shapes = [];
}
doc.shapes.push(circle); doc.shapes.push(circle);
}); });
} }
export const updateDocWithNewTriangle = (x1: number, y1: number, x2: number, y2: number, x3: number, y3: number) => { export function updateDocWithNewTriangle(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void {
console.log('Adding triangle:', { x1, y1, x2, y2, x3, y3 }); // Debug log
handle.change((doc: AppDocument) => { handle.change((doc: AppDocument) => {
const triangle: TriangleShape = { const triangle: TriangleShape = {
id: Date.now(), id: Date.now(),
@ -64,6 +63,9 @@ export const updateDocWithNewTriangle = (x1: number, y1: number, x2: number, y2:
], ],
color: "blue" color: "blue"
}; };
if (!doc.shapes) {
doc.shapes = [];
}
doc.shapes.push(triangle); doc.shapes.push(triangle);
}); });
} }

117
src/main.ts
View File

@ -1,116 +1,15 @@
import { initRepo, updateDocWithNewCircle, updateDocWithNewTriangle, updateDocWithShapeMove } from "./docManager"; import Canvas from './components/Canvas.svelte';
import { createOrUpdateShapes } from "./canvasManager"; import { initRepo } from './docManager';
import { CircleShape } from "./types"; import { mount } from 'svelte';
interface Config {
THROTTLE_MS: number;
DEFAULT_SHAPES: {
CIRCLE: Omit<CircleShape, 'id' | 'type' | 'color'>;
TRIANGLE: {
x1: number;
y1: number;
x2: number;
y2: number;
x3: number;
y3: number;
};
};
}
const CONFIG: Config = {
THROTTLE_MS: 16,
DEFAULT_SHAPES: {
CIRCLE: { x: 100, y: 100, radius: 30 },
TRIANGLE: { x1: 200, y1: 200, x2: 220, y2: 220, x3: 180, y3: 220 }
}
};
function initDragAndDrop(container: SVGSVGElement): void {
let isDragging = false;
let selectedShapeId: string | null = null;
const throttledMoveShape = throttle((shapeId: string, x: number, y: number) => {
updateDocWithShapeMove(shapeId, x, y);
}, CONFIG.THROTTLE_MS);
container.addEventListener("mousedown", (e: MouseEvent) => {
const target = e.target as SVGElement;
if (target instanceof SVGCircleElement || target instanceof SVGPolygonElement) {
isDragging = true;
selectedShapeId = target.id;
}
});
container.addEventListener("mousemove", (e: MouseEvent) => {
if (!isDragging || !selectedShapeId) return;
const svgPoint = getSVGPoint(container, e.clientX, e.clientY);
throttledMoveShape(selectedShapeId, svgPoint.x, svgPoint.y);
});
container.addEventListener("mouseup", () => {
isDragging = false;
selectedShapeId = null;
});
}
function getSVGPoint(container: SVGSVGElement, x: number, y: number): DOMPoint {
const pt = container.createSVGPoint();
pt.x = x;
pt.y = y;
const ctm = container.getScreenCTM();
if (!ctm) {
throw new Error("Could not get screen CTM");
}
return pt.matrixTransform(ctm.inverse());
}
function throttle<T extends (...args: any[]) => void>(func: T, limit: number): T {
let inThrottle = false;
return function(this: any, ...args: Parameters<T>) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
} as T;
}
async function initApp(): Promise<void> {
const container = document.querySelector("#shapesCanvas") as SVGSVGElement;
if (!container) throw new Error("Canvas container not found");
async function initApp() {
const handle = await initRepo(); const handle = await initRepo();
const doc = handle.docSync(); mount(Canvas, {
if (!doc) throw new Error("Failed to sync document"); target: document.getElementById('app')!,
props: {
createOrUpdateShapes(container, doc.shapes); handle
handle.on("change", (change) => {
createOrUpdateShapes(container, change.doc.shapes, change.patches);
});
initShapeButtons();
initDragAndDrop(container);
}
function initShapeButtons(): void {
const circleButton = document.querySelector("#addCircleButton") as HTMLElement;
const triangleButton = document.querySelector("#addTriangleButton") as HTMLElement;
if (!circleButton || !triangleButton) {
throw new Error("Shape buttons not found");
} }
circleButton.addEventListener("click", () => {
const { x, y, radius } = CONFIG.DEFAULT_SHAPES.CIRCLE;
updateDocWithNewCircle(x, y, radius);
});
triangleButton.addEventListener("click", () => {
const { x1, y1, x2, y2, x3, y3 } = CONFIG.DEFAULT_SHAPES.TRIANGLE;
updateDocWithNewTriangle(x1, y1, x2, y2, x3, y3);
}); });
} }

11
vite.config.ts
View File

@ -1,6 +1,7 @@
import { defineConfig } from "vite" import { defineConfig } from "vite"
import { svelte } from '@sveltejs/vite-plugin-svelte'
import wasm from "vite-plugin-wasm" import wasm from "vite-plugin-wasm"
import topLevelAwait from 'vite-plugin-top-level-await' import topLevelAwait from "vite-plugin-top-level-await"
export default defineConfig({ export default defineConfig({
// customize this to your repo name for github pages deploy // customize this to your repo name for github pages deploy
@ -10,10 +11,14 @@ export default defineConfig({
target: "esnext", target: "esnext",
}, },
plugins: [wasm(), topLevelAwait()], plugins: [
wasm(),
topLevelAwait(),
svelte()
],
worker: { worker: {
format: "es", format: "es",
plugins: () => [wasm()], plugins: () => [svelte()],
}, },
}) })