@_unit/unit 1.0.19 → 1.0.20

package/src/system/platform/component/app/DataTree/Component.ts

@@ -43,6 +43,7 @@ const STYLE_SEPARATOR = {
   width: '6px',
   fontSize: '12px',
   lineHeight: `${LEAF_HEIGHT}px`,
+  boxSizing: 'border-box',
 }
 
 const STYLE_DELIMITER = {
@@ -53,6 +54,7 @@ const STYLE_DELIMITER = {
   width: '6px',
   fontSize: '12px',
   lineHeight: `${LEAF_HEIGHT}px`,
+  boxSizing: 'border-box',
 }
 
 const STYLE_PARENT = (overflow: boolean) => {
@@ -68,6 +70,8 @@ const STYLE_PARENT = (overflow: boolean) => {
 const STYLE_CONTAINER = (overflow: boolean) => {
   return {
     display: 'flex',
+    color: 'currentcolor',
+    boxSizing: 'border-box',
     flexDirection: overflow ? 'column' : 'row',
     marginLeft: overflow
       ? `${CONTAINER_COLUMN_LEFT_MARGIN}px`
@@ -86,16 +90,20 @@ const STYLE_COMMA = {
   width: '6px',
   textAlign: 'left',
   fontSize: '12px',
+  boxSizing: 'border-box',
 }
 
 const STYLE_SPACE = {
   display: 'inline-block',
   width: '2px',
+  boxSizing: 'border-box',
 }
 
 export const DEFAULT_STYLE = {
   width: 'fit-content',
   height: '100%',
+  color: 'currentcolor',
+  boxSizing: 'border-box',
 }
 
 export default class DataTree extends Element<HTMLDivElement, Props> {
@@ -302,7 +310,13 @@ export default class DataTree extends Element<HTMLDivElement, Props> {
     const object_literal_end = new Div(
       {
         className: 'object-literal',
-        style: { display: 'flex', width: 'fit-content', height: '100%' },
+        style: {
+          display: 'flex',
+          width: 'fit-content',
+          height: '100%',
+          color: 'currentcolor',
+          boxSizing: 'border-box',
+        },
       },
       this.$system
     )
@@ -369,7 +383,12 @@ export default class DataTree extends Element<HTMLDivElement, Props> {
     const array_literal_close_delimiter = this._delimiter({}, `]`)
     const array_literal_end = new Div(
       {
-        style: { display: 'flex', width: 'fit-content' },
+        style: {
+          display: 'flex',
+          width: 'fit-content',
+          color: 'currentcolor',
+          boxSizing: 'border-box',
+        },
       },
       this.$system
     )
@@ -431,7 +450,12 @@ export default class DataTree extends Element<HTMLDivElement, Props> {
     const expression_close_delimiter = this._delimiter({}, `)`)
     const expression_literal_end = new Div(
       {
-        style: { display: 'flex', width: 'fit-content' },
+        style: {
+          display: 'flex',
+          width: 'fit-content',
+          color: 'currentcolor',
+          boxSizing: 'border-box',
+        },
       },
       this.$system
     )
@@ -461,7 +485,12 @@ export default class DataTree extends Element<HTMLDivElement, Props> {
     const key_value_key = new Div(
       {
         className: 'key-value-key',
-        style: { display: 'flex', width: 'fit-content' },
+        style: {
+          display: 'flex',
+          width: 'fit-content',
+          color: 'currentcolor',
+          boxSizing: 'border-box',
+        },
       },
       this.$system
     )
@@ -502,7 +531,11 @@ export default class DataTree extends Element<HTMLDivElement, Props> {
     const key_value_value = new Div(
       {
         className: 'key-value-value',
-        style: { display: 'flex', width: 'fit-content' },
+        style: {
+          display: 'flex',
+          width: 'fit-content',
+          boxSizing: 'border-box',
+        },
       },
       this.$system
     )
@@ -582,7 +615,11 @@ export default class DataTree extends Element<HTMLDivElement, Props> {
     const array_expression_close_delimiter = this._delimiter({}, ']')
     const array_expression_open_close = new Div(
       {
-        style: { display: 'flex', width: 'fit-content' },
+        style: {
+          display: 'flex',
+          width: 'fit-content',
+          boxSizing: 'border-box',
+        },
       },
       this.$system
     )
@@ -617,7 +654,11 @@ export default class DataTree extends Element<HTMLDivElement, Props> {
     const object_expression_close_delimiter = this._delimiter({}, '}')
     const object_expression_open_close = new Div(
       {
-        style: { display: 'flex', width: 'fit-content' },
+        style: {
+          display: 'flex',
+          width: 'fit-content',
+          boxSizing: 'border-box',
+        },
       },
       this.$system
     )

package/src/system/platform/component/app/Datum/spec.json

@@ -13,11 +13,7 @@
     "icon": "atom-alt",
     "description": "Recursive Graph Editor",
     "complexity": 47,
-    "tags": [
-      "platform",
-      "component",
-      "app"
-    ]
+    "tags": ["platform", "component", "app"]
   },
   "id": "e8bce1fc-ae56-4f9f-9685-3cc844758855",
   "base": true,
@@ -28,4 +24,4 @@
   "type": "`U`&`C`&`V`&`J`",
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/app/Drawer/Component.ts

@@ -130,9 +130,12 @@ export default class Drawer extends Element<HTMLDivElement, Props> {
     knob.preventDefault('touchdown')
     this._knob = knob
 
-    const tooltip = new Tooltip({
-      shortcut,
-    }, this.$system)
+    const tooltip = new Tooltip(
+      {
+        shortcut,
+      },
+      this.$system
+    )
     this._tooltip = tooltip
 
     const frame = new Frame(
@@ -195,6 +198,7 @@ export default class Drawer extends Element<HTMLDivElement, Props> {
           borderStyle: 'solid',
           borderColor: 'currentColor',
           borderBottomLeftRadius: '3px',
+          boxSizing: 'border-box',
         },
       },
       this.$system
@@ -214,6 +218,7 @@ export default class Drawer extends Element<HTMLDivElement, Props> {
           borderStyle: 'solid',
           borderColor: 'currentColor',
           borderBottom: '1px solid currentColor',
+          boxSizing: 'border-box',
         },
       },
       this.$system
@@ -233,6 +238,7 @@ export default class Drawer extends Element<HTMLDivElement, Props> {
           borderWidth: '0px 0px 1px 0px',
           borderStyle: 'solid',
           borderColor: 'currentColor',
+          boxSizing: 'border-box',
         },
       },
       this.$system
@@ -253,6 +259,7 @@ export default class Drawer extends Element<HTMLDivElement, Props> {
           borderBottomLeftRadius: '3px',
           borderStyle: 'solid',
           borderColor: 'currentColor',
+          boxSizing: 'border-box',
         },
       },
       this.$system
@@ -272,6 +279,7 @@ export default class Drawer extends Element<HTMLDivElement, Props> {
           borderTopRightRadius: '3px',
           borderStyle: 'solid',
           borderColor: 'currentColor',
+          boxSizing: 'border-box',
         },
       },
       this.$system

package/src/system/platform/component/app/Editor/Component.ts

@@ -3197,6 +3197,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
           left: '0',
           pointerEvents: 'none',
           height: '100%',
+          width: '100%',
         },
       },
       this.$system
@@ -3222,6 +3223,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
           pointerEvents: 'none',
           userSelect: 'none',
           height: '100%',
+          width: '100%',
         },
       },
       this.$system
@@ -3523,7 +3525,10 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       reader.readAsDataURL(file)
 
       return
-    } else if (file.type.startsWith('"text/plain"')) {
+    } else if (
+      file.type.startsWith('"text/plain"') ||
+      file.type.startsWith('application/json')
+    ) {
       const reader = new FileReader()
 
       reader.onload = async (e) => {
@@ -5305,7 +5310,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
 
     // ADHOC Safari will have frame height 0 while page is loading
     setTimeout(() => {
-      this._center_graph()
+      this._center_graph(true)
     }, 0)
 
     this._start_graph_simulation(LAYER_NONE)
@@ -5315,16 +5320,39 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
     this._start_debugger()
   }
 
-  private _center_graph = () => {
-    const { $width, $height } = this.$context
+  private _center_on_nodes = (
+    nodes: Dict<GraphSimNode>,
+    preventAnimation?: boolean
+  ) => {
+    const { animate } = this.$props
+
+    const center = this.get_nodes_bounding_rect_center(nodes)
+
+    if (animate && !preventAnimation) {
+      this._animate_zoom_center_at(center.x, center.y)
+    } else {
+      this._zoom_center_at(center.x, center.y)
+    }
+  }
 
+  private _center_graph = (preventAnimation?: boolean) => {
     if (this._node_count === 0) {
       return
     }
 
-    const center = this.get_nodes_bounding_rect_center(this._unit_node)
+    this._center_on_nodes(this._unit_node, preventAnimation)
+  }
+
+  private _center_graph_on_selected = (preventAnimation?: boolean) => {
+    const selected_node = {}
+
+    for (const node_id in this._selected_node_id) {
+      const node = this._node[node_id]
+
+      selected_node[node_id] = node
+    }
 
-    this._zoom_center_at(center.x, center.y)
+    this._center_on_nodes(selected_node)
   }
 
   private _get_spec_init_unit_pin_position = (
@@ -6556,6 +6584,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
         style: {
           position: 'relative',
           height: '100%',
+          width: '100%',
         },
       },
       this.$system
@@ -9971,6 +10000,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
           overflowY: 'hidden',
           overflowX: 'hidden',
           pointerEvents: 'none',
+          width: '100%',
           height: '100%',
           ...style,
         },
@@ -9984,6 +10014,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
         style: {
           position: 'absolute',
           pointerEvents: 'none',
+          width: '100%',
           height: '100%',
         },
       },
@@ -10002,6 +10033,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
           overflowX: 'hidden',
           transition: `opacity ${ANIMATION_T_S}s linear`,
           pointerEvents: 'none',
+          width: '100%',
           height: '100%',
         },
       },
@@ -10015,6 +10047,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
         style: {
           position: 'absolute',
           pointerEvents: 'none',
+          width: '100%',
           height: '100%',
         },
       },
@@ -10032,6 +10065,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
           overflowY: 'hidden',
           overflowX: 'hidden',
           pointerEvents: 'none',
+          width: '100%',
           height: '100%',
         },
       },
@@ -10049,6 +10083,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
           overflowY: 'hidden',
           overflowX: 'hidden',
           pointerEvents: 'none',
+          width: '100%',
           height: '100%',
         },
       },
@@ -15120,7 +15155,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
     // console.log('Graph', '_refresh_search_list_height_offset')
 
     if (this._search) {
-      const search_rect = this._search.getRect()
+      const search_rect = this._search._list.getRect()
 
       const { $x, $y, $width, $height } = this.$context
 
@@ -15338,7 +15373,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
 
     const datum_node_id = getDatumNodeId(datum_id)
 
-    const value = `$${JSON.stringify(bundle)}`
+    const value = `$${stringify(bundle)}`
 
     this._add_datum(datum_id, value, position)
 
@@ -18101,6 +18136,11 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
           keydown: this._on_backslash_keydown,
           keyup: this._on_backslash_keyup,
         },
+        {
+          combo: ['/'],
+          keydown: this._on_slash_keydown,
+          keyup: this._on_slash_keyup,
+        },
       ]
       const shortcutListener = makeShortcutListener(combo_list)
       this._keyboard_unlisten = this.addEventListener(shortcutListener)
@@ -23369,10 +23409,6 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
 
         return false
       } else {
-        if (!this._should_show_merge_data_on_this_mode()) {
-          return true
-        }
-
         const ext_input_node_id = this._pin_to_ext['input']?.[pin_node_id]
         const ext_output_node_id = this._pin_to_ext['output']?.[pin_node_id]
 
@@ -25116,25 +25152,6 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
     }
   }
 
-  private _state_move_plug_into_graph__remove = (
-    exposed_pin_node_id: string
-  ): void => {
-    // console.log(
-    //   'Graph',
-    //   '_state_remove_exposed_sub_pin_or_set',
-    //   exposed_pin_node_id
-    // )
-
-    const { pinId, type, subPinId } = segmentPlugNodeId(exposed_pin_node_id)
-
-    const pin_count = this._get_exposed_pin_set_count(exposed_pin_node_id)
-    if (pin_count === 1 || pin_count === 0) {
-      this._state_remove_exposed_pin_set(type, pinId)
-    } else {
-      this.__state_remove_exposed_sub_pin(type, pinId, subPinId)
-    }
-  }
-
   private _get_exposed_pin_set_count = (
     exposed_pin_node_id: string
   ): number => {
@@ -28169,6 +28186,15 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
 
     const sub_component = this._get_sub_component(unit_id)
 
+    this.__leave_sub_component_frame(unit_id, sub_component)
+  }
+
+  private __leave_sub_component_frame = (
+    unit_id: string,
+    sub_component: Component
+  ): void => {
+    // console.log('Graph', '__leave_sub_component_frame', unit_id)
+
     const core_component_frame = this._core_component_frame[unit_id]
 
     core_component_frame.removeChild(sub_component)
@@ -28967,6 +28993,12 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       let parent_finished = false
       let children_finished = false
 
+      const maybe_finish = () => {
+        if (parent_finished && children_finished) {
+          finish()
+        }
+      }
+
       this._animate_parent_component(
         parent_id,
         parent_animating,
@@ -28991,12 +29023,6 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
         }
       )
 
-      const maybe_finish = () => {
-        if (parent_finished && children_finished) {
-          finish()
-        }
-      }
-
       const finish = () => {
         this._unplug_sub_component_root_base_frame(parent_id)
         this._append_sub_component_root_base(parent_id)
@@ -34930,6 +34956,10 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
 
     this._pod_remove_datum(datum_node_id, datum_pin_node_id, datum_plug_node_id)
     this._sim_remove_datum(datum_node_id)
+
+    if (datum_pin_node_id) {
+      this._spec_remove_pin_data(datum_pin_node_id)
+    }
   }
 
   private _remove_node_datum_link = (
@@ -37892,7 +37922,6 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
               datum_pin_node_id,
               null
             )
-            // this._pod_remove_datum(datum_node_id, datum_pin_node_id, null)
           }
         } else {
           if (!removed_merge.has(datum_pin_node_id)) {
@@ -39072,6 +39101,37 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
     this.set_zoom(zoom)
   }
 
+  private _animate_zoom_center_unlisten: Unlisten
+
+  private _animate_zoom_center_at = (x: number, y: number): void => {
+    // console.log('Graph', '_animate_zoom_center_at', x, y)
+
+    const { $width, $height } = this.$context
+
+    const center_of_screen = this._screen_center()
+
+    const n0 = this._zoom
+    const n1 = zoomTransformCenteredAt(x, y, this._zoom.z, $width, $height)
+
+    this._animate_zoom_center_unlisten = animateSimulate(
+      this.$system,
+      n0,
+      () => n1,
+      [
+        ['x', 0.1],
+        ['y', 0.1],
+      ],
+      ({ x, y }) => {
+        const zoom = { x, y, z: this._zoom.z }
+
+        this._set_zoom(zoom)
+      },
+      () => {
+        //
+      }
+    )
+  }
+
   private _state_reorder_sub_component = (unit_id: string, i: number): void => {
     // console.log('Graph', '_state_reorder_sub_component', unit_id, i)
 
@@ -41688,7 +41748,6 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
         )
       }
 
-
       this._move_contained_nodes(new_unit_id, contained_nodes)
     } else if (this._mode === 'add') {
       this._search_unit_graph_position = position
@@ -42709,7 +42768,9 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       const current_layout_layer = this._get_current_layout_layer_id()
 
       if (current_layout_layer) {
-        this._layout_leave_sub_component()
+        if (this._mode === 'none') {
+          this._layout_leave_sub_component()
+        }
       }
     } else {
       if (this._mode === 'none') {
@@ -43230,14 +43291,6 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
 
       const sub_components = []
 
-      const base = this._get_sub_component_base(graph_unit_id)
-
-      this._measure_sub_component_base(graph_unit_id, base)
-
-      for (const sub_component_id of ordered_sub_component_ids) {
-        this._leave_sub_component_frame(sub_component_id)
-      }
-
       for (const sub_component_id of ordered_sub_component_ids) {
         const sub_component = this._get_sub_component(sub_component_id)
 
@@ -43291,6 +43344,16 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
         }
       }
 
+      const base = this._get_sub_component_base(graph_unit_id)
+
+      this._measure_sub_component_base(graph_unit_id, base)
+
+      for (const sub_component_id of ordered_sub_component_ids) {
+        const sub_component = graph_component.getSubComponent(sub_component_id)
+
+        this.__leave_sub_component_frame(sub_component_id, sub_component)
+      }
+
       this._decompose_sub_component(graph_unit_id)
 
       this._animate_sub_component_graph_leave(
@@ -44880,7 +44943,8 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
           const opposite_type = opposite(type)
 
           const type_ =
-            merge_collapse_unit_inside_pin_count[opposite_type] === 0
+            merge_collapse_unit_inside_pin_count[opposite_type] === 0 &&
+            merge_outside_pin_count[opposite_type] > 0
               ? opposite_type
               : type
 
@@ -46400,16 +46464,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
 
       const opposite_type = opposite(type)
 
-      const next_merge_id =
-        deepGetOrDefault(
-          this._collapse_next_map.nextMergePinId,
-          [merge_id, type, 'mergeId'],
-          deepGetOrDefault(
-            this._collapse_next_map.nextMergePinId,
-            [merge_id, opposite_type, 'mergeId'],
-            null
-          )
-        ) ?? merge_id
+      const next_merge_id = merge_id
 
       const merge_ = {}
 
@@ -48660,7 +48715,31 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
   }
 
   private _on_layout_background_long_press = (event: UnitPointerEvent) => {
-    //
+    // console.log('Graph', '_on_layout_background_long_press')
+
+    if (this._mode === 'multiselect') {
+      const parent_id = this._get_current_layout_layer_id()
+      const slot_name = 'default'
+      const next_parent_id = this._spec_get_sub_component_parent_id(parent_id)
+      const next_slot_name = 'default'
+
+      const children = this._spec_get_sub_component_children(parent_id)
+
+      const selected_children = children.filter(this._is_node_selected)
+
+      if (selected_children) {
+        this._remove_sub_component_children(
+          parent_id,
+          slot_name,
+          next_parent_id,
+          next_slot_name,
+          selected_children
+        )
+
+        this._refresh_layout_node_target_position(parent_id)
+        this._move_all_current_layout_node_target_position()
+      }
+    }
   }
 
   private _on_graph_background_long_press = (event: UnitPointerEvent) => {
@@ -50503,7 +50582,11 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
   }
 
   private _on_space_keydown = (): void => {
-    this._center_graph()
+    if (this._selected_node_count > 0) {
+      this._center_graph_on_selected()
+    } else {
+      this._center_graph()
+    }
   }
 
   private _on_slash_keydown = (): void => {
@@ -54045,32 +54128,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
     const unit_spec = findSpecAtPath(specs, this._spec, path)
 
     if (this._is_spec_updater(path)) {
-      if (this._subgraph_unit_id === graphId) {
-        //
-      } else {
-        const graph_unit_spec = this._get_unit_spec(graph_unit_id) as GraphSpec
-
-        const merges = clone(
-          this._get_graph_unit_unit_merges(graph_unit_id, graphId)
-        )
-        const plugs = clone(
-          this._get_graph_unit_unit_plugs(graph_unit_id, graphId)
-        )
-
-        const connectOpt = {
-          merges,
-          plugs,
-        }
-
-        moveSubgraph(
-          this._make_graph_spec_interface(spec),
-          this._state_get_subgraph_graph_interface(graph_unit_id),
-          graphId,
-          data,
-          connectOpt,
-          true
-        )
-      }
+      throw new CodePathNotImplementedError()
     }
   }
 
@@ -54616,6 +54674,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
     }
 
     this._mem_remove_pin_datum_tree_if(pin_node_id)
+    this._spec_remove_pin_data(pin_node_id)
   }
 
   private _mem_remove_pin_datum_tree_if = (pin_node_id: string): void => {

package/src/system/platform/component/app/Editor/spec.json

@@ -45,12 +45,7 @@
     "icon": "atom-alt",
     "description": "Recursive Graph Editor",
     "complexity": 148,
-    "tags": [
-      "platform",
-      "component",
-      "app",
-      "graph"
-    ]
+    "tags": ["platform", "component", "app", "graph"]
   },
   "id": "e80c912e-7508-11ea-966b-436805345ff0",
   "base": true,
@@ -61,4 +56,4 @@
   "type": "`U`&`C`&`V`&`J`",
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/app/GUI/Component.ts

@@ -605,7 +605,7 @@ export default class GUI extends Element<HTMLDivElement, Props> {
           width: MINIMAP_WIDTH,
           height: MINIMAP_HEIGHT,
           state: { y: cy - 82.765 },
-          shortcut: 'm'
+          shortcut: 'm',
         },
         color: {
           icon: 'palette',