@appthen/x6-html-shape - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/x6html.cjs.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@antv/x6"),b=require("react"),u=require("react-dom"),l="fo-shape-view";function y(t,e,n){e.addEventListener(t,function(r){n.dispatchEvent(new r.constructor(r.type,r)),r.preventDefault(),r.stopPropagation()})}function f(t,e=3){return!t||!s.Dom.isHTMLElement(t)||e<=0?!1:["a","button"].includes(s.Dom.tagName(t))||t.getAttribute("role")==="button"||t.getAttribute("type")==="button"?!0:f(t.parentNode,e-1)}function E(t){if(s.Dom.tagName(t)==="input"){const n=t.getAttribute("type");if(n==null||["text","password","number","email","search","tel","url"].includes(n))return!0}return!1}function p(t="rect",e=!0){return[{tagName:t,selector:"body"},e?s.Markup.getForeignObjectMarkup():null,{tagName:"text",selector:"label"}].filter(n=>n)}function L(t){return{view:t,markup:p("rect",t===l),attrs:{body:{fill:"transparent",stroke:"none",refWidth:"100%",refHeight:"100%"},label:{fontSize:14,fill:"#333",refX:"50%",refY:"50%",textAnchor:"middle",textVerticalAnchor:"middle"},fo:{refWidth:"100%",refHeight:"100%"}},propHooks(e){if(e.markup==null){const{primer:n,view:r}=e;if(n&&n!=="rect"){e.markup=p(n,r===l);let o={};n==="circle"?o={refCx:"50%",refCy:"50%",refR:"50%"}:n==="ellipse"&&(o={refCx:"50%",refCy:"50%",refRx:"50%",refRy:"50%"}),e.attrs=s.ObjectExt.merge({},{body:{refWidth:null,refHeight:null,...o}},e.attrs||{})}}return e}}}function S(t){return function(n,r,o){return console.log("render: ",{node:n,graph:r,container:o}),u.render(b.createElement(t,{node:n,graph:r}),o),()=>u.unmountComponentAtNode(o)}}const a="html-shape",c="html-shape-view",d=s.Node.define(L(c)),m={};function H(t){const{shape:e,render:n,inherit:r=a,...o}=t;if(!e)throw new Error("should specify shape in config");m[e]=n,s.Graph.registerNode(e,{inherit:r,...o},!0)}const i="html";class h extends s.NodeView{confirmUpdate(e){const n=super.confirmUpdate(e);return this.handleAction(n,i,()=>{if(!this.mounted){const r=m[this.cell.shape],o=this.ensureComponentContainer();r&&o&&(this.mounted=r(this.cell,this.graph,o)||!0,this.onMounted(),o.addEventListener("mousedown",this.prevEvent,!0),o.addEventListener("mouseup",this.prevEvent,!0))}})}prevEvent(e){(f(e.target)||E(e.target))&&(e.preventDefault(),e.stopPropagation())}ensureComponentContainer(){}onMounted(){}onUnMount(){}unmount(){return typeof this.mounted=="function"&&this.mounted(),this.componentContainer&&this.componentContainer.remove(),this.onUnMount(),this}}h.config({bootstrap:[i],actions:{component:i}});class g extends h{onMounted(){this.onTranslate=this.updateTransform.bind(this),this.graph.on("translate",this.onTranslate),this.graph.on("scale",this.onTranslate),this.graph.on("node:change:position",this.onTranslate)}onUnMount(){this.graph.off("translate",this.onTranslate),this.graph.off("scale",this.onTranslate),this.graph.off("node:change:position",this.onTranslate)}ensureComponentContainer(){if(!this.graph.htmlContainer){const e=this.graph.htmlContainer=s.View.createElement("div",!1);s.Dom.css(e,{position:"absolute",width:"100%",height:"100%","touch-action":"none","user-select":"none","pointer-events":"none",overflow:"hidden","z-index":0}),e.classList.add("x6-html-shape-container"),this.graph.container.append(e)}if(!this.componentContainer){const e=this.componentContainer=s.View.createElement("div",!1);s.Dom.css(e,{"pointer-events":"auto","touch-action":"none","user-select":"none","transform-origin":"center",position:"absolute"}),e.classList.add("x6-html-shape-node"),"click,dblclick,contextmenu,mousedown,mousemove,mouseup,mouseover,mouseout,mouseenter,mouseleave,mousewheel".split(",").forEach(r=>y(r,e,this.container)),this.graph.htmlContainer.append(e)}return this.componentContainer}updateTransform(e){super.updateTransform();const n=this.ensureComponentContainer(),{x:r,y:o}=this.graph.localToGraph(this.cell.getPosition()),{width:w,height:T}=this.cell.getSize(),v=this.graph.transform.getZoom(),C=getComputedStyle(this.container).cursor,x=this.cell.getZIndex(),M=this.graph.isSelected&&this.graph.isSelected(this.cell);s.Dom.css(n,{cursor:C,height:T+"px",width:w+"px","z-index":M?1e9:x,transform:`translate(${r}px, ${o}px) rotate(${this.cell.getAngle()}deg) scale(${v})`})}}s.NodeView.registry.register(c,g,!0);s.Node.registry.register(a,d,!0);exports.BaseHTMLShapeView=h;exports.HTMLShape=d;exports.HTMLShapeName=a;exports.HTMLShapeView=g;exports.HTMLView=c;exports.action=i;exports.createRender=S;exports.register=H;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("@antv/x6"),b=require("react"),u=require("react-dom"),l="fo-shape-view";function y(t,e,n){e.addEventListener(t,function(r){n.dispatchEvent(new r.constructor(r.type,r)),r.preventDefault(),r.stopPropagation()})}function f(t,e=3){return!t||!i.Dom.isHTMLElement(t)||e<=0?!1:["a","button"].includes(i.Dom.tagName(t))||t.getAttribute("role")==="button"||t.getAttribute("type")==="button"?!0:f(t.parentNode,e-1)}function E(t){if(i.Dom.tagName(t)==="input"){const n=t.getAttribute("type");if(n==null||["text","password","number","email","search","tel","url"].includes(n))return!0}return!1}function p(t="rect",e=!0){return[{tagName:t,selector:"body"},e?i.Markup.getForeignObjectMarkup():null,{tagName:"text",selector:"label"}].filter(n=>n)}function L(t){return{view:t,markup:p("rect",t===l),attrs:{body:{fill:"transparent",stroke:"none",refWidth:"100%",refHeight:"100%"},label:{fontSize:14,fill:"#333",refX:"50%",refY:"50%",textAnchor:"middle",textVerticalAnchor:"middle"},fo:{refWidth:"100%",refHeight:"100%"}},propHooks(e){if(e.markup==null){const{primer:n,view:r}=e;if(n&&n!=="rect"){e.markup=p(n,r===l);let o={};n==="circle"?o={refCx:"50%",refCy:"50%",refR:"50%"}:n==="ellipse"&&(o={refCx:"50%",refCy:"50%",refRx:"50%",refRy:"50%"}),e.attrs=i.ObjectExt.merge({},{body:{refWidth:null,refHeight:null,...o}},e.attrs||{})}}return e}}}function S(t){return function(n,r,o){return u.render(b.createElement(t,{node:n,graph:r}),o),()=>u.unmountComponentAtNode(o)}}const a="html-shape",c="html-shape-view",d=i.Node.define(L(c)),m={};function H(t){const{shape:e,render:n,inherit:r=a,...o}=t;if(!e)throw new Error("should specify shape in config");m[e]=n,i.Graph.registerNode(e,{inherit:r,...o},!0)}const s="html";class h extends i.NodeView{confirmUpdate(e){const n=super.confirmUpdate(e);return this.handleAction(n,s,()=>{if(!this.mounted){const r=m[this.cell.shape],o=this.ensureComponentContainer();r&&o&&(this.mounted=r(this.cell,this.graph,o)||!0,this.onMounted(),o.addEventListener("mousedown",this.prevEvent,!0),o.addEventListener("mouseup",this.prevEvent,!0))}})}prevEvent(e){(f(e.target)||E(e.target))&&(e.preventDefault(),e.stopPropagation())}ensureComponentContainer(){}onMounted(){}onUnMount(){}unmount(){return typeof this.mounted=="function"&&this.mounted(),this.componentContainer&&this.componentContainer.remove(),this.onUnMount(),this}}h.config({bootstrap:[s],actions:{component:s}});class g extends h{onMounted(){this.onTranslate=this.updateTransform.bind(this),this.graph.on("translate",this.onTranslate),this.graph.on("scale",this.onTranslate),this.graph.on("node:change:position",this.onTranslate)}onUnMount(){this.graph.off("translate",this.onTranslate),this.graph.off("scale",this.onTranslate),this.graph.off("node:change:position",this.onTranslate)}ensureComponentContainer(){if(!this.graph.htmlContainer){const e=this.graph.htmlContainer=i.View.createElement("div",!1);i.Dom.css(e,{position:"absolute",width:"100%",height:"100%","touch-action":"none","user-select":"none","pointer-events":"none",overflow:"hidden","z-index":0}),e.classList.add("x6-html-shape-container"),this.graph.container.append(e)}if(!this.componentContainer){const e=this.componentContainer=i.View.createElement("div",!1);i.Dom.css(e,{"pointer-events":"auto","touch-action":"none","user-select":"none","transform-origin":"center",position:"absolute"}),e.classList.add("x6-html-shape-node"),"click,dblclick,contextmenu,mousedown,mousemove,mouseup,mouseover,mouseout,mouseenter,mouseleave,mousewheel".split(",").forEach(r=>y(r,e,this.container)),this.graph.htmlContainer.append(e)}return this.componentContainer}updateTransform(e){super.updateTransform();const n=this.ensureComponentContainer(),{x:r,y:o}=this.graph.localToGraph(this.cell.getPosition()),{width:w,height:T}=this.cell.getSize(),v=this.graph.transform.getZoom(),C=getComputedStyle(this.container).cursor,x=this.cell.getZIndex(),M=this.graph.isSelected&&this.graph.isSelected(this.cell);i.Dom.css(n,{cursor:C,height:T+"px",width:w+"px","z-index":M?1e9:x,transform:`translate(${r}px, ${o}px) rotate(${this.cell.getAngle()}deg) scale(${v})`})}}i.NodeView.registry.register(c,g,!0);i.Node.registry.register(a,d,!0);exports.BaseHTMLShapeView=h;exports.HTMLShape=d;exports.HTMLShapeName=a;exports.HTMLShapeView=g;exports.HTMLView=c;exports.action=s;exports.createRender=S;exports.register=H;

dist/x6html.umd.js

@@ -1,1 +0,1 @@
-(function(i,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("@antv/x6"),require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","@antv/x6","react","react-dom"],o):(i=typeof globalThis<"u"?globalThis:i||self,o(i.X6HtmlShape={},i.X6,i.React,i.ReactDOM))})(this,function(i,o,v,l){"use strict";const p="fo-shape-view";function w(t,e,n){e.addEventListener(t,function(r){n.dispatchEvent(new r.constructor(r.type,r)),r.preventDefault(),r.stopPropagation()})}function f(t,e=3){return!t||!o.Dom.isHTMLElement(t)||e<=0?!1:["a","button"].includes(o.Dom.tagName(t))||t.getAttribute("role")==="button"||t.getAttribute("type")==="button"?!0:f(t.parentNode,e-1)}function C(t){if(o.Dom.tagName(t)==="input"){const n=t.getAttribute("type");if(n==null||["text","password","number","email","search","tel","url"].includes(n))return!0}return!1}function d(t="rect",e=!0){return[{tagName:t,selector:"body"},e?o.Markup.getForeignObjectMarkup():null,{tagName:"text",selector:"label"}].filter(n=>n)}function M(t){return{view:t,markup:d("rect",t===p),attrs:{body:{fill:"transparent",stroke:"none",refWidth:"100%",refHeight:"100%"},label:{fontSize:14,fill:"#333",refX:"50%",refY:"50%",textAnchor:"middle",textVerticalAnchor:"middle"},fo:{refWidth:"100%",refHeight:"100%"}},propHooks(e){if(e.markup==null){const{primer:n,view:r}=e;if(n&&n!=="rect"){e.markup=d(n,r===p);let s={};n==="circle"?s={refCx:"50%",refCy:"50%",refR:"50%"}:n==="ellipse"&&(s={refCx:"50%",refCy:"50%",refRx:"50%",refRy:"50%"}),e.attrs=o.ObjectExt.merge({},{body:{refWidth:null,refHeight:null,...s}},e.attrs||{})}}return e}}}function b(t){return function(n,r,s){return console.log("render: ",{node:n,graph:r,container:s}),l.render(v.createElement(t,{node:n,graph:r}),s),()=>l.unmountComponentAtNode(s)}}const c="html-shape",h="html-shape-view",m=o.Node.define(M(h)),g={};function y(t){const{shape:e,render:n,inherit:r=c,...s}=t;if(!e)throw new Error("should specify shape in config");g[e]=n,o.Graph.registerNode(e,{inherit:r,...s},!0)}const a="html";class u extends o.NodeView{confirmUpdate(e){const n=super.confirmUpdate(e);return this.handleAction(n,a,()=>{if(!this.mounted){const r=g[this.cell.shape],s=this.ensureComponentContainer();r&&s&&(this.mounted=r(this.cell,this.graph,s)||!0,this.onMounted(),s.addEventListener("mousedown",this.prevEvent,!0),s.addEventListener("mouseup",this.prevEvent,!0))}})}prevEvent(e){(f(e.target)||C(e.target))&&(e.preventDefault(),e.stopPropagation())}ensureComponentContainer(){}onMounted(){}onUnMount(){}unmount(){return typeof this.mounted=="function"&&this.mounted(),this.componentContainer&&this.componentContainer.remove(),this.onUnMount(),this}}u.config({bootstrap:[a],actions:{component:a}});class T extends u{onMounted(){this.onTranslate=this.updateTransform.bind(this),this.graph.on("translate",this.onTranslate),this.graph.on("scale",this.onTranslate),this.graph.on("node:change:position",this.onTranslate)}onUnMount(){this.graph.off("translate",this.onTranslate),this.graph.off("scale",this.onTranslate),this.graph.off("node:change:position",this.onTranslate)}ensureComponentContainer(){if(!this.graph.htmlContainer){const e=this.graph.htmlContainer=o.View.createElement("div",!1);o.Dom.css(e,{position:"absolute",width:"100%",height:"100%","touch-action":"none","user-select":"none","pointer-events":"none",overflow:"hidden","z-index":0}),e.classList.add("x6-html-shape-container"),this.graph.container.append(e)}if(!this.componentContainer){const e=this.componentContainer=o.View.createElement("div",!1);o.Dom.css(e,{"pointer-events":"auto","touch-action":"none","user-select":"none","transform-origin":"center",position:"absolute"}),e.classList.add("x6-html-shape-node"),"click,dblclick,contextmenu,mousedown,mousemove,mouseup,mouseover,mouseout,mouseenter,mouseleave,mousewheel".split(",").forEach(r=>w(r,e,this.container)),this.graph.htmlContainer.append(e)}return this.componentContainer}updateTransform(e){super.updateTransform();const n=this.ensureComponentContainer(),{x:r,y:s}=this.graph.localToGraph(this.cell.getPosition()),{width:S,height:E}=this.cell.getSize(),H=this.graph.transform.getZoom(),L=getComputedStyle(this.container).cursor,N=this.cell.getZIndex(),V=this.graph.isSelected&&this.graph.isSelected(this.cell);o.Dom.css(n,{cursor:L,height:E+"px",width:S+"px","z-index":V?1e9:N,transform:`translate(${r}px, ${s}px) rotate(${this.cell.getAngle()}deg) scale(${H})`})}}o.NodeView.registry.register(h,T,!0),o.Node.registry.register(c,m,!0),i.BaseHTMLShapeView=u,i.HTMLShape=m,i.HTMLShapeName=c,i.HTMLShapeView=T,i.HTMLView=h,i.action=a,i.createRender=b,i.register=y,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
+(function(i,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("@antv/x6"),require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","@antv/x6","react","react-dom"],r):(i=typeof globalThis<"u"?globalThis:i||self,r(i.X6HtmlShape={},i.X6,i.React,i.ReactDOM))})(this,function(i,r,v,l){"use strict";const p="fo-shape-view";function w(t,e,n){e.addEventListener(t,function(o){n.dispatchEvent(new o.constructor(o.type,o)),o.preventDefault(),o.stopPropagation()})}function f(t,e=3){return!t||!r.Dom.isHTMLElement(t)||e<=0?!1:["a","button"].includes(r.Dom.tagName(t))||t.getAttribute("role")==="button"||t.getAttribute("type")==="button"?!0:f(t.parentNode,e-1)}function C(t){if(r.Dom.tagName(t)==="input"){const n=t.getAttribute("type");if(n==null||["text","password","number","email","search","tel","url"].includes(n))return!0}return!1}function d(t="rect",e=!0){return[{tagName:t,selector:"body"},e?r.Markup.getForeignObjectMarkup():null,{tagName:"text",selector:"label"}].filter(n=>n)}function M(t){return{view:t,markup:d("rect",t===p),attrs:{body:{fill:"transparent",stroke:"none",refWidth:"100%",refHeight:"100%"},label:{fontSize:14,fill:"#333",refX:"50%",refY:"50%",textAnchor:"middle",textVerticalAnchor:"middle"},fo:{refWidth:"100%",refHeight:"100%"}},propHooks(e){if(e.markup==null){const{primer:n,view:o}=e;if(n&&n!=="rect"){e.markup=d(n,o===p);let s={};n==="circle"?s={refCx:"50%",refCy:"50%",refR:"50%"}:n==="ellipse"&&(s={refCx:"50%",refCy:"50%",refRx:"50%",refRy:"50%"}),e.attrs=r.ObjectExt.merge({},{body:{refWidth:null,refHeight:null,...s}},e.attrs||{})}}return e}}}function b(t){return function(n,o,s){return l.render(v.createElement(t,{node:n,graph:o}),s),()=>l.unmountComponentAtNode(s)}}const c="html-shape",h="html-shape-view",m=r.Node.define(M(h)),g={};function y(t){const{shape:e,render:n,inherit:o=c,...s}=t;if(!e)throw new Error("should specify shape in config");g[e]=n,r.Graph.registerNode(e,{inherit:o,...s},!0)}const a="html";class u extends r.NodeView{confirmUpdate(e){const n=super.confirmUpdate(e);return this.handleAction(n,a,()=>{if(!this.mounted){const o=g[this.cell.shape],s=this.ensureComponentContainer();o&&s&&(this.mounted=o(this.cell,this.graph,s)||!0,this.onMounted(),s.addEventListener("mousedown",this.prevEvent,!0),s.addEventListener("mouseup",this.prevEvent,!0))}})}prevEvent(e){(f(e.target)||C(e.target))&&(e.preventDefault(),e.stopPropagation())}ensureComponentContainer(){}onMounted(){}onUnMount(){}unmount(){return typeof this.mounted=="function"&&this.mounted(),this.componentContainer&&this.componentContainer.remove(),this.onUnMount(),this}}u.config({bootstrap:[a],actions:{component:a}});class T extends u{onMounted(){this.onTranslate=this.updateTransform.bind(this),this.graph.on("translate",this.onTranslate),this.graph.on("scale",this.onTranslate),this.graph.on("node:change:position",this.onTranslate)}onUnMount(){this.graph.off("translate",this.onTranslate),this.graph.off("scale",this.onTranslate),this.graph.off("node:change:position",this.onTranslate)}ensureComponentContainer(){if(!this.graph.htmlContainer){const e=this.graph.htmlContainer=r.View.createElement("div",!1);r.Dom.css(e,{position:"absolute",width:"100%",height:"100%","touch-action":"none","user-select":"none","pointer-events":"none",overflow:"hidden","z-index":0}),e.classList.add("x6-html-shape-container"),this.graph.container.append(e)}if(!this.componentContainer){const e=this.componentContainer=r.View.createElement("div",!1);r.Dom.css(e,{"pointer-events":"auto","touch-action":"none","user-select":"none","transform-origin":"center",position:"absolute"}),e.classList.add("x6-html-shape-node"),"click,dblclick,contextmenu,mousedown,mousemove,mouseup,mouseover,mouseout,mouseenter,mouseleave,mousewheel".split(",").forEach(o=>w(o,e,this.container)),this.graph.htmlContainer.append(e)}return this.componentContainer}updateTransform(e){super.updateTransform();const n=this.ensureComponentContainer(),{x:o,y:s}=this.graph.localToGraph(this.cell.getPosition()),{width:S,height:E}=this.cell.getSize(),H=this.graph.transform.getZoom(),L=getComputedStyle(this.container).cursor,N=this.cell.getZIndex(),V=this.graph.isSelected&&this.graph.isSelected(this.cell);r.Dom.css(n,{cursor:L,height:E+"px",width:S+"px","z-index":V?1e9:N,transform:`translate(${o}px, ${s}px) rotate(${this.cell.getAngle()}deg) scale(${H})`})}}r.NodeView.registry.register(h,T,!0),r.Node.registry.register(c,m,!0),i.BaseHTMLShapeView=u,i.HTMLShape=m,i.HTMLShapeName=c,i.HTMLShapeView=T,i.HTMLView=h,i.action=a,i.createRender=b,i.register=y,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});

package.json

 {
   "name": "@appthen/x6-html-shape",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
@@ -5,0 +5,0 @@ "files": [

dist/portal.d.ts

-/**
- * import { register } from 'x6-html-shape'
- * import createRender from 'x6-html-shape/portal'
- *
- * 1. createRender using Component
- * const [render, Provider] = createRender(Component)
- *
- * 2. register node
- * register({
- *   shape: 'react-portal-node',
- *   render,
- *   width: 100,
- *   height: 40,
- * })
- *
- * 3.render Provider in react app before call graph.addNode
- * <Provider />
- *
- * 4. add Node
- * graph.addNode({
- *   id: 'node1',
- *   label: 'node1',
- *   x: 100,
- *   y: 100,
- * })
- */
-export default function createRender(Component: any): (((node: any, graph: any, container: any) => () => any) | (() => any))[];

dist/react.d.ts

-export default function createRender(Component: any): (node: any, graph: any, container: any) => () => any;

dist/react17.d.ts

-export default function createRender(Component: any): (node: any, graph: any, container: any) => () => any;

dist/teleport.d.ts

-import { DefineComponent } from "vue";
-/**
- * import { register } from 'x6-html-shape'
- * import createRender from 'x6-html-shape/dist/teleport'
- *
- * 1. createRender using Component
- * const [render, Provider] = createRender(Component)
- *
- * 2. register node
- * register({
- *   shape: 'vue-teleport-node',
- *   render,
- *   width: 100,
- *   height: 40,
- * })
- *
- * 3.render Provider in react app before call graph.addNode
- * <Provider />
- *
- * 4. add Node
- * graph.addNode({
- *   shape: 'vue-teleport-node',
- *   id: 'node1',
- *   label: 'node1',
- *   x: 100,
- *   y: 100,
- * })
- */
-type ComponentType = DefineComponent<{
-    [key: string]: any;
-}, {
-    [key: string]: any;
-}>;
-export default function createRender(Component: any): (ComponentType | ((node: any, graph: any, container: any) => () => void))[];
-export {};

dist/vue.d.ts

-export default function createRender(Component: any): (node: any, graph: any, container: any) => () => void;

dist/vue2.d.ts

-export default function createRender(Component: any): (node: any, graph: any, container: any) => () => any;

No alert changes

Worsened metrics

Total package byte prevSize

18965

-9.51%

Number of package files

9

-40%

Lines of code

111

-37.64%

No dependency changes