2020-03-04 22:48:38 +01:00
|
|
|
/**
|
|
|
|
* Copyright JS Foundation and other contributors, http://js.foundation
|
|
|
|
*
|
|
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
* you may not use this file except in compliance with the License.
|
|
|
|
* You may obtain a copy of the License at
|
|
|
|
*
|
|
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
*
|
|
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
* See the License for the specific language governing permissions and
|
|
|
|
* limitations under the License.
|
|
|
|
**/
|
|
|
|
|
|
|
|
RED.group = (function() {
|
|
|
|
|
|
|
|
var _groupEditTemplate = '<script type="text/x-red" data-template-name="group">'+
|
|
|
|
'<div class="form-row">'+
|
|
|
|
'<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
|
|
|
|
'<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">'+
|
|
|
|
'</div>'+
|
|
|
|
|
2020-03-20 21:00:03 +01:00
|
|
|
// '<div class="form-row">'+
|
|
|
|
// '<label>Style</label>'+
|
|
|
|
// '<span style="display: inline-block; min-width: 140px" id="node-input-row-style-stroke">'+
|
|
|
|
// '<label style="width: 70px;margin-right: 10px " for="node-input-style-stroke" data-i18n="editor:common.label.line"></label>'+
|
|
|
|
// '</span>'+
|
|
|
|
// '<span style="display: inline-block; min-width: 140px; margin-left: 10px" id="node-input-row-style-fill">'+
|
|
|
|
// '<label style="width: 70px;margin-right: 10px " for="node-input-style-fill" data-i18n="editor:common.label.fill"></label>'+
|
|
|
|
// '</span>'+
|
|
|
|
// '</div>'+
|
|
|
|
|
2020-03-19 14:41:54 +01:00
|
|
|
'<div class="form-row" id="node-input-row-style-stroke">'+
|
2020-03-20 21:00:03 +01:00
|
|
|
'<label>Style</label>'+
|
|
|
|
'<label style="width: 70px;margin-right:10px" for="node-input-style-stroke" data-i18n="editor:common.label.line"></label>'+
|
|
|
|
'</div>'+
|
|
|
|
'<div class="form-row" style="padding-left: 100px;" id="node-input-row-style-fill">'+
|
|
|
|
'<label style="width: 70px;margin-right: 10px " for="node-input-style-fill" data-i18n="editor:common.label.fill"></label>'+
|
2020-03-04 22:48:38 +01:00
|
|
|
'</div>'+
|
|
|
|
|
2020-03-20 21:00:03 +01:00
|
|
|
'<div class="form-row">'+
|
|
|
|
'<label for="node-input-style-label">Label</label>'+
|
|
|
|
'<input type="checkbox" id="node-input-style-label"/>'+
|
|
|
|
'</div>'+
|
|
|
|
'<div class="form-row" id="node-input-row-style-label-options">'+
|
|
|
|
'<div style="margin-left: 100px; display: inline-block">'+
|
|
|
|
'<div class="form-row">'+
|
|
|
|
'<span style="display: inline-block; min-width: 140px" id="node-input-row-style-label-color">'+
|
|
|
|
'<label style="width: 70px;margin-right: 10px" for="node-input-style-fill">Color</label>'+
|
|
|
|
'</span>'+
|
|
|
|
'</div>'+
|
|
|
|
'<div class="form-row">'+
|
|
|
|
'<span style="display: inline-block; min-width: 140px;" id="node-input-row-style-label-position">'+
|
|
|
|
'<label style="width: 70px;margin-right: 10px " for="node-input-style-label-position">Position</label>'+
|
|
|
|
'</span>'+
|
|
|
|
'</div>'+
|
|
|
|
'</div>'+
|
2020-03-04 22:48:38 +01:00
|
|
|
'</div>'+
|
|
|
|
|
|
|
|
'</script>';
|
|
|
|
|
2020-03-19 14:41:54 +01:00
|
|
|
var colorPalette = [
|
|
|
|
"#ff0000",
|
|
|
|
"#ffC000",
|
|
|
|
"#ffff00",
|
|
|
|
"#92d04f",
|
|
|
|
"#0070c0",
|
|
|
|
"#001f60",
|
|
|
|
"#6f2fa0",
|
|
|
|
"#000000",
|
|
|
|
"#777777"
|
|
|
|
]
|
|
|
|
var colorSteps = 3;
|
|
|
|
var colorCount = colorPalette.length;
|
|
|
|
for (var i=0,len=colorPalette.length*colorSteps;i<len;i++) {
|
|
|
|
var ci = i%colorCount;
|
|
|
|
var j = Math.floor(i/colorCount)+1;
|
|
|
|
var c = colorPalette[ci];
|
|
|
|
var r = parseInt(c.substring(1, 3), 16);
|
|
|
|
var g = parseInt(c.substring(3, 5), 16);
|
|
|
|
var b = parseInt(c.substring(5, 7), 16);
|
|
|
|
var dr = (255-r)/(colorSteps+((ci===colorCount-1) ?0:1));
|
|
|
|
var dg = (255-g)/(colorSteps+((ci===colorCount-1) ?0:1));
|
|
|
|
var db = (255-b)/(colorSteps+((ci===colorCount-1) ?0:1));
|
|
|
|
r = Math.min(255,Math.floor(r+j*dr));
|
|
|
|
g = Math.min(255,Math.floor(g+j*dg));
|
|
|
|
b = Math.min(255,Math.floor(b+j*db));
|
|
|
|
colorPalette.push('#'+((r<<16) + (g<<8) + b).toString(16).padStart(6,'0'));
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2020-03-04 22:48:38 +01:00
|
|
|
var groupDef = {
|
|
|
|
defaults:{
|
|
|
|
name:{value:""},
|
2020-03-09 12:14:18 +01:00
|
|
|
style:{value:{}},
|
|
|
|
nodes:{value:[]}
|
2020-03-04 22:48:38 +01:00
|
|
|
},
|
|
|
|
category: "config",
|
|
|
|
oneditprepare: function() {
|
|
|
|
var style = this.style || {};
|
2020-03-19 14:41:54 +01:00
|
|
|
RED.colorPicker.create({
|
|
|
|
id:"node-input-style-stroke",
|
2020-03-20 21:00:03 +01:00
|
|
|
value: style.stroke || "#a4a4a4",
|
2020-03-19 14:41:54 +01:00
|
|
|
palette: colorPalette,
|
|
|
|
cellPerRow: colorCount,
|
|
|
|
cellWidth: 16,
|
|
|
|
cellHeight: 16,
|
|
|
|
cellMargin: 3,
|
|
|
|
none: true,
|
|
|
|
opacity: style['stroke-opacity'] || 1.0
|
|
|
|
}).appendTo("#node-input-row-style-stroke");
|
|
|
|
RED.colorPicker.create({
|
|
|
|
id:"node-input-style-fill",
|
2020-03-20 21:00:03 +01:00
|
|
|
value: style.fill || "none",
|
2020-03-19 14:41:54 +01:00
|
|
|
palette: colorPalette,
|
|
|
|
cellPerRow: colorCount,
|
|
|
|
cellWidth: 16,
|
|
|
|
cellHeight: 16,
|
|
|
|
cellMargin: 3,
|
|
|
|
none: true,
|
|
|
|
opacity: style['fill-opacity'] || 1.0
|
|
|
|
}).appendTo("#node-input-row-style-fill");
|
2020-03-20 21:00:03 +01:00
|
|
|
|
|
|
|
createLayoutPicker({
|
|
|
|
id:"node-input-style-label-position",
|
|
|
|
value:style["label-position"] || "nw"
|
|
|
|
}).appendTo("#node-input-row-style-label-position");
|
|
|
|
|
|
|
|
RED.colorPicker.create({
|
|
|
|
id:"node-input-style-color",
|
|
|
|
value: style.color || "#a4a4a4",
|
|
|
|
palette: colorPalette,
|
|
|
|
cellPerRow: colorCount,
|
|
|
|
cellWidth: 16,
|
|
|
|
cellHeight: 16,
|
|
|
|
cellMargin: 3
|
|
|
|
}).appendTo("#node-input-row-style-label-color");
|
|
|
|
|
|
|
|
$("#node-input-style-label").toggleButton({
|
|
|
|
enabledLabel: RED._("editor.show"),
|
|
|
|
disabledLabel: RED._("editor.hide")
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
$("#node-input-style-label").on("change", function(evt) {
|
|
|
|
$("#node-input-row-style-label-options").toggle($(this).prop("checked"));
|
|
|
|
})
|
|
|
|
$("#node-input-style-label").prop("checked", this.style.label)
|
|
|
|
$("#node-input-style-label").trigger("change");
|
|
|
|
|
2020-03-04 22:48:38 +01:00
|
|
|
},
|
|
|
|
oneditresize: function(size) {
|
|
|
|
},
|
|
|
|
oneditsave: function() {
|
|
|
|
this.style.stroke = $("#node-input-style-stroke").val();
|
|
|
|
this.style.fill = $("#node-input-style-fill").val();
|
2020-03-19 14:41:54 +01:00
|
|
|
this.style["stroke-opacity"] = $("#node-input-style-stroke-opacity").val();
|
|
|
|
this.style["fill-opacity"] = $("#node-input-style-fill-opacity").val();
|
2020-03-20 21:00:03 +01:00
|
|
|
this.style.label = $("#node-input-style-label").prop("checked");
|
|
|
|
if (this.style.label) {
|
|
|
|
this.style["label-position"] = $("#node-input-style-label-position").val();
|
|
|
|
this.style.color = $("#node-input-style-color").val();
|
|
|
|
} else {
|
|
|
|
delete this.style["label-position"];
|
|
|
|
delete this.style.color;
|
|
|
|
}
|
2020-03-19 14:41:54 +01:00
|
|
|
|
2020-03-20 21:00:03 +01:00
|
|
|
if (this.style["stroke-opacity"] === "1") {
|
|
|
|
delete this.style["stroke-opacity"]
|
|
|
|
}
|
|
|
|
if (this.style["fill-opacity"] === "1") {
|
|
|
|
delete this.style["fill-opacity"]
|
|
|
|
}
|
2020-03-04 22:48:38 +01:00
|
|
|
},
|
|
|
|
set:{
|
|
|
|
module: "node-red"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function init() {
|
|
|
|
|
2020-03-16 11:20:48 +01:00
|
|
|
RED.events.on("view:selection-changed",function(selection) {
|
|
|
|
RED.menu.setDisabled("menu-item-group-group",!!!selection.nodes);
|
2020-03-16 23:51:54 +01:00
|
|
|
RED.menu.setDisabled("menu-item-group-ungroup",!!!selection.nodes || selection.nodes.filter(function(n) { return n.type==='group'}).length === 0);
|
2020-03-16 11:20:48 +01:00
|
|
|
RED.menu.setDisabled("menu-item-group-merge",!!!selection.nodes);
|
2020-03-16 23:51:54 +01:00
|
|
|
RED.menu.setDisabled("menu-item-group-remove",!!!selection.nodes || selection.nodes.filter(function(n) { return !!n.g }).length === 0);
|
2020-03-16 11:20:48 +01:00
|
|
|
});
|
2020-03-04 22:48:38 +01:00
|
|
|
|
|
|
|
RED.actions.add("core:group-selection", function() { groupSelection() })
|
2020-03-05 11:43:28 +01:00
|
|
|
RED.actions.add("core:ungroup-selection", function() { ungroupSelection() })
|
2020-03-05 16:52:26 +01:00
|
|
|
RED.actions.add("core:merge-selection-to-group", function() { mergeSelection() })
|
|
|
|
RED.actions.add("core:remove-selection-from-group", function() { removeSelection() })
|
2020-03-04 22:48:38 +01:00
|
|
|
|
|
|
|
$(_groupEditTemplate).appendTo("#red-ui-editor-node-configs");
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function groupSelection() {
|
|
|
|
var selection = RED.view.selection();
|
|
|
|
if (selection.nodes) {
|
|
|
|
var group = createGroup(selection.nodes);
|
|
|
|
if (group) {
|
2020-03-14 00:01:01 +01:00
|
|
|
var historyEvent = {
|
|
|
|
t:"createGroup",
|
|
|
|
groups: [ group ],
|
|
|
|
dirty: RED.nodes.dirty()
|
|
|
|
}
|
|
|
|
RED.history.push(historyEvent);
|
|
|
|
RED.view.select({nodes:[group]});
|
|
|
|
RED.nodes.dirty(true);
|
2020-03-04 22:48:38 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-03-05 11:43:28 +01:00
|
|
|
function ungroupSelection() {
|
|
|
|
var selection = RED.view.selection();
|
|
|
|
if (selection.nodes) {
|
|
|
|
var newSelection = [];
|
|
|
|
groups = selection.nodes.filter(function(n) { return n.type === "group" });
|
2020-03-14 00:01:01 +01:00
|
|
|
|
|
|
|
var historyEvent = {
|
|
|
|
t:"ungroup",
|
|
|
|
groups: [ ],
|
|
|
|
dirty: RED.nodes.dirty()
|
|
|
|
}
|
|
|
|
RED.history.push(historyEvent);
|
|
|
|
|
|
|
|
|
2020-03-05 11:43:28 +01:00
|
|
|
groups.forEach(function(g) {
|
2020-03-05 16:52:26 +01:00
|
|
|
newSelection = newSelection.concat(ungroup(g))
|
2020-03-14 00:01:01 +01:00
|
|
|
historyEvent.groups.push(g);
|
2020-03-05 16:52:26 +01:00
|
|
|
})
|
2020-03-14 00:01:01 +01:00
|
|
|
RED.history.push(historyEvent);
|
2020-03-05 16:52:26 +01:00
|
|
|
RED.view.select({nodes:newSelection})
|
2020-03-14 00:01:01 +01:00
|
|
|
RED.nodes.dirty(true);
|
2020-03-05 16:52:26 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function ungroup(g) {
|
|
|
|
var nodes = [];
|
|
|
|
var parentGroup = RED.nodes.group(g.g);
|
|
|
|
g.nodes.forEach(function(n) {
|
|
|
|
nodes.push(n);
|
|
|
|
if (parentGroup) {
|
|
|
|
// Move nodes to parent group
|
|
|
|
n.g = parentGroup.id;
|
|
|
|
parentGroup.nodes.push(n);
|
|
|
|
parentGroup.dirty = true;
|
|
|
|
n.dirty = true;
|
|
|
|
} else {
|
|
|
|
delete n.g;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
RED.nodes.removeGroup(g);
|
|
|
|
return nodes;
|
|
|
|
}
|
|
|
|
|
|
|
|
function mergeSelection() {
|
|
|
|
// TODO: this currently creates an entirely new group. Need to merge properties
|
|
|
|
// of any existing group
|
|
|
|
var selection = RED.view.selection();
|
|
|
|
if (selection.nodes) {
|
|
|
|
var nodes = [];
|
2020-03-14 00:01:01 +01:00
|
|
|
|
|
|
|
var historyEvent = {
|
|
|
|
t: "multi",
|
|
|
|
events: []
|
|
|
|
}
|
|
|
|
var ungroupHistoryEvent = {
|
|
|
|
t: "ungroup",
|
|
|
|
groups: []
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2020-03-05 16:52:26 +01:00
|
|
|
var n;
|
|
|
|
var parentGroup;
|
|
|
|
// First pass, check they are all in the same parent
|
|
|
|
// TODO: DRY mergeSelection,removeSelection,...
|
|
|
|
for (var i=0; i<selection.nodes.length; i++) {
|
|
|
|
n = selection.nodes[i];
|
|
|
|
if (i === 0) {
|
|
|
|
parentGroup = n.g;
|
|
|
|
} else if (n.g !== parentGroup) {
|
|
|
|
RED.notify("Cannot merge nodes from different groups","error");
|
|
|
|
return;
|
2020-03-05 11:43:28 +01:00
|
|
|
}
|
2020-03-05 16:52:26 +01:00
|
|
|
}
|
|
|
|
// Second pass, ungroup any groups in the selection and add their contents
|
|
|
|
// to the selection
|
|
|
|
for (var i=0; i<selection.nodes.length; i++) {
|
|
|
|
n = selection.nodes[i];
|
|
|
|
if (n.type === "group") {
|
2020-03-14 00:01:01 +01:00
|
|
|
ungroupHistoryEvent.groups.push(n);
|
2020-03-05 16:52:26 +01:00
|
|
|
nodes = nodes.concat(ungroup(n));
|
|
|
|
} else {
|
|
|
|
nodes.push(n);
|
|
|
|
}
|
|
|
|
n.dirty = true;
|
|
|
|
}
|
2020-03-14 00:01:01 +01:00
|
|
|
if (ungroupHistoryEvent.groups.length > 0) {
|
|
|
|
historyEvent.events.push(ungroupHistoryEvent);
|
|
|
|
}
|
2020-03-05 16:52:26 +01:00
|
|
|
// Finally, create the new group
|
|
|
|
var group = createGroup(nodes);
|
|
|
|
if (group) {
|
|
|
|
RED.view.select({nodes:[group]})
|
|
|
|
}
|
2020-03-14 00:01:01 +01:00
|
|
|
historyEvent.events.push({
|
|
|
|
t:"createGroup",
|
|
|
|
groups: [ group ],
|
|
|
|
dirty: RED.nodes.dirty()
|
|
|
|
});
|
|
|
|
RED.history.push(historyEvent);
|
|
|
|
RED.nodes.dirty(true);
|
2020-03-05 16:52:26 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function removeSelection() {
|
|
|
|
var selection = RED.view.selection();
|
|
|
|
if (selection.nodes) {
|
|
|
|
var nodes = [];
|
|
|
|
var n;
|
2020-03-14 00:01:01 +01:00
|
|
|
var parentGroup = RED.nodes.group(selection.nodes[0].g);
|
2020-03-05 16:52:26 +01:00
|
|
|
if (parentGroup) {
|
2020-03-14 00:01:01 +01:00
|
|
|
try {
|
2020-03-16 23:51:54 +01:00
|
|
|
removeFromGroup(parentGroup,selection.nodes,true);
|
2020-03-14 00:01:01 +01:00
|
|
|
var historyEvent = {
|
|
|
|
t: "removeFromGroup",
|
|
|
|
dirty: RED.nodes.dirty(),
|
|
|
|
group: parentGroup,
|
|
|
|
nodes: selection.nodes
|
2020-03-05 11:43:28 +01:00
|
|
|
}
|
2020-03-14 00:01:01 +01:00
|
|
|
RED.history.push(historyEvent);
|
|
|
|
RED.nodes.dirty(true);
|
|
|
|
} catch(err) {
|
|
|
|
RED.notify(err,"error");
|
|
|
|
return;
|
2020-03-05 16:52:26 +01:00
|
|
|
}
|
|
|
|
}
|
2020-03-14 00:01:01 +01:00
|
|
|
RED.view.select({nodes:selection.nodes})
|
2020-03-05 11:43:28 +01:00
|
|
|
}
|
|
|
|
}
|
2020-03-04 22:48:38 +01:00
|
|
|
function createGroup(nodes) {
|
|
|
|
if (nodes.length === 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
// nodes is an array
|
|
|
|
// each node must be on the same tab (z)
|
|
|
|
var group = {
|
|
|
|
id: RED.nodes.id(),
|
|
|
|
type: 'group',
|
|
|
|
nodes: [],
|
|
|
|
style: {
|
|
|
|
stroke: "#999",
|
|
|
|
fill: "none"
|
|
|
|
},
|
|
|
|
x: Number.POSITIVE_INFINITY,
|
|
|
|
y: Number.POSITIVE_INFINITY,
|
|
|
|
w: 0,
|
|
|
|
h: 0,
|
|
|
|
_def: RED.group.def
|
|
|
|
}
|
|
|
|
try {
|
|
|
|
addToGroup(group,nodes);
|
|
|
|
} catch(err) {
|
|
|
|
RED.notify(err,"error");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
group.z = nodes[0].z;
|
|
|
|
|
|
|
|
RED.nodes.addGroup(group);
|
|
|
|
return group;
|
|
|
|
}
|
|
|
|
function addToGroup(group,nodes) {
|
|
|
|
if (!Array.isArray(nodes)) {
|
|
|
|
nodes = [nodes];
|
|
|
|
}
|
|
|
|
var i,n,z;
|
|
|
|
var g;
|
|
|
|
// First pass - validate we can safely add these nodes to the group
|
|
|
|
for (i=0;i<nodes.length;i++) {
|
|
|
|
n = nodes[i]
|
|
|
|
if (!n.z) {
|
|
|
|
throw new Error("Cannot add node without a z property to a group")
|
|
|
|
}
|
|
|
|
if (!z) {
|
|
|
|
z = n.z;
|
|
|
|
} else if (z !== n.z) {
|
|
|
|
throw new Error("Cannot create group using nodes with different z properties")
|
|
|
|
}
|
|
|
|
if (n.g) {
|
|
|
|
// This is already in a group.
|
|
|
|
// - check they are all in the same group
|
|
|
|
if (!g) {
|
|
|
|
if (i!==0) {
|
|
|
|
// TODO: this might be ok when merging groups
|
|
|
|
throw new Error("Cannot create group using nodes from different groups")
|
|
|
|
}
|
|
|
|
g = n.g
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (g !== n.g) {
|
|
|
|
throw new Error("Cannot create group using nodes from different groups")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (g) {
|
|
|
|
g = RED.nodes.group(g);
|
|
|
|
g.nodes.push(group);
|
2020-03-05 16:52:26 +01:00
|
|
|
g.dirty = true;
|
2020-03-04 22:48:38 +01:00
|
|
|
group.g = g.id;
|
|
|
|
}
|
|
|
|
// Second pass - add them to the group
|
|
|
|
for (i=0;i<nodes.length;i++) {
|
|
|
|
n = nodes[i];
|
|
|
|
if (g && n.g === g.id) {
|
|
|
|
var ni = g.nodes.indexOf(n);
|
|
|
|
if (ni > -1) {
|
|
|
|
g.nodes.splice(ni,1)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
n.g = group.id;
|
2020-03-05 16:52:26 +01:00
|
|
|
n.dirty = true;
|
2020-03-04 22:48:38 +01:00
|
|
|
group.nodes.push(n);
|
|
|
|
group.x = Math.min(group.x,n.x-n.w/2-25-((n._def.button && n._def.align!=="right")?20:0));
|
|
|
|
group.y = Math.min(group.y,n.y-n.h/2-25);
|
2020-03-05 11:43:28 +01:00
|
|
|
group.w = Math.max(group.w,n.x+n.w/2+25+((n._def.button && n._def.align=="right")?20:0) - group.x);
|
2020-03-04 22:48:38 +01:00
|
|
|
group.h = Math.max(group.h,n.y+n.h/2+25-group.y);
|
|
|
|
}
|
|
|
|
}
|
2020-03-16 23:51:54 +01:00
|
|
|
function removeFromGroup(group, nodes, reparent) {
|
2020-03-14 00:01:01 +01:00
|
|
|
if (!Array.isArray(nodes)) {
|
|
|
|
nodes = [nodes];
|
|
|
|
}
|
|
|
|
var n;
|
|
|
|
// First pass, check they are all in the same parent
|
|
|
|
// TODO: DRY mergeSelection,removeSelection,...
|
|
|
|
for (var i=0; i<nodes.length; i++) {
|
|
|
|
if (nodes[i].g !== group.id) {
|
|
|
|
RED.notify("Cannot remove node "+nodes[i].id+" from group it isn't in");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var parentGroup = RED.nodes.group(group.g);
|
|
|
|
for (var i=0; i<nodes.length; i++) {
|
|
|
|
n = nodes[i];
|
|
|
|
n.dirty = true;
|
|
|
|
var index = group.nodes.indexOf(n);
|
|
|
|
group.nodes.splice(index,1);
|
|
|
|
group.dirty = true;
|
2020-03-16 23:51:54 +01:00
|
|
|
if (reparent && group.g) {
|
2020-03-14 00:01:01 +01:00
|
|
|
n.g = group.g
|
|
|
|
parentGroup.nodes.push(n);
|
|
|
|
parentGroup.dirty = true;
|
|
|
|
} else {
|
|
|
|
delete n.g;
|
|
|
|
}
|
2020-03-16 23:51:54 +01:00
|
|
|
|
2020-03-14 00:01:01 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
}
|
2020-03-04 22:48:38 +01:00
|
|
|
|
|
|
|
function getNodes(group,recursive) {
|
|
|
|
var nodes = [];
|
|
|
|
group.nodes.forEach(function(n) {
|
|
|
|
if (!recursive || n.type !== 'group') {
|
|
|
|
nodes.push(n);
|
|
|
|
} else {
|
|
|
|
nodes = nodes.concat(getNodes(n,recursive))
|
|
|
|
}
|
|
|
|
})
|
|
|
|
return nodes;
|
|
|
|
}
|
|
|
|
|
|
|
|
function groupContains(group,item) {
|
|
|
|
if (item.g === group.id) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
for (var i=0;i<group.nodes.length;i++) {
|
|
|
|
if (group.nodes[i].type === "group") {
|
|
|
|
if (groupContains(group.nodes[i],item)) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
function getRootGroup(group) {
|
|
|
|
if (!group.g) {
|
|
|
|
return group;
|
|
|
|
}
|
|
|
|
return getRootGroup(RED.nodes.group(group.g))
|
|
|
|
}
|
|
|
|
|
2020-03-20 21:00:03 +01:00
|
|
|
function createLayoutPicker(options) {
|
|
|
|
|
|
|
|
var container = $("<div>",{style:"display:inline-block"});
|
|
|
|
var layoutHiddenInput = $("<input/>", { id: options.id, type: "hidden", value: options.value }).appendTo(container);
|
|
|
|
|
|
|
|
var layoutButton = $('<button type="button" class="red-ui-button red-ui-editor-node-appearance-button">').appendTo(container);
|
|
|
|
$('<i class="fa fa-caret-down"></i>').appendTo(layoutButton);
|
|
|
|
|
|
|
|
var layoutDispContainer = $('<div>',{class:"red-ui-search-result-node"}).appendTo(layoutButton);
|
|
|
|
var layoutDisp = $('<div>',{class:"red-ui-group-layout-picker-cell-text red-ui-group-layout-text-pos-"}).appendTo(layoutDispContainer);
|
|
|
|
|
|
|
|
var refreshDisplay = function() {
|
|
|
|
var val = layoutHiddenInput.val();
|
|
|
|
layoutDisp.removeClass().addClass("red-ui-group-layout-picker-cell-text red-ui-group-layout-text-pos-"+val)
|
|
|
|
}
|
|
|
|
layoutButton.on("click", function(e) {
|
|
|
|
var picker = $("<div/>", {
|
|
|
|
class: "red-ui-group-layout-picker"
|
|
|
|
}).css({
|
|
|
|
width: "126px"
|
|
|
|
});
|
|
|
|
|
|
|
|
var row = null;
|
|
|
|
|
|
|
|
row = $("<div/>").appendTo(picker);
|
|
|
|
|
|
|
|
for (var y=0;y<2;y++) { //red-ui-group-layout-text-pos
|
|
|
|
var yComponent= "ns"[y];
|
|
|
|
row = $("<div/>").appendTo(picker);
|
|
|
|
for (var x=0;x<3;x++) {
|
|
|
|
var xComponent = ["w","","e"][x];
|
|
|
|
var val = yComponent+xComponent;
|
|
|
|
var button = $("<button/>", { class:"red-ui-search-result-node","data-pos":val }).appendTo(row);
|
|
|
|
button.on("click", function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
layoutHiddenInput.val($(this).data("pos"));
|
|
|
|
layoutPanel.hide()
|
|
|
|
refreshDisplay();
|
|
|
|
});
|
|
|
|
$('<div>',{class:"red-ui-group-layout-picker-cell-text red-ui-group-layout-text-pos-"+val}).appendTo(button);
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
refreshDisplay();
|
|
|
|
var layoutPanel = RED.popover.panel(picker);
|
|
|
|
layoutPanel.show({
|
|
|
|
target: layoutButton
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
refreshDisplay();
|
|
|
|
|
|
|
|
return container;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2020-03-04 22:48:38 +01:00
|
|
|
|
|
|
|
return {
|
|
|
|
def: groupDef,
|
|
|
|
init: init,
|
|
|
|
createGroup: createGroup,
|
2020-03-14 00:01:01 +01:00
|
|
|
ungroup: ungroup,
|
2020-03-04 22:48:38 +01:00
|
|
|
addToGroup: addToGroup,
|
2020-03-14 00:01:01 +01:00
|
|
|
removeFromGroup: removeFromGroup,
|
2020-03-04 22:48:38 +01:00
|
|
|
getNodes: getNodes,
|
|
|
|
contains: groupContains
|
|
|
|
}
|
|
|
|
})();
|