Skip to content

Commit

Permalink
Fix widget instance bug and some improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@oxixes
oxixes committed Oct 1, 2024
1 parent 952b9c3 commit 8f152a2
Show file tree
Hide file tree
Showing 8 changed files with 107 additions and 75 deletions.
7 changes: 7 additions & 0 deletions src/js_tests/wirecloud/WidgetSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
119 changes: 70 additions & 49 deletions src/js_tests/wirecloud/ui/FreeLayoutSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});

});
Expand Down
6 changes: 3 additions & 3 deletions src/js_tests/wirecloud/ui/WorkspaceTabViewSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
Expand Down
3 changes: 1 addition & 2 deletions src/wirecloud/platform/static/js/wirecloud/Widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -463,8 +463,7 @@
minimized: false,
fulldragboard: false,
titlevisible: true
}],
titlevisible: true
}]
}, data);

this.pending_events = [];
Expand Down
2 changes: 1 addition & 1 deletion src/wirecloud/platform/static/js/wirecloud/Wiring.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
5 changes: 5 additions & 0 deletions src/wirecloud/platform/static/js/wirecloud/WorkspaceTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
38 changes: 19 additions & 19 deletions src/wirecloud/platform/static/js/wirecloud/ui/FreeLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,28 +27,28 @@

"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;
delete options.bottom;

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;
}
};
Expand Down Expand Up @@ -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);
Expand All @@ -421,26 +421,26 @@
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);

if (weights[i - 1] > 0) {
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;
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/wirecloud/platform/static/js/wirecloud/ui/WorkspaceTabViewDragboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -394,7 +394,6 @@
let requiresUpdate = false;
const updatedConfig = {
id: screenSize.id,
action: 'update'
};

if (currentConfig.moreOrEqual !== screenSize.moreOrEqual) {
Expand All @@ -408,6 +407,7 @@
}

if (requiresUpdate) {
updatedConfig.action = 'update';
widgetReqData.layoutConfigurations.push(updatedConfig);
}
}
Expand Down

0 comments on commit 8f152a2

Please sign in to comment.