new event propagator example

demo/chains-of-thought/chains-of-thought.json

@@ -0,0 +1,52 @@
+{
+  "thoughts": [
+    {
+      "id": "1",
+      "text": "Blindfold chess requires internalizing chess structures.",
+      "x": 398,
+      "y": 166
+    },
+    {
+      "id": "2",
+      "text": "Internalizing chess structures builds intuition.",
+      "x": 73,
+      "y": 88
+    },
+    {
+      "id": "3",
+      "text": "Blindfold chess improves intuition.",
+      "x": 158,
+      "y": 337
+    },
+    {
+      "id": "4",
+      "text": "Building intuition is essential for chess improvement.",
+      "x": 457,
+      "y": 532
+    },
+    {
+      "id": "5",
+      "text": "Blindfold chess is useful for chess improvement.",
+      "x": 206,
+      "y": 621
+    }
+  ],
+  "connections": [
+    {
+      "sourceId": "1",
+      "targetId": "3"
+    },
+    {
+      "sourceId": "2",
+      "targetId": "3"
+    },
+    {
+      "sourceId": "3",
+      "targetId": "5"
+    },
+    {
+      "sourceId": "4",
+      "targetId": "5"
+    }
+  ]
+}

demo/event-propagator.html

@@ -16,7 +16,8 @@
       }
 
       spatial-geometry {
-        background: rgb(187, 178, 178);
+        border: 1px solid black;
+        border-radius: 3px;
       }
 
       event-propagator {
@@ -36,6 +37,15 @@
       expression="$target.textContent += '!'"
     ></event-propagator>
 
+    <spatial-geometry id="box3" x="150" y="200" width="50" height="50"></spatial-geometry>
+    <spatial-geometry id="box4" x="300" y="350" width="50" height="50"></spatial-geometry>
+    <event-propagator
+      source="#box3"
+      target="#box4"
+      triggers="move"
+      expression="$target.y = $source.x"
+    ></event-propagator>
+
     <script type="module">
       import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
       import { EventPropagator } from '../src/arrows/event-propagator.ts';