Some work on a more DOM-centered tree
This commit is contained in:
parent
65d391e050
commit
865fdce8f5
25
example.html
25
example.html
@ -38,6 +38,31 @@
|
||||
<div class="card" id="graph2">
|
||||
<script-graph3>
|
||||
<script-graph-node></script-graph-node>
|
||||
<script-graph-node
|
||||
icon="check"
|
||||
></script-graph-node>
|
||||
<script-graph-branch>
|
||||
<script-graph-node
|
||||
icon="check"
|
||||
></script-graph-node>
|
||||
<script-graph3>
|
||||
<script-graph-node
|
||||
icon="check"
|
||||
></script-graph-node>
|
||||
<script-graph-node
|
||||
icon="check"
|
||||
></script-graph-node>
|
||||
</script-graph3>
|
||||
<script-graph-branch>
|
||||
<script-graph-node
|
||||
icon="check"
|
||||
></script-graph-node>
|
||||
<script-graph-node
|
||||
icon="check"
|
||||
></script-graph-node>
|
||||
</script-graph-branch>
|
||||
</script-graph-branch>
|
||||
<script-graph-node></script-graph-node>
|
||||
</script-graph3>
|
||||
</div>
|
||||
<div class="card code">
|
||||
|
||||
209
package-lock.json
generated
209
package-lock.json
generated
@ -1,8 +1,215 @@
|
||||
{
|
||||
"name": "script-graph",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 1,
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@mdi/js": "^5.5.55",
|
||||
"@vanillawc/wc-codemirror": "^1.8.10",
|
||||
"lit-element": "^2.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-node-resolve": "^9.0.0",
|
||||
"@rollup/plugin-typescript": "^5.0.2",
|
||||
"rollup": "^2.26.4",
|
||||
"tslib": "^2.0.1",
|
||||
"typescript": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@mdi/js": {
|
||||
"version": "5.5.55",
|
||||
"resolved": "https://registry.npmjs.org/@mdi/js/-/js-5.5.55.tgz",
|
||||
"integrity": "sha512-vbw1QW3M9A4vObU9WmTETTG7n7feC9HSn/3up8ZYk/M3K9fGL9FPtw0+bdASRu1UOBgEsqC9eBhNW10IOcwMIg=="
|
||||
},
|
||||
"node_modules/@rollup/plugin-node-resolve": {
|
||||
"version": "9.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-9.0.0.tgz",
|
||||
"integrity": "sha512-gPz+utFHLRrd41WMP13Jq5mqqzHL3OXrfj3/MkSyB6UBIcuNt9j60GCbarzMzdf1VHFpOxfQh/ez7wyadLMqkg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@rollup/pluginutils": "^3.1.0",
|
||||
"@types/resolve": "1.17.1",
|
||||
"builtin-modules": "^3.1.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"is-module": "^1.0.0",
|
||||
"resolve": "^1.17.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-typescript": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-5.0.2.tgz",
|
||||
"integrity": "sha512-CkS028Itwjqm1uLbFVfpJgtVtnNvZ+og/m6UlNRR5wOOnNTWPcVQzOu5xGdEX+WWJxdvWIqUq2uR/RBt2ZipWg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@rollup/pluginutils": "^3.0.1",
|
||||
"resolve": "^1.14.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/pluginutils": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
|
||||
"integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/estree": "0.0.39",
|
||||
"estree-walker": "^1.0.1",
|
||||
"picomatch": "^2.2.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "0.0.39",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
|
||||
"integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "14.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.6.0.tgz",
|
||||
"integrity": "sha512-mikldZQitV94akrc4sCcSjtJfsTKt4p+e/s0AGscVA6XArQ9kFclP+ZiYUMnq987rc6QlYxXv/EivqlfSLxpKA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/resolve": {
|
||||
"version": "1.17.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
|
||||
"integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@vanillawc/wc-codemirror": {
|
||||
"version": "1.8.10",
|
||||
"resolved": "https://registry.npmjs.org/@vanillawc/wc-codemirror/-/wc-codemirror-1.8.10.tgz",
|
||||
"integrity": "sha512-UKMD/UOpF1uRl29nlwvwQqSMBqsl+uDWYlGx82wIYbIBJkeqPrSo1Ez1rGi9jc1CL7/XwUr7u+l/kTwZAEkrEg=="
|
||||
},
|
||||
"node_modules/builtin-modules": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
|
||||
"integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/deepmerge": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
|
||||
"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/estree-walker": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
|
||||
"integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
|
||||
"integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-module": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
|
||||
"integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/lit-element": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.3.1.tgz",
|
||||
"integrity": "sha512-tOcUAmeO3BzwiQ7FGWdsshNvC0HVHcTFYw/TLIImmKwXYoV0E7zCBASa8IJ7DiP4cen/Yoj454gS0qqTnIGsFA==",
|
||||
"dependencies": {
|
||||
"lit-html": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/lit-html": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.2.1.tgz",
|
||||
"integrity": "sha512-GSJHHXMGLZDzTRq59IUfL9FCdAlGfqNp/dEa7k7aBaaWD+JKaCjsAk9KYm2V12ItonVaYx2dprN66Zdm1AuBTQ=="
|
||||
},
|
||||
"node_modules/path-parse": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
|
||||
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/picomatch": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
|
||||
"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8.6"
|
||||
}
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.17.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
|
||||
"integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"path-parse": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "2.26.4",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.4.tgz",
|
||||
"integrity": "sha512-6+qsGuP0MXGd7vlYmk72utm1MrgZj5GfXibGL+cRkKQ9+ZL/BnFThDl0D5bcl7AqlzMjAQXRAwZX1HVm22M/4Q==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
|
||||
"integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.2.tgz",
|
||||
"integrity": "sha512-e4ERvRV2wb+rRZ/IQeb3jm2VxBsirQLpQhdxplZ2MEzGvDkkMmPglecnNDfSUBivMjP93vRbngYYDQqQ/78bcQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4.2.0"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/js": {
|
||||
"version": "5.5.55",
|
||||
|
||||
@ -13,8 +13,8 @@ let nodes = [];
|
||||
|
||||
window.onload = () => {
|
||||
|
||||
const graph2 = document.createElement("script-graph3");
|
||||
document.querySelector("#graph2").appendChild(graph2);
|
||||
//const graph2 = document.createElement("script-graph3");
|
||||
//document.querySelector("#graph2").appendChild(graph2);
|
||||
|
||||
let src = demoConfig;
|
||||
|
||||
|
||||
@ -7,9 +7,35 @@ import {
|
||||
TemplateResult
|
||||
} from "lit-element";
|
||||
|
||||
import { mdiAsterisk } from "@mdi/js";
|
||||
import {
|
||||
mdiCallSplit,
|
||||
mdiAbTesting,
|
||||
mdiCheck,
|
||||
mdiClose,
|
||||
mdiChevronRight,
|
||||
mdiExclamation,
|
||||
mdiTimerOutline,
|
||||
mdiTrafficLight,
|
||||
mdiRefresh,
|
||||
mdiArrowUp,
|
||||
mdiCodeJson,
|
||||
mdiCheckBoxOutline,
|
||||
mdiCheckboxBlankOutline,
|
||||
mdiAsterisk,
|
||||
mdiCircleOutline,
|
||||
} from "@mdi/js";
|
||||
|
||||
const SIZE = 35;
|
||||
const ICONS = {
|
||||
"call-split": mdiCallSplit,
|
||||
"ab-testing": mdiAbTesting,
|
||||
"check": mdiCheck,
|
||||
"close": mdiClose,
|
||||
"chevron-right": mdiChevronRight,
|
||||
"exclamation": mdiExclamation,
|
||||
"asterisk": mdiAsterisk,
|
||||
};
|
||||
|
||||
const SIZE = 24;
|
||||
const DIST = 20;
|
||||
|
||||
interface GraphNode extends LitElement{
|
||||
@ -20,27 +46,145 @@ interface GraphNode extends LitElement{
|
||||
|
||||
class ScriptGraphNode extends LitElement {
|
||||
|
||||
@property() icon = mdiAsterisk;
|
||||
@property() icon = "chevron-right";
|
||||
|
||||
get width() {
|
||||
return SIZE;
|
||||
return SIZE + 5;
|
||||
}
|
||||
get height() {
|
||||
return SIZE + DIST;
|
||||
return SIZE + 5;
|
||||
}
|
||||
|
||||
render_svg() {
|
||||
render() {
|
||||
return svg`
|
||||
<svg width="${this.width}" height="${this.height}" viewBox="${-this.width/2} 0 ${this.width} ${this.height}">
|
||||
<circle
|
||||
cx="0"
|
||||
cy="${this.width/2}"
|
||||
r="${SIZE/2}"
|
||||
/>
|
||||
<g style="pointer-events: none" transform="translate(-12, ${this.width/2-12})">
|
||||
<g style="pointer-events: none" transform="translate(${- 12} ${this.width/2 - 12})">
|
||||
${ICONS[this.icon] ?
|
||||
svg`
|
||||
<path d="${ICONS[this.icon]}"/>
|
||||
`
|
||||
: ""}
|
||||
</g>
|
||||
</svg>
|
||||
`
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: flex;
|
||||
--stroke-clr: var(--stroke-color, rgb(3, 169, 244));
|
||||
--hover-clr: var(--hover-color, rgb(255, 152, 0));
|
||||
}
|
||||
circle {
|
||||
stroke: var(--stroke-clr);
|
||||
stroke-width: 2;
|
||||
fill: white;
|
||||
}
|
||||
circle:hover {
|
||||
stroke: var(--hover-clr);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
class ScriptGraphBranch extends LitElement {
|
||||
|
||||
@property() _num_items = 0;
|
||||
|
||||
get width() {
|
||||
let w = 0;
|
||||
for(const c of this.children) {
|
||||
w += (c as any).width ?? 0;
|
||||
}
|
||||
return w;
|
||||
}
|
||||
get height() {
|
||||
let h = 0;
|
||||
for(const c of this.children) {
|
||||
h = Math.max(h, (c as any).height ?? 0);
|
||||
}
|
||||
return h + 40;
|
||||
}
|
||||
|
||||
async updateChildren() {
|
||||
this._num_items = this.children.length;
|
||||
}
|
||||
|
||||
render() {
|
||||
let xs = [];
|
||||
let x1 = 0;
|
||||
for (const c of Array.from(this.children)) {
|
||||
const rect = c.getBoundingClientRect();
|
||||
xs.push(rect.width/2+x1);
|
||||
x1 += rect.width;
|
||||
}
|
||||
|
||||
return html`
|
||||
<svg width="${this.width}" height="${this.height}">
|
||||
<rect x=0 y=0 width="${this.width}" height="${this.height}" fill="white" />
|
||||
${xs.map((x) => {
|
||||
return svg`
|
||||
<path
|
||||
class="line"
|
||||
d="
|
||||
M ${this.width/2} 0
|
||||
C ${this.width/2} 10 ${x} 10 ${x} 20
|
||||
L ${x} ${this.height-20}
|
||||
C ${x} ${this.height-5} ${this.width/2} ${this.height-15} ${this.width/2} ${this.height}
|
||||
"
|
||||
/>
|
||||
`
|
||||
})}
|
||||
</svg>
|
||||
<script-graph-node
|
||||
id="head"
|
||||
.icon=${"call-split"}
|
||||
>
|
||||
</script-graph-node>
|
||||
<div id="branches">
|
||||
<slot
|
||||
@slotchange=${this.updateChildren}
|
||||
></slot>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
position: relative;
|
||||
display: flex;
|
||||
--stroke-clr: var(--stroke-color, rgb(3, 169, 244));
|
||||
--hover-clr: var(--hover-color, rgb(255, 152, 0));
|
||||
}
|
||||
#head {
|
||||
position: Absolute;
|
||||
top: 5px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
#branches {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
path.line {
|
||||
stroke: var(--stroke-clr);
|
||||
stroke-width: 2;
|
||||
fill: white;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class ScriptGraph3 extends LitElement {
|
||||
@ -49,62 +193,80 @@ class ScriptGraph3 extends LitElement {
|
||||
@property() _width = 0;
|
||||
@property() _height = 0;
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
console.log(this.querySelectorAll('*'))
|
||||
|
||||
}
|
||||
|
||||
async updateChildren() {
|
||||
this.content = [];
|
||||
let y = 0;
|
||||
let w = 0;
|
||||
for (const e of this.querySelectorAll('*') as NodeListOf<GraphNode>) {
|
||||
this.content.push({
|
||||
svg: e.render_svg(),
|
||||
offset_y: y,
|
||||
});
|
||||
y += e.height;
|
||||
w = Math.max(w, e.width);
|
||||
}
|
||||
this._width = w;
|
||||
this._height = y;
|
||||
this.requestUpdate();
|
||||
return;
|
||||
}
|
||||
|
||||
childrenChangedCallback() {
|
||||
console.log("Children changed");
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
|
||||
let y = 0;
|
||||
let nodes = [];
|
||||
for (const e of this.content) {
|
||||
|
||||
get height() {
|
||||
let h = 0;
|
||||
for(const c of this.children) {
|
||||
h += (c as any).height ?? 0;
|
||||
h += 10;
|
||||
}
|
||||
return h + 10;
|
||||
}
|
||||
|
||||
get width() {
|
||||
let w = 0;
|
||||
for(const c of this.children) {
|
||||
w = Math.max(w, (c as any).width ?? 0);
|
||||
}
|
||||
return w;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<svg width=500 height=500>
|
||||
${this.content.map(e =>
|
||||
svg`
|
||||
<g transform="translate(${this._width/2} ${e.offset_y})">
|
||||
${e.svg}
|
||||
</g>
|
||||
`)}
|
||||
<svg width="${this.width}" height="${this.height}">
|
||||
<rect x=0 y=0 width="${this.width}" height="${this.height}" fill="white" />
|
||||
<path
|
||||
class="line"
|
||||
d="
|
||||
M ${this.width/2} 0
|
||||
L ${this.width/2} ${this.height}
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
<slot
|
||||
@slotchange=${this.updateChildren}
|
||||
></slot>
|
||||
<style>
|
||||
slot {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<div id="nodes">
|
||||
<slot
|
||||
@slotchange=${this.updateChildren}
|
||||
></slot>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
position: relative;
|
||||
display: flex;
|
||||
--stroke-clr: var(--stroke-color, rgb(3, 169, 244));
|
||||
--hover-clr: var(--hover-color, rgb(255, 152, 0));
|
||||
}
|
||||
#nodes {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
::slotted(*) {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
path.line {
|
||||
stroke: var(--stroke-clr);
|
||||
stroke-width: 2;
|
||||
fill: white;
|
||||
}
|
||||
`;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
customElements.define("script-graph3", ScriptGraph3);
|
||||
customElements.define("script-graph-node", ScriptGraphNode);
|
||||
customElements.define("script-graph-branch", ScriptGraphBranch);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user