Skip to content

Nested sublayout where you can drag from parent to child. To move bac… #437

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

Nested sublayout where you can drag from parent to child. To move bac… #437

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 26 additions & 5 deletions examples/demo/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
}

componentDidMount() {
this.loadLayout("default", false);
this.loadLayout("sub", false);
document.body.addEventListener("touchmove", this.preventIOSScrollingWhenDragging, { passive: false });

// use to generate json typescript interfaces
Expand Down Expand Up @@ -256,7 +256,21 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
if (tabStorageImpl) {
return tabStorageImpl(dragging, over, x, y, location, refresh)
}
return undefined

if(over.getExtraData().model) { // If dropping into nested flexLayout, add if there.
var model:Model = over.getExtraData().model;
const callback = (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation) => {
const json = dragging instanceof TabNode ? dragging.toJson() : dragging;
if(dragging instanceof TabNode) {
this.state.model?.doAction(Actions.deleteTab(dragging.getId()));
}
// TODO - detect tab that we are hovering over, highlight and add to that only.
// Currently user has to move it in, then move it around.
model.doAction(Actions.addNode(json, model.getFirstTabSet().getId(), DockLocation.CENTER, -1));
};
return { x: 0, y: 0, width: 55, height: 55, callback: callback, cursor: 'copy' };
}
return undefined;
};

onShowLayoutClick = (event: React.MouseEvent) => {
Expand Down Expand Up @@ -301,7 +315,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
return <SimpleTable fields={fields} onClick={this.onTableClick.bind(this, node)} data={node.getExtraData().data} />;
}
else if (component === "sub") {
var model = node.getExtraData().model;
var model:Model = node.getExtraData().model;
if (model == null) {
node.getExtraData().model = Model.fromJson(node.getConfig().model);
model = node.getExtraData().model;
Expand All @@ -313,7 +327,14 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
);
}

return <Layout model={model} factory={this.factory} />;
// TODO - Using mouse click but really I want to override the child drag to be the adult drag.
return <Layout model={model} factory={this.factory} onAuxMouseClick={(tn, e)=> {
if(tn instanceof TabNode || tn instanceof TabSetNode) {
model.doAction(Actions.deleteTab(tn.getId()));
this.layoutRef!.current!.addTabWithDragAndDrop(tn.getName(), tn.toJson());
e.stopPropagation(); // else event bubbles to parent tabset
}
}} />;
}
else if (component === "text") {
try {
Expand Down Expand Up @@ -446,7 +467,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
onRenderFloatingTabPlaceholder={this.state.layoutFile === "newfeatures" ? this.onRenderFloatingTabPlaceholder : undefined}
onExternalDrag={this.onExternalDrag}
realtimeResize={this.state.realtimeResize}
onTabDrag={this.state.layoutFile === "newfeatures" ? this.onTabDrag : undefined}
onTabDrag={this.state.layoutFile === "newfeatures" || this.state.layoutFile === "sub" ? this.onTabDrag : undefined}
onContextMenu={this.state.layoutFile === "newfeatures" ? this.onContextMenu : undefined}
onAuxMouseClick={this.state.layoutFile === "newfeatures" ? this.onAuxMouseClick : undefined}
// icons={{
Expand Down