Skip to content

Commit

Permalink
feat: experimental work
Browse files Browse the repository at this point in the history
  • Loading branch information
@mathuo
mathuo committed Nov 30, 2024
1 parent 25489bf commit da0ffe5
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 17 deletions.
7 changes: 5 additions & 2 deletions packages/dockview-core/src/api/component.api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -854,8 +854,11 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
/**
* Create a component from a serialized object.
*/
fromJSON(data: SerializedDockview): void {
this.component.fromJSON(data);
fromJSON(
data: SerializedDockview,
options?: { keepExistingPanels: boolean }
): void {
this.component.fromJSON(data, options);
}

/**
Expand Down
81 changes: 70 additions & 11 deletions packages/dockview-core/src/dockview/dockviewComponent.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ type MoveGroupOrPanelOptions = {
position: Position;
index?: number;
};
keepEmptyGroups?: boolean;
};

export interface FloatingGroupOptions {
Expand Down Expand Up @@ -219,6 +220,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
onWillClose?: (event: { id: string; window: Window }) => void;
}
): Promise<boolean>;
fromJSON(data: any, options?: { keepExistingPanels: boolean }): void;
}

export class DockviewComponent
Expand Down Expand Up @@ -1219,7 +1221,41 @@ export class DockviewComponent
return result;
}

fromJSON(data: SerializedDockview): void {
fromJSON(
data: SerializedDockview,
options?: { keepExistingPanels: boolean }
): void {
const existingPanels = new Map<string, IDockviewPanel>();
const tempGroup = this.createGroup();
this._groups.delete(tempGroup.api.id);

if (options?.keepExistingPanels) {
const newPanels = Object.keys(data.panels);

for (const panel of this.panels) {
if (newPanels.includes(panel.api.id)) {
existingPanels.set(panel.api.id, panel);
}
}

this.movingLock(() => {
Array.from(existingPanels.values()).forEach((panel) => {
this.moveGroupOrPanel({
from: {
groupId: panel.api.group.api.id,
panelId: panel.api.id,
},
to: {
group: tempGroup,
position: 'center',
},
keepEmptyGroups: true,
});
// panel.api.moveTo({ group: tempGroup });
});
});
}

this.clear();

if (typeof data !== 'object' || data === null) {
Expand Down Expand Up @@ -1260,11 +1296,23 @@ export class DockviewComponent
* In running this section first we avoid firing lots of 'add' events in the event of a failure
* due to a corruption of input data.
*/
const panel = this._deserializer.fromJSON(
panels[child],
group
);
createdPanels.push(panel);

const existingPanel = existingPanels.get(child);

if (existingPanel) {
this.movingLock(() => {
tempGroup.model.removePanel(existingPanel);
});

createdPanels.push(existingPanel);
existingPanel.updateFromStateModel(panels[child]);
} else {
const panel = this._deserializer.fromJSON(
panels[child],
group
);
createdPanels.push(panel);
}
}

this._onDidAddGroup.fire(group);
Expand All @@ -1276,10 +1324,21 @@ export class DockviewComponent
typeof activeView === 'string' &&
activeView === panel.id;

group.model.openPanel(panel, {
skipSetActive: !isActive,
skipSetGroupActive: true,
});
const hasExisting = existingPanels.has(panel.api.id);

if (hasExisting) {
this.movingLock(() => {
group.model.openPanel(panel, {
skipSetActive: !isActive,
skipSetGroupActive: true,
});
});
} else {
group.model.openPanel(panel, {
skipSetActive: !isActive,
skipSetGroupActive: true,
});
}
}

if (!group.activePanel && group.panels.length > 0) {
Expand Down Expand Up @@ -1952,7 +2011,7 @@ export class DockviewComponent
throw new Error(`No panel with id ${sourceItemId}`);
}

if (sourceGroup.model.size === 0) {
if (!options.keepEmptyGroups && sourceGroup.model.size === 0) {
// remove the group and do not set a new group as active
this.doRemoveGroup(sourceGroup, { skipActive: true });
}
Expand Down
23 changes: 19 additions & 4 deletions packages/dockview-core/src/dockview/dockviewPanel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export interface IDockviewPanel extends IDisposable, IPanel {
group: DockviewGroupPanel,
options?: { skipSetActive?: boolean }
): void;
updateFromStateModel(state: GroupviewPanelState): void;
init(params: IGroupPanelInitParameters): void;
toJSON(): GroupviewPanelState;
setTitle(title: string): void;
Expand All @@ -45,10 +46,10 @@ export class DockviewPanel
private _title: string | undefined;
private _renderer: DockviewPanelRenderer | undefined;

private readonly _minimumWidth: number | undefined;
private readonly _minimumHeight: number | undefined;
private readonly _maximumWidth: number | undefined;
private readonly _maximumHeight: number | undefined;
private _minimumWidth: number | undefined;
private _minimumHeight: number | undefined;
private _maximumWidth: number | undefined;
private _maximumHeight: number | undefined;

get params(): Parameters | undefined {
return this._params;
Expand Down Expand Up @@ -209,6 +210,20 @@ export class DockviewPanel
});
}

updateFromStateModel(state: GroupviewPanelState): void {
this._maximumHeight = state.maximumHeight;
this._minimumHeight = state.minimumHeight;
this._maximumWidth = state.maximumWidth;
this._minimumWidth = state.minimumWidth;

this.update({ params: state.params ?? {} });
this.setTitle(state.title ?? this.id);
this.setRenderer(state.renderer ?? this.accessor.renderer);

// state.contentComponent;
// state.tabComponent;
}

public updateParentGroup(
group: DockviewGroupPanel,
options?: { skipSetActive?: boolean }
Expand Down
8 changes: 8 additions & 0 deletions packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,12 @@ const components = {
const isDebug = React.useContext(DebugContext);
const metadata = usePanelApiMetadata(props.api);

const [firstRender, setFirstRender] = React.useState<string>('');

React.useEffect(() => {
setFirstRender(new Date().toISOString());
}, []);

return (
<div
style={{
Expand All @@ -59,6 +65,8 @@ const components = {
{props.api.title}
</span>

<div>{firstRender}</div>

{isDebug && (
<div style={{ fontSize: '0.8em' }}>
<Option
Expand Down
19 changes: 19 additions & 0 deletions packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,22 @@ export const GridActions = (props: {
}
};

const onLoad2 = () => {
const state = localStorage.getItem('dv-demo-state');
if (state) {
try {
props.api?.fromJSON(JSON.parse(state), {
keepExistingPanels: true,
});

setGap(props.api?.gap ?? 0);
} catch (err) {
console.error('failed to load state', err);
localStorage.removeItem('dv-demo-state');
}
}
};

const onSave = () => {
if (props.api) {
console.log(props.api.toJSON());
Expand Down Expand Up @@ -192,6 +208,9 @@ export const GridActions = (props: {
<button className="text-button" onClick={onLoad}>
Load
</button>
<button className="text-button" onClick={onLoad2}>
Load2
</button>
<button className="text-button" onClick={onSave}>
Save
</button>
Expand Down

0 comments on commit da0ffe5

Please sign in to comment.