From 8f152a2d755b5a8e8108cea801d9643dcad42fec Mon Sep 17 00:00:00 2001 From: oxixes Date: Tue, 1 Oct 2024 18:46:10 +0200 Subject: [PATCH] Fix widget instance bug and some improvements --- src/js_tests/wirecloud/WidgetSpec.js | 7 ++ src/js_tests/wirecloud/ui/FreeLayoutSpec.js | 119 ++++++++++-------- .../wirecloud/ui/WorkspaceTabViewSpec.js | 6 +- .../platform/static/js/wirecloud/Widget.js | 3 +- .../platform/static/js/wirecloud/Wiring.js | 2 +- .../static/js/wirecloud/WorkspaceTab.js | 5 + .../static/js/wirecloud/ui/FreeLayout.js | 38 +++--- .../wirecloud/ui/WorkspaceTabViewDragboard.js | 2 +- 8 files changed, 107 insertions(+), 75 deletions(-) diff --git a/src/js_tests/wirecloud/WidgetSpec.js b/src/js_tests/wirecloud/WidgetSpec.js index d57dbb8140..f880db0628 100644 --- a/src/js_tests/wirecloud/WidgetSpec.js +++ b/src/js_tests/wirecloud/WidgetSpec.js @@ -2310,6 +2310,13 @@ it("should update the widget information accordingly", () => { + // Force window size to 800 + Object.defineProperty(window, 'innerWidth', { + writable: true, + configurable: true, + value: 750 + }); + const widget = new Wirecloud.Widget(WORKSPACE_TAB, EMPTY_WIDGET_META, { id: "1", layoutConfigurations: WIDGET_LAYOUT_CONFIGS diff --git a/src/js_tests/wirecloud/ui/FreeLayoutSpec.js b/src/js_tests/wirecloud/ui/FreeLayoutSpec.js index 656ea22c4e..a9bfba1e8f 100644 --- a/src/js_tests/wirecloud/ui/FreeLayoutSpec.js +++ b/src/js_tests/wirecloud/ui/FreeLayoutSpec.js @@ -827,109 +827,130 @@ it("should use first placement (bottom-right) when possible", () => { const options = { - width: 10, - height: 10, refposition: {left: 10, bottom: 10} }; - layout.searchBestPosition(options); + const layoutConfig = { + width: 10, + height: 10 + }; + + layout.searchBestPosition(options, layoutConfig, null); - expect(options.width).toBe(10); - expect(options.height).toBe(10); - expect(options.left).toBe(100000); - expect(options.top).toBe(10); + expect(layoutConfig.width).toBe(10); + expect(layoutConfig.height).toBe(10); + expect(layoutConfig.left).toBe(100000); + expect(layoutConfig.top).toBe(10); }); it("should use second placement when possible", () => { const options = { - width: 750000, - height: 20, refposition: {left: 70, right: 90, bottom: 10} }; - layout.searchBestPosition(options); + const layoutConfig = { + width: 750000, + height: 20 + }; + + layout.searchBestPosition(options, layoutConfig, null); - expect(options.width).toBe(750000); - expect(options.height).toBe(20); - expect(options.left).toBe(150000); - expect(options.top).toBe(10); + expect(layoutConfig.width).toBe(750000); + expect(layoutConfig.height).toBe(20); + expect(layoutConfig.left).toBe(150000); + expect(layoutConfig.top).toBe(10); }); it("should use last placement when possible", () => { const options = { - width: 800000, - height: 20, refposition: {left: 80, right: 90, top: 90, bottom: 99} }; - layout.searchBestPosition(options); + const layoutConfig = { + width: 800000, + height: 20 + }; - expect(options.width).toBe(800000); - expect(options.height).toBe(20); - expect(options.left).toBe(100000); - expect(options.top).toBe(70); + layout.searchBestPosition(options, layoutConfig, null); + + expect(layoutConfig.width).toBe(800000); + expect(layoutConfig.height).toBe(20); + expect(layoutConfig.left).toBe(100000); + expect(layoutConfig.top).toBe(70); }); it("should reduce widget height if there is not enough space", () => { const options = { - width: 800000, - height: 100, refposition: {left: 80, right: 90, top: 90, bottom: 99} }; - layout.searchBestPosition(options); + const layoutConfig = { + width: 800000, + height: 100 + }; + + layout.searchBestPosition(options, layoutConfig, null); - expect(options.width).toBe(800000); - expect(options.height).toBe(100); - expect(options.left).toBe(100000); - expect(options.top).toBe(0); + expect(layoutConfig.width).toBe(800000); + expect(layoutConfig.height).toBe(100); + expect(layoutConfig.left).toBe(100000); + expect(layoutConfig.top).toBe(0); }); it("should reduce widget width (rigth side) if there is not enough space", () => { const options = { - width: 950000, - height: 100, refposition: {left: 10, right: 90, top: 0, bottom: 10} }; - layout.searchBestPosition(options); + const layoutConfig = { + width: 950000, + height: 100 + }; + + layout.searchBestPosition(options, layoutConfig, null); - expect(options.width).toBe(900000); - expect(options.height).toBe(100); - expect(options.left).toBe(100000); - expect(options.top).toBe(10); + expect(layoutConfig.width).toBe(900000); + expect(layoutConfig.height).toBe(100); + expect(layoutConfig.left).toBe(100000); + expect(layoutConfig.top).toBe(10); }); it("should reduce widget width (left side) if there is not enough space", () => { const options = { - width: 950000, - height: 100, refposition: {left: 70, right: 90, top: 0, bottom: 10} }; - layout.searchBestPosition(options); + const layoutConfig = { + width: 950000, + height: 100 + }; - expect(options.width).toBe(950000); - expect(options.height).toBe(100); - expect(options.left).toBe(0); - expect(options.top).toBe(10); + layout.searchBestPosition(options, layoutConfig, null); + + expect(layoutConfig.width).toBe(950000); + expect(layoutConfig.height).toBe(100); + expect(layoutConfig.left).toBe(0); + expect(layoutConfig.top).toBe(10); }); it("should allow to use elements inside widget iframes as reference", () => { const options = { - width: 8000, - height: 20, refiframe: document.createElement('iframe'), refposition: {left: 0, right: 9, top: 60, bottom: 69} }; + const layoutConfig = { + width: 8000, + height: 20 + }; + spyOn(Wirecloud.Utils, "getRelativePosition").and.returnValue({x: 20, y: 30}); - layout.searchBestPosition(options); + layout.searchBestPosition(options, layoutConfig, null); - expect(options.width).toBe(8000); - expect(options.height).toBe(20); - expect(options.left).toBe(200000); - expect(options.top).toBe(70); + expect(layoutConfig.width).toBe(8000); + expect(layoutConfig.height).toBe(20); + expect(layoutConfig.left).toBe(200000); + expect(layoutConfig.top).toBe(70); }); }); diff --git a/src/js_tests/wirecloud/ui/WorkspaceTabViewSpec.js b/src/js_tests/wirecloud/ui/WorkspaceTabViewSpec.js index 4e22c4712c..2104aafde6 100644 --- a/src/js_tests/wirecloud/ui/WorkspaceTabViewSpec.js +++ b/src/js_tests/wirecloud/ui/WorkspaceTabViewSpec.js @@ -629,9 +629,9 @@ p.then((created_widget) => { expect(created_widget).toBe(widget); expect(tab.dragboard.freeLayout.searchBestPosition).toHaveBeenCalledTimes(3); - expect(tab.dragboard.freeLayout.searchBestPosition).toHaveBeenCalledWith(jasmine.any(Object), 800); - expect(tab.dragboard.freeLayout.searchBestPosition).toHaveBeenCalledWith(jasmine.any(Object), 900.5); - expect(tab.dragboard.freeLayout.searchBestPosition).toHaveBeenCalledWith(jasmine.any(Object), 1001); + expect(tab.dragboard.freeLayout.searchBestPosition).toHaveBeenCalledWith(jasmine.any(Object), jasmine.any(Object), 800); + expect(tab.dragboard.freeLayout.searchBestPosition).toHaveBeenCalledWith(jasmine.any(Object), jasmine.any(Object), 900.5); + expect(tab.dragboard.freeLayout.searchBestPosition).toHaveBeenCalledWith(jasmine.any(Object), jasmine.any(Object), 1001); done(); }); }); diff --git a/src/wirecloud/platform/static/js/wirecloud/Widget.js b/src/wirecloud/platform/static/js/wirecloud/Widget.js index 990716d1dd..1612f7074d 100644 --- a/src/wirecloud/platform/static/js/wirecloud/Widget.js +++ b/src/wirecloud/platform/static/js/wirecloud/Widget.js @@ -463,8 +463,7 @@ minimized: false, fulldragboard: false, titlevisible: true - }], - titlevisible: true + }] }, data); this.pending_events = []; diff --git a/src/wirecloud/platform/static/js/wirecloud/Wiring.js b/src/wirecloud/platform/static/js/wirecloud/Wiring.js index 6ef92e492a..b011b424b5 100644 --- a/src/wirecloud/platform/static/js/wirecloud/Wiring.js +++ b/src/wirecloud/platform/static/js/wirecloud/Wiring.js @@ -605,7 +605,7 @@ // Init operatorId counter if (priv.operators.length > 0) { - priv.operatorId = priv.operators[priv.operators.length - 1].id + 1; + priv.operatorId = parseInt(priv.operators[priv.operators.length - 1].id) + 1; } else { priv.operatorId = 1; } diff --git a/src/wirecloud/platform/static/js/wirecloud/WorkspaceTab.js b/src/wirecloud/platform/static/js/wirecloud/WorkspaceTab.js index 108890fff4..4723ddebeb 100644 --- a/src/wirecloud/platform/static/js/wirecloud/WorkspaceTab.js +++ b/src/wirecloud/platform/static/js/wirecloud/WorkspaceTab.js @@ -159,6 +159,11 @@ })); } + // Add action to all layout configurations + for (let i = 0; i < options.layoutConfigurations.length; i++) { + options.layoutConfigurations[i].action = 'update'; + } + var content = utils.merge(options, { widget: resource.uri, settings: options.preferences diff --git a/src/wirecloud/platform/static/js/wirecloud/ui/FreeLayout.js b/src/wirecloud/platform/static/js/wirecloud/ui/FreeLayout.js index b201c68f28..65674669d7 100644 --- a/src/wirecloud/platform/static/js/wirecloud/ui/FreeLayout.js +++ b/src/wirecloud/platform/static/js/wirecloud/ui/FreeLayout.js @@ -27,7 +27,7 @@ "use strict"; - const setPosition = function setPosition(position, options, offset, screenWidth) { + const setPosition = function setPosition(position, layoutConfig, offset, screenWidth, options) { delete options.left; delete options.top; delete options.right; @@ -35,20 +35,20 @@ switch (position) { case "top-right": - options.left = offset.x + options.refposition.left - this.dragboard.leftMargin; - options.top = offset.y + options.refposition.top - this.dragboard.topMargin - options.height; + layoutConfig.left = offset.x + options.refposition.left - this.dragboard.leftMargin; + layoutConfig.top = offset.y + options.refposition.top - this.dragboard.topMargin - layoutConfig.height; break; case "top-left": - options.left = offset.x + options.refposition.right - this.dragboard.leftMargin - this.getWidthInPixels(options.width, screenWidth); - options.top = offset.y + options.refposition.top - this.dragboard.topMargin - options.height; + layoutConfig.left = offset.x + options.refposition.right - this.dragboard.leftMargin - this.getWidthInPixels(layoutConfig.width, screenWidth); + layoutConfig.top = offset.y + options.refposition.top - this.dragboard.topMargin - layoutConfig.height; break; case "bottom-right": - options.left = offset.x + options.refposition.left - this.dragboard.leftMargin; - options.top = offset.y + options.refposition.bottom - this.dragboard.topMargin; + layoutConfig.left = offset.x + options.refposition.left - this.dragboard.leftMargin; + layoutConfig.top = offset.y + options.refposition.bottom - this.dragboard.topMargin; break; case "bottom-left": - options.left = offset.x + options.refposition.right - this.dragboard.leftMargin - this.getWidthInPixels(options.width, screenWidth); - options.top = offset.y + options.refposition.bottom - this.dragboard.topMargin; + layoutConfig.left = offset.x + options.refposition.right - this.dragboard.leftMargin - this.getWidthInPixels(layoutConfig.width, screenWidth); + layoutConfig.top = offset.y + options.refposition.bottom - this.dragboard.topMargin; break; } }; @@ -410,7 +410,7 @@ this.newPosition = null; } - searchBestPosition(options, screenWidth) { + searchBestPosition(options, layoutConfig, screenWidth) { let offset = {x: 0, y: 0}; if (options.refiframe != null) { offset = Wirecloud.Utils.getRelativePosition(options.refiframe, this.dragboard.tab.wrapperElement); @@ -421,8 +421,8 @@ const placements = ["bottom-right", "bottom-left", "top-right", "top-left"]; let i = 0; do { - setPosition.call(this, placements[i], options, offset, screenWidth); - weights.push(standsOut.call(this, options, screenWidth)); + setPosition.call(this, placements[i], layoutConfig, offset, screenWidth, options); + weights.push(standsOut.call(this, layoutConfig, screenWidth)); i += 1; } while (weights[i - 1] > 0 && i < placements.length); @@ -430,17 +430,17 @@ const best_weight = Math.min.apply(Math, weights); const index = weights.indexOf(best_weight); const placement = placements[index]; - setPosition.call(this, placement, options, offset, screenWidth); + setPosition.call(this, placement, layoutConfig, offset, screenWidth, options); - options.top = this.adaptRowOffset(options.top + "px").inPixels; - options.left = this.adaptColumnOffset(options.left + "px", screenWidth).inLU; + layoutConfig.top = this.adaptRowOffset(layoutConfig.top + "px").inPixels; + layoutConfig.left = this.adaptColumnOffset(layoutConfig.left + "px", screenWidth).inLU; - if (options.left + options.width >= this.MAX_HLU) { - options.width -= options.left + options.width - this.MAX_HLU; + if (layoutConfig.left + layoutConfig.width >= this.MAX_HLU) { + layoutConfig.width -= layoutConfig.left + layoutConfig.width - this.MAX_HLU; } } else { - options.top = this.adaptRowOffset(options.top + "px").inPixels; - options.left = this.adaptColumnOffset(options.left + "px", screenWidth).inLU; + layoutConfig.top = this.adaptRowOffset(layoutConfig.top + "px").inPixels; + layoutConfig.left = this.adaptColumnOffset(layoutConfig.left + "px", screenWidth).inLU; } } diff --git a/src/wirecloud/platform/static/js/wirecloud/ui/WorkspaceTabViewDragboard.js b/src/wirecloud/platform/static/js/wirecloud/ui/WorkspaceTabViewDragboard.js index bf9e5112c7..a257eb86da 100644 --- a/src/wirecloud/platform/static/js/wirecloud/ui/WorkspaceTabViewDragboard.js +++ b/src/wirecloud/platform/static/js/wirecloud/ui/WorkspaceTabViewDragboard.js @@ -394,7 +394,6 @@ let requiresUpdate = false; const updatedConfig = { id: screenSize.id, - action: 'update' }; if (currentConfig.moreOrEqual !== screenSize.moreOrEqual) { @@ -408,6 +407,7 @@ } if (requiresUpdate) { + updatedConfig.action = 'update'; widgetReqData.layoutConfigurations.push(updatedConfig); } }