Skip to content

Commit

Permalink
Merge branch 'update-gridstack' of https://github.com/node-red-hitach…
Browse files Browse the repository at this point in the history 
…i/node-red-dashboard into node-red-hitachi-update-gridstack
  • Loading branch information
Dave Conway-Jones committed Apr 16, 2020
2 parents 183ab1b + fa63151 commit b97deae
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 93 deletions.
2 changes: 1 addition & 1 deletion gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,4 +167,4 @@ function manifest() {

exports.lint = lint;
exports.default = gulp.series(fixup, jscs, icon, js, css, less, index, fonts, gridstack, manifest);
// need to add back in css.
// need to add back in css.
126 changes: 35 additions & 91 deletions nodes/ui_base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -388,7 +388,6 @@
var oldSpacer; // Spacer not needed after editing

var widthChange; // Group width change
var widgetMove; // Move widget event
var widgetResize; // Change widget event
var widgetDrag; // Drag wiget eevnt

Expand Down Expand Up @@ -788,96 +787,30 @@
//////////////////////////////////
// Move between groups of widgets
//////////////////////////////////
var moveGroupWidget = function(id) {

var toGridID = '#grid'+id;
var toGrid = $(toGridID+'.grid-stack').data('gridstack');

toGrid.container.droppable({
acccept: '.grid-stack-item',
tolerance: 'pointer',
drop: function( event, ui ) {

var fromGridID = '#' + ui.draggable[0].offsetParent.id;

// Move the widget
if (fromGridID !== toGridID) {

var toGridOffset = $(toGridID).offset();
var groupWidth = tabDatas.groups[id].width;

// Reset group width before moving (Grid stack measures)
toGrid.setColumn(groupWidth, true);

// Current widget width factor for x position
var curWidth = ($('#grid1').offset().left - $('#grid0').offset().left) * 0.9;
var xfactor = curWidth / (groupWidth * 40);
xfactor = xfactor > 1.0 ? 1.0 : xfactor;
var x = Math.floor((ui.offset.left - toGridOffset.left)/(40 * xfactor));
var y = Math.floor((ui.offset.top - toGridOffset.top)/47);
var node = {
type: ui.draggable[0].dataset.noderedtype,
id: ui.draggable[0].dataset.noderedid,
x: x,
y: y,
width: ui.draggable[0].dataset.gsWidth,
height: ui.draggable[0].dataset.gsHeight,
auto: (ui.draggable[0].dataset.noderedsizeauto == 'true') ? true : false
};

var dispType = ui.draggable[0].dataset.nodereddisptype;
var dispLabel = ui.draggable[0].dataset.nodereddisplabel;

var item = $('<div></div>', {
'data-noderedtype': node.type,
'data-noderedid': node.id,
'data-nodereddisptype': dispType,
'data-nodereddisplabel': dispLabel,
'data-noderedsizeauto': node.auto
});

if (node.auto === true) {
node.x = 0;
node.width = groupWidth;
node.height = getDefaultHeight(node.id, groupWidth);
}

var itemContent = $('<div></div>', {
addClass: 'grid-stack-item-content',
title: dispLabel + ':' + dispType
});

if (node.auto === true) {
itemContent.append('<i class="fa fa-unlock nr-dashboard-layout-resize-enable"></i>');
itemContent.find('.nr-dashboard-layout-resize-enable').on('click',layoutResizeEnable);
} else {
itemContent.append('<i class="fa fa-lock nr-dashboard-layout-resize-disable"</i>');
itemContent.find('.nr-dashboard-layout-resize-disable').on('click',layoutResizeDisable);
}

itemContent.append('<b>'+ dispLabel +'</b><br/>'+ dispType);
itemContent.appendTo(item);
var newWidget = toGrid.addWidget(
item,
node.x, node.y, node.width, node.height, false, null, null,
ui.draggable[0].dataset.gsMinHeight,
ui.draggable[0].dataset.gsMaxHeight,
node.id);

var fromWidget = ui.draggable[0];
if (node.auto === true) {
$(fromWidget).find('.nr-dashboard-layout-resize-enable').off('click');
} else {
$(fromWidget).find('.nr-dashboard-layout-resize-disable').off('click');
}
var fromGrid = $(fromGridID+'.grid-stack').data('gridstack');
fromGrid.removeWidget(fromWidget);
toGrid.resizable(newWidget, !node.auto);
function handleMove(grid) {
return function(ev, prevWidget, newWidget) {
var elem = newWidget.el[0];
if (elem.getAttribute("data-noderedsizeauto") === "true") {
var id = elem.getAttribute("data-noderedid");
var width = grid.grid.column;
var height = getDefaultHeight(id, width);
grid.move(elem, 0, newWidget.y);
grid.resize(elem, width, height);

var en = $(elem).find('.nr-dashboard-layout-resize-enable');
en.off('click');
en.on('click',layoutResizeEnable);
}
}
});
else {
var ds = $(elem).find('.nr-dashboard-layout-resize-disable');
ds.off('click');
ds.on('click',layoutResizeDisable);
}
};
}



//////////////////////////////////////////
// Widget size change (start event)
//////////////////////////////////////////
Expand Down Expand Up @@ -2072,12 +2005,23 @@
trayBody.css('overflow','auto');
trayBody.append(editor);

/////////////////////////////////////////
// Gridstack.js option
////////////////////////////////////////
var options = {
cellHeight: 46,
verticalMargin: 1,
float: true,
alwaysShowResizeHandle: true,
disableOneColumnMode : true,
acceptWidgets: true
};

/////////////////////////////////////////
// Editor screen generation
/////////////////////////////////////////
oldSpacer = [];
widthChange = [];
widgetMove = [];
widgetResize = [];
widgetDrag = [];
for (var cnt=0; cnt < groups.length; cnt++) {
Expand All @@ -2096,6 +2040,7 @@
// Clear the contents of Grid
var grid = $(gridID+'.grid-stack').data('gridstack');
grid.removeAll();
$(gridID).on("dropped", handleMove(grid));

// Set the width of the display area of gridstack
var groupWidth = Number(groups[cnt].width);
Expand Down Expand Up @@ -2187,8 +2132,7 @@

// Group width change
widthChange.push(new changeGroupWidth(cnt));
// Move widgets between groups (drag and drop)
widgetMove.push(new moveGroupWidget(cnt));

// Resize widget in group (start event)
widgetResize.push(new resizeGroupWidget(cnt));
// Dragging widgets in a group (start event)
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
},
"dependencies": {
"compression": "^1.7.4",
"gridstack": "^0.5.5",
"gridstack": "^0.6.4",
"serve-static": "^1.14.1",
"socket.io": "^2.3.0"
},
Expand Down

0 comments on commit b97deae

Please sign in to comment.