How to update properties without destroying and reinitialization?

[faizananwerali]

How to update properties without destroying and reinitialization?

  async initSplitInstance() {
    if (this.rightLeftSplitInstance) {
      this.rightLeftSplitInstance.destroy(true);
    }
    setTimeout(() => {
      this.rightLeftSplitInstance = Split([this.leftPanel.nativeElement, this.rightPanel.nativeElement], {
        sizes: [75, 25],
        minSize: [300, 300],
        expandToMin: true,
        // gutterSize: 5,
        // cursor: 'col-resize',
        direction: this.selectedLayout === EditorLayouts.LEFT || this.selectedLayout === EditorLayouts.RIGHT ? 'horizontal' : 'vertical',
        elementStyle: function (dimension, size, gutterSize) {
          return {
            'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)',
          }
        },
        gutter(index: number, direction: "horizontal" | "vertical"): HTMLElement {
          const gutter = document.createElement('div');
          gutter.className = `gutter gutter-${direction}`;
          return gutter;
        },
        gutterStyle: function (dimension, gutterSize) {
          return {
            'flex-basis': gutterSize + 'px',
          }
        },
        onDrag: () => {
          this.isDragging = true;
        },
        onDragEnd: () => {
          this.isDragging = false;
        }
      });
    }, 0);
  }

In this example, the this.selectedLayout is EditorLayouts.RIGHT so the direction is horizontal.

In HTML this is how I have implemented it.

<div class="relative h-full flex split-box" [ngClass]="{
        'flex-row': selectedLayout === EditorLayoutsEnum.RIGHT,
        'flex-row-reverse': selectedLayout === EditorLayoutsEnum.LEFT,
        'flex-col': selectedLayout === EditorLayoutsEnum.BOTTOM,
        'flex-col-reverse': selectedLayout === EditorLayoutsEnum.TOP
       }">
       ...
</div>

Now, whenever the user presses any of these change layout buttons. I have to destroy the instance and reinitialize the Split.js.

  changeLayout($event: MouseEvent, layout: EditorLayouts) {
    this.selectedLayout = layout;
    this.initSplitInstance();
  }

Is there a way to do this more efficiently? maybe not destroying the instance, just update it?

[firstdorsal]

Did you manage to figure out a better way?