@pictogrammers/components 0.5.15 → 0.5.18

package/pg/nodes/__examples__/basic/exampleNodes.ts

@@ -0,0 +1,129 @@
+export const nodeExamples = [{
+  "name": "stateGet",
+  "description": "Get",
+  "editor": null,
+  "async": false,
+  "args": [
+    {
+      "key": "key",
+      "label": "Key",
+      "editor": "Text",
+      "value": ""
+    }
+  ],
+  "nodes": [
+    {
+      "key": "nodes",
+      "label": "nodes"
+    }
+  ]
+},
+{
+  "name": "dialog",
+  "description": "Dialog",
+  "editor": null,
+  "async": true,
+  "args": [
+    {
+      "key": "character",
+      "label": "Character",
+      "editor": "Character"
+    },
+    {
+      "key": "text",
+      "label": "Text",
+      "editor": "Text"
+    }
+  ],
+  "nodes": [
+    {
+      "key": "nodes",
+      "label": "nodes"
+    }
+  ]
+},
+{
+  "name": "dialogChoice",
+  "description": "Choices",
+  "editor": null,
+  "async": false,
+  "args": [
+    {
+      "key": "text",
+      "label": "text",
+      "editor": null,
+      "value": ""
+    }
+  ],
+  "nodes": [
+    {
+      "key": "nodes",
+      "label": "nodes"
+    }
+  ]
+}, {
+  "name": "greaterThan",
+  "description": "Greater Than",
+  "editor": null,
+  "async": false,
+  "args": [
+    {
+      "key": "value",
+      "label": "Value",
+      "editor": "Number",
+      "value": 0
+    }
+  ],
+  "nodes": [
+    {
+      "key": "t",
+      "label": "t"
+    },
+    {
+      "key": "f",
+      "label": "f"
+    }
+  ]
+}, {
+  "name": "lessThan",
+  "description": "Less Than",
+  "editor": null,
+  "async": false,
+  "args": [
+    {
+      "key": "value",
+      "label": "Value",
+      "editor": "Number",
+      "value": 0
+    }
+  ],
+  "nodes": [
+    {
+      "key": "t",
+      "label": "t"
+    },
+    {
+      "key": "f",
+      "label": "f"
+    }
+  ]
+}, {
+  "name": "stateAdd",
+  "description": "Add",
+  "editor": null,
+  "async": false,
+  "args": [
+    {
+      "key": "value",
+      "label": "Value",
+      "editor": "Number",
+      "value": 0
+    }
+  ],
+  "nodes": [
+    {
+      "key": "nodes",
+      "label": "nodes"
+    }
+  ]
+}];

package/pg/nodes/__examples__/basic/exampleScripts.ts

@@ -0,0 +1,129 @@
+export const nodeExamples = [{
+  "name": "stateGet",
+  "description": "Get",
+  "editor": null,
+  "async": false,
+  "args": [
+    {
+      "key": "key",
+      "label": "Key",
+      "editor": "Text",
+      "value": ""
+    }
+  ],
+  "nodes": [
+    {
+      "key": "nodes",
+      "label": "nodes"
+    }
+  ]
+},
+{
+  "name": "dialog",
+  "description": "Dialog",
+  "editor": null,
+  "async": true,
+  "args": [
+    {
+      "key": "character",
+      "label": "Character",
+      "editor": "Character"
+    },
+    {
+      "key": "text",
+      "label": "Text",
+      "editor": "Text"
+    }
+  ],
+  "nodes": [
+    {
+      "key": "nodes",
+      "label": "nodes"
+    }
+  ]
+},
+{
+  "name": "dialogChoice",
+  "description": "Choices",
+  "editor": null,
+  "async": false,
+  "args": [
+    {
+      "key": "text",
+      "label": "text",
+      "editor": null,
+      "value": ""
+    }
+  ],
+  "nodes": [
+    {
+      "key": "nodes",
+      "label": "nodes"
+    }
+  ]
+}, {
+  "name": "greaterThan",
+  "description": "Greater Than",
+  "editor": null,
+  "async": false,
+  "args": [
+    {
+      "key": "value",
+      "label": "Value",
+      "editor": "Number",
+      "value": 0
+    }
+  ],
+  "nodes": [
+    {
+      "key": "t",
+      "label": "t"
+    },
+    {
+      "key": "f",
+      "label": "f"
+    }
+  ]
+}, {
+  "name": "lessThan",
+  "description": "Less Than",
+  "editor": null,
+  "async": false,
+  "args": [
+    {
+      "key": "value",
+      "label": "Value",
+      "editor": "Number",
+      "value": 0
+    }
+  ],
+  "nodes": [
+    {
+      "key": "t",
+      "label": "t"
+    },
+    {
+      "key": "f",
+      "label": "f"
+    }
+  ]
+}, {
+  "name": "stateAdd",
+  "description": "Add",
+  "editor": null,
+  "async": false,
+  "args": [
+    {
+      "key": "value",
+      "label": "Value",
+      "editor": "Number",
+      "value": 0
+    }
+  ],
+  "nodes": [
+    {
+      "key": "nodes",
+      "label": "nodes"
+    }
+  ]
+}];

package/pg/nodes/__examples__/basic/keystore.ts

@@ -0,0 +1,38 @@
+export class KeyStore {
+  map;
+
+  constructor() {
+    this.map = new Map();
+  }
+
+  // Generates a random 32-bit unsigned integer
+  #generateKey() {
+    return Math.floor(Math.random() * 0x100000000); // 0 to 2^32 - 1
+  }
+
+  // Adds a value, returns the key used
+  add(value) {
+    let key = this.#generateKey();
+    while (this.map.has(key)) {
+      key = this.#generateKey();
+    }
+    this.map.set(key, value);
+    return key;
+  }
+
+  set(key, value) {
+    this.map.set(key, value);
+  }
+
+  get(key) {
+    return this.map.get(key);
+  }
+
+  delete(key) {
+    return this.map.delete(key);
+  }
+
+  has(key) {
+    return this.map.has(key);
+  }
+}

package/pg/nodes/executeInSandbox.ts

@@ -0,0 +1,32 @@
+/**
+ * Safely runs a function with a completely custom global scope.
+ * @param {Function} userCode - The function to sandbox.
+ * @param {Object} customGlobals - The custom global variables to expose.
+ */
+export function executeInSandbox(userCode, customGlobals) {
+  // 1. Create a proxy to handle missing variables safely
+  const proxyScope = new Proxy(customGlobals, {
+    has(target, prop) {
+      // By returning true, we force the 'with' statement to look up
+      // variables inside our customGlobals object first.
+      return true;
+    },
+    get(target, prop, receiver) {
+      // If the property exists in our custom globals, return it.
+      if (prop in target) {
+        return Reflect.get(target, prop, receiver);
+      }
+      // If a property is not in our custom environment, throw an error
+      // instead of leaking out to the browser's global scope.
+      throw new ReferenceError(`${String(prop)} is not defined in the sandbox`);
+    }
+  });
+
+  // 2. Wrap the code in a 'with' block and a new Function() to drop outer lexical scope
+  const sandboxedFunction = new Function('sandbox',
+    'with (sandbox) { (' + userCode.toString() + ')(); }'
+  );
+
+  // 3. Execute with our proxied custom globals
+  sandboxedFunction(proxyScope);
+}

package/pg/nodes/index.ts

@@ -0,0 +1,3 @@
+import PgNodes from './nodes';
+
+export default PgNodes;

package/pg/nodes/nodes.css

@@ -0,0 +1,69 @@
+:host {
+  display: flex;
+  flex: 1;
+}
+
+[part=grid] {
+  position: relative;
+  flex: 1;
+  overflow: auto;
+  background: #0a0c14;
+  background-image: linear-gradient(#1a1d2e 1px, transparent 1px), linear-gradient(90deg, #1a1d2e 1px, transparent 1px);
+  background-size: 1rem 1rem;
+  background-attachment: local;
+  user-select: none;
+}
+
+[part=grid].debug {
+  background-image: linear-gradient(rgba(74, 222, 128, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 222, 128, 0.2) 1px, transparent 1px);
+}
+[part=grid].debug:hover {
+  background-image: linear-gradient(rgba(74, 222, 128, 0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 222, 128, 0.25) 1px, transparent 1px);
+}
+
+[part=grid].selecting {
+  cursor: default;
+}
+
+[part=grid]:hover {
+  background-image: linear-gradient(#262b44 1px, transparent 1px), linear-gradient(90deg, #262b44 1px, transparent 1px);
+}
+
+[part=forceScroll] {
+  position: absolute;
+  left: var(--pg-nodes-max-x, 60rem);
+  top: var(--pg-nodes-max-y, 40rem);
+  width: 1rem;
+  height: 1rem;
+}
+
+[part=svg] {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  width: var(--pg-nodes-max-x, 60rem);
+  height: var(--pg-nodes-max-y, 40rem);
+}
+
+[part=svg] path {
+  pointer-events: stroke;
+}
+
+[part=svg] circle {
+  pointer-events: all;
+}
+
+[part=selection] {
+  position: absolute;
+  display: none;
+  border: 1px solid #248BE5;
+  background: rgba(36, 139, 229, 0.1);
+  pointer-events: none;
+  box-sizing: border-box;
+  z-index: 1;
+}
+
+[part=selection].active {
+  display: block;
+}

package/pg/nodes/nodes.html

@@ -0,0 +1,6 @@
+<div part="grid">
+  <div part="items"></div>
+  <div part="forceScroll"></div>
+  <div part="selection"></div>
+  <svg part="svg"></svg>
+</div>