@_unit/unit 1.0.48 → 1.0.49

package/src/client/component.ts

@@ -2543,7 +2543,7 @@ export class Component<
           }
         }
       } else {
-        if (this.$slotParent) {
+        if (this.$slotParent && component.$slotParent) {
           this.$slotParent.domRemoveParentChildAt(
             component,
             'default',
@@ -3020,7 +3020,7 @@ export class Component<
     }
 
     if (this.isParent()) {
-      if (this.$slotParent) {
+      if (this.$slotParent && component.$slotParent) {
         this.$slotParent.domCommitRemoveChild(component)
       } else {
         if (this.$element.contains(component.$element)) {

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

@@ -909,6 +909,7 @@ export interface Props {
   component?: Component
   frame?: $Component
   fallback?: Component<HTMLElement>
+  container?: Component<HTMLElement>
   background?: Div
   transcend?: Transcend
   root?: Frame
@@ -925,6 +926,7 @@ export default class Editor extends Element<HTMLDivElement, Props> {
   private _root: Frame
   private _editor: Editor_
   private _component: Component
+  private _fallback_frame_container: Component<HTMLElement>
   private _fallback_frame: Component<HTMLElement>
   private _transcend: Transcend
   private _frame: Component<HTMLElement>
@@ -954,6 +956,7 @@ export default class Editor extends Element<HTMLDivElement, Props> {
       animate = true,
       fullwindow,
       fallback,
+      container,
     } = $props
 
     let { component, editor, transcend, background, root } = $props
@@ -968,6 +971,25 @@ export default class Editor extends Element<HTMLDivElement, Props> {
 
     this._pod = graph
 
+    this._fallback_frame_container =
+      container ||
+      new Div(
+        {
+          className: 'graph-fallback-frame-container',
+          style: {
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+            overflow: 'auto',
+            pointerEvents: 'none',
+            zIndex: '0',
+          },
+        },
+        this.$system
+      )
+
     this._fallback_frame = fallback || this._create_fallback_frame()
 
     this._frame = this._fallback_frame
@@ -1018,6 +1040,8 @@ export default class Editor extends Element<HTMLDivElement, Props> {
           unregisterUnit: this._unregister_unit,
           newSpecId: this._new_spec_id,
           dispatchEvent: this._dispatch_event,
+          enterFullwindow: this._enter_fullwindow,
+          leaveFullwindow: this._leave_fullwindow,
         },
         this.$system
       )
@@ -1094,9 +1118,11 @@ export default class Editor extends Element<HTMLDivElement, Props> {
       )
     root.registerParentRoot(this._background)
     root.registerParentRoot(this._editor)
-    root.registerParentRoot(this._fallback_frame)
+    root.registerParentRoot(this._fallback_frame_container)
     root.registerParentRoot(this._transcend)
 
+    this._fallback_frame_container.registerParentRoot(this._fallback_frame)
+
     preventContextMenu(root)
 
     this._root = root
@@ -1121,6 +1147,7 @@ export default class Editor extends Element<HTMLDivElement, Props> {
       background,
       root,
       editor,
+      container: this._fallback_frame_container,
       frame: this._fallback_frame,
       transcend,
     })
@@ -1171,6 +1198,14 @@ export default class Editor extends Element<HTMLDivElement, Props> {
     return this._registry.forkSpec(spec, specId)
   }
 
+  private _enter_fullwindow = () => {
+    this._fallback_frame_container.$element.style.pointerEvents = 'inherit'
+  }
+
+  private _leave_fullwindow = () => {
+    this._fallback_frame_container.$element.style.pointerEvents = 'none'
+  }
+
   private _new_spec_id = () => {
     return this._registry.newSpecId()
   }
@@ -1212,23 +1247,6 @@ export default class Editor extends Element<HTMLDivElement, Props> {
   }
 
   private _create_fallback_frame = (): Component => {
-    // const fallback_frame = new Div(
-    //   {
-    //     className: 'graph-fallback-frame',
-    //     style: {
-    //       position: 'absolute',
-    //       top: '0',
-    //       left: '0',
-    //       width: '100%',
-    //       height: '100%',
-    //       overflow: 'auto',
-    //       pointerEvents: 'none',
-    //       zIndex: '0',
-    //     },
-    //   },
-    //   this.$system
-    // )
-
     const { component: fallback_frame } = graphComponentFromId(
       this.$system,
       ID_SCROLL_SNAP_Y_DIV,
@@ -1240,7 +1258,6 @@ export default class Editor extends Element<HTMLDivElement, Props> {
           width: '100%',
           height: '100%',
           overflow: 'auto',
-          pointerEvents: 'none',
           zIndex: '0',
         },
       }
@@ -1408,10 +1425,12 @@ export default class Editor extends Element<HTMLDivElement, Props> {
     this.unregisterRoot(this._root)
 
     this._root.unregisterParentRoot(this._transcend)
-    this._root.unregisterParentRoot(this._fallback_frame)
+    this._root.unregisterParentRoot(this._fallback_frame_container)
     this._root.unregisterParentRoot(this._editor)
     this._root.unregisterParentRoot(this._background)
 
+    this._fallback_frame_container.unregisterParentRoot(this._fallback_frame)
+
     this.removeSubComponent('transcend')
     this.removeSubComponent('background')
     this.removeSubComponent('editor')
@@ -1436,6 +1455,7 @@ export default class Editor extends Element<HTMLDivElement, Props> {
         graph: this._pod,
         editor: this._editor,
         fallback: this._fallback_frame,
+        container: this._fallback_frame_container,
         transcend: this._transcend,
         background: this._background,
         root: this._root,
@@ -1453,7 +1473,25 @@ export default class Editor extends Element<HTMLDivElement, Props> {
 
     this._listen_transcend()
 
+    this._fallback_frame_container = new Div(
+      {
+        className: 'graph-fallback-frame-container',
+        style: {
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          width: '100%',
+          height: '100%',
+          overflow: 'auto',
+          pointerEvents: 'none',
+          zIndex: '0',
+        },
+      },
+      this.$system
+    )
+
     const fallback_frame = this._create_fallback_frame()
+
     this._fallback_frame = fallback_frame
 
     const Parent = parentClass()
@@ -1483,6 +1521,7 @@ export default class Editor extends Element<HTMLDivElement, Props> {
         component: this._component,
         frame: this._fallback_frame,
         specs: this._specs,
+        typeCache: this._type_cache,
         hasSpec: this._has_spec,
         emptySpec: this._empty_spec,
         getSpec: this._get_spec,
@@ -1496,7 +1535,8 @@ export default class Editor extends Element<HTMLDivElement, Props> {
         unregisterUnit: this._unregister_unit,
         newSpecId: this._new_spec_id,
         dispatchEvent: this._dispatch_event,
-        typeCache: this._type_cache,
+        enterFullwindow: this._enter_fullwindow,
+        leaveFullwindow: this._leave_fullwindow,
       },
       this.$system
     )
@@ -1556,6 +1596,7 @@ export default class Editor extends Element<HTMLDivElement, Props> {
       root,
       editor,
       frame: this._fallback_frame,
+      container: this._fallback_frame_container,
       transcend,
     })
 
@@ -1563,9 +1604,11 @@ export default class Editor extends Element<HTMLDivElement, Props> {
 
     this._root.registerParentRoot(this._background)
     this._root.registerParentRoot(this._editor)
-    this._root.registerParentRoot(this._fallback_frame)
+    this._root.registerParentRoot(this._fallback_frame_container)
     this._root.registerParentRoot(this._transcend)
 
+    this._fallback_frame_container.registerParentRoot(this._fallback_frame)
+
     this.registerRoot(this._root)
 
     this._editor.select_node(editor_unit_id)
@@ -1715,6 +1758,8 @@ export interface _Props extends R {
   typeCache?: TypeTreeInterfaceCache
   config?: Config
   dispatchEvent: (type: string, detail: any, bubbles: boolean) => void
+  enterFullwindow: () => void
+  leaveFullwindow: () => void
 }
 
 export interface DefaultProps {
@@ -12501,6 +12546,10 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
   ): void => {
     const merge_name = this._merge_name[merge_node_id]
 
+    if (!merge_name) {
+      return
+    }
+
     merge_name.$element.style.color = color
   }
 
@@ -12509,6 +12558,10 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
 
     const merge_name = this._merge_name[merge_node_id]
 
+    if (!merge_name) {
+      return
+    }
+
     merge_name.setProp('value', name)
     merge_name.$element.style.width = `${name.length * 6}px`
   }
@@ -12516,6 +12569,10 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
   private _reset_merge_name_color = (merge_node_id: string): void => {
     const merge_name = this._merge_name[merge_node_id]
 
+    if (!merge_name) {
+      return
+    }
+
     merge_name.$element.style.color = this._theme.pin_text
   }
 
@@ -14631,11 +14688,21 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
   }
 
   private _is_link_pin_present = (pin_node_id: string): boolean => {
-    return (
-      !this._is_link_pin_merged(pin_node_id) ||
-      (this._is_output_pin_node_id(pin_node_id) &&
-        this._is_link_pin_ref(pin_node_id))
-    )
+    const { type, pinId } = segmentLinkPinNodeId(pin_node_id)
+
+    if (!this._is_link_pin_merged(pin_node_id) && !isSelfPin(type, pinId)) {
+      return true
+    }
+
+    if (this._is_output_pin_node_id(pin_node_id)) {
+      if (this._is_link_pin_ref(pin_node_id)) {
+        if (pinId !== SELF) {
+          return true
+        }
+      }
+    }
+
+    return false
   }
 
   private _reset_link_pin_color = (pin_node_id: string): void => {
@@ -18476,7 +18543,9 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
   private _leave_fullwindow = (_animate: boolean) => {
     // console.log('Graph', '_leave_fullwindow', this._id)
 
-    const { animate } = this.$props
+    const { animate, leaveFullwindow } = this.$props
+
+    leaveFullwindow()
 
     _animate = _animate ?? animate
 
@@ -24459,29 +24528,11 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
     }
   }
 
-  private _disable_frame_pointer = (): void => {
-    console.log('Graph', '_disable_frame_pointer')
-
-    const frame_slot = this._frame.$slot['default']
-
-    frame_slot.$element.style.pointerEvents = 'none'
-  }
-
-  private _enable_frame_pointer = (): void => {
-    // console.log('Graph', '_enable_frame_pointer')
-
-    const frame_slot = this._frame.$slot['default']
-
-    frame_slot.$element.style.pointerEvents = 'all'
-  }
-
   private _force_control_animation_false: boolean = false
 
   private _set_fullwindow_frame_off = (animate: boolean): void => {
     // console.log('Graph', '_set_fullwindow_frame_off')
 
-    this._disable_frame_pointer()
-
     this._unclear_main(animate)
   }
 
@@ -24541,8 +24592,6 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
   private _set_fullwindow_frame_on = (animate: boolean): void => {
     // console.log('Graph', '_set_fullwindow_frame_on')
 
-    this._enable_frame_pointer()
-
     this._clear_main(animate)
   }
 
@@ -24556,7 +24605,9 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
   ) => {
     // console.log('Graph', '_enter_fullwindow', _animate, sub_component_ids, this._id)
 
-    const { animate } = this.$props
+    const { animate, enterFullwindow } = this.$props
+
+    enterFullwindow()
 
     _animate = _animate ?? animate
 
@@ -29175,6 +29226,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       specs,
       registry,
       animate,
+      typeCache,
       hasSpec,
       emptySpec,
       getSpec,
@@ -29188,7 +29240,8 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       unregisterUnit,
       newSpecId,
       dispatchEvent,
-      typeCache,
+      enterFullwindow,
+      leaveFullwindow,
     } = this.$props
 
     let graph = this._subgraph_cache[unit_id]
@@ -29237,6 +29290,8 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
           unregisterUnit,
           newSpecId,
           dispatchEvent,
+          enterFullwindow,
+          leaveFullwindow,
         },
         this.$system
       )
@@ -30583,6 +30638,8 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       registerUnit,
       unregisterUnit,
       newSpecId,
+      enterFullwindow,
+      leaveFullwindow,
       dispatchEvent,
     } = this.$props
 
@@ -30658,6 +30715,8 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
             }
           }, {}) as R),
           dispatchEvent,
+          enterFullwindow,
+          leaveFullwindow,
         },
         this.$system
       )
@@ -31264,20 +31323,10 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
           }
 
           const layer_trait = extractTrait(layer, measureText)
-          const frame_trait = extractTrait(this._frame, measureText)
+          const frame_trait = extractTrait(frame_slot, measureText)
 
-          const same_context = this._frame.$context.$parent === layer.$context
-
-          let offset_x = this._frame_out
-            ? same_context
-              ? this.$context.$x
-              : frame_trait.x
-            : 0
-          let offset_y = this._frame_out
-            ? same_context
-              ? this.$context.$y
-              : frame_trait.y
-            : 0
+          const offset_x = this._frame_out ? frame_trait.x : this.$context.$x
+          const offset_y = this._frame_out ? frame_trait.y : this.$context.$y
 
           const _trait = all_trait[leaf_id]
 
@@ -36128,7 +36177,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
 
         const link_id = getPinLinkIdFromPinNodeId(pin_node_id)
 
-        if (this._is_link_pin_merged(pin_node_id)) {
+        if (this._is_link_pin_visible(pin_node_id)) {
           this._show_link_text(link_id)
         }
       })
@@ -59755,10 +59804,6 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       if (this._in_component_control) {
         if (this._is_fullwindow) {
           this._leave_component_frame()
-
-          if (!this._frame_out) {
-            this._disable_frame_pointer()
-          }
         }
       }
 
@@ -59785,10 +59830,6 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       if (this._in_component_control) {
         if (this._is_fullwindow) {
           this._enter_component_frame()
-
-          if (!this._frame_out) {
-            this._enable_frame_pointer()
-          }
         }
       }