{"_id":"@danielres/svelte-dageditor","_rev":"2-2f9cf206ca533742a7a494923395ba72","name":"@danielres/svelte-dageditor","dist-tags":{"latest":"0.0.5"},"versions":{"0.0.2":{"name":"@danielres/svelte-dageditor","version":"0.0.2","private":false,"license":"MIT","author":{"name":"Daniel Reszka"},"repository":{"type":"git","url":"git+https://github.com/danielres/svelte-dageditor.git"},"publishConfig":{"access":"public"},"exports":{"./styles.css":"./dist/styles.css",".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"svelte":"./dist/index.js","scripts":{"dev":"vite dev","build":"vite build","preview":"vite preview","test":"playwright test","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","test:unit":"ENV=test dotenv vitest -- --threads=false","lint":"prettier --plugin-search-dir . --check . && eslint .","format":"prettier --plugin-search-dir . --write .","package:css":"tailwind -i src/lib/components/tree.postcss | postcss > dist/styles.css","package":"npx @sveltejs/package && pnpm package:css"},"devDependencies":{"@playwright/test":"^1.33.0","@sveltejs/adapter-auto":"^2.0.1","@sveltejs/kit":"^1.16.3","@types/pg":"^8.6.6","@typescript-eslint/eslint-plugin":"^5.59.5","@typescript-eslint/parser":"^5.59.5","autoprefixer":"^10.4.14","eslint":"^8.40.0","eslint-config-prettier":"^8.8.0","eslint-plugin-svelte3":"^4.0.0","postcss":"^8.4.23","postcss-cli":"^10.1.0","postcss-load-config":"^4.0.1","prettier":"^2.8.8","prettier-plugin-svelte":"^2.10.0","svelte":"^3.59.1","svelte-check":"^3.3.2","svelte-preprocess":"^5.0.3","tailwindcss":"^3.3.2","tslib":"^2.5.0","typescript":"^5.0.4","vite":"^4.3.5","vitest":"^0.25.8"},"type":"module","dependencies":{"svelte":"^3.59.1"},"gitHead":"bccd7ed402267495238cddb34e37701d63dd0c0e","description":"Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).","bugs":{"url":"https://github.com/danielres/svelte-dageditor/issues"},"homepage":"https://github.com/danielres/svelte-dageditor#readme","_id":"@danielres/svelte-dageditor@0.0.2","_nodeVersion":"18.6.0","_npmVersion":"8.13.2","dist":{"integrity":"sha512-p08nylOB4kaAWtED0dRFw97U+DUH4tbATdv2NfUy6LjZdeznfVd9Pqn/2kPT6Srfx42jiOvS9nTAGsZIPUPcwQ==","shasum":"3fe1b297fae93187ef2bfad55af42497738c1477","tarball":"https://registry.npmjs.org/@danielres/svelte-dageditor/-/svelte-dageditor-0.0.2.tgz","fileCount":5,"unpackedSize":9433,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDZ8A64elKdhqWl19xlqqqKi9PZp+uht0Vx4xbKyWn23AiBpZh6ca/PfATXYKd4m+WLunXA6wsuiB818B0pgFKan5w=="}]},"_npmUser":{"name":"danielres","email":"dannn.r@gmail.com"},"directories":{},"maintainers":[{"name":"danielres","email":"dannn.r@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-dageditor_0.0.2_1683845908635_0.07875504315757964"},"_hasShrinkwrap":false},"0.0.3":{"name":"@danielres/svelte-dageditor","version":"0.0.3","private":false,"license":"MIT","author":{"name":"Daniel Reszka"},"repository":{"type":"git","url":"git+https://github.com/danielres/svelte-dageditor.git"},"publishConfig":{"access":"public"},"exports":{"./styles.css":"./dist/styles.css",".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"svelte":"./dist/index.js","scripts":{"dev":"vite dev","build":"vite build","preview":"vite preview","test":"playwright test","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","test:unit":"ENV=test dotenv vitest -- --threads=false","lint":"prettier --plugin-search-dir . --check . && eslint .","format":"prettier --plugin-search-dir . --write .","package:css":"tailwind -i src/lib/components/tree.postcss | postcss > dist/styles.css","package":"npx @sveltejs/package && pnpm package:css"},"devDependencies":{"@playwright/test":"^1.33.0","@sveltejs/adapter-auto":"^2.0.1","@sveltejs/kit":"^1.16.3","@types/pg":"^8.6.6","@typescript-eslint/eslint-plugin":"^5.59.5","@typescript-eslint/parser":"^5.59.5","autoprefixer":"^10.4.14","eslint":"^8.40.0","eslint-config-prettier":"^8.8.0","eslint-plugin-svelte3":"^4.0.0","postcss":"^8.4.23","postcss-cli":"^10.1.0","postcss-load-config":"^4.0.1","prettier":"^2.8.8","prettier-plugin-svelte":"^2.10.0","svelte":"^3.59.1","svelte-check":"^3.3.2","svelte-preprocess":"^5.0.3","tailwindcss":"^3.3.2","tslib":"^2.5.0","typescript":"^5.0.4","vite":"^4.3.5","vitest":"^0.25.8"},"type":"module","dependencies":{"svelte":"^3.59.1"},"gitHead":"bccd7ed402267495238cddb34e37701d63dd0c0e","description":"Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).","bugs":{"url":"https://github.com/danielres/svelte-dageditor/issues"},"homepage":"https://github.com/danielres/svelte-dageditor#readme","_id":"@danielres/svelte-dageditor@0.0.3","_nodeVersion":"18.6.0","_npmVersion":"8.13.2","dist":{"integrity":"sha512-ce9iQe9yB4vBVJSx+dxMycP2KyV1W+lTcdSTooNDYERvln5/0dI3r+QqhP+WCVC3N+fKEIPQtJSF9GLPFEGIZw==","shasum":"2ac259e02f783afee3906791f8a94455671cdda4","tarball":"https://registry.npmjs.org/@danielres/svelte-dageditor/-/svelte-dageditor-0.0.3.tgz","fileCount":18,"unpackedSize":35459,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGaC9b/GSaESGNYKXRHkBkIgtXwEp/lDsm2znltOs8OSAiEA6hiQavCeOtrJzKfPb6rVfOLjfCYcuppCk507hHn4gE8="}]},"_npmUser":{"name":"danielres","email":"dannn.r@gmail.com"},"directories":{},"maintainers":[{"name":"danielres","email":"dannn.r@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-dageditor_0.0.3_1683846262173_0.6508308101750468"},"_hasShrinkwrap":false},"0.0.5":{"name":"@danielres/svelte-dageditor","version":"0.0.5","private":false,"license":"MIT","author":{"name":"Daniel Reszka"},"repository":{"type":"git","url":"git+https://github.com/danielres/svelte-dageditor.git"},"publishConfig":{"access":"public"},"main":"./dist/index.js","types":"./dist/index.d.ts","svelte":"./dist/index.js","scripts":{"dev":"vite dev","build":"vite build","preview":"vite preview","test":"playwright test","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","test:unit":"ENV=test dotenv vitest -- --threads=false","lint":"prettier --plugin-search-dir . --check . && eslint .","format":"prettier --plugin-search-dir . --write .","package:css":"tailwind -i src/lib/components/tree.postcss | postcss > dist/styles.css","package":"npx @sveltejs/package && pnpm package:css"},"devDependencies":{"@playwright/test":"^1.33.0","@sveltejs/adapter-auto":"^2.0.1","@sveltejs/kit":"^1.16.3","@typescript-eslint/eslint-plugin":"^5.59.5","@typescript-eslint/parser":"^5.59.5","autoprefixer":"^10.4.14","eslint":"^8.40.0","eslint-config-prettier":"^8.8.0","eslint-plugin-svelte3":"^4.0.0","postcss":"^8.4.23","postcss-cli":"^10.1.0","postcss-load-config":"^4.0.1","prettier":"^2.8.8","prettier-plugin-svelte":"^2.10.0","svelte":"^3.59.1","svelte-check":"^3.3.2","svelte-preprocess":"^5.0.3","tailwindcss":"^3.3.2","tslib":"^2.5.0","typescript":"^5.0.4","vite":"^4.3.5","vitest":"^0.25.8"},"type":"module","dependencies":{"svelte":"^3.59.1"},"gitHead":"55c638b515c8b2ec35702e7f36b433eedd6d4212","description":"An advanced editable DAG (directed acyclic graph) component for Svelte[Kit].","bugs":{"url":"https://github.com/danielres/svelte-dageditor/issues"},"homepage":"https://github.com/danielres/svelte-dageditor#readme","_id":"@danielres/svelte-dageditor@0.0.5","_nodeVersion":"18.6.0","_npmVersion":"8.13.2","dist":{"integrity":"sha512-Rj2606NIdxWkaTgh27ogrRYVMydpFgyfm5e5oeBqzKiaK4r07fVFhUVXs83c0lugKgCxrZAiLasl6Zi3IixJ7A==","shasum":"79df86716b1dedb558dbf9dd2c04fc8425121695","tarball":"https://registry.npmjs.org/@danielres/svelte-dageditor/-/svelte-dageditor-0.0.5.tgz","fileCount":26,"unpackedSize":43499,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCE69kozQUArBooKJ4HdIAZU45CvJCY+/fvS9Y/zCdLVwIhAK3O0u+p54kA5xWIODu+6xVJS2LqdnNGSFrVqBBdp47r"}]},"_npmUser":{"name":"danielres","email":"dannn.r@gmail.com"},"directories":{},"maintainers":[{"name":"danielres","email":"dannn.r@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-dageditor_0.0.5_1684148577250_0.6951843472448143"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-11T22:58:28.552Z","0.0.2":"2023-05-11T22:58:28.799Z","modified":"2023-05-15T11:02:57.733Z","0.0.3":"2023-05-11T23:04:22.344Z","0.0.5":"2023-05-15T11:02:57.432Z"},"maintainers":[{"name":"danielres","email":"dannn.r@gmail.com"}],"description":"An advanced editable DAG (directed acyclic graph) component for Svelte[Kit].","homepage":"https://github.com/danielres/svelte-dageditor#readme","repository":{"type":"git","url":"git+https://github.com/danielres/svelte-dageditor.git"},"author":{"name":"Daniel Reszka"},"bugs":{"url":"https://github.com/danielres/svelte-dageditor/issues"},"license":"MIT","readme":"# @danielres/svelte-dageditor\n\nAn advanced editable DAG (directed acyclic graph) component for Svelte[Kit].\n\nThis is basically a treeview of interconnected nodes, with the ability to add, remove, rename, delete, and move nodes around. The major difference with a traditional tree structure, is that nodes can have multiple parents.\n\n- [Preview video (Youtube)](https://www.youtube.com/watch?v=HDXNwqDPwAs)\n\nThis allows to create flexible multi-dimensional datastructures/taxonomies/classification systems beyond the limitations of the more common flat or tree-like structures.\n\n- No extra dependencies\n- Written in TypeScript\n- Supports Svelte 3 and SvelteKit\n- Provides undo/redo\n- Uses (svelte native) drag and drop\n- Comes with default styles (copy [them](https://github.com/danielres/svelte-dageditor/blob/main/src/lib/components/tree.postcss) to your project and customize them as you wish)\n- 9Kb (unpacked, all included)\n\n## Disclaimer\n\nThis is an early alpha version, seems to work well. But it is not yet ready for production use.\nMajor breaking changes are expected.\n\n## Installation\n\n`npm install @danielres/svelte-dageditor`\n\nor\n\n`pnpm install @danielres/svelte-dageditor`\n\nor\n\n`yarn add @danielres/svelte-dageditor`\n\n## Example usage\n\n```svelte\n<script>\n  // import editable DAG tree logic (stores, commands, etc.):\n  import { makeDagStore } from '@danielres/svelte-dageditor'\n\n  // import the Tree component:\n  import { Tree } from '@danielres/svelte-dageditor'\n\n  // import default styles:\n  import '@danielres/svelte-dageditor/dist/styles.css'\n\n  import { onMount } from 'svelte'\n\n  // Provide nodes and relations (could be fetched from a server / db):\n  const data = {\n    nodes: [\n      { name: '<root>', id: '<root>' },\n      { name: 'tag1', id: 'tag1' },\n      { name: 'tag2', id: 'tag2' },\n    ],\n    relations: [\n      { id: 'aaa', parentId: '<root>', childId: 'tag1' },\n      { id: 'aaa', parentId: '<root>', childId: 'tag2' },\n    ],\n  }\n\n  // Generate the editable tree stores\n  // The first argument (\"<root>\" in this example) should be the\n  // id of the node that we wish to use as the root:\n  const dag = makeDagStore('<root>', data.nodes, data.relations)\n\n  const { commands } = dag\n\n  // Optional: use undo/redo features\n  // Optional: get the undos/redos counts\n  // Optional: get the history store containing executed commands\n  const { undo, redo, undos, redos, history } = commands\n\n  onMount(() => {\n    // All actions that can be done through the UI are also available programmatically.\n    // Example: execute some commands:\n    commands.rename({ id: 'tag1', to: 'tag1-renamed' })\n    commands.rename({ id: 'tag2', to: 'tag2-renamed' })\n    commands.move({ id: 'tag2', from: '<root>', to: 'tag1' })\n  })\n</script>\n\n<div class=\"flex justify-between items-center\">\n  <div class=\"flex items-center gap-2\">\n    <button on:click={undo} disabled={!$undos}>Undo ({$undos})</button>\n    <button on:click={redo} disabled={!$redos}>Redo ({$redos})</button>\n  </div>\n</div>\n\n<div class=\"grid grid-cols-2\">\n  <main class=\"py-4 px-8 grid gap-8 h-fit\">\n    <!-- The DAG rendered as an editable tree -->\n    <!-- root={true} allows to render the root node differently  -->\n    <Tree {dag} root={true} />\n  </main>\n</div>\n\n<!-- Optional: inspect the internals (commands, history) -->\n<div>\n  <h2>Commands:</h2>\n  <pre>{JSON.stringify($commands, null, 2)}</pre>\n\n  <h2>History:</h2>\n  <pre>{JSON.stringify($history, null, 2)}</pre>\n</div>\n\n<style lang=\"postcss\">\n  button {\n    @apply text-sm text-gray-600 bg-gray-200 rounded opacity-75;\n    @apply px-2 py-1;\n    @apply transition-opacity;\n  }\n  button:disabled {\n    @apply opacity-25;\n  }\n  button:not(:disabled) {\n    @apply cursor-pointer;\n  }\n  button:not(:disabled):hover {\n    @apply opacity-100;\n  }\n</style>\n```\n","readmeFilename":"README.md"}