diff --git a/package-lock.json b/package-lock.json
index abf7bad..e0b9427 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/src/main.js b/src/main.js
index e2e48e7..1cef052 100644
--- a/src/main.js
+++ b/src/main.js
@@ -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;
diff --git a/src/script-graph3.ts b/src/script-graph3.ts
index 392e5e8..6fc2bdc 100644
--- a/src/script-graph3.ts
+++ b/src/script-graph3.ts
@@ -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`
+
`
}
+ 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`
+
+
+
+
+
+
+ `
+ }
+
+ 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
) {
- 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`
-