Open faizananwerali opened 1 year ago
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.
this.selectedLayout
EditorLayouts.RIGHT
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?
Did you manage to figure out a better way?
How to update properties without destroying and reinitialization?
In this example, the
this.selectedLayout
isEditorLayouts.RIGHT
so the direction ishorizontal
.In HTML this is how I have implemented it.
Now, whenever the user presses any of these change layout buttons. I have to destroy the instance and reinitialize the Split.js.
Is there a way to do this more efficiently? maybe not destroying the instance, just update it?