{"id":19658170,"url":"https://github.com/cdaringe/d3-svg-path-editor","last_synced_at":"2025-04-28T20:31:15.656Z","repository":{"id":37794828,"uuid":"225233645","full_name":"cdaringe/d3-svg-path-editor","owner":"cdaringe","description":"create an editable svg path. a library to enable in-app path editing","archived":false,"fork":false,"pushed_at":"2024-08-05T21:52:46.000Z","size":5366,"stargazers_count":24,"open_issues_count":12,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-22T16:02:47.179Z","etag":null,"topics":["browser","d3","edit","editor","path","svg"],"latest_commit_sha":null,"homepage":"https://cdaringe.github.io/d3-svg-path-editor/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cdaringe.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-01T21:29:04.000Z","updated_at":"2025-02-05T20:17:02.000Z","dependencies_parsed_at":"2023-10-03T01:22:25.839Z","dependency_job_id":"5b822df3-cd43-4782-9bfe-11be7f9fff6f","html_url":"https://github.com/cdaringe/d3-svg-path-editor","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaringe%2Fd3-svg-path-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaringe%2Fd3-svg-path-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaringe%2Fd3-svg-path-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaringe%2Fd3-svg-path-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cdaringe","download_url":"https://codeload.github.com/cdaringe/d3-svg-path-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251383653,"owners_count":21580916,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","d3","edit","editor","path","svg"],"created_at":"2024-11-11T15:36:20.642Z","updated_at":"2025-04-28T20:31:15.280Z","avatar_url":"https://github.com/cdaringe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @dino-dna/d3-svg-path-editor\n\ncreate an editable svg [path](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path). a library to enable in-app path editing\n\n![main](https://github.com/cdaringe/d3-svg-path-editor/workflows/main/badge.svg)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![TypeScript package](https://img.shields.io/badge/typings-included-blue.svg)](https://www.typescriptlang.org)\n\n\n\u003cdiv style='text-align: center;'\u003e\n  \u003cimg src='./img/demo.mov.gif' /\u003e\n\u003c/div\u003e\n\nsee the [live, interactive demo](https://cdaringe.github.io/d3-svg-path-editor/)\n\n## install\n\n`npm install --save @dino-dna/d3-svg-path-editor d3`\n\non the topic of d3 and bundle performance, some minimal subset of d3 packages must be installed and added onto the `d3` instance. we use d3-line, d3-selection, and d3 events. `d3` experts are welcome to add documentation on how to optimize web builds here for d3 bundles!\n\n## usage\n\ncreate a path from a set of points and d3 svg instance\n\n```tsx\nimport { fromPoints } from '@dino-dna/d3-svg-path-editor'\nconst points: [number, number][] = [[0, 0], [10, 10]]\nconst svg$ = d3.select((document.getElementById('my_svg')) as SVGSVGElement)\nconst {\n  path$, // d3 path selection\n  nodes, // abstract point datas. mutable\n  undo, // undo last edits\n  disableEditing, // call to disable editing\n  enableEditing, // call to enable editing\n  render, // call to trigger a manual/forced rerender. useful if state changes externally\n  setNodeVisibility, // call to show/hide nodes\n  snapper // new node creator (snapper) instance\n} = fromPoints({\n  // # required\n  points,\n  svg$,\n  // # optional\n  // onStateChange: nodes =\u003e { ... },\n  // testCanEditNode: node =\u003e boolean // control node edit-ability\n  // transformLine: d3Line =\u003e d3Line // e.g. line =\u003e line.curve(d3.curveCatmullRom.alpha(0.9))\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdaringe%2Fd3-svg-path-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcdaringe%2Fd3-svg-path-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdaringe%2Fd3-svg-path-editor/lists"}