mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Add change icon to tabs
This commit is contained in:
Nick O'Leary
parent
196a9ae43a
commit
363a8b8588
@ -421,6 +421,9 @@ RED.history = (function() {
|
||||
ev.node[i] = ev.changes[i];
|
||||
}
|
||||
}
|
||||
ev.node.dirty = true;
|
||||
ev.node.changed = ev.changed;
|
||||
|
||||
var eventType;
|
||||
switch(ev.node.type) {
|
||||
case 'tab': eventType = "flows"; break;
|
||||
@ -511,8 +514,6 @@ RED.history = (function() {
|
||||
inverseEv.links.push(ev.createdLinks[i]);
|
||||
}
|
||||
}
|
||||
ev.node.dirty = true;
|
||||
ev.node.changed = ev.changed;
|
||||
} else if (ev.t == "createSubflow") {
|
||||
inverseEv = {
|
||||
t: "deleteSubflow",
|
||||
|
||||
@ -46,6 +46,9 @@ RED.nodes = (function() {
|
||||
|
||||
function setDirty(d) {
|
||||
dirty = d;
|
||||
if (!d) {
|
||||
allNodes.clearState()
|
||||
}
|
||||
RED.events.emit("workspace:dirty",{dirty:dirty});
|
||||
}
|
||||
|
||||
@ -238,22 +241,36 @@ RED.nodes = (function() {
|
||||
|
||||
// allNodes holds information about the Flow nodes.
|
||||
var allNodes = (function() {
|
||||
// Map node.id -> node
|
||||
var nodes = {};
|
||||
// Map tab.id -> Array of nodes on that tab
|
||||
var tabMap = {};
|
||||
// Map tab.id -> Set of dirty object ids on that tab
|
||||
var tabDirtyMap = {};
|
||||
// Map tab.id -> Set of object ids of things deleted from the tab that weren't otherwise dirty
|
||||
var tabDeletedNodesMap = {};
|
||||
// Set of object ids of things added to a tab after initial import
|
||||
var addedDirtyObjects = new Set()
|
||||
|
||||
var api = {
|
||||
addTab: function(id) {
|
||||
tabMap[id] = [];
|
||||
tabDirtyMap[id] = new Set();
|
||||
tabDeletedNodesMap[id] = new Set();
|
||||
},
|
||||
hasTab: function(z) {
|
||||
return tabMap.hasOwnProperty(z)
|
||||
},
|
||||
removeTab: function(id) {
|
||||
delete tabMap[id];
|
||||
delete tabDirtyMap[id];
|
||||
delete tabDeletedNodesMap[id];
|
||||
},
|
||||
addNode: function(n) {
|
||||
nodes[n.id] = n;
|
||||
if (tabMap.hasOwnProperty(n.z)) {
|
||||
tabMap[n.z].push(n);
|
||||
api.addObjectToWorkspace(n.z, n.id, n.changed || n.moved)
|
||||
} else {
|
||||
console.warn("Node added to unknown tab/subflow:",n);
|
||||
tabMap["_"] = tabMap["_"] || [];
|
||||
@ -267,8 +284,37 @@ RED.nodes = (function() {
|
||||
if (i > -1) {
|
||||
tabMap[n.z].splice(i,1);
|
||||
}
|
||||
api.removeObjectFromWorkspace(n.z, n.id)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Add an object to our dirty/clean tracking state
|
||||
* @param {String} z
|
||||
* @param {String} id
|
||||
* @param {Boolean} isDirty
|
||||
*/
|
||||
addObjectToWorkspace: function (z, id, isDirty) {
|
||||
if (isDirty) {
|
||||
addedDirtyObjects.add(id)
|
||||
}
|
||||
if (tabDeletedNodesMap[z].has(id)) {
|
||||
tabDeletedNodesMap[z].delete(id)
|
||||
}
|
||||
api.markNodeDirty(z, id, isDirty)
|
||||
},
|
||||
/**
|
||||
* Remove an object from our dirty/clean tracking state
|
||||
* @param {String} z
|
||||
* @param {String} id
|
||||
*/
|
||||
removeObjectFromWorkspace: function (z, id) {
|
||||
if (!addedDirtyObjects.has(id)) {
|
||||
tabDeletedNodesMap[z].add(id)
|
||||
} else {
|
||||
addedDirtyObjects.delete(id)
|
||||
}
|
||||
api.markNodeDirty(z, id, false)
|
||||
},
|
||||
hasNode: function(id) {
|
||||
return nodes.hasOwnProperty(id);
|
||||
},
|
||||
@ -433,6 +479,33 @@ RED.nodes = (function() {
|
||||
clear: function() {
|
||||
nodes = {};
|
||||
tabMap = {};
|
||||
tabDirtyMap = {};
|
||||
tabDeletedNodesMap = {};
|
||||
addedDirtyObjects = new Set();
|
||||
},
|
||||
/**
|
||||
* Clear all internal state on what is dirty.
|
||||
*/
|
||||
clearState: function () {
|
||||
// Called when a deploy happens, we can forget about added/remove
|
||||
// items as they have now been deployed.
|
||||
addedDirtyObjects = new Set()
|
||||
const flowsToCheck = new Set()
|
||||
for (const [z, set] of Object.entries(tabDeletedNodesMap)) {
|
||||
if (set.size > 0) {
|
||||
set.clear()
|
||||
flowsToCheck.add(z)
|
||||
}
|
||||
}
|
||||
for (const [z, set] of Object.entries(tabDirtyMap)) {
|
||||
if (set.size > 0) {
|
||||
set.clear()
|
||||
flowsToCheck.add(z)
|
||||
}
|
||||
}
|
||||
for (const z of flowsToCheck) {
|
||||
api.checkTabState(z)
|
||||
}
|
||||
},
|
||||
eachNode: function(cb) {
|
||||
var nodeList,i,j;
|
||||
@ -510,6 +583,36 @@ RED.nodes = (function() {
|
||||
B._reordered = true;
|
||||
return orderMap[A.id] - orderMap[B.id];
|
||||
})
|
||||
},
|
||||
/**
|
||||
* Update our records if an object is dirty or not
|
||||
* @param {String} z tab id
|
||||
* @param {String} id object id
|
||||
* @param {Boolean} dirty whether the object is dirty or not
|
||||
*/
|
||||
markNodeDirty: function(z, id, dirty) {
|
||||
if (tabDirtyMap[z]) {
|
||||
if (dirty) {
|
||||
tabDirtyMap[z].add(id)
|
||||
} else {
|
||||
tabDirtyMap[z].delete(id)
|
||||
}
|
||||
api.checkTabState(z)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Check if a tab should update its contentsChange flag
|
||||
* @param {String} z tab id
|
||||
*/
|
||||
checkTabState: function (z) {
|
||||
const ws = workspaces[z]
|
||||
if (ws) {
|
||||
const contentsChanged = tabDirtyMap[z].size > 0 || tabDeletedNodesMap[z].size > 0
|
||||
if (!!ws.contentsChanged !== contentsChanged) {
|
||||
ws.contentsChanged = contentsChanged
|
||||
RED.events.emit("flows:change", ws);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return api;
|
||||
@ -597,6 +700,11 @@ RED.nodes = (function() {
|
||||
throw new Error(`Cannot modified property '${prop}' of locked object '${node.type}:${node.id}'`)
|
||||
}
|
||||
}
|
||||
if (node.z && (prop === 'changed' || prop === 'moved')) {
|
||||
setTimeout(() => {
|
||||
allNodes.markNodeDirty(node.z, node.id, node.changed || node.moved)
|
||||
}, 0)
|
||||
}
|
||||
node[prop] = value;
|
||||
return true
|
||||
}
|
||||
@ -666,10 +774,16 @@ RED.nodes = (function() {
|
||||
}
|
||||
if (l.source.z === l.target.z && linkTabMap[l.source.z]) {
|
||||
linkTabMap[l.source.z].push(l);
|
||||
allNodes.addObjectToWorkspace(l.source.z, getLinkId(l), true)
|
||||
}
|
||||
RED.events.emit("links:add",l);
|
||||
}
|
||||
|
||||
function getLinkId(link) {
|
||||
return link.source.id + ':' + link.sourcePort + ':' + link.target.id
|
||||
}
|
||||
|
||||
|
||||
function getNode(id) {
|
||||
if (id in configNodes) {
|
||||
return configNodes[id];
|
||||
@ -864,6 +978,7 @@ RED.nodes = (function() {
|
||||
if (index !== -1) {
|
||||
linkTabMap[l.source.z].splice(index,1)
|
||||
}
|
||||
allNodes.removeObjectFromWorkspace(l.source.z, getLinkId(l))
|
||||
}
|
||||
}
|
||||
RED.events.emit("links:remove",l);
|
||||
@ -1688,6 +1803,7 @@ RED.nodes = (function() {
|
||||
* Options:
|
||||
* - generateIds - whether to replace all node ids
|
||||
* - addFlow - whether to import nodes to a new tab
|
||||
* - markChanged - whether to set changed=true on all newly imported objects
|
||||
* - reimport - if node has a .z property, dont overwrite it
|
||||
* Only applicible when `generateIds` is false
|
||||
* - importMap - how to resolve any conflicts.
|
||||
@ -1696,7 +1812,7 @@ RED.nodes = (function() {
|
||||
* - id:replace - import over the top of existing
|
||||
*/
|
||||
function importNodes(newNodesObj,options) { // createNewIds,createMissingWorkspace) {
|
||||
const defOpts = { generateIds: false, addFlow: false, reimport: false, importMap: {} }
|
||||
const defOpts = { generateIds: false, addFlow: false, markChanged: false, reimport: false, importMap: {} }
|
||||
options = Object.assign({}, defOpts, options)
|
||||
options.importMap = options.importMap || {}
|
||||
const createNewIds = options.generateIds;
|
||||
@ -1722,7 +1838,7 @@ RED.nodes = (function() {
|
||||
newNodes = newNodesObj;
|
||||
}
|
||||
|
||||
if (!$.isArray(newNodes)) {
|
||||
if (!Array.isArray(newNodes)) {
|
||||
newNodes = [newNodes];
|
||||
}
|
||||
|
||||
@ -2020,6 +2136,9 @@ RED.nodes = (function() {
|
||||
if (!n.z) {
|
||||
delete configNode.z;
|
||||
}
|
||||
if (options.markChanged) {
|
||||
configNode.changed = true
|
||||
}
|
||||
if (n.hasOwnProperty('d')) {
|
||||
configNode.d = n.d;
|
||||
}
|
||||
@ -2082,6 +2201,9 @@ RED.nodes = (function() {
|
||||
if (n.hasOwnProperty('g')) {
|
||||
node.g = n.g;
|
||||
}
|
||||
if (options.markChanged) {
|
||||
node.changed = true
|
||||
}
|
||||
if (createNewIds || options.importMap[n.id] === "copy") {
|
||||
if (subflow_denylist[n.z]) {
|
||||
continue;
|
||||
@ -2595,6 +2717,7 @@ RED.nodes = (function() {
|
||||
groupsByZ[group.z] = groupsByZ[group.z] || [];
|
||||
groupsByZ[group.z].push(group);
|
||||
groups[group.id] = group;
|
||||
allNodes.addObjectToWorkspace(group.z, group.id, group.changed || group.moved)
|
||||
RED.events.emit("groups:add",group);
|
||||
return group
|
||||
}
|
||||
@ -2611,7 +2734,7 @@ RED.nodes = (function() {
|
||||
}
|
||||
}
|
||||
RED.group.markDirty(group);
|
||||
|
||||
allNodes.removeObjectFromWorkspace(group.z, group.id)
|
||||
delete groups[group.id];
|
||||
RED.events.emit("groups:remove",group);
|
||||
}
|
||||
@ -2626,6 +2749,7 @@ RED.nodes = (function() {
|
||||
if (!nodeLinks[junction.id]) {
|
||||
nodeLinks[junction.id] = {in:[],out:[]};
|
||||
}
|
||||
allNodes.addObjectToWorkspace(junction.z, junction.id, junction.changed || junction.moved)
|
||||
RED.events.emit("junctions:add", junction)
|
||||
return junction
|
||||
}
|
||||
@ -2637,6 +2761,7 @@ RED.nodes = (function() {
|
||||
}
|
||||
delete junctions[junction.id]
|
||||
delete nodeLinks[junction.id];
|
||||
allNodes.removeObjectFromWorkspace(junction.z, junction.id)
|
||||
RED.events.emit("junctions:remove", junction)
|
||||
|
||||
var removedLinks = links.filter(function(l) { return (l.source === junction) || (l.target === junction); });
|
||||
@ -2874,6 +2999,9 @@ RED.nodes = (function() {
|
||||
RED.view.redraw(true);
|
||||
}
|
||||
});
|
||||
RED.events.on('deploy', function () {
|
||||
allNodes.clearState()
|
||||
})
|
||||
},
|
||||
registry:registry,
|
||||
setNodeList: registry.setNodeList,
|
||||
@ -2976,6 +3104,20 @@ RED.nodes = (function() {
|
||||
}
|
||||
}
|
||||
},
|
||||
eachGroup: function(cb) {
|
||||
for (var group of Object.values(groups)) {
|
||||
if (cb(group) === false) {
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
eachJunction: function(cb) {
|
||||
for (var junction of Object.values(junctions)) {
|
||||
if (cb(junction) === false) {
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
node: getNode,
|
||||
|
||||
|
||||
@ -845,7 +845,6 @@ RED.tabs = (function() {
|
||||
|
||||
var badges = $('<span class="red-ui-tabs-badges"></span>').appendTo(li);
|
||||
if (options.onselect) {
|
||||
$('<i class="red-ui-tabs-badge-changed fa fa-circle"></i>').appendTo(badges);
|
||||
$('<i class="red-ui-tabs-badge-selected fa fa-check-circle"></i>').appendTo(badges);
|
||||
}
|
||||
|
||||
|
||||
@ -79,7 +79,8 @@ RED.contextMenu = (function () {
|
||||
w: 0, h: 0,
|
||||
outputs: 1,
|
||||
inputs: 1,
|
||||
dirty: true
|
||||
dirty: true,
|
||||
moved: true
|
||||
}
|
||||
const historyEvent = {
|
||||
dirty: RED.nodes.dirty(),
|
||||
|
||||
@ -557,12 +557,17 @@ RED.deploy = (function() {
|
||||
} else {
|
||||
RED.notify('<p>' + RED._("deploy.successfulDeploy") + '</p>', "success");
|
||||
}
|
||||
RED.nodes.eachNode(function (node) {
|
||||
const flow = node.z && (RED.nodes.workspace(node.z) || RED.nodes.subflow(node.z) || null);
|
||||
const flowsToLock = new Set()
|
||||
function ensureUnlocked(id) {
|
||||
const flow = id && (RED.nodes.workspace(id) || RED.nodes.subflow(id) || null);
|
||||
const isLocked = flow ? flow.locked : false;
|
||||
if (flow && isLocked) {
|
||||
flow.locked = false;
|
||||
flowsToLock.add(flow)
|
||||
}
|
||||
}
|
||||
RED.nodes.eachNode(function (node) {
|
||||
ensureUnlocked(node.z)
|
||||
if (node.changed) {
|
||||
node.dirty = true;
|
||||
node.changed = false;
|
||||
@ -574,10 +579,32 @@ RED.deploy = (function() {
|
||||
if (node.credentials) {
|
||||
delete node.credentials;
|
||||
}
|
||||
if (flow && isLocked) {
|
||||
flow.locked = isLocked;
|
||||
}
|
||||
});
|
||||
RED.nodes.eachGroup(function (node) {
|
||||
ensureUnlocked(node.z)
|
||||
if (node.changed) {
|
||||
node.dirty = true;
|
||||
node.changed = false;
|
||||
}
|
||||
if (node.moved) {
|
||||
node.dirty = true;
|
||||
node.moved = false;
|
||||
}
|
||||
})
|
||||
RED.nodes.eachJunction(function (node) {
|
||||
ensureUnlocked(node.z)
|
||||
if (node.changed) {
|
||||
node.dirty = true;
|
||||
node.changed = false;
|
||||
}
|
||||
if (node.moved) {
|
||||
node.dirty = true;
|
||||
node.moved = false;
|
||||
}
|
||||
})
|
||||
flowsToLock.forEach(flow => {
|
||||
flow.locked = true
|
||||
})
|
||||
RED.nodes.eachConfig(function (confNode) {
|
||||
confNode.changed = false;
|
||||
if (confNode.credentials) {
|
||||
|
||||
@ -488,7 +488,8 @@ RED.group = (function() {
|
||||
y: Number.POSITIVE_INFINITY,
|
||||
w: 0,
|
||||
h: 0,
|
||||
_def: RED.group.def
|
||||
_def: RED.group.def,
|
||||
changed: true
|
||||
}
|
||||
|
||||
group.z = nodes[0].z;
|
||||
|
||||
@ -145,17 +145,19 @@ RED.sidebar.config = (function() {
|
||||
} else {
|
||||
var currentType = "";
|
||||
nodes.forEach(function(node) {
|
||||
var label = RED.utils.getNodeLabel(node,node.id);
|
||||
var labelText = RED.utils.getNodeLabel(node,node.id);
|
||||
if (node.type != currentType) {
|
||||
$('<li class="red-ui-palette-node-config-type">'+node.type+'</li>').appendTo(list);
|
||||
currentType = node.type;
|
||||
}
|
||||
|
||||
if (node.changed) {
|
||||
labelText += "!!"
|
||||
}
|
||||
var entry = $('<li class="red-ui-palette-node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list);
|
||||
var nodeDiv = $('<div class="red-ui-palette-node-config red-ui-palette-node"></div>').appendTo(entry);
|
||||
entry.data('node',node.id);
|
||||
nodeDiv.data('node',node.id);
|
||||
var label = $('<div class="red-ui-palette-label"></div>').text(label).appendTo(nodeDiv);
|
||||
var label = $('<div class="red-ui-palette-label"></div>').text(labelText).appendTo(nodeDiv);
|
||||
if (node.d) {
|
||||
nodeDiv.addClass("red-ui-palette-node-config-disabled");
|
||||
$('<i class="fa fa-ban"></i>').prependTo(label);
|
||||
|
||||
@ -1191,7 +1191,8 @@ RED.view.tools = (function() {
|
||||
w: 0, h: 0,
|
||||
outputs: 1,
|
||||
inputs: 1,
|
||||
dirty: true
|
||||
dirty: true,
|
||||
moved: true
|
||||
}
|
||||
links = links.filter(function(l) { return !removedLinks.has(l) })
|
||||
if (links.length === 0) {
|
||||
|
||||
@ -1267,7 +1267,8 @@ RED.view = (function() {
|
||||
w: 0, h: 0,
|
||||
outputs: 1,
|
||||
inputs: 1,
|
||||
dirty: true
|
||||
dirty: true,
|
||||
moved: true
|
||||
}
|
||||
historyEvent = {
|
||||
t:'add',
|
||||
@ -3307,7 +3308,7 @@ RED.view = (function() {
|
||||
console.log("Definition error: "+node.type+"."+((portType === PORT_TYPE_INPUT)?"inputLabels":"outputLabels"),err);
|
||||
result = null;
|
||||
}
|
||||
} else if ($.isArray(portLabels)) {
|
||||
} else if (Array.isArray(portLabels)) {
|
||||
result = portLabels[portIndex];
|
||||
}
|
||||
return result;
|
||||
@ -5699,7 +5700,7 @@ RED.view = (function() {
|
||||
if (mouse_mode === RED.state.SELECTING_NODE) {
|
||||
return;
|
||||
}
|
||||
|
||||
const wasDirty = RED.nodes.dirty()
|
||||
var nodesToImport;
|
||||
if (typeof newNodesObj === "string") {
|
||||
if (newNodesObj === "") {
|
||||
@ -5716,7 +5717,7 @@ RED.view = (function() {
|
||||
nodesToImport = newNodesObj;
|
||||
}
|
||||
|
||||
if (!$.isArray(nodesToImport)) {
|
||||
if (!Array.isArray(nodesToImport)) {
|
||||
nodesToImport = [nodesToImport];
|
||||
}
|
||||
if (options.generateDefaultNames) {
|
||||
@ -5749,7 +5750,12 @@ RED.view = (function() {
|
||||
return (n.type === "global-config");
|
||||
});
|
||||
}
|
||||
var result = RED.nodes.import(filteredNodesToImport,{generateIds:options.generateIds, addFlow: addNewFlow, importMap: options.importMap});
|
||||
var result = RED.nodes.import(filteredNodesToImport,{
|
||||
generateIds: options.generateIds,
|
||||
addFlow: addNewFlow,
|
||||
importMap: options.importMap,
|
||||
markChanged: true
|
||||
});
|
||||
if (result) {
|
||||
var new_nodes = result.nodes;
|
||||
var new_links = result.links;
|
||||
@ -5765,7 +5771,7 @@ RED.view = (function() {
|
||||
var new_ms = new_nodes.filter(function(n) { return n.hasOwnProperty("x") && n.hasOwnProperty("y") && n.z == RED.workspaces.active() });
|
||||
new_ms = new_ms.concat(new_groups.filter(function(g) { return g.z === RED.workspaces.active()}))
|
||||
new_ms = new_ms.concat(new_junctions.filter(function(j) { return j.z === RED.workspaces.active()}))
|
||||
var new_node_ids = new_nodes.map(function(n){ n.changed = true; return n.id; });
|
||||
var new_node_ids = new_nodes.map(function(n){ return n.id; });
|
||||
|
||||
clearSelection();
|
||||
movingSet.clear();
|
||||
@ -5852,7 +5858,7 @@ RED.view = (function() {
|
||||
junctions: new_junctions,
|
||||
workspaces: new_workspaces,
|
||||
subflows: new_subflows,
|
||||
dirty:RED.nodes.dirty()
|
||||
dirty: wasDirty
|
||||
};
|
||||
if (movingSet.length() === 0) {
|
||||
RED.nodes.dirty(true);
|
||||
|
||||
@ -375,6 +375,12 @@ RED.workspaces = (function() {
|
||||
$("#red-ui-tab-"+(tab.id.replace(".","-"))).addClass('red-ui-workspace-locked');
|
||||
}
|
||||
|
||||
const changeBadgeContainer = $('<svg class="red-ui-flow-tab-changed red-ui-flow-node-changed" width="10" height="10" viewBox="-1 -1 12 12"></svg>').appendTo("#red-ui-tab-"+(tab.id.replace(".","-")))
|
||||
const changeBadge = document.createElementNS("http://www.w3.org/2000/svg","circle");
|
||||
changeBadge.setAttribute("cx",5);
|
||||
changeBadge.setAttribute("cy",5);
|
||||
changeBadge.setAttribute("r",5);
|
||||
changeBadgeContainer.append(changeBadge)
|
||||
|
||||
RED.menu.setDisabled("menu-item-workspace-delete",activeWorkspace === 0 || workspaceTabCount <= 1);
|
||||
if (workspaceTabCount === 1) {
|
||||
@ -637,6 +643,11 @@ RED.workspaces = (function() {
|
||||
RED.workspaces.show(viewStack[++viewStackPos],true);
|
||||
}
|
||||
})
|
||||
|
||||
RED.events.on("flows:change", (ws) => {
|
||||
$("#red-ui-tab-"+(ws.id.replace(".","-"))).toggleClass('red-ui-workspace-changed',!!(ws.contentsChanged || ws.changed));
|
||||
})
|
||||
|
||||
hideWorkspace();
|
||||
}
|
||||
|
||||
|
||||
@ -105,6 +105,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.red-ui-tab:not(.red-ui-workspace-changed) .red-ui-flow-tab-changed {
|
||||
display: none;
|
||||
}
|
||||
.red-ui-tab.red-ui-workspace-changed .red-ui-flow-tab-changed {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
}
|
||||
|
||||
.red-ui-workspace-locked-icon {
|
||||
display: none;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user