mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Add View Tools
This commit is contained in:
parent
0e035e47df
commit
4749c92252
@ -151,6 +151,7 @@ module.exports = function(grunt) {
|
|||||||
"packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js",
|
"packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js",
|
||||||
"packages/node_modules/@node-red/editor-client/src/js/ui/view.js",
|
"packages/node_modules/@node-red/editor-client/src/js/ui/view.js",
|
||||||
"packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js",
|
"packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js",
|
||||||
|
"packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js",
|
||||||
"packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js",
|
"packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js",
|
||||||
"packages/node_modules/@node-red/editor-client/src/js/ui/palette.js",
|
"packages/node_modules/@node-red/editor-client/src/js/ui/palette.js",
|
||||||
"packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js",
|
"packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js",
|
||||||
|
137
packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
vendored
Normal file
137
packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
vendored
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
/**
|
||||||
|
* 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.view.tools = (function() {
|
||||||
|
|
||||||
|
|
||||||
|
function alignToGrid() {
|
||||||
|
var selection = RED.view.selection();
|
||||||
|
if (selection.nodes) {
|
||||||
|
var changedNodes = [];
|
||||||
|
selection.nodes.forEach(function(n) {
|
||||||
|
var x = n.w/2 + Math.round((n.x-n.w/2)/RED.view.gridSize())*RED.view.gridSize();
|
||||||
|
var y = Math.round(n.y/RED.view.gridSize())*RED.view.gridSize();
|
||||||
|
if (n.x !== x || n.y !== y) {
|
||||||
|
changedNodes.push({
|
||||||
|
n:n,
|
||||||
|
ox: n.x,
|
||||||
|
oy: n.y,
|
||||||
|
moved: n.moved
|
||||||
|
});
|
||||||
|
n.x = x;
|
||||||
|
n.y = y;
|
||||||
|
n.dirty = true;
|
||||||
|
n.moved = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (changedNodes.length > 0) {
|
||||||
|
RED.history.push({t:"move",nodes:changedNodes,dirty:RED.nodes.dirty()});
|
||||||
|
RED.nodes.dirty(true);
|
||||||
|
RED.view.redraw(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var moving_set = null;
|
||||||
|
var endMoveSet = false;
|
||||||
|
function endKeyboardMove() {
|
||||||
|
endMoveSet = false;
|
||||||
|
if (moving_set.length > 0) {
|
||||||
|
var ns = [];
|
||||||
|
for (var i=0;i<moving_set.length;i++) {
|
||||||
|
ns.push({n:moving_set[i].n,ox:moving_set[i].ox,oy:moving_set[i].oy,moved:moving_set[i].moved});
|
||||||
|
moving_set[i].n.moved = true;
|
||||||
|
moving_set[i].n.dirty = true;
|
||||||
|
delete moving_set[i].ox;
|
||||||
|
delete moving_set[i].oy;
|
||||||
|
}
|
||||||
|
RED.view.redraw();
|
||||||
|
RED.history.push({t:"move",nodes:ns,dirty:RED.nodes.dirty()});
|
||||||
|
RED.nodes.dirty(true);
|
||||||
|
moving_set = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function moveSelection(dx,dy) {
|
||||||
|
if (moving_set === null) {
|
||||||
|
var selection = RED.view.selection();
|
||||||
|
if (selection.nodes) {
|
||||||
|
moving_set = selection.nodes.map(function(n) { return {n:n}});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (moving_set && moving_set.length > 0) {
|
||||||
|
if (!endMoveSet) {
|
||||||
|
$(document).one('keyup',endKeyboardMove);
|
||||||
|
endMoveSet = true;
|
||||||
|
}
|
||||||
|
var minX = 0;
|
||||||
|
var minY = 0;
|
||||||
|
var node;
|
||||||
|
|
||||||
|
for (var i=0;i<moving_set.length;i++) {
|
||||||
|
node = moving_set[i];
|
||||||
|
if (node.ox == null && node.oy == null) {
|
||||||
|
node.ox = node.n.x;
|
||||||
|
node.oy = node.n.y;
|
||||||
|
node.moved = node.n.moved;
|
||||||
|
}
|
||||||
|
node.n.moved = true;
|
||||||
|
node.n.dirty = true;
|
||||||
|
node.n.x += dx;
|
||||||
|
node.n.y += dy;
|
||||||
|
node.n.dirty = true;
|
||||||
|
minX = Math.min(node.n.x-node.n.w/2-5,minX);
|
||||||
|
minY = Math.min(node.n.y-node.n.h/2-5,minY);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (minX !== 0 || minY !== 0) {
|
||||||
|
for (var n = 0; n<moving_set.length; n++) {
|
||||||
|
node = moving_set[n];
|
||||||
|
node.n.x -= minX;
|
||||||
|
node.n.y -= minY;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RED.view.redraw();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
init: function() {
|
||||||
|
RED.actions.add("core:align-selection-to-grid", alignToGrid);
|
||||||
|
|
||||||
|
RED.actions.add("core:move-selection-up", function() { moveSelection(0,-1);});
|
||||||
|
RED.actions.add("core:move-selection-right", function() { moveSelection(1,0);});
|
||||||
|
RED.actions.add("core:move-selection-down", function() { moveSelection(0,1);});
|
||||||
|
RED.actions.add("core:move-selection-left", function() { moveSelection(-1,0);});
|
||||||
|
|
||||||
|
RED.actions.add("core:step-selection-up", function() { moveSelection(0,-RED.view.gridSize());});
|
||||||
|
RED.actions.add("core:step-selection-right", function() { moveSelection(RED.view.gridSize(),0);});
|
||||||
|
RED.actions.add("core:step-selection-down", function() { moveSelection(0,RED.view.gridSize());});
|
||||||
|
RED.actions.add("core:step-selection-left", function() { moveSelection(-RED.view.gridSize(),0);});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Aligns all selected nodes to the current grid
|
||||||
|
*/
|
||||||
|
alignSelectionToGrid: alignToGrid,
|
||||||
|
/**
|
||||||
|
* Moves all of the selected nodes by the specified amount
|
||||||
|
* @param {Number} dx
|
||||||
|
* @param {Number} dy
|
||||||
|
*/
|
||||||
|
moveSelection: moveSelection
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
@ -488,14 +488,7 @@ RED.view = (function() {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
RED.actions.add("core:move-selection-up", function() { moveSelection(0,-1);});
|
RED.view.tools.init();
|
||||||
RED.actions.add("core:step-selection-up", function() { moveSelection(0,-20);});
|
|
||||||
RED.actions.add("core:move-selection-right", function() { moveSelection(1,0);});
|
|
||||||
RED.actions.add("core:step-selection-right", function() { moveSelection(20,0);});
|
|
||||||
RED.actions.add("core:move-selection-down", function() { moveSelection(0,1);});
|
|
||||||
RED.actions.add("core:step-selection-down", function() { moveSelection(0,20);});
|
|
||||||
RED.actions.add("core:move-selection-left", function() { moveSelection(-1,0);});
|
|
||||||
RED.actions.add("core:step-selection-left", function() { moveSelection(-20,0);});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function generateLinkPath(origX,origY, destX, destY, sc) {
|
function generateLinkPath(origX,origY, destX, destY, sc) {
|
||||||
@ -1374,59 +1367,6 @@ RED.view = (function() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function endKeyboardMove() {
|
|
||||||
endMoveSet = false;
|
|
||||||
if (moving_set.length > 0) {
|
|
||||||
var ns = [];
|
|
||||||
for (var i=0;i<moving_set.length;i++) {
|
|
||||||
ns.push({n:moving_set[i].n,ox:moving_set[i].ox,oy:moving_set[i].oy,moved:moving_set[i].n.moved});
|
|
||||||
moving_set[i].n.moved = true;
|
|
||||||
moving_set[i].n.dirty = true;
|
|
||||||
delete moving_set[i].ox;
|
|
||||||
delete moving_set[i].oy;
|
|
||||||
}
|
|
||||||
redraw();
|
|
||||||
RED.history.push({t:"move",nodes:ns,dirty:RED.nodes.dirty()});
|
|
||||||
RED.nodes.dirty(true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var endMoveSet = false;
|
|
||||||
function moveSelection(dx,dy) {
|
|
||||||
if (moving_set.length > 0) {
|
|
||||||
if (!endMoveSet) {
|
|
||||||
$(document).one('keyup',endKeyboardMove);
|
|
||||||
endMoveSet = true;
|
|
||||||
}
|
|
||||||
var minX = 0;
|
|
||||||
var minY = 0;
|
|
||||||
var node;
|
|
||||||
|
|
||||||
for (var i=0;i<moving_set.length;i++) {
|
|
||||||
node = moving_set[i];
|
|
||||||
node.n.moved = true;
|
|
||||||
node.n.dirty = true;
|
|
||||||
if (node.ox == null && node.oy == null) {
|
|
||||||
node.ox = node.n.x;
|
|
||||||
node.oy = node.n.y;
|
|
||||||
}
|
|
||||||
node.n.x += dx;
|
|
||||||
node.n.y += dy;
|
|
||||||
node.n.dirty = true;
|
|
||||||
minX = Math.min(node.n.x-node.n.w/2-5,minX);
|
|
||||||
minY = Math.min(node.n.y-node.n.h/2-5,minY);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (minX !== 0 || minY !== 0) {
|
|
||||||
for (var n = 0; n<moving_set.length; n++) {
|
|
||||||
node = moving_set[n];
|
|
||||||
node.n.x -= minX;
|
|
||||||
node.n.y -= minY;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
redraw();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function editSelection() {
|
function editSelection() {
|
||||||
if (moving_set.length > 0) {
|
if (moving_set.length > 0) {
|
||||||
var node = moving_set[0].n;
|
var node = moving_set[0].n;
|
||||||
|
Loading…
Reference in New Issue
Block a user