= action.data;
for (let widget of this.getWidgets()) {
@@ -289,10 +318,8 @@ class LayoutManager {
break;
}
case layoutActions.SET_LAYOUT: {
- if (!isEqual(this.model.toJson(), action.data)) {
- this.model = FlexLayout.Model.fromJson(action.data);
- }
- break;
+ next(setLayout(action.data));
+ return;
}
case GeppettoActions.IMPORT_APPLICATION_STATE: {
const incomingState = action.data.redux.layout;
@@ -310,11 +337,50 @@ class LayoutManager {
next(action);
}
if (nextSetLayout) {
- next(setLayout(this.model.toJson()));
+
+ this.fixRowRecursive(this.model._root)
+ next(updateLayout(this.model));
}
};
+ restoreWeight(node: FlexLayout.Node) {
+
+ if(node._getAttr("weight") == 0) {
+ node._setWeight(this.defaultWeights[node.getId()] ?? 50);
+ }
+
+ if(node.getParent()) {
+ this.restoreWeight(node.getParent());
+ }
+ }
+
+ fixRowRecursive(node: FlexLayout.Node) {
+ if(node.getType() === "row" || node.getType() === "tabset") {
+ if(node.getChildren().length === 0) {
+ node._setWeight(0);
+ return true;
+ } else {
+
+
+ let empty = true;
+ for(let child of node.getChildren()) {
+ empty = this.fixRowRecursive(child) && empty;
+ }
+
+ if(!empty) {
+ this.restoreWeight(node);
+ } else {
+ node._setWeight(0);
+ }
+
+ return empty;
+ }
+ }
+ return false;
+
+ }
+
/**
* Add a list of widgets.
*
@@ -368,7 +434,11 @@ class LayoutManager {
case Actions.SET_ACTIVE_TABSET:
break;
case Actions.SELECT_TAB:
- this.store.dispatch(updateWidget({ ...getWidget(this.store, action.data.tabNode), status: WidgetStatus.ACTIVE }))
+ const widget = getWidget(this.store, action.data.tabNode);
+ if (widget && widget.status === WidgetStatus.MINIMIZED) {
+ this.minimizeHelper.restoreWidget(widget);
+ }
+
break;
case Actions.DELETE_TAB: {
if (getWidget(this.store, action.data.node).hideOnClose) {
@@ -385,7 +455,6 @@ class LayoutManager {
// reminder, widgets are not maximised but tabsets are
break;
case Actions.RENAME_TAB:
- this.store.dispatch(updateWidget({ ...getWidget(this.store, action.data.node), name: action.data.text }))
break;
case Actions.ADJUST_SPLIT:
break;
@@ -402,55 +471,12 @@ class LayoutManager {
if (defaultAction) {
this.model.doAction(action);
}
+ this.fixRowRecursive(this.model._root)
const newModel = this.model.toJson();
- if (!isEqual(oldModel, newModel)) {
- this.store.dispatch(setLayout(newModel));
- }
- }
-
- /**
- * Return the id of a tabset based on passed action.
- *
- * @param action
- * @private
- */
- private getTabsetId(action) {
- const widgetId = action.data.fromNode;
- return this.model
- .getNodeById(widgetId)
- .getParent()
- .getId();
- }
-
- /**
- * Find a maximized widget.
- *
- * @private
- */
- private findMaximizedWidget() {
- return this.getWidgets().find(
- (widget) => widget && widget.status == WidgetStatus.MAXIMIZED
- );
- }
-
-
- /**
- * Update maximized widget based on action.
- *
- * @param action
- * @private
- */
- private updateMaximizedWidget(action) {
- const { model } = this;
- const maximizedWidget = this.findMaximizedWidget();
- // check if the current maximized widget is the same than in the action dispatched
- if (maximizedWidget && maximizedWidget.id == action.data.node) {
- // find if there exists another widget in the maximized panel that could take its place
- const panelChildren = model.getActiveTabset().getChildren();
- const index = panelChildren.findIndex(
- (child) => child.getId() == action.data.node
- );
+ if (oldModel !== newModel) {
+
+ this.store.dispatch(updateLayout(this.model));
}
}
@@ -472,10 +498,20 @@ class LayoutManager {
this.widgetFactory.updateWidget(mergedWidget);
- if (this.model.getNodeById(widget.id)) {
+ const node = this.model.getNodeById(widget.id);
+
+
+ if (node) {
model.doAction(Actions.updateNodeAttributes(mergedWidget.id, widget2Node(mergedWidget)));
if (mergedWidget.status == WidgetStatus.ACTIVE) {
model.doAction(FlexLayout.Actions.selectTab(mergedWidget.id));
+ }
+ if((widget.status == WidgetStatus.MAXIMIZED && !node.getParent().isMaximized()) ||
+ (widget.status == WidgetStatus.ACTIVE && node.getParent().isMaximized())) {
+ this.model.doAction(FlexLayout.Actions.maximizeToggle(node.getParent().getId()));
+ }
+ else if(widget.status == WidgetStatus.MINIMIZED && !this.minimizeHelper.isMinimized(widget)) {
+ this.minimizeHelper.minimizeWidget(node.getId());
}
}
diff --git a/geppetto.js/geppetto-client/src/common/layout/actions.ts b/geppetto.js/geppetto-client/src/common/layout/actions.ts
index 24faa58fc..14a04933b 100644
--- a/geppetto.js/geppetto-client/src/common/layout/actions.ts
+++ b/geppetto.js/geppetto-client/src/common/layout/actions.ts
@@ -1,4 +1,5 @@
import { WidgetStatus, Widget, WidgetMap } from './model';
+import * as FlexLayout from '@metacell/geppetto-meta-ui/flex-layout/src/index';
export const layoutActions = {
SET_LAYOUT: 'SET_LAYOUT',
@@ -9,7 +10,8 @@ export const layoutActions = {
ADD_WIDGETS: 'ADD_WIDGETS',
RESET_LAYOUT: 'RESET_LAYOUT',
DESTROY_WIDGET: 'DESTROY_WIDGET',
- REMOVE_WIDGET: 'REMOVE_WIDGET'
+ REMOVE_WIDGET: 'REMOVE_WIDGET',
+ UPDATE_LAYOUT: 'UPDATE_LAYOUT',
};
export const newWidget = ({ path, component, panelName, ...others }) => ({
@@ -50,11 +52,16 @@ export const updateWidget = (newConf: Widget) => ({
* Support action: do not consider as part of the api
* @param id
*/
-export const setLayout = (newLayout => ({
+export const setLayout = ((newLayout: string) => ({
type: layoutActions.SET_LAYOUT,
data: newLayout
}))
+export const updateLayout = ((layout: FlexLayout.Model) => ({
+ type: layoutActions.UPDATE_LAYOUT,
+ data: layout
+}));
+
export const minimizeWidget = id => ({
type: layoutActions.UPDATE_WIDGET,
data: {
diff --git a/geppetto.js/geppetto-client/src/common/layout/helpers/MinimizeHelper.tsx b/geppetto.js/geppetto-client/src/common/layout/helpers/MinimizeHelper.tsx
index 110b3d213..696ce9b6e 100644
--- a/geppetto.js/geppetto-client/src/common/layout/helpers/MinimizeHelper.tsx
+++ b/geppetto.js/geppetto-client/src/common/layout/helpers/MinimizeHelper.tsx
@@ -28,13 +28,17 @@ export class MinimizeHelper {
this.store = store;
}
+ isMinimized(widget: Widget): boolean {
+ return widget.panelName == this.minimizeBorderID;
+ }
+
addMinimizeButtonToTabset(panel, renderValues) {
if (this.isMinimizeEnabled && this.minimizeBorderID) {
if (panel.getChildren().length > 0) {
renderValues.buttons.push(
{
this.minimizeWidget(panel.getSelectedNode().getId());
}}
@@ -51,13 +55,14 @@ export class MinimizeHelper {
* @private
*/
minimizeWidget(widgetId) {
- if(this.store && this.minimizeBorderID){
+ if(this.store && this.minimizeBorderID) {
+
let updatedWidget = { ...getWidget(this.store, widgetId) };
updatedWidget.status = WidgetStatus.MINIMIZED;
updatedWidget.defaultPanel = updatedWidget.panelName;
updatedWidget.panelName = this.minimizeBorderID;
this.store.dispatch(updateWidget(updatedWidget))
- }else{
+ } else{
console.warn("Unable to minimize widget");
}
}
@@ -76,7 +81,7 @@ export class MinimizeHelper {
* @param widget
* @private
*/
- private restoreWidget(widget: Widget) {
+ restoreWidget(widget: Widget) {
const { model } = this;
widget.panelName = widget.defaultPanel;
const panelName = widget.panelName;
diff --git a/geppetto.js/geppetto-client/src/common/layout/reducer.ts b/geppetto.js/geppetto-client/src/common/layout/reducer.ts
index d656865bb..16c35916d 100644
--- a/geppetto.js/geppetto-client/src/common/layout/reducer.ts
+++ b/geppetto.js/geppetto-client/src/common/layout/reducer.ts
@@ -1,8 +1,9 @@
+import * as FlexLayout from '@metacell/geppetto-meta-ui/flex-layout/src/index';
import { layoutActions } from './actions';
import * as General from '../actions';
import { WidgetStatus, WidgetMap, ExtendedNode } from './model'
import layoutInitialState from './defaultLayout';
-export {layoutInitialState};
+export { layoutInitialState };
export interface LayoutState {
global: {
@@ -39,6 +40,9 @@ export const layout = (state = layoutInitialState, action) => {
case layoutActions.SET_LAYOUT: {
return { ...state, ...action.data }
}
+ case layoutActions.UPDATE_LAYOUT: {
+ return { ...state, ...action.data.toJson() }
+ }
case General.IMPORT_APPLICATION_STATE: {
const incomingState = action.data.redux.layout;
@@ -54,7 +58,7 @@ export const layout = (state = layoutInitialState, action) => {
* @param {*} widgets
* @param {*} param1
*/
-function updateWidgetStatus(widgets: WidgetMap, { status, panelName }) {
+function updateWidgetStatus (widgets: WidgetMap, { status, panelName }) {
if (status != WidgetStatus.ACTIVE) {
return widgets;
}
@@ -67,11 +71,11 @@ function updateWidgetStatus(widgets: WidgetMap, { status, panelName }) {
]));
}
-function removeUndefined(obj) {
+function removeUndefined (obj) {
return Object.keys(obj).forEach(key => obj[key] === undefined ? delete obj[key] : '');
}
-function extractPanelName(action) {
+function extractPanelName (action) {
return action.data.component == "Plot" ? "bottomPanel" : "leftPanel";
}
@@ -105,6 +109,39 @@ export const widgets = (state: WidgetMap = {}, action) => {
delete newWidgets[action.data.id];
return newWidgets;
}
+ case layoutActions.UPDATE_LAYOUT: {
+ const model: FlexLayout.Model = action.data;
+ const updatedWidgets = { ...state };
+ const parents = new Set(Object.keys(updatedWidgets).map(widgetId => model.getNodeById(widgetId)).filter(n => n).map(n => n?.getParent()));
+ for (const parent of parents) {
+ for (const i in parent.getChildren()) {
+ const node = parent.getChildren()[i];
+ if (!updatedWidgets[node.getId()]) {
+ continue;
+ }
+ updatedWidgets[node.getId()] = { ... updatedWidgets[node.getId()] };
+ updatedWidgets[node.getId()].name = node.getName()
+ if (parent.getType() !== 'border') {
+ // want to restore previous position when activated
+ updatedWidgets[node.getId()].pos = parseInt(i)
+ }
+
+ updatedWidgets[node.getId()].panelName = parent.getId();
+ if (parent.isMaximized() && node.isVisible()) {
+ updatedWidgets[node.getId()].status = WidgetStatus.MAXIMIZED;
+ } else if (parent.getType() === 'border') {
+ updatedWidgets[node.getId()].status = WidgetStatus.MINIMIZED;
+ } else if (node.isVisible()) {
+ updatedWidgets[node.getId()].status = WidgetStatus.ACTIVE;
+ } else {
+ updatedWidgets[node.getId()].status = WidgetStatus.HIDDEN;
+ }
+ }
+ }
+
+ return updatedWidgets
+ }
+
default:
return state;
}
diff --git a/geppetto.js/geppetto-ui/src/3d-canvas/threeDEngine/ThreeDEngine.js b/geppetto.js/geppetto-ui/src/3d-canvas/threeDEngine/ThreeDEngine.js
index 213b62031..4f718364b 100644
--- a/geppetto.js/geppetto-ui/src/3d-canvas/threeDEngine/ThreeDEngine.js
+++ b/geppetto.js/geppetto-ui/src/3d-canvas/threeDEngine/ThreeDEngine.js
@@ -245,85 +245,82 @@ export default class ThreeDEngine {
/ this.renderer.domElement.width
) * 2 - 1;
- if (event.button === 0) {
- // only for left click
- if (this.pickingEnabled) {
- const intersects = this.getIntersectedObjects();
-
- if (intersects.length > 0) {
- // sort intersects
- const compare = function (a, b) {
- if (a.distance < b.distance) {
- return -1;
- }
- if (a.distance > b.distance) {
- return 1;
- }
- return 0;
+ if (this.pickingEnabled) {
+ const intersects = this.getIntersectedObjects();
+
+ if (intersects.length > 0) {
+ // sort intersects
+ const compare = function (a, b) {
+ if (a.distance < b.distance) {
+ return -1;
}
- intersects.sort(compare);
+ if (a.distance > b.distance) {
+ return 1;
+ }
+ return 0;
}
+ intersects.sort(compare);
+ }
- let selectedMap = {};
- // Iterate and get the first visible item (they are now ordered by proximity)
- for (let i = 0; i < intersects.length; i++) {
- // figure out if the entity is visible
- let instancePath = '';
- let externalMeshId = null;
- let geometryIdentifier = '';
- if (
- Object.prototype.hasOwnProperty.call(
- intersects[i].object,
- 'instancePath'
- )
- ) {
- instancePath = intersects[i].object.instancePath;
- geometryIdentifier
- = intersects[i].object.geometryIdentifier;
- } else if (Object.prototype.hasOwnProperty.call(
- intersects[i].object.parent,
- 'instancePath'
- )) {
- instancePath = intersects[i].object.parent.instancePath;
- geometryIdentifier
- = intersects[i].object.parent.geometryIdentifier;
- }
- else {
- externalMeshId = intersects[i].object.uuid
- geometryIdentifier = null
- }
+ let selectedMap = {};
+ // Iterate and get the first visible item (they are now ordered by proximity)
+ for (let i = 0; i < intersects.length; i++) {
+ // figure out if the entity is visible
+ let instancePath = '';
+ let externalMeshId = null;
+ let geometryIdentifier = '';
+ if (
+ Object.prototype.hasOwnProperty.call(
+ intersects[i].object,
+ 'instancePath'
+ )
+ ) {
+ instancePath = intersects[i].object.instancePath;
+ geometryIdentifier
+ = intersects[i].object.geometryIdentifier;
+ } else if (Object.prototype.hasOwnProperty.call(
+ intersects[i].object.parent,
+ 'instancePath'
+ )) {
+ instancePath = intersects[i].object.parent.instancePath;
+ geometryIdentifier
+ = intersects[i].object.parent.geometryIdentifier;
+ }
+ else {
+ externalMeshId = intersects[i].object.uuid
+ geometryIdentifier = null
+ }
- if (
- (instancePath != null
- && Object.prototype.hasOwnProperty.call(
- this.meshFactory.meshes,
- instancePath
- ))
- || Object.prototype.hasOwnProperty.call(
- this.meshFactory.splitMeshes,
- instancePath
- )
- ) {
- if (!(instancePath in selectedMap)) {
- selectedMap[instancePath] = {
- ...intersects[i],
- geometryIdentifier: geometryIdentifier,
- distanceIndex: i,
- };
- }
+ if (
+ (instancePath != null
+ && Object.prototype.hasOwnProperty.call(
+ this.meshFactory.meshes,
+ instancePath
+ ))
+ || Object.prototype.hasOwnProperty.call(
+ this.meshFactory.splitMeshes,
+ instancePath
+ )
+ ) {
+ if (!(instancePath in selectedMap)) {
+ selectedMap[instancePath] = {
+ ...intersects[i],
+ geometryIdentifier: geometryIdentifier,
+ distanceIndex: i,
+ };
}
- if (externalMeshId != null) {
- if (!(externalMeshId in selectedMap)) {
- selectedMap[externalMeshId] = {
- ...intersects[i],
- distanceIndex: i,
- };
- }
+ }
+ if (externalMeshId != null) {
+ if (!(externalMeshId in selectedMap)) {
+ selectedMap[externalMeshId] = {
+ ...intersects[i],
+ distanceIndex: i,
+ };
}
}
- this.requestFrame();
- this.onSelection(this.selectionStrategy(selectedMap))
}
+ this.requestFrame();
+ this.onSelection(this.selectionStrategy(selectedMap), event)
}
}
}