{"_id":"@appthen/x6-html-shape","_rev":"2-9bf7f38c1127d4bd14d15456c233de0b","name":"@appthen/x6-html-shape","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@appthen/x6-html-shape","version":"0.1.0","type":"module","keywords":["antv","x6","graph","svg","html","shape","vue","react","hooks","typescript"],"main":"dist/index.cjs.js","module":"dist/index.umd.js","types":"dist/index.d.ts","author":{"name":"fork from lloydzhou"},"license":"MIT","homepage":"https://github.com/appthen/x6-html-shape","repository":{"type":"git","url":"git+ssh://git@github.com/appthen/x6-html-shape.git"},"scripts":{"build:clean":"rm -rf dist && mkdir -p dist","build:all":"npm run build && npm run build:react && npm run build:vue","build":"vite build && tsc -d --skipLibCheck --emitDeclarationOnly --esModuleInterop --declarationDir dist src/index.ts src/fobject.ts src/svelte.tsx","build:react":"tsc -d --skipLibCheck --emitDeclarationOnly --esModuleInterop --declarationDir dist --jsx react-jsx src/react.tsx src/react17.tsx src/portal.tsx","build:vue":"tsc -d --skipLibCheck --emitDeclarationOnly --esModuleInterop --declarationDir dist --jsx preserve src/vue.tsx src/vue2.tsx src/teleport.tsx"},"devDependencies":{"@antv/x6":"^2.16.1","babel-preset-minify":"^0.5.2","eslint":"^8.34.0","eslint-config-react-app":"^7.0.1","eslint-plugin-import":"^2.27.5","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-react":"^7.32.2","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","svelte":"^4.2.8","typescript":"^4.9.3","vite":"^4.1.0","vue":"^3.2.47"},"gitHead":"e134c264e3ce6b6670375ca28b738ac640d63a35","description":"html shape for [@antv/x6](https://github.com/antvis/X6)","bugs":{"url":"https://github.com/appthen/x6-html-shape/issues"},"_id":"@appthen/x6-html-shape@0.1.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-Na4rEaxU4wnf/pqnwuJHfSGbcNKGcPmN/8M0GlBlxltdDtoPHmLYKoM9T/e6WTr/5qjMiOPawzZnCaOzSwHJNw==","shasum":"b777c573938d8ecf2050115db8d6bd519cb2843d","tarball":"https://registry.npmjs.org/@appthen/x6-html-shape/-/x6-html-shape-0.1.0.tgz","fileCount":15,"unpackedSize":20959,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvDAN6k9SvTs2KvCHNlv7QUAIrcNR8kBbXDvBsU0rbBAiEAvTngcPsrNa5rsLIGetjHUSD1D1R+HmqFfYkiVLzZpAk="}]},"_npmUser":{"name":"charmtiger","email":"charmtiger@gmail.com"},"directories":{},"maintainers":[{"name":"eagleli","email":"l4537459@live.cn"},{"name":"charmtiger","email":"charmtiger@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/x6-html-shape_0.1.0_1709969663732_0.6742559018066179"},"_hasShrinkwrap":false},"0.1.1":{"name":"@appthen/x6-html-shape","version":"0.1.1","type":"module","keywords":["antv","x6","graph","svg","html","shape","vue","react","hooks","typescript"],"main":"dist/index.cjs.js","module":"dist/index.umd.js","types":"dist/index.d.ts","author":{"name":"fork from lloydzhou"},"license":"MIT","homepage":"https://github.com/appthen/x6-html-shape","repository":{"type":"git","url":"git+ssh://git@github.com/appthen/x6-html-shape.git"},"scripts":{"build:clean":"rm -rf dist && mkdir -p dist","build:all":"npm run build && npm run build:react && npm run build:vue","build":"vite build && tsc -d --skipLibCheck --emitDeclarationOnly --esModuleInterop --declarationDir dist src/index.ts src/fobject.ts src/svelte.tsx","build:react":"tsc -d --skipLibCheck --emitDeclarationOnly --esModuleInterop --declarationDir dist --jsx react-jsx src/react.tsx src/react17.tsx src/portal.tsx","build:vue":"tsc -d --skipLibCheck --emitDeclarationOnly --esModuleInterop --declarationDir dist --jsx preserve src/vue.tsx src/vue2.tsx src/teleport.tsx"},"devDependencies":{"@antv/x6":"^2.16.1","babel-preset-minify":"^0.5.2","eslint":"^8.34.0","eslint-config-react-app":"^7.0.1","eslint-plugin-import":"^2.27.5","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-react":"^7.32.2","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","svelte":"^4.2.8","typescript":"^4.9.3","vite":"^4.1.0","vue":"^3.2.47"},"description":"html shape for [@antv/x6](https://github.com/antvis/X6)","bugs":{"url":"https://github.com/appthen/x6-html-shape/issues"},"_id":"@appthen/x6-html-shape@0.1.1","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-aiW5aiaCpZZ5HUDaauuse6rIoTqwsrKvpqRilQMTUm7jRTzWy10Cn8zYwdM6w0t8wU5loMPjHftGH4P5rKuUeA==","shasum":"36248030204f13ed5b0e67b435f5212a6aa4499b","tarball":"https://registry.npmjs.org/@appthen/x6-html-shape/-/x6-html-shape-0.1.1.tgz","fileCount":9,"unpackedSize":18965,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvpn3qWKgTShFtOJlM7LoB64HY8dmZaKTtL7/dbf5biAiEA5A7LDy3WxlMDheTvtVUJxsv9KHQm/wlkWb5C7eXTClQ="}]},"_npmUser":{"name":"charmtiger","email":"charmtiger@gmail.com"},"directories":{},"maintainers":[{"name":"eagleli","email":"l4537459@live.cn"},{"name":"charmtiger","email":"charmtiger@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/x6-html-shape_0.1.1_1710754781397_0.6611348606894747"},"_hasShrinkwrap":false},"0.1.3":{"name":"@appthen/x6-html-shape","version":"0.1.3","type":"module","keywords":["antv","x6","graph","svg","html","shape","vue","react","hooks","typescript"],"main":"dist/x6html.cjs.js","module":"dist/x6html.es.js","types":"dist/index.d.ts","author":{"name":"fork from lloydzhou"},"license":"MIT","homepage":"https://github.com/appthen/x6-html-shape","repository":{"type":"git","url":"git+ssh://git@github.com/appthen/x6-html-shape.git"},"scripts":{"build:clean":"rm -rf dist && mkdir -p dist","build:all":"npm run build && npm run build:react && npm run build:vue","build":"vite build && tsc -d --skipLibCheck --emitDeclarationOnly --esModuleInterop --declarationDir dist src/index.ts src/fobject.ts src/svelte.tsx","build:react":"tsc -d --skipLibCheck --emitDeclarationOnly --esModuleInterop --declarationDir dist --jsx react-jsx src/react.tsx src/react17.tsx src/portal.tsx","build:vue":"tsc -d --skipLibCheck --emitDeclarationOnly --esModuleInterop --declarationDir dist --jsx preserve src/vue.tsx src/vue2.tsx src/teleport.tsx"},"devDependencies":{"@antv/x6":"^2.16.1","babel-preset-minify":"^0.5.2","eslint":"^8.34.0","eslint-config-react-app":"^7.0.1","eslint-plugin-import":"^2.27.5","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-react":"^7.32.2","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","svelte":"^4.2.8","typescript":"^4.9.3","vite":"^4.1.0","vue":"^3.2.47"},"description":"html shape for [@antv/x6](https://github.com/antvis/X6)","bugs":{"url":"https://github.com/appthen/x6-html-shape/issues"},"_id":"@appthen/x6-html-shape@0.1.3","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-1P4AuhJy8oK/SbWK+nv0EF+OKv/tjTeVzZbsLs17Rmlvum4RLMqJ9NEJAz8A7OEgmty4yVn0s9g/Vynp9BBk0Q==","shasum":"8d891163ee9c34e30543551a64696d523e808584","tarball":"https://registry.npmjs.org/@appthen/x6-html-shape/-/x6-html-shape-0.1.3.tgz","fileCount":10,"unpackedSize":25133,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGzWVBbuDtExz+JsJHQoCJtDf2FhpjWATIW70hEfPA3dAiEAgTG3LslYXcKLrjlOYPtsMGNsl1T90R1fJbj0qJ0tM6s="}]},"_npmUser":{"name":"charmtiger","email":"charmtiger@gmail.com"},"directories":{},"maintainers":[{"name":"eagleli","email":"l4537459@live.cn"},{"name":"charmtiger","email":"charmtiger@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/x6-html-shape_0.1.3_1710854362217_0.8444736666952364"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-09T07:34:23.626Z","0.1.0":"2024-03-09T07:34:23.884Z","modified":"2024-03-19T13:19:22.855Z","0.1.1":"2024-03-18T09:39:41.543Z","0.1.3":"2024-03-19T13:19:22.418Z"},"maintainers":[{"name":"eagleli","email":"l4537459@live.cn"},{"name":"charmtiger","email":"charmtiger@gmail.com"}],"description":"html shape for [@antv/x6](https://github.com/antvis/X6)","homepage":"https://github.com/appthen/x6-html-shape","keywords":["antv","x6","graph","svg","html","shape","vue","react","hooks","typescript"],"repository":{"type":"git","url":"git+ssh://git@github.com/appthen/x6-html-shape.git"},"author":{"name":"fork from lloydzhou"},"bugs":{"url":"https://github.com/appthen/x6-html-shape/issues"},"license":"MIT","readme":"# x6-html-shape\n\nhtml shape for [@antv/x6](https://github.com/antvis/X6)\n\n\"NPM\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/x6-html-shape?style=flat-square)\n![npm](https://img.shields.io/npm/dm/x6-html-shape?style=flat-square)\n\"MIT\n\n![image](https://github.com/lloydzhou/x6-html-shape/assets/1826685/1ea8cbc4-49f1-478b-a0b7-228eea993f88)\n\n## online demo\n\n[svelte codesandbox demo](https://codesandbox.io/s/x6-html-shape-svelte-5t1r9r)\n\n[vue codesandbox demo](https://codesandbox.io/s/x6-html-shape-vue-xvvlsh)\n\n[react codesandbox demo](https://codesandbox.io/s/html-shape-for-x6-0y71sv)\n\n![image](https://user-images.githubusercontent.com/1826685/231785511-1363f084-235f-44cd-b88a-0b88e3be09d2.png)\n\n## example\n\n```\nimport { register } from \"x6-html-shape\";\n\nregister({\n shape: \"html-shape-for-react\",\n render: (node, graph, container) => {\n const root = createRoot(container);\n root.render();\n return () => root.unmount();\n },\n width: 100,\n height: 40\n});\n\n\nconst graph = new Graph({\n container: this.container,\n background: {\n color: \"#F2F7FA\"\n }\n});\n\ngraph.addNode({\n shape: \"html-shape-for-react\",\n x: 100,\n y: 200,\n label: 'rect', \n})\n\n```\n\n## 事件穿透\n1. 由于DOM层级关系，html-shape实现的节点总是在svg上层\n2. 通过给`x6-html-shape-container`设置`pointer-events: none`屏蔽这一层的交互，使得鼠标事件能穿透到svg内部节点。但是`x6-html-shape-node`内部有一些元素是需要交互的，所以给节点打开\n3. 至于事件穿透使用`forwardEvent`将节点内部的鼠标事件转发到对应的`x6-node`内部\n\n```\nexport function forwardEvent(eventType, fromElement, toElement) {\n fromElement.addEventListener(eventType, function (event) {\n toElement.dispatchEvent(new event.constructor(event.type, event));\n event.preventDefault();\n event.stopPropagation();\n });\n}\n```\n\n\n# react\n\n## react18\n```\nimport createRender from 'x6-html-shape/dist/react'\n\nconst render = createRender(Component)\n\nregister({\n shape: 'react18-node',\n render,\n width: 100,\n height: 40,\n})\n```\n\n## react17\n```\nimport createRender from 'x6-html-shape/dist/react17'\n\nconst render = createRender(Component)\n\nregister({\n shape: 'react17-node',\n render,\n width: 100,\n height: 40,\n})\n```\n\n## react-portal\n```\nimport { register } from 'x6-html-shape'\nimport createRender from 'x6-html-shape/dist/portal'\n// 1. createRender using Component\n const [render, Provider] = createRender(Component)\n2. register node\nregister({\n shape: 'react-portal-node',\n render,\n width: 100,\n height: 40,\n})\n\n// 3.render Provider in react app before call graph.addNode\n \n// 4. add Node\ngraph.addNode({\n shape: 'react-portal-node',\n id: 'node1',\n label: 'node1',\n x: 100,\n y: 100,\n})\n```\n\n# vue\n\n## vue3\n```\nimport createRender from 'x6-html-shape/dist/vue'\n\nconst render = createRender(Component)\n\nregister({\n shape: 'vue3-node',\n render,\n width: 100,\n height: 40,\n})\n```\n\n## vue2\n```\nimport createRender from 'x6-html-shape/dist/vue2'\n\nconst render = createRender(Component)\n\nregister({\n shape: 'vue2-node',\n render,\n width: 100,\n height: 40,\n})\n```\n\n## vue3-teleport\n```\nimport { register } from 'x6-html-shape'\nimport createRender from 'x6-html-shape/dist/teleport'\n// 1. createRender using Component\n const [render, Provider] = createRender(Component)\n2. register node\nregister({\n shape: 'vue3-teleport-node',\n render,\n width: 100,\n height: 40,\n})\n\n// 3.render Provider in react app before call graph.addNode\n \n// 4. add Node\ngraph.addNode({\n shape: 'vue3-teleport-node',\n id: 'vue3-teleport-node',\n label: 'vue3 teleport node',\n x: 100,\n y: 100,\n})\n```\n\n# svelte\n```\nimport { register } from 'x6-html-shape'\nimport createRender from 'x6-html-shape/dist/svelte'\n// 1. createRender using Component\n const render = createRender(Component)\n2. register node\nregister({\n shape: 'svelte-node',\n render,\n width: 100,\n height: 40,\n})\n\n// 3. add Node\ngraph.addNode({\n shape: 'svelte-node',\n label: 'svelte node',\n x: 100,\n y: 100,\n})\n```\n","readmeFilename":"README.md"}