Skip to content

Commit

Permalink
Add resize helper
Browse files Browse the repository at this point in the history 
Signed-off-by: felix.gateru <[email protected]>
  • Loading branch information
@felixgateru @dborovcanin
felixgateru authored and dborovcanin committed Mar 6, 2024
1 parent 9a52a59 commit ac17bd9
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 107 deletions.
9 changes: 8 additions & 1 deletion ui/web/static/css/dashboards.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,5 +121,12 @@ SPDX-License-Identifier: Apache-2.0 */
}

.resize-helper {
border: 10px dotted #000; /* Customize as needed */
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
border: 1px dashed #1d2231;
pointer-events: none;
}
104 changes: 0 additions & 104 deletions ui/web/static/js/charts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1836,13 +1836,6 @@ class Widget {
this.widgetID = widgetID;
this.config = new chartTypes[this.chartData.Type](chartData, widgetID);
this.element = this.#createWidgetElement();
this.resizeObserver = this.initResizeObserver();
this.resizeObserver.observe(this.element);
this.previousSizes = new Map();
this.previousChartSize = {
width: 400,
height: 400,
};
}

#createWidgetElement() {
Expand All @@ -1869,101 +1862,4 @@ class Widget {
});
return newItem;
}

initResizeObserver() {
const resizeObserver = new ResizeObserver((entries) => {
for (let entry of entries) {
const { target } = entry;
const previousSize = previousSizes.get(target) || {
width: target.clientWidth,
height: target.clientHeight,
};
const contentEl = target.querySelector(".item-content");
const gridRightPosition = target.parentNode.getBoundingClientRect().right;
const widgetRightPosition = target.getBoundingClientRect().right;
const isOverflowing = widgetRightPosition > gridRightPosition;
if (isOverflowing) {
target.style.maxWidth = target.clientWidth + "px";
target.style.maxHeight = target.clientHeight + "px";
} else {
target.style.maxWidth = "none";
target.style.maxHeight = "none";
}

if (widgetRightPosition < gridRightPosition - 5) {
// Calculate the change in width and height
var widthChange = target.clientWidth - previousSize.width;
var heightChange = target.clientHeight - previousSize.height;
var itemContentWidth =
parseInt(window.getComputedStyle(contentEl).getPropertyValue("width")) + widthChange;
var itemContentHeight =
parseInt(window.getComputedStyle(contentEl).getPropertyValue("height")) + heightChange;

// Update the previous size for the next callback
previousSizes.set(target, {
width: target.clientWidth,
height: target.clientHeight,
});

target.style.width = target.clientWidth + "px";
target.style.height = target.clientHeight + "px";

contentEl.style.width = itemContentWidth + "px";
contentEl.style.height = itemContentHeight + "px";

// Resize apache echarts chart
const chart = echarts.getInstanceByDom(contentEl);
if (chart) {
chart.resize({
width: itemContentWidth,
height: itemContentHeight,
});
} else {
const cardDiv = target.querySelector(".widgetcard");
const h5Elem = cardDiv.querySelector("h5");
const cardBody = cardDiv.querySelector(".card-body");
const cardFooter = cardDiv.querySelector(".card-footer");

if (entry.contentBoxSize) {
// The standard makes contentBoxSize an array...
if (entry.contentBoxSize[0]) {
h5Elem.style.fontSize =
Math.max(1, entry.contentBoxSize[0].inlineSize / 300) + "rem";
if (cardBody) {
cardBody.style.fontSize =
Math.max(1.5, entry.contentBoxSize[0].inlineSize / 300) + "rem";
}
if (cardFooter) {
cardFooter.style.fontSize =
Math.max(1, entry.contentBoxSize[0].inlineSize / 600) + "rem";
}
} else {
// ...but old versions of Firefox treat it as a single item
h5Elem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize / 300) + "rem";
if (cardBody) {
cardBody.style.fontSize =
Math.max(1.5, entry.contentBoxSize.inlineSize / 300) + "rem";
}
if (cardFooter) {
cardFooter.style.fontSize =
Math.max(1, entry.contentBoxSize.inlineSize / 600) + "rem";
}
}
} else {
h5Elem.style.fontSize = `${Math.max(1, entry.contentRect.width / 300)}rem`;
if (cardBody) {
cardBody.style.fontSize = `${Math.max(1.5, entry.contentRect.width / 300)}rem`;
}
if (cardFooter) {
cardFooter.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
}
}
}
// grid.refreshItems();
// grid.layout(true);
}
}
});
return resizeObserver;
}
}
119 changes: 117 additions & 2 deletions ui/web/static/js/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ function cancelEdit() {
function addWidget(chartData, widgetID) {
let newItem = new Widget(chartData, widgetID);
grid.add(newItem.element);
// resizeObserver.observe(newItem.element);
resizeObserver.observe(newItem.element);
}

function removeGridItem(item) {
Expand Down Expand Up @@ -172,7 +172,7 @@ function editableCanvas() {
height: widgetSize.height,
});
grid.add(newItem, { layout: true });
// resizeObserver.observe(newItem);
resizeObserver.observe(newItem);
});
grid.layout();
}
Expand All @@ -189,6 +189,115 @@ function editableCanvas() {
return grid;
}

const previousSizes = new Map();

const resizeObserver = new ResizeObserver((entries) => {
for (let entry of entries) {
const { target } = entry;
addResizeHelper(target);
border
const resizeHelper = target.querySelector(".resize-helper");
const previousSize = previousSizes.get(target) || {
width: target.clientWidth,
height: target.clientHeight,
};
const contentEl = target.querySelector(".item-content");
const gridRightPosition = target.parentNode.getBoundingClientRect().right;
const widgetRightPosition = resizeHelper.getBoundingClientRect().right;
const isOverflowing = widgetRightPosition > gridRightPosition;
if (isOverflowing) {
resizeHelper.style.maxWidth = target.clientWidth + "px";
resizeHelper.style.maxHeight = target.clientHeight + "px";
} else {
resizeHelper.style.maxWidth = "none";
resizeHelper.style.maxHeight = "none";
}

if (widgetRightPosition < gridRightPosition - 5) {
// Calculate the change in width and height
// var widthChange =
// parseInt(window.getComputedStyle(resizeHelper).getPropertyValue("width")) -
// previousSize.width;
// var heightChange =
// parseInt(window.getComputedStyle(resizeHelper).getPropertyValue("height")) -
// previousSize.height;
// console.log("widthChange", widthChange, "heightChange", heightChange);
// var itemContentWidth =
// parseInt(window.getComputedStyle(contentEl).getPropertyValue("width")) + widthChange;
// var itemContentHeight =
// parseInt(window.getComputedStyle(contentEl).getPropertyValue("height")) + heightChange;

resizeHelper.style.width = target.clientWidth + "px";
resizeHelper.style.height = target.clientHeight + "px";

previousSizes.set(target, {
width: parseInt(window.getComputedStyle(resizeHelper).getPropertyValue("width")),
height: parseInt(window.getComputedStyle(resizeHelper).getPropertyValue("height")),
});

const finalizeResize = (event) => {
contentEl.style.width = resizeHelper.style.width;
contentEl.style.height = resizeHelper.style.height;

// Resize apache echarts chart
const chart = echarts.getInstanceByDom(contentEl);
if (chart) {
chart.resize({
width: parseInt(window.getComputedStyle(resizeHelper).getPropertyValue("width")),
height: parseInt(window.getComputedStyle(resizeHelper).getPropertyValue("height")),
});
} else {
const cardDiv = target.querySelector(".widgetcard");
const h5Elem = cardDiv.querySelector("h5");
const cardBody = cardDiv.querySelector(".card-body");
const cardFooter = cardDiv.querySelector(".card-footer");

if (entry.contentBoxSize) {
// The standard makes contentBoxSize an array...
if (entry.contentBoxSize[0]) {
h5Elem.style.fontSize = Math.max(1, entry.contentBoxSize[0].inlineSize / 300) + "rem";
if (cardBody) {
cardBody.style.fontSize =
Math.max(1.5, entry.contentBoxSize[0].inlineSize / 300) + "rem";
}
if (cardFooter) {
cardFooter.style.fontSize =
Math.max(1, entry.contentBoxSize[0].inlineSize / 600) + "rem";
}
} else {
// ...but old versions of Firefox treat it as a single item
h5Elem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize / 300) + "rem";
if (cardBody) {
cardBody.style.fontSize =
Math.max(1.5, entry.contentBoxSize.inlineSize / 300) + "rem";
}
if (cardFooter) {
cardFooter.style.fontSize =
Math.max(1, entry.contentBoxSize.inlineSize / 600) + "rem";
}
}
} else {
h5Elem.style.fontSize = `${Math.max(1, entry.contentRect.width / 300)}rem`;
if (cardBody) {
cardBody.style.fontSize = `${Math.max(1.5, entry.contentRect.width / 300)}rem`;
}
if (cardFooter) {
cardFooter.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
}
}
}
grid.refreshItems();
grid.layout(true);
document.removeEventListener("mouseup", finalizeResize);
console.log("Resize finalized");
// resizeHelper.remove();
};
document.addEventListener("mouseup", finalizeResize);
// Update the previous size for the next callback
}
}
});

// No widget placeholder
function showNoWidgetPlaceholder() {
const noWidgetPlaceholder = document.querySelector(".no-widget-placeholder");
Expand Down Expand Up @@ -245,3 +354,9 @@ function updateMetadata(layout, savedMetadata) {
}
return upMetadata;
}

function addResizeHelper(element) {
const resizeHelper = document.createElement("div");
resizeHelper.classList.add("resize-helper");
element.appendChild(resizeHelper);
}

0 comments on commit ac17bd9

Please sign in to comment.