@_unit/unit 1.0.7 → 1.0.8

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

@@ -167,7 +167,9 @@ import {
   IOWheelEvent,
   makeWheelListener,
 } from '../../../../../client/event/wheel'
-import { extractStyle } from '../../../../../client/extractStyle'
+import {
+  extractStyle
+} from '../../../../../client/extractStyle'
 import { extractTrait } from '../../../../../client/extractTrait'
 import { findRef } from '../../../../../client/findRef'
 import { getSize } from '../../../../../client/getSize'
@@ -229,6 +231,7 @@ import {
   evaluateBundleStr,
   idFromUnitValue,
 } from '../../../../../client/idFromUnitValue'
+import { isTextLike } from '../../../../../client/isTextLike'
 import { Mode } from '../../../../../client/mode'
 import { _pinTypeMatch } from '../../../../../client/parser'
 import { rawExtractStyle } from '../../../../../client/rawExtractStyle'
@@ -489,6 +492,7 @@ import {
   forEachGraphSpecPin,
   forEachPinOnMerge,
   forEachPinOnMerges,
+  getExposePinSpec,
   getExposedPinSpecs,
   getInputNodeId,
   getMergePinCount,
@@ -3831,8 +3835,6 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
 
     const bundle = unitBundleSpec(unit, specs)
 
-    console.log({ bundle })    
-
     return bundle
   }
 
@@ -6423,6 +6425,10 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
     this._set_plug_selection_to_name(plug_node_id)
   }
 
+  private _on_unit_pin_name_focus = (pin_node_id: string): void => {
+    this._set_pin_selection_to_name(pin_node_id)
+  }
+
   private _on_plug_name_blur = (plug_node_id: string): void => {
     // console.log('Graph', '_on_plug_name_blur', plug_node_id)
 
@@ -6452,10 +6458,70 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
     }
   }
 
+  private _pod_set_unit_pin_set_id = (
+    unitId: string,
+    type: IO,
+    pinId: string,
+    nextPinId: string
+  ): void => {
+    this._pod.$setUnitPinSetId({
+      unitId,
+      type,
+      pinId,
+      nextPinId,
+    })
+  }
+
+  private _on_unit_pin_name_blur = (pin_node_id: string) => {
+    // console.log('Graph', '_on_unit_pin_name_blur', pin_node_id)
+
+    this._set_node_selection_to_node(pin_node_id)
+
+    const { unitId, type, pinId } = segmentLinkPinNodeId(pin_node_id)
+
+    const value = this._get_node_temp_name(pin_node_id)
+    const valid = this._is_valid_pin_name_value(value)
+
+    let next_pin_id = pinId
+
+    if (value !== pinId) {
+      if (valid) {
+        this._on_graph_unit_set_pin_set_id({
+          type,
+          pinId,
+          nextPinId: value,
+          path: [unitId],
+        })
+
+        this._pod_set_unit_pin_set_id(unitId, type, pinId, value)
+
+        next_pin_id = value
+      } else {
+        this._set_node_temp_name(pin_node_id, pinId)
+
+        const pin_name = this._pin_name[pin_node_id]
+
+        if (pin_name) {
+          pin_name.setProp('value', pinId)
+        }
+      }
+
+      const next_pin_node_id = getPinNodeId(unitId, type, next_pin_id)
+
+      if (this._mode === 'info') {
+        this._enable_pin_name(next_pin_node_id)
+      }
+    }
+  }
+
   private _set_plug_selection_to_name = (ext_node_id: string): void => {
     this._set_node_selection_to_name(ext_node_id, -2, 0)
   }
 
+  private _set_pin_selection_to_name = (pin_node_id: string): void => {
+    this._set_node_selection_to_name(pin_node_id, -1, 0, 0, -2)
+  }
+
   private _set_node_selection_to_node = (unit_id: string): void => {
     const {
       width: node_width,
@@ -6498,7 +6564,10 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       this._disable_core_resize(node_id)
     }
 
-    this._resize_selection(node_id, width, height)
+    const _width = width + dw
+    const _height = height + dh
+
+    this._resize_selection(node_id, _width, _height)
   }
 
   private _set_selection_x = (node_id: string, x: number) => {
@@ -7263,6 +7332,8 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       return this._get_core_name_size(node_id)
     } else if (this._is_ext_node_id(node_id)) {
       return this._get_plug_name_size(node_id)
+    } else if (this._is_link_pin_node_id(node_id)) {
+      return this._get_pin_name_size(node_id)
     } else {
       throw new ShouldNeverHappenError()
     }
@@ -7280,9 +7351,13 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
   }
 
   private _get_plug_name_size = (ext_node_id: string): Size => {
-    // console.log('Graph', '_get_plug_name_size', ext_node_id)
+    return this._get_pin_name_size(ext_node_id)
+  }
+
+  private _get_pin_name_size = (pin_node_id: string) => {
+    // console.log('Graph', '_get_pin_name_size', pin_node_id)
 
-    const value = this._node_name[ext_node_id]
+    const value = this._node_name[pin_node_id]
 
     const size = getDivTextSize(
       value,
@@ -7413,7 +7488,31 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
     pin_node_id: string,
     value: string
   ): void => {
-    // TODO
+    const valid = this._is_valid_pin_name_value(value)
+
+    if (valid) {
+      this._set_pin_name_caret_color(pin_node_id, 'currentColor')
+    } else {
+      this._set_pin_name_caret_color(pin_node_id, this._get_err_color())
+    }
+
+    this._refresh_pin_name_size(pin_node_id)
+  }
+
+  private _set_pin_name_caret_color = (pin_node_id: string, color: string) => {
+    this._set_pin_name_style_attr(pin_node_id, 'caretColor', color)
+  }
+
+  private _refresh_pin_name_size = (pin_node_id: string) => {
+    const { width, height } = this._get_pin_name_size(pin_node_id)
+
+    const _width = Math.max(width, 6)
+    const _height = Math.max(height, 6)
+
+    this._set_pin_name_style_attr(pin_node_id, 'width', `${_width}px`)
+    this._set_pin_name_style_attr(pin_node_id, 'height', `${_height}px`)
+
+    this._set_pin_selection_to_name(pin_node_id)
   }
 
   private _set_unit_pin_name = (pin_node_id: string, value: string): void => {
@@ -7991,6 +8090,8 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       this._on_core_name_focus(node_id)
     } else if (this._is_ext_node_id(node_id)) {
       this._on_plug_name_focus(node_id)
+    } else if (this._is_link_pin_node_id(node_id)) {
+      this._on_unit_pin_name_focus(node_id)
     }
 
     this._edit_node_name_id = node_id
@@ -8008,6 +8109,8 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       this._on_core_name_blur(node_id)
     } else if (this._is_ext_node_id(node_id)) {
       this._on_plug_name_blur(node_id)
+    } else if (this._is_link_pin_node_id(node_id)) {
+      this._on_unit_pin_name_blur(node_id)
     }
 
     this._enable_crud()
@@ -8087,12 +8190,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
     }
   }
 
-  private __is_valid_plug_name = (
-    type: IO,
-    pinId: string,
-    subPinId: string,
-    value: string
-  ) => {
+  private _is_valid_pin_name_value = (value: string) => {
     if (value.length === 0) {
       return false
     }
@@ -8104,6 +8202,15 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
     return true
   }
 
+  private __is_valid_plug_name = (
+    type: IO,
+    pinId: string,
+    subPinId: string,
+    value: string
+  ) => {
+    return this._is_valid_pin_name_value(value)
+  }
+
   private _is_valid_plug_name = (plug_node_id: string, value: string) => {
     const { type, pinId, subPinId } = segmentPlugNodeId(plug_node_id)
 
@@ -9940,6 +10047,8 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
     this._pin_name[pin_node_id] = pin_name
     pin_node_content.appendChild(pin_name)
 
+    this._node_name[pin_node_id] = pin_id
+
     this._sim_setup_node_name(pin_node_id, pin_name)
 
     if (ref_output) {
@@ -16238,7 +16347,17 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
 
   private _enable_unit_pin_names = (unit_id: string) => {
     this._for_each_unit_pin(unit_id, (pin_node_id: string) => {
-      this._enable_pin_name(pin_node_id)
+      if (this._has_node(pin_node_id)) {
+        this._enable_pin_name(pin_node_id)
+      }
+    })
+  }
+
+  private _disable_unit_pin_names = (unit_id: string) => {
+    this._for_each_unit_pin(unit_id, (pin_node_id: string) => {
+      if (this._has_node(pin_node_id)) {
+        this._disable_pin_name(pin_node_id)
+      }
     })
   }
 
@@ -16265,6 +16384,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
     for (const unit_id in this._unit_node) {
       if (!this._is_unit_base(unit_id)) {
         this._disable_core_name(unit_id)
+        this._disable_unit_pin_names(unit_id)
       }
     }
 
@@ -18321,10 +18441,8 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       pointerEvents: 'none',
     }
 
-    const is_text =
-      leaf_comp.$element instanceof Text ||
-      (leaf_comp.$element instanceof HTMLDivElement &&
-        leaf_comp.$element.getAttribute('contenteditable') === 'true')
+    const is_text = isTextLike(leaf_comp)
+
     const is_canvas = leaf_comp.$element instanceof HTMLCanvasElement
     const is_svg = leaf_comp.isSVG()
 
@@ -18946,19 +19064,14 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       },
     } = this.$system
 
-    const _extractStyle: ExpandChildFunction = (leaf_id, component) => {
-      if (
-        this._leaf_style[leaf_id] &&
-        !(
-          component.$element instanceof Text ||
-          (component.$element instanceof HTMLDivElement &&
-            component.$element.getAttribute('contenteditable') === 'true')
-        )
-      ) {
-        return this._leaf_style[leaf_id]
+    const _extractStyle: ExpandChildFunction = (leaf_id, leaf_comp) => {
+      if (this._leaf_style[leaf_id] && !isTextLike(leaf_comp)) {
+        let leaf_style = this._leaf_style[leaf_id]
+
+        return leaf_style
       }
 
-      return extractStyle(this._component, component, trait, measureText, true)
+      return extractStyle(this._component, leaf_comp, trait, measureText, true)
     }
 
     const base_trait = reflectComponentBaseTrait(
@@ -22067,6 +22180,26 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
 
   private _enable_pin_name = (pin_node_id: string): void => {
     // console.log('Graph', '_enable_pin_name', pin_node_id)
+
+    this._set_pin_name_style_attr(pin_node_id, 'pointerEvents', 'inherit')
+  }
+
+  private _disable_pin_name = (pin_node_id: string): void => {
+    // console.log('Graph', '_disable_pin_name', pin_node_id)
+
+    this._set_pin_name_style_attr(pin_node_id, 'pointerEvents', 'none')
+  }
+
+  private _set_pin_name_style_attr = (
+    pin_node_id: string,
+    name: string,
+    value: string
+  ): void => {
+    // console.log('Graph', '_set_pin_name_style_attr', pin_node_id, name, value)
+
+    const text_comp = this._pin_name[pin_node_id]
+
+    text_comp.$element.style[name] = value
   }
 
   private _disable_plug_name = (ext_node_id: string): void => {
@@ -22822,12 +22955,12 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
 
       if (a_ref && !b_ref) {
         return (
-          // b_type === 'output' &&
+          b_type === 'output' &&
           this._is_link_pin_ref_link_pin_type_match(a, a_type, b, b_type)
         )
       } else if (!a_ref && b_ref) {
         return (
-          // a_type === 'output' &&
+          a_type === 'output' &&
           this._is_ref_link_pin_link_pin_type_match(a, a_type, b, b_type)
         )
       } else if (a_ref && b_ref) {
@@ -23139,13 +23272,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
   ): boolean => {
     const target_type = this._runtime_pin_type(b, b_type)
 
-    // if (
-    //   [
-    //     TreeNodeType.Class,
-    //     TreeNodeType.ClassLiteral,
-    //     TreeNodeType.Unit,
-    //   ].includes(target_type.type)
-    // ) {
+    // if (this._is_unit_datum_type(target_type)) {
     return this._is_pin_pin_type_match(a, a_type, b, b_type)
     // }
 
@@ -28404,10 +28531,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
 
       const leaf_id = joinLeafPath(leaf_path)
 
-      const is_text =
-        leaf_comp.$element instanceof Text ||
-        (leaf_comp.$element instanceof HTMLDivElement &&
-          leaf_comp.$element.getAttribute('contenteditable') === 'true')
+      const is_text = isTextLike(leaf_comp)
 
       const cached_style = this._leaf_style[leaf_id]
 
@@ -36206,7 +36330,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
   }
 
   private _sim_graph_unit_remove_pin = (pin_node_id: string): void => {
-    // console.log('Graph', '_sim_remove_link_pin', pin_node_id)
+    // console.log('Graph', '_sim_graph_unit_remove_pin', pin_node_id)
 
     const { type, unitId, pinId } = segmentLinkPinNodeId(pin_node_id)
 
@@ -41624,7 +41748,6 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       (graph_render || there_is_selected_sub_component) &&
       (!init_unit_id || !init_unit_is_render)
 
-
     this._flush_debugger()
     this._pause_debugger()
 
@@ -42206,8 +42329,8 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       getExposedPinSpecs: (): IOOf<GraphPinsSpec> => {
         return this._spec_get_exposed_pin_specs()
       },
-      isPinConstant: function (type: IO, name: string): boolean {
-        throw new MethodNotImplementedError()
+      isPinConstant: (type: IO, name: string): boolean => {
+        return false
       },
       removePinFromMerge: (mergeId, unitId, type, pinId) => {
         this.__state_remove_pin_from_merge(mergeId, unitId, type, pinId)
@@ -42458,10 +42581,9 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       },
       getExposedPinSpecs: (): IOOf<GraphPinsSpec> => {
         return getExposedPinSpecs(spec)
-        // return this._spec_graph_unit_get_exposed_pin_specs(graph_id)
       },
       getExposedPinSpec: (type: IO, pinId: string): GraphPinSpec => {
-        return this._spec_graph_unit_get_pin_spec(graph_id, type, pinId)
+        return getExposePinSpec(spec, type, pinId)
       },
       removePinOrMerge: (
         mergeId: string,
@@ -42478,7 +42600,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
         )
       },
       isPinConstant: (type: IO, name: string): boolean => {
-        throw new MethodNotImplementedError()
+        return isUnitPinConstant(spec, graph_id, type, name)
       },
       removePinFromMerge: (
         mergeId: string,
@@ -42958,8 +43080,8 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       ): void {
         //
       },
-      isPinConstant: function (type: IO, name: string): boolean {
-        throw new MethodNotImplementedError()
+      isPinConstant: (type: IO, name: string): boolean => {
+        return false
       },
       removePinFromMerge: () => {
         //
@@ -43052,7 +43174,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
     const sub_component_index_map = {}
     const sub_component_children_map = {}
 
-    const next_pin_map: GraphMoveSubGraphData['nextPinIdMap'] = {}
+    const next_pin_id_map: GraphMoveSubGraphData['nextPinIdMap'] = {}
     const next_merge_pin_id: GraphMoveSubGraphData['nextMergePinId'] = {}
     const next_plug_spec_map: GraphMoveSubGraphData['nextPlugSpec'] = {
       input: {},
@@ -43154,7 +43276,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       const ref = this._is_link_pin_ref(pin_node_id)
       const ignored = this._spec_is_link_pin_ignored(pin_node_id)
 
-      pathSet(next_pin_map, [unit_id, type, pin_id], {
+      pathSet(next_pin_id_map, [unit_id, type, pin_id], {
         pinId: next_pin_id,
         subPinId: `${next_sub_pin_id}`,
         ref,
@@ -43613,10 +43735,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
           if (merge_node_id) {
             const merge_ref_unit_id = this._merge_to_ref_unit[merge_node_id]
 
-            if (
-              !merge_ref_unit_id &&
-              (!node_id_set.has(merge_node_id) || pin_id === SELF)
-            ) {
+            if (!node_id_set.has(merge_node_id) || pin_id === SELF) {
               let next_pin_id = pathOrDefault(
                 merge_to_exposed_pin_id,
                 [type, merge_node_id],
@@ -43939,7 +44058,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       },
       nextSpecId,
       nextIdMap: next_id_map,
-      nextPinIdMap: next_pin_map,
+      nextPinIdMap: next_pin_id_map,
       nextMergePinId: next_merge_pin_id,
       nextUnitPinMergeMap: next_unit_pin_merge_map,
       nextPlugSpec: next_plug_spec_map,
@@ -45328,9 +45447,11 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
         merge_is_collapsing_too && !any_merge_unit_pin_not_collapsing
 
       forIOObjKV(prev_merge_unit, (type, pin_id: string) => {
+        const is_self_pin = type === 'output' && pin_id === SELF
+
         if (
           !merge_should_be_ignored &&
-          next_unit_pin_map[unit_id]?.[type]?.[pin_id]
+          (next_unit_pin_map[unit_id]?.[type]?.[pin_id] || is_self_pin)
         ) {
           const fallback_pin_id = newSpecPinId(
             graph_spec,
@@ -45355,12 +45476,14 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
             pin_id
           )
 
-          pathSet(next_pin_id_map, [type, pin_id], {
-            pinId: next_pin_id,
-            subPinId: next_sub_pin_id,
-            ref,
-            defaultIgnored: default_ignored,
-          })
+          if (!is_self_pin) {
+            pathSet(next_pin_id_map, [type, pin_id], {
+              pinId: next_pin_id,
+              subPinId: next_sub_pin_id,
+              ref,
+              defaultIgnored: default_ignored,
+            })
+          }
 
           pathSet(next_merge_unit, [type, next_pin_id], true)
         }
@@ -46504,7 +46627,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
     pinId: string,
     mergeId: string | null
   ) => {
-    // console.log('Graph', '_spec_graph_unit_remove_pin', graph_id, type, pin_id)
+    // console.log('Graph', '_spec_graph_unit_remove_pin', graphId, type, mergeId)
 
     const { setSpec } = this.$props
 
@@ -46521,6 +46644,8 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       this._spec_remove_pin_or_merge(pin_node_id)
     }
 
+    pathDelete(this._spec, ['units', graphId, type, pinId])
+
     setSpec(graph_spec_id, next_graph_spec)
   }
 
@@ -46856,10 +46981,6 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
             )
           }
         }
-
-        if (plug_spec) {
-          const { type, pinId, subPinId } = plug_spec
-        }
       } else {
         this._stop_node_long_press_collapse(pin_node_id)
       }
@@ -46999,6 +47120,8 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
         updated_graph_spec
       )
 
+      pathDelete(this._spec, ['units', graph_id, type, pinId])
+
       setSpec(graph_spec_id, updated_graph_spec)
     } else {
       //
@@ -50278,6 +50401,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
             'set_unit_pin_constant',
             'set_unit_pin_ignored',
             'set_unit_pin_data',
+            'set_unit_pin_set_id',
             'remove_unit_pin_data',
             'set_pin_set_functional',
             'bulk_edit',
@@ -50889,7 +51013,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
       setSpec(spec.id, spec)
     }
 
-    if (path.length > 1) {
+    if (path.length >= 1) {
       const unit_id = last(path)
       const parent_path = butLast(path)
 
@@ -51852,10 +51976,9 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
               }
 
               if (this._subgraph_unit_id !== path[0]) {
+                sub_component.removeSubComponent(unitId)
+                sub_component.pullRoot(sub_sub_component)
 
-              sub_component.removeSubComponent(unitId)
-              sub_component.pullRoot(sub_sub_component)
-              
                 sub_sub_component.disconnect()
               }
             }
@@ -52264,7 +52387,7 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
 
     const { specs, setSpec } = this.$props
 
-    const { nodeIds, path, graphBundle } = data
+    const { graphId, nodeIds, path, graphBundle } = data
 
     const { spec } = graphBundle
 
@@ -52276,6 +52399,11 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
 
     if (this._is_spec_updater(path)) {
       // if (this._subgraph_unit_id !== graph_unit_id) {
+
+      const spec = findSpecAtPath(specs, this._spec, path)
+
+      const next_spec = clone(spec)
+
       const graph_unit_spec = this._get_unit_spec(graph_unit_id) as GraphSpec
 
       const merges = clone(
@@ -52290,9 +52418,19 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
         plugs,
       }
 
+      const spec_interface = this._make_graph_spec_interface(spec)
+
       moveSubgraph(
         this._state_get_subgraph_graph_interface(graph_unit_id),
-        this._make_graph_spec_interface(spec),
+        weakMerge(spec_interface, {
+          coverPinSet: (type, pinId, path) => {
+            pathDelete(next_spec, ['units', graphId, type, pinId])
+
+            setSpec(next_spec.id, next_spec)
+
+            spec_interface.coverPinSet(type, pinId, path)
+          },
+        }),
         data.graphId,
         data,
         connectOpt,
@@ -52944,7 +53082,6 @@ export class Editor_ extends Element<HTMLDivElement, _Props> {
         this._flush_debugger()
       }
     }
-    
 
     if (this._debug_interval === null && this._enabled()) {
       this._start_debugger()

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

@@ -60,6 +60,7 @@ export default class GUI extends Element<HTMLDivElement, Props> {
   public _color_pallete: Div
   public _share: Div
   public _import: IconButton
+  public _folder: IconButton
   public _export: IconButton
   public _history: Div
 
@@ -214,6 +215,20 @@ export default class GUI extends Element<HTMLDivElement, Props> {
     color_pallete.appendChild(color_picker)
     this._color_pallete = color_pallete
 
+    const folder_button = new IconButton(
+      {
+        icon: 'folder',
+        style: {
+          width: '21px',
+          height: '21px',
+          padding: '6px',
+        },
+      },
+      this.$system
+    )
+
+    this._folder = folder_button
+
     const export_button = new IconButton(
       {
         icon: 'upload',
@@ -253,6 +268,7 @@ export default class GUI extends Element<HTMLDivElement, Props> {
       },
       this.$system
     )
+    share.appendChild(folder_button)
     share.appendChild(export_button)
     share.appendChild(import_button)
     this._share = share
@@ -510,7 +526,9 @@ export default class GUI extends Element<HTMLDivElement, Props> {
 
   private _background_color = (): string => {
     const { $theme } = this.$context
+
     const backgroundColor = setAlpha(themeBackgroundColor($theme), 0.75)
+
     return backgroundColor
   }
 
@@ -521,15 +539,12 @@ export default class GUI extends Element<HTMLDivElement, Props> {
     mergePropStyle(this._cabinet, {
       backgroundColor,
     })
-
     mergePropStyle(this._modes, {
       backgroundColor,
     })
-
     mergePropStyle(this._search, {
       backgroundColor,
     })
-
     mergePropStyle(this._minimap, {
       color,
     })
@@ -581,7 +596,7 @@ export default class GUI extends Element<HTMLDivElement, Props> {
           component: this._share,
           active: false,
           width: 30,
-          height: 67,
+          height: 97,
           state: { y: cy + 47.765 },
         },
       })