@_unit/unit 1.0.48 → 1.0.49

package/lib/system/platform/component/app/Editor/Component.js

@@ -294,6 +294,12 @@ class Editor extends element_1.Element {
             // console.log('Graph', '_fork_spec', spec, specId)
             return this._registry.forkSpec(spec, specId);
         };
+        this._enter_fullwindow = () => {
+            this._fallback_frame_container.$element.style.pointerEvents = 'inherit';
+        };
+        this._leave_fullwindow = () => {
+            this._fallback_frame_container.$element.style.pointerEvents = 'none';
+        };
         this._new_spec_id = () => {
             return this._registry.newSpecId();
         };
@@ -325,22 +331,6 @@ class Editor extends element_1.Element {
             return this._registry.shouldFork(id);
         };
         this._create_fallback_frame = () => {
-            // 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 } = (0, graphComponentFromSpec_1.graphComponentFromId)(this.$system, _ids_1.ID_SCROLL_SNAP_Y_DIV, {
                 style: {
                     position: 'absolute',
@@ -349,7 +339,6 @@ class Editor extends element_1.Element {
                     width: '100%',
                     height: '100%',
                     overflow: 'auto',
-                    pointerEvents: 'none',
                     zIndex: '0',
                 },
             });
@@ -474,9 +463,10 @@ class Editor extends element_1.Element {
             this._unlisten_transcend();
             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');
@@ -495,6 +485,7 @@ class Editor extends element_1.Element {
                 graph: this._pod,
                 editor: this._editor,
                 fallback: this._fallback_frame,
+                container: this._fallback_frame_container,
                 transcend: this._transcend,
                 background: this._background,
                 root: this._root,
@@ -505,6 +496,19 @@ class Editor extends element_1.Element {
             const transcend = new Component_3.default({}, this.$system);
             this._transcend = transcend;
             this._listen_transcend();
+            this._fallback_frame_container = new Component_1.default({
+                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 = (0, createParent_1.parentClass)();
@@ -524,6 +528,7 @@ class Editor extends element_1.Element {
                 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,
@@ -537,7 +542,8 @@ class Editor extends element_1.Element {
                 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);
             this._editor = editor;
             this._listen_graph();
@@ -580,13 +586,15 @@ class Editor extends element_1.Element {
                 root,
                 editor,
                 frame: this._fallback_frame,
+                container: this._fallback_frame_container,
                 transcend,
             });
             this._root.$ref['transcend'] = transcend;
             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);
             this._editor.unlock_sub_component(editor_unit_id, true);
@@ -604,13 +612,28 @@ class Editor extends element_1.Element {
             // console.log('Graph', '_on_zoom')
             this.set('zoom', zoom);
         };
-        const { graph, className, style, attr, zoom, config, controls = true, animate = true, fullwindow, fallback, } = $props;
+        const { graph, className, style, attr, zoom, config, controls = true, animate = true, fullwindow, fallback, container, } = $props;
         let { component, editor, transcend, background, root } = $props;
         const specs = (0, weakMerge_1.weakMerge)(this.$system.specs, {});
         this._specs = specs;
         this._registry = new Registry_1.Registry(specs);
         (0, mirror_1.mirror)(this.$system.specs_, this._registry.specs_);
         this._pod = graph;
+        this._fallback_frame_container =
+            container ||
+                new Component_1.default({
+                    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;
         transcend =
@@ -652,6 +675,8 @@ class Editor extends element_1.Element {
                     unregisterUnit: this._unregister_unit,
                     newSpecId: this._new_spec_id,
                     dispatchEvent: this._dispatch_event,
+                    enterFullwindow: this._enter_fullwindow,
+                    leaveFullwindow: this._leave_fullwindow,
                 }, this.$system);
         this._editor = editor;
         this._editor.addEventListeners([
@@ -705,8 +730,9 @@ class Editor extends element_1.Element {
                 }, this.$system);
         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);
         (0, contextMenu_1.preventContextMenu)(root);
         this._root = root;
         this._root.$ref['transcend'] = transcend;
@@ -724,6 +750,7 @@ class Editor extends element_1.Element {
             background,
             root,
             editor,
+            container: this._fallback_frame_container,
             frame: this._fallback_frame,
             transcend,
         });
@@ -7012,16 +7039,25 @@ class Editor_ extends element_1.Element {
         };
         this._set_merge_name_color = (merge_node_id, color) => {
             const merge_name = this._merge_name[merge_node_id];
+            if (!merge_name) {
+                return;
+            }
             merge_name.$element.style.color = color;
         };
         this._set_merge_name = (merge_node_id, name) => {
             // console.log('Graph', '_set_merge_name', merge_node_id, name)
             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`;
         };
         this._reset_merge_name_color = (merge_node_id) => {
             const merge_name = this._merge_name[merge_node_id];
+            if (!merge_name) {
+                return;
+            }
             merge_name.$element.style.color = this._theme.pin_text;
         };
         this._set_output_r = (pin_node_id, r) => {
@@ -8598,9 +8634,18 @@ class Editor_ extends element_1.Element {
             return this._has_node(merge_node_id);
         };
         this._is_link_pin_present = (pin_node_id) => {
-            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 } = (0, id_1.segmentLinkPinNodeId)(pin_node_id);
+            if (!this._is_link_pin_merged(pin_node_id) && !(0, spec_3.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_1.SELF) {
+                        return true;
+                    }
+                }
+            }
+            return false;
         };
         this._reset_link_pin_color = (pin_node_id) => {
             // console.log('Graph', '_reset_link_pin_color', pin_node_id)
@@ -11090,7 +11135,8 @@ class Editor_ extends element_1.Element {
         };
         this._leave_fullwindow = (_animate) => {
             // console.log('Graph', '_leave_fullwindow', this._id)
-            const { animate } = this.$props;
+            const { animate, leaveFullwindow } = this.$props;
+            leaveFullwindow();
             _animate = _animate !== null && _animate !== void 0 ? _animate : animate;
             this._is_fullwindow = false;
             if (!this._frame_out) {
@@ -14879,20 +14925,9 @@ class Editor_ extends element_1.Element {
                 this._control.show(animate);
             }
         };
-        this._disable_frame_pointer = () => {
-            console.log('Graph', '_disable_frame_pointer');
-            const frame_slot = this._frame.$slot['default'];
-            frame_slot.$element.style.pointerEvents = 'none';
-        };
-        this._enable_frame_pointer = () => {
-            // console.log('Graph', '_enable_frame_pointer')
-            const frame_slot = this._frame.$slot['default'];
-            frame_slot.$element.style.pointerEvents = 'all';
-        };
         this._force_control_animation_false = false;
         this._set_fullwindow_frame_off = (animate) => {
             // console.log('Graph', '_set_fullwindow_frame_off')
-            this._disable_frame_pointer();
             this._unclear_main(animate);
         };
         this._clear_component = (component, animate) => {
@@ -14933,13 +14968,13 @@ class Editor_ extends element_1.Element {
         };
         this._set_fullwindow_frame_on = (animate) => {
             // console.log('Graph', '_set_fullwindow_frame_on')
-            this._enable_frame_pointer();
             this._clear_main(animate);
         };
         this._fullwindow_focusing = false;
         this._enter_fullwindow = (_animate, sub_component_ids) => {
             // console.log('Graph', '_enter_fullwindow', _animate, sub_component_ids, this._id)
-            const { animate } = this.$props;
+            const { animate, enterFullwindow } = this.$props;
+            enterFullwindow();
             _animate = _animate !== null && _animate !== void 0 ? _animate : animate;
             this._is_fullwindow = true;
             if (!this._frame_out) {
@@ -17884,7 +17919,7 @@ class Editor_ extends element_1.Element {
             };
         };
         this._ensure_subgraph = (unit_id, { color, fullwindow } = {}) => {
-            const { fork, specs, registry, animate, hasSpec, emptySpec, getSpec, setSpec, newSpec, deleteSpec, forkSpec, shouldFork, injectSpecs, registerUnit, unregisterUnit, newSpecId, dispatchEvent, typeCache, } = this.$props;
+            const { fork, specs, registry, animate, typeCache, hasSpec, emptySpec, getSpec, setSpec, newSpec, deleteSpec, forkSpec, shouldFork, injectSpecs, registerUnit, unregisterUnit, newSpecId, dispatchEvent, enterFullwindow, leaveFullwindow, } = this.$props;
             let graph = this._subgraph_cache[unit_id];
             if (graph) {
                 //
@@ -17927,6 +17962,8 @@ class Editor_ extends element_1.Element {
                     unregisterUnit,
                     newSpecId,
                     dispatchEvent,
+                    enterFullwindow,
+                    leaveFullwindow,
                 }, this.$system);
                 this.cache_subgraph(unit_id, graph);
             }
@@ -18719,7 +18756,7 @@ class Editor_ extends element_1.Element {
             }
         };
         this._enter_datum_class_literal = (datum_node_id) => {
-            const { fork, specs, registry, animate, typeCache, hasSpec, emptySpec, getSpec, setSpec, newSpec, deleteSpec, forkSpec, shouldFork, injectSpecs, registerUnit, unregisterUnit, newSpecId, dispatchEvent, } = this.$props;
+            const { fork, specs, registry, animate, typeCache, hasSpec, emptySpec, getSpec, setSpec, newSpec, deleteSpec, forkSpec, shouldFork, injectSpecs, registerUnit, unregisterUnit, newSpecId, enterFullwindow, leaveFullwindow, dispatchEvent, } = this.$props;
             const { datumId } = (0, id_1.segmentDatumNodeId)(datum_node_id);
             const datum_tree = this._get_datum_tree(datum_node_id);
             const is_class_literal = datum_tree.type === parser_2.TreeNodeType.Unit;
@@ -18775,6 +18812,8 @@ class Editor_ extends element_1.Element {
                         };
                     }, {}),
                     dispatchEvent,
+                    enterFullwindow,
+                    leaveFullwindow,
                 }, this.$system);
                 editor._graph.addEventListener((0, custom_1.makeCustomListener)('leave', () => {
                     var _a;
@@ -19133,18 +19172,9 @@ class Editor_ extends element_1.Element {
                         all_trait = this.___reflect_sub_component_base_trait('', this._component, all_base, style, trait, true);
                     }
                     const layer_trait = (0, extractTrait_1.extractTrait)(layer, measureText);
-                    const frame_trait = (0, extractTrait_1.extractTrait)(this._frame, 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 frame_trait = (0, extractTrait_1.extractTrait)(frame_slot, measureText);
+                    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];
                     const trait = {
                         x: _trait.x - layer_trait.x + offset_x,
@@ -21733,7 +21763,7 @@ class Editor_ extends element_1.Element {
                 this._for_each_merge_pin(mergeId, (unitId, type, pinId) => {
                     const pin_node_id = (0, id_1.getPinNodeId)(unitId, type, pinId);
                     const link_id = (0, id_1.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);
                     }
                 });
@@ -38481,9 +38511,6 @@ class Editor_ extends element_1.Element {
             if (this._in_component_control) {
                 if (this._is_fullwindow) {
                     this._leave_component_frame();
-                    if (!this._frame_out) {
-                        this._disable_frame_pointer();
-                    }
                 }
             }
             this._frame = frame;
@@ -38504,9 +38531,6 @@ class Editor_ extends element_1.Element {
             if (this._in_component_control) {
                 if (this._is_fullwindow) {
                     this._enter_component_frame();
-                    if (!this._frame_out) {
-                        this._enable_frame_pointer();
-                    }
                 }
             }
             for (const unit_id in this._subgraph_cache) {