Rearchitect

.eslintrc.json

@@ -25,7 +25,7 @@
     "comma-dangle": ["error", "always-multiline"],
     "comma-spacing": ["error", {"before": false, "after": true}],
     "id-length": ["error", {"min": 2, "properties": "always",
-      "exceptions": ["i", "j", "k", "n", "_", "t", "p", "x", "y"],
+      "exceptions": ["i", "j", "k", "n", "_", "t", "p", "x", "y", "w", "h"],
       "exceptionPatterns": ["[A-Z]"]
     }],
     "indent": ["error", 2, {"ignoredNodes": ["JSXAttribute", "JSXSpreadAttribute"]}],

Readme.md

@@ -50,8 +50,6 @@ render(<App />, document.body)
 
 ## Children types
 
-Node exit types:
-
 - indexed - numeric children
           - default
           - render as line to AddChildBtn
@@ -72,7 +70,7 @@ Node exit types:
        - e.g.: {children_type: 'none'}
 
 NB: all 'plus' interaction points should either use a preset node type, or
-//     call out to user code to get the node types & descriptions amically
+     call out to user code to get the node types & descriptions amically
     (so allowing a node to customise its possible children based on context)
     (or, use user-supplied react elements instead of built in)
-- Allow external elements to be passed into node addition popover
+- Allow external elements to be passed into node addition popover

package.json

@@ -3,7 +3,8 @@
     "dev": "wmr -p 1234 --reload",
     "build": "wmr build",
     "serve": "wmr serve -p 1234",
-    "lint": "eslint --fix ."
+    "lint": "eslint --fix .",
+    "test": "npm run --prefix public/helpers test"
   },
   "dependencies": {
     "preact": "^10.6.4",

public/AddChildBtn.js

@@ -2,7 +2,7 @@ import {useRef} from 'react'
 import PlusCircleOutline from 'simple-react-heroicons/icons/PlusCircleOutline'
 
 export default function AddChildBtn({
-  node,
+  rn,
   open_node_picker,
   disabled,
   style,
@@ -11,7 +11,7 @@ export default function AddChildBtn({
 
   return (
     <div ref={ref}
-         className={node ? 'hover-reveal' : ''}
+         className={rn ? 'hover-reveal' : ''}
          style={{
            cursor: disabled ? 'default' : 'pointer',
            fontSize: '16px',
@@ -20,7 +20,7 @@ export default function AddChildBtn({
          }}
          onClick={disabled ? null : ev => {
            ev.stopPropagation()
-           open_node_picker(node, ref)
+           open_node_picker(rn, ref)
          }}
     >
       <PlusCircleOutline />

public/Join.js

@@ -0,0 +1,56 @@
+const padding = 10
+
+function path__straight(from, to, ox, oy) {
+  return `L ${to.x - ox} ${to.y - oy}`
+}
+
+function path__bezier(from, to, ox, oy) {
+  const diff = Math.min(
+    Math.abs(from.x - to.x),
+    Math.abs(from.y - to.y),
+  )
+  const bezier_vertical_distance = diff / 2
+
+  return `
+    C
+    ${from.x - ox} ${from.y - oy + bezier_vertical_distance},
+    ${to.x - ox} ${to.y - oy - bezier_vertical_distance},
+    ${to.x - ox} ${to.y - oy}
+  `
+}
+
+export default function Join({j}) {
+  const w = Math.abs(j.from.x - j.to.x) + padding * 2
+  const h = Math.abs(j.from.y - j.to.y) + padding * 2
+  const ox = Math.min(j.from.x, j.to.x) - padding
+  const oy = Math.min(j.from.y, j.to.y) - padding
+
+  return (
+    <svg style={{
+      display: 'block',
+      position: 'absolute',
+      width: `${w}px`,
+      height: `${h}px`,
+      left: `${ox}px`,
+      top: `${oy}px`,
+      color: 'black',
+    }}
+    >
+      <path id={j.id}
+            d={`
+              M ${j.from.x - ox} ${j.from.y - oy}
+              ${path__bezier(j.from, j.to, ox, oy)}
+            `}
+            style={{
+              fill: 'none',
+              stroke: 'currentColor',
+            }} />
+
+      <polygon points="-5,-5 5,0 -5,5 -3,0" fill="currentColor">
+        <animateMotion dur="2s" repeatCount="indefinite" rotate="auto" fill="freeze">
+          <mpath xlinkHref={`#${j.id}`} />
+        </animateMotion>
+      </polygon>
+    </svg>
+  )
+}

public/Picker.js → public/NodePicker.js

@@ -1,5 +1,11 @@
-export default function Picker({node_types, picker, wrapper_ref, CustomPicker, add_node}) {
-  const rect = picker.dot_adder_ref.current.getBoundingClientRect()
+export default function NodePicker({
+  node_types,
+  picker,
+  wrapper_ref,
+  CustomPicker,
+  add_node,
+}) {
+  const rect = picker.add_node_btn_ref.current.getBoundingClientRect()
   const wrapper_rect = wrapper_ref.current.getBoundingClientRect()
 
   return (
@@ -9,12 +15,6 @@ export default function Picker({node_types, picker, wrapper_ref, CustomPicker, a
       top: `${rect.top - wrapper_rect.top - 10}px`,
     }}
     >
-      {CustomPicker && (
-        <CustomPicker node_types={node_types}
-                      parent={picker.parent}
-                      add_node={add_node} />
-      )}
-
       {!CustomPicker && (
         <div style={{
           backgroundColor: 'white',
@@ -34,6 +34,12 @@ export default function Picker({node_types, picker, wrapper_ref, CustomPicker, a
           ))}
         </div>
       )}
+
+      {CustomPicker && (
+        <CustomPicker node_types={node_types}
+                      parent={picker.parent}
+                      add_node={add_node} />
+      )}
     </div>
   )
 }