пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 4 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 4 година
пре 4 година
пре 4 година
пре 4 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
пре 10 година
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908
  1. /** Modified from original Node-Red source, for audio system visualization
  2. * vim: set ts=4:
  3. * Copyright 2013, 2014 IBM Corp.
  4. *
  5. * Licensed under the Apache License, Version 2.0 (the "License");
  6. * you may not use this file except in compliance with the License.
  7. * You may obtain a copy of the License at
  8. *
  9. * http://www.apache.org/licenses/LICENSE-2.0
  10. *
  11. * Unless required by applicable law or agreed to in writing, software
  12. * distributed under the License is distributed on an "AS IS" BASIS,
  13. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. * See the License for the specific language governing permissions and
  15. * limitations under the License.
  16. **/
  17. RED.view = (function() {
  18. var space_width = 5000,
  19. space_height = 5000,
  20. lineCurveScale = 0.75,
  21. scaleFactor = 1,
  22. node_width = 100,
  23. node_height = 30;
  24. var touchLongPressTimeout = 1000,
  25. startTouchDistance = 0,
  26. startTouchCenter = [],
  27. moveTouchCenter = [],
  28. touchStartTime = 0;
  29. var activeWorkspace = 0;
  30. var workspaceScrollPositions = {};
  31. var selected_link = null,
  32. mousedown_link = null,
  33. mousedown_node = null,
  34. mousedown_port_type = null,
  35. mousedown_port_index = 0,
  36. mouseup_node = null,
  37. mouse_offset = [0,0],
  38. mouse_position = null,
  39. mouse_mode = 0,
  40. moving_set = [],
  41. dirty = false,
  42. lasso = null,
  43. showStatus = false,
  44. lastClickNode = null,
  45. dblClickPrimed = null,
  46. clickTime = 0,
  47. clickElapsed = 0;
  48. var clipboard = "";
  49. var status_colours = {
  50. "red": "#c00",
  51. "green": "#5a8",
  52. "yellow": "#F9DF31",
  53. "blue": "#53A3F3",
  54. "grey": "#d3d3d3"
  55. };
  56. var outer = d3.select("#chart")
  57. .append("svg:svg")
  58. .attr("width", space_width)
  59. .attr("height", space_height)
  60. .attr("pointer-events", "all")
  61. .style("cursor","crosshair");
  62. var vis = outer
  63. .append('svg:g')
  64. .on("dblclick.zoom", null)
  65. .append('svg:g')
  66. .on("mousemove", canvasMouseMove)
  67. .on("mousedown", canvasMouseDown)
  68. .on("mouseup", canvasMouseUp)
  69. .on("touchend", function() {
  70. clearTimeout(touchStartTime);
  71. touchStartTime = null;
  72. if (RED.touch.radialMenu.active()) {
  73. return;
  74. }
  75. if (lasso) {
  76. outer_background.attr("fill","#fff");
  77. }
  78. canvasMouseUp.call(this);
  79. })
  80. .on("touchcancel", canvasMouseUp)
  81. .on("touchstart", function() {
  82. var touch0;
  83. if (d3.event.touches.length>1) {
  84. clearTimeout(touchStartTime);
  85. touchStartTime = null;
  86. d3.event.preventDefault();
  87. touch0 = d3.event.touches.item(0);
  88. var touch1 = d3.event.touches.item(1);
  89. var a = touch0['pageY']-touch1['pageY'];
  90. var b = touch0['pageX']-touch1['pageX'];
  91. var offset = $("#chart").offset();
  92. var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
  93. startTouchCenter = [
  94. (touch1['pageX']+(b/2)-offset.left+scrollPos[0])/scaleFactor,
  95. (touch1['pageY']+(a/2)-offset.top+scrollPos[1])/scaleFactor
  96. ];
  97. moveTouchCenter = [
  98. touch1['pageX']+(b/2),
  99. touch1['pageY']+(a/2)
  100. ];
  101. startTouchDistance = Math.sqrt((a*a)+(b*b));
  102. } else {
  103. var obj = d3.select(document.body);
  104. touch0 = d3.event.touches.item(0);
  105. var pos = [touch0.pageX,touch0.pageY];
  106. startTouchCenter = [touch0.pageX,touch0.pageY];
  107. startTouchDistance = 0;
  108. var point = d3.touches(this)[0];
  109. touchStartTime = setTimeout(function() {
  110. touchStartTime = null;
  111. showTouchMenu(obj,pos);
  112. //lasso = vis.append('rect')
  113. // .attr("ox",point[0])
  114. // .attr("oy",point[1])
  115. // .attr("rx",2)
  116. // .attr("ry",2)
  117. // .attr("x",point[0])
  118. // .attr("y",point[1])
  119. // .attr("width",0)
  120. // .attr("height",0)
  121. // .attr("class","lasso");
  122. //outer_background.attr("fill","#e3e3f3");
  123. },touchLongPressTimeout);
  124. }
  125. })
  126. .on("touchmove", function(){
  127. if (RED.touch.radialMenu.active()) {
  128. d3.event.preventDefault();
  129. return;
  130. }
  131. var touch0;
  132. if (d3.event.touches.length<2) {
  133. if (touchStartTime) {
  134. touch0 = d3.event.touches.item(0);
  135. var dx = (touch0.pageX-startTouchCenter[0]);
  136. var dy = (touch0.pageY-startTouchCenter[1]);
  137. var d = Math.abs(dx*dx+dy*dy);
  138. if (d > 64) {
  139. clearTimeout(touchStartTime);
  140. touchStartTime = null;
  141. }
  142. } else if (lasso) {
  143. d3.event.preventDefault();
  144. }
  145. canvasMouseMove.call(this);
  146. } else {
  147. touch0 = d3.event.touches.item(0);
  148. var touch1 = d3.event.touches.item(1);
  149. var a = touch0['pageY']-touch1['pageY'];
  150. var b = touch0['pageX']-touch1['pageX'];
  151. var offset = $("#chart").offset();
  152. var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
  153. var moveTouchDistance = Math.sqrt((a*a)+(b*b));
  154. var touchCenter = [
  155. touch1['pageX']+(b/2),
  156. touch1['pageY']+(a/2)
  157. ];
  158. if (!isNaN(moveTouchDistance)) {
  159. oldScaleFactor = scaleFactor;
  160. scaleFactor = Math.min(2,Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/10000)));
  161. var deltaTouchCenter = [ // Try to pan whilst zooming - not 100%
  162. startTouchCenter[0]*(scaleFactor-oldScaleFactor),//-(touchCenter[0]-moveTouchCenter[0]),
  163. startTouchCenter[1]*(scaleFactor-oldScaleFactor) //-(touchCenter[1]-moveTouchCenter[1])
  164. ];
  165. startTouchDistance = moveTouchDistance;
  166. moveTouchCenter = touchCenter;
  167. $("#chart").scrollLeft(scrollPos[0]+deltaTouchCenter[0]);
  168. $("#chart").scrollTop(scrollPos[1]+deltaTouchCenter[1]);
  169. redraw();
  170. }
  171. }
  172. });
  173. var outer_background = vis.append('svg:rect')
  174. .attr('width', space_width)
  175. .attr('height', space_height)
  176. .attr('fill','#fff');
  177. var gridScale = d3.scale.linear().range([0,2000]).domain([0,2000]);
  178. /*
  179. var grid = vis.append('g');
  180. grid.selectAll("line.horizontal").data(gridScale.ticks(100)).enter()
  181. .append("line")
  182. .attr(
  183. {
  184. "class":"horizontal",
  185. "x1" : 0,
  186. "x2" : 2000,
  187. "y1" : function(d){ return gridScale(d);},
  188. "y2" : function(d){ return gridScale(d);},
  189. "fill" : "none",
  190. "shape-rendering" : "crispEdges",
  191. "stroke" : "#eee",
  192. "stroke-width" : "1px"
  193. });
  194. grid.selectAll("line.vertical").data(gridScale.ticks(100)).enter()
  195. .append("line")
  196. .attr(
  197. {
  198. "class":"vertical",
  199. "y1" : 0,
  200. "y2" : 2000,
  201. "x1" : function(d){ return gridScale(d);},
  202. "x2" : function(d){ return gridScale(d);},
  203. "fill" : "none",
  204. "shape-rendering" : "crispEdges",
  205. "stroke" : "#eee",
  206. "stroke-width" : "1px"
  207. });
  208. */
  209. var drag_line = vis.append("svg:path").attr("class", "drag_line");
  210. var workspace_tabs = RED.tabs.create({
  211. id: "workspace-tabs",
  212. onchange: function(tab) {
  213. if (tab.type == "subflow") {
  214. $("#workspace-toolbar").show();
  215. } else {
  216. $("#workspace-toolbar").hide();
  217. }
  218. var chart = $("#chart");
  219. if (activeWorkspace !== 0) {
  220. workspaceScrollPositions[activeWorkspace] = {
  221. left:chart.scrollLeft(),
  222. top:chart.scrollTop()
  223. };
  224. }
  225. var scrollStartLeft = chart.scrollLeft();
  226. var scrollStartTop = chart.scrollTop();
  227. activeWorkspace = tab.id;
  228. if (workspaceScrollPositions[activeWorkspace]) {
  229. chart.scrollLeft(workspaceScrollPositions[activeWorkspace].left);
  230. chart.scrollTop(workspaceScrollPositions[activeWorkspace].top);
  231. } else {
  232. chart.scrollLeft(0);
  233. chart.scrollTop(0);
  234. }
  235. var scrollDeltaLeft = chart.scrollLeft() - scrollStartLeft;
  236. var scrollDeltaTop = chart.scrollTop() - scrollStartTop;
  237. if (mouse_position != null) {
  238. mouse_position[0] += scrollDeltaLeft;
  239. mouse_position[1] += scrollDeltaTop;
  240. }
  241. clearSelection();
  242. RED.nodes.eachNode(function(n) {
  243. n.dirty = true;
  244. });
  245. redraw();
  246. },
  247. ondblclick: function(tab) {
  248. showRenameWorkspaceDialog(tab.id);
  249. },
  250. onadd: function(tab) {
  251. var menuli = $("<li/>");
  252. var menuA = $("<a/>",{tabindex:"-1",href:"#"+tab.id}).appendTo(menuli);
  253. menuA.html(tab.label);
  254. menuA.on("click",function() {
  255. workspace_tabs.activateTab(tab.id);
  256. });
  257. $('#workspace-menu-list').append(menuli);
  258. if (workspace_tabs.count() == 1) {
  259. $('#btn-workspace-delete').parent().addClass("disabled");
  260. } else {
  261. $('#btn-workspace-delete').parent().removeClass("disabled");
  262. }
  263. },
  264. onremove: function(tab) {
  265. if (workspace_tabs.count() == 1) {
  266. $('#btn-workspace-delete').parent().addClass("disabled");
  267. } else {
  268. $('#btn-workspace-delete').parent().removeClass("disabled");
  269. }
  270. $('#workspace-menu-list a[href="#'+tab.id+'"]').parent().remove();
  271. }
  272. });
  273. var workspaceIndex = 0;
  274. function addWorkspace() {
  275. var tabId = RED.nodes.id();
  276. do {
  277. workspaceIndex += 1;
  278. } while($("#workspace-tabs a[title='Sheet "+workspaceIndex+"']").size() !== 0);
  279. var ws = {type:"tab",id:tabId,label:"Sheet "+workspaceIndex};
  280. RED.nodes.addWorkspace(ws);
  281. workspace_tabs.addTab(ws);
  282. workspace_tabs.activateTab(tabId);
  283. RED.history.push({t:'add',workspaces:[ws],dirty:dirty});
  284. RED.view.dirty(true);
  285. }
  286. $('#btn-workspace-add-tab').on("click",addWorkspace);
  287. $('#btn-workspace-add').on("click",addWorkspace);
  288. $('#btn-workspace-edit').on("click",function() {
  289. showRenameWorkspaceDialog(activeWorkspace);
  290. });
  291. $('#btn-workspace-delete').on("click",function() {
  292. deleteWorkspace(activeWorkspace);
  293. });
  294. function deleteWorkspace(id) {
  295. if (workspace_tabs.count() == 1) {
  296. return;
  297. }
  298. var ws = RED.nodes.workspace(id);
  299. $( "#node-dialog-delete-workspace" ).dialog('option','workspace',ws);
  300. $( "#node-dialog-delete-workspace-name" ).text(ws.label);
  301. $( "#node-dialog-delete-workspace" ).dialog('open');
  302. }
  303. function canvasMouseDown() {
  304. if (!mousedown_node && !mousedown_link) {
  305. selected_link = null;
  306. updateSelection();
  307. }
  308. if (mouse_mode === 0) {
  309. if (lasso) {
  310. lasso.remove();
  311. lasso = null;
  312. }
  313. if (!touchStartTime) {
  314. var point = d3.mouse(this);
  315. lasso = vis.append('rect')
  316. .attr("ox",point[0])
  317. .attr("oy",point[1])
  318. .attr("rx",2)
  319. .attr("ry",2)
  320. .attr("x",point[0])
  321. .attr("y",point[1])
  322. .attr("width",0)
  323. .attr("height",0)
  324. .attr("class","lasso");
  325. d3.event.preventDefault();
  326. }
  327. }
  328. }
  329. function canvasMouseMove() {
  330. mouse_position = d3.touches(this)[0]||d3.mouse(this);
  331. // Prevent touch scrolling...
  332. //if (d3.touches(this)[0]) {
  333. // d3.event.preventDefault();
  334. //}
  335. // TODO: auto scroll the container
  336. //var point = d3.mouse(this);
  337. //if (point[0]-container.scrollLeft < 30 && container.scrollLeft > 0) { container.scrollLeft -= 15; }
  338. //console.log(d3.mouse(this),container.offsetWidth,container.offsetHeight,container.scrollLeft,container.scrollTop);
  339. if (lasso) {
  340. var ox = parseInt(lasso.attr("ox"));
  341. var oy = parseInt(lasso.attr("oy"));
  342. var x = parseInt(lasso.attr("x"));
  343. var y = parseInt(lasso.attr("y"));
  344. var w;
  345. var h;
  346. if (mouse_position[0] < ox) {
  347. x = mouse_position[0];
  348. w = ox-x;
  349. } else {
  350. w = mouse_position[0]-x;
  351. }
  352. if (mouse_position[1] < oy) {
  353. y = mouse_position[1];
  354. h = oy-y;
  355. } else {
  356. h = mouse_position[1]-y;
  357. }
  358. lasso
  359. .attr("x",x)
  360. .attr("y",y)
  361. .attr("width",w)
  362. .attr("height",h)
  363. ;
  364. return;
  365. }
  366. if (mouse_mode != RED.state.IMPORT_DRAGGING && !mousedown_node && selected_link == null) {
  367. return;
  368. }
  369. var mousePos;
  370. if (mouse_mode == RED.state.JOINING) {
  371. // update drag line
  372. drag_line.attr("class", "drag_line");
  373. mousePos = mouse_position;
  374. var numOutputs = (mousedown_port_type === 0)?(mousedown_node.outputs || 1):(mousedown_node._def.inputs || 1);
  375. var sourcePort = mousedown_port_index;
  376. var portY = -((numOutputs-1)/2)*13 +13*sourcePort;
  377. var sc = (mousedown_port_type === 0)?1:-1;
  378. var dy = mousePos[1]-(mousedown_node.y+portY);
  379. var dx = mousePos[0]-(mousedown_node.x+sc*mousedown_node.w/2);
  380. var delta = Math.sqrt(dy*dy+dx*dx);
  381. var scale = lineCurveScale;
  382. var scaleY = 0;
  383. if (delta < node_width) {
  384. scale = 0.75-0.75*((node_width-delta)/node_width);
  385. }
  386. if (dx*sc < 0) {
  387. scale += 2*(Math.min(5*node_width,Math.abs(dx))/(5*node_width));
  388. if (Math.abs(dy) < 3*node_height) {
  389. scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ;
  390. }
  391. }
  392. drag_line.attr("d",
  393. "M "+(mousedown_node.x+sc*mousedown_node.w/2)+" "+(mousedown_node.y+portY)+
  394. " C "+(mousedown_node.x+sc*(mousedown_node.w/2+node_width*scale))+" "+(mousedown_node.y+portY+scaleY*node_height)+" "+
  395. (mousePos[0]-sc*(scale)*node_width)+" "+(mousePos[1]-scaleY*node_height)+" "+
  396. mousePos[0]+" "+mousePos[1]
  397. );
  398. d3.event.preventDefault();
  399. } else if (mouse_mode == RED.state.MOVING) {
  400. mousePos = mouse_position;
  401. var d = (mouse_offset[0]-mousePos[0])*(mouse_offset[0]-mousePos[0]) + (mouse_offset[1]-mousePos[1])*(mouse_offset[1]-mousePos[1]);
  402. if (d > 2) {
  403. mouse_mode = RED.state.MOVING_ACTIVE;
  404. clickElapsed = 0;
  405. }
  406. } else if (mouse_mode == RED.state.MOVING_ACTIVE || mouse_mode == RED.state.IMPORT_DRAGGING) {
  407. mousePos = mouse_position;
  408. var node;
  409. var i;
  410. var minX = 0;
  411. var minY = 0;
  412. for (var n = 0; n<moving_set.length; n++) {
  413. node = moving_set[n];
  414. if (d3.event.shiftKey) {
  415. node.n.ox = node.n.x;
  416. node.n.oy = node.n.y;
  417. }
  418. node.n.x = mousePos[0]+node.dx;
  419. node.n.y = mousePos[1]+node.dy;
  420. node.n.dirty = true;
  421. minX = Math.min(node.n.x-node.n.w/2-5,minX);
  422. minY = Math.min(node.n.y-node.n.h/2-5,minY);
  423. }
  424. if (minX !== 0 || minY !== 0) {
  425. for (i = 0; i<moving_set.length; i++) {
  426. node = moving_set[i];
  427. node.n.x -= minX;
  428. node.n.y -= minY;
  429. }
  430. }
  431. if (d3.event.shiftKey && moving_set.length > 0) {
  432. var gridOffset = [0,0];
  433. node = moving_set[0];
  434. gridOffset[0] = node.n.x-(20*Math.floor((node.n.x-node.n.w/2)/20)+node.n.w/2);
  435. gridOffset[1] = node.n.y-(20*Math.floor(node.n.y/20));
  436. if (gridOffset[0] !== 0 || gridOffset[1] !== 0) {
  437. for (i = 0; i<moving_set.length; i++) {
  438. node = moving_set[i];
  439. node.n.x -= gridOffset[0];
  440. node.n.y -= gridOffset[1];
  441. if (node.n.x == node.n.ox && node.n.y == node.n.oy) {
  442. node.dirty = false;
  443. }
  444. }
  445. }
  446. }
  447. }
  448. redraw();
  449. }
  450. function canvasMouseUp() {
  451. if (mousedown_node && mouse_mode == RED.state.JOINING) {
  452. drag_line.attr("class", "drag_line_hidden");
  453. }
  454. if (lasso) {
  455. var x = parseInt(lasso.attr("x"));
  456. var y = parseInt(lasso.attr("y"));
  457. var x2 = x+parseInt(lasso.attr("width"));
  458. var y2 = y+parseInt(lasso.attr("height"));
  459. if (!d3.event.ctrlKey) {
  460. clearSelection();
  461. }
  462. RED.nodes.eachNode(function(n) {
  463. if (n.z == activeWorkspace && !n.selected) {
  464. n.selected = (n.x > x && n.x < x2 && n.y > y && n.y < y2);
  465. if (n.selected) {
  466. n.dirty = true;
  467. moving_set.push({n:n});
  468. }
  469. }
  470. });
  471. updateSelection();
  472. lasso.remove();
  473. lasso = null;
  474. } else if (mouse_mode == RED.state.DEFAULT && mousedown_link == null) {
  475. clearSelection();
  476. updateSelection();
  477. }
  478. if (mouse_mode == RED.state.MOVING_ACTIVE) {
  479. if (moving_set.length > 0) {
  480. var ns = [];
  481. for (var j=0;j<moving_set.length;j++) {
  482. ns.push({n:moving_set[j].n,ox:moving_set[j].ox,oy:moving_set[j].oy});
  483. }
  484. RED.history.push({t:'move',nodes:ns,dirty:dirty});
  485. RED.storage.update();
  486. }
  487. }
  488. if (mouse_mode == RED.state.MOVING || mouse_mode == RED.state.MOVING_ACTIVE) {
  489. for (var i=0;i<moving_set.length;i++) {
  490. delete moving_set[i].ox;
  491. delete moving_set[i].oy;
  492. }
  493. }
  494. if (mouse_mode == RED.state.IMPORT_DRAGGING) {
  495. RED.keyboard.remove(/* ESCAPE */ 27);
  496. setDirty(true);
  497. }
  498. redraw();
  499. // clear mouse event vars
  500. resetMouseVars();
  501. }
  502. $('#btn-zoom-out').click(function() {zoomOut();});
  503. $('#btn-zoom-zero').click(function() {zoomZero();});
  504. $('#btn-zoom-in').click(function() {zoomIn();});
  505. $("#chart").on('DOMMouseScroll mousewheel', function (evt) {
  506. if ( evt.altKey ) {
  507. evt.preventDefault();
  508. evt.stopPropagation();
  509. var move = -(evt.originalEvent.detail) || evt.originalEvent.wheelDelta;
  510. if (move <= 0) { zoomOut(); }
  511. else { zoomIn(); }
  512. }
  513. });
  514. $("#chart").droppable({
  515. accept:".palette_node",
  516. drop: function( event, ui ) {
  517. d3.event = event;
  518. var selected_tool = ui.draggable[0].type;
  519. var mousePos = d3.touches(this)[0]||d3.mouse(this);
  520. mousePos[1] += this.scrollTop;
  521. mousePos[0] += this.scrollLeft;
  522. mousePos[1] /= scaleFactor;
  523. mousePos[0] /= scaleFactor;
  524. var nn = {x: mousePos[0],y:mousePos[1],w:node_width,z:activeWorkspace};
  525. nn.type = selected_tool;
  526. nn._def = RED.nodes.getType(nn.type);
  527. nn.id = RED.nodes.cppName(nn);
  528. nn._def.defaults = nn._def.defaults ? nn._def.defaults : {};
  529. nn._def.defaults.name = { value: nn.id };
  530. nn.outputs = nn._def.outputs;
  531. nn.changed = true;
  532. for (var d in nn._def.defaults) {
  533. if (nn._def.defaults.hasOwnProperty(d)) {
  534. nn[d] = nn._def.defaults[d].value;
  535. }
  536. }
  537. if (nn._def.onadd) {
  538. nn._def.onadd.call(nn);
  539. }
  540. nn.h = Math.max(node_height,(nn.outputs||0) * 15);
  541. RED.history.push({t:'add',nodes:[nn.id],dirty:dirty});
  542. RED.nodes.add(nn);
  543. RED.editor.validateNode(nn);
  544. setDirty(true);
  545. // auto select dropped node - so info shows (if visible)
  546. clearSelection();
  547. nn.selected = true;
  548. moving_set.push({n:nn});
  549. updateSelection();
  550. redraw();
  551. if (nn._def.autoedit) {
  552. RED.editor.edit(nn);
  553. }
  554. }
  555. });
  556. function zoomIn() {
  557. if (scaleFactor < 2) {
  558. scaleFactor += 0.1;
  559. redraw();
  560. }
  561. }
  562. function zoomOut() {
  563. if (scaleFactor > 0.3) {
  564. scaleFactor -= 0.1;
  565. redraw();
  566. }
  567. }
  568. function zoomZero() {
  569. scaleFactor = 1;
  570. redraw();
  571. }
  572. function selectAll() {
  573. RED.nodes.eachNode(function(n) {
  574. if (n.z == activeWorkspace) {
  575. if (!n.selected) {
  576. n.selected = true;
  577. n.dirty = true;
  578. moving_set.push({n:n});
  579. }
  580. }
  581. });
  582. selected_link = null;
  583. updateSelection();
  584. redraw();
  585. }
  586. function clearSelection() {
  587. for (var i=0;i<moving_set.length;i++) {
  588. var n = moving_set[i];
  589. n.n.dirty = true;
  590. n.n.selected = false;
  591. }
  592. moving_set = [];
  593. selected_link = null;
  594. }
  595. function updateSelection() {
  596. if (moving_set.length === 0) {
  597. $("#li-menu-export").addClass("disabled");
  598. $("#li-menu-export-clipboard").addClass("disabled");
  599. $("#li-menu-export-library").addClass("disabled");
  600. } else {
  601. $("#li-menu-export").removeClass("disabled");
  602. $("#li-menu-export-clipboard").removeClass("disabled");
  603. $("#li-menu-export-library").removeClass("disabled");
  604. }
  605. if (moving_set.length === 0 && selected_link == null) {
  606. RED.keyboard.remove(/* backspace */ 8);
  607. RED.keyboard.remove(/* delete */ 46);
  608. RED.keyboard.remove(/* c */ 67);
  609. RED.keyboard.remove(/* x */ 88);
  610. } else {
  611. RED.keyboard.add(/* backspace */ 8,function(){deleteSelection();d3.event.preventDefault();});
  612. RED.keyboard.add(/* delete */ 46,function(){deleteSelection();d3.event.preventDefault();});
  613. RED.keyboard.add(/* c */ 67,{ctrl:true},function(){copySelection();d3.event.preventDefault();});
  614. RED.keyboard.add(/* x */ 88,{ctrl:true},function(){copySelection();deleteSelection();d3.event.preventDefault();});
  615. }
  616. if (moving_set.length === 0) {
  617. RED.keyboard.remove(/* up */ 38);
  618. RED.keyboard.remove(/* down */ 40);
  619. RED.keyboard.remove(/* left */ 37);
  620. RED.keyboard.remove(/* right*/ 39);
  621. } else {
  622. RED.keyboard.add(/* up */ 38, function() { if(d3.event.shiftKey){moveSelection( 0,-20)}else{moveSelection( 0,-1);}d3.event.preventDefault();},endKeyboardMove);
  623. RED.keyboard.add(/* down */ 40, function() { if(d3.event.shiftKey){moveSelection( 0, 20)}else{moveSelection( 0, 1);}d3.event.preventDefault();},endKeyboardMove);
  624. RED.keyboard.add(/* left */ 37, function() { if(d3.event.shiftKey){moveSelection(-20, 0)}else{moveSelection(-1, 0);}d3.event.preventDefault();},endKeyboardMove);
  625. RED.keyboard.add(/* right*/ 39, function() { if(d3.event.shiftKey){moveSelection( 20, 0)}else{moveSelection( 1, 0);}d3.event.preventDefault();},endKeyboardMove);
  626. }
  627. if (moving_set.length == 1) {
  628. RED.sidebar.info.refresh(moving_set[0].n);
  629. RED.nodes.selectNode(moving_set[0].n.type);
  630. } else {
  631. RED.sidebar.info.clear();
  632. }
  633. }
  634. function endKeyboardMove() {
  635. var ns = [];
  636. for (var i=0;i<moving_set.length;i++) {
  637. ns.push({n:moving_set[i].n,ox:moving_set[i].ox,oy:moving_set[i].oy});
  638. delete moving_set[i].ox;
  639. delete moving_set[i].oy;
  640. }
  641. RED.history.push({t:'move',nodes:ns,dirty:dirty});
  642. }
  643. function moveSelection(dx,dy) {
  644. var minX = 0;
  645. var minY = 0;
  646. var node;
  647. for (var i=0;i<moving_set.length;i++) {
  648. node = moving_set[i];
  649. if (node.ox == null && node.oy == null) {
  650. node.ox = node.n.x;
  651. node.oy = node.n.y;
  652. }
  653. node.n.x += dx;
  654. node.n.y += dy;
  655. node.n.dirty = true;
  656. minX = Math.min(node.n.x-node.n.w/2-5,minX);
  657. minY = Math.min(node.n.y-node.n.h/2-5,minY);
  658. }
  659. if (minX !== 0 || minY !== 0) {
  660. for (var n = 0; n<moving_set.length; n++) {
  661. node = moving_set[n];
  662. node.n.x -= minX;
  663. node.n.y -= minY;
  664. }
  665. }
  666. redraw();
  667. }
  668. function deleteSelection() {
  669. var removedNodes = [];
  670. var removedLinks = [];
  671. var startDirty = dirty;
  672. if (moving_set.length > 0) {
  673. for (var i=0;i<moving_set.length;i++) {
  674. var node = moving_set[i].n;
  675. node.selected = false;
  676. if (node.x < 0) {
  677. node.x = 25
  678. }
  679. var rmlinks = RED.nodes.remove(node.id);
  680. for (var j=0; j < rmlinks.length; j++) {
  681. var link = rmlinks[j];
  682. //console.log("delete link: " + link.source.id + ":" + link.sourcePort
  683. // + " -> " + link.target.id + ":" + link.targetPort);
  684. if (link.source == node) {
  685. // reenable input port
  686. var n = link.targetPort;
  687. var rect = link.target.inputlist[n];
  688. rect.on("mousedown", (function(d,n){return function(d){portMouseDown(d,1,n);}})(rect, n))
  689. .on("touchstart", (function(d,n){return function(d){portMouseDown(d,1,n);}})(rect, n))
  690. .on("mouseup", (function(d,n){return function(d){portMouseUp(d,1,n);}})(rect, n))
  691. .on("touchend", (function(d,n){return function(d){portMouseUp(d,1,n);}})(rect, n))
  692. .on("mouseover",function(d) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || mousedown_port_type != 1 ));})
  693. .on("mouseout",function(d) { var port = d3.select(this); port.classed("port_hovered",false);})
  694. }
  695. }
  696. removedNodes.push(node);
  697. removedLinks = removedLinks.concat(rmlinks);
  698. }
  699. moving_set = [];
  700. setDirty(true);
  701. }
  702. if (selected_link) {
  703. // reenable input port
  704. var n = selected_link.targetPort;
  705. var rect = selected_link.target.inputlist[n];
  706. rect.on("mousedown", (function(d,n){return function(d){portMouseDown(d,1,n);}})(rect, n))
  707. .on("touchstart", (function(d,n){return function(d){portMouseDown(d,1,n);}})(rect, n))
  708. .on("mouseup", (function(d,n){return function(d){portMouseUp(d,1,n);}})(rect, n))
  709. .on("touchend", (function(d,n){return function(d){portMouseUp(d,1,n);}})(rect, n))
  710. .on("mouseover",function(d) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || mousedown_port_type != 1 ));})
  711. .on("mouseout",function(d) { var port = d3.select(this); port.classed("port_hovered",false);});
  712. RED.nodes.removeLink(selected_link);
  713. removedLinks.push(selected_link);
  714. setDirty(true);
  715. }
  716. RED.history.push({t:'delete',nodes:removedNodes,links:removedLinks,dirty:startDirty});
  717. selected_link = null;
  718. updateSelection();
  719. redraw();
  720. }
  721. function copySelection() {
  722. if (moving_set.length > 0) {
  723. var nns = [];
  724. for (var n=0;n<moving_set.length;n++) {
  725. var node = moving_set[n].n;
  726. nns.push(RED.nodes.convertNode(node));
  727. }
  728. clipboard = JSON.stringify(nns);
  729. RED.notify(moving_set.length+" node"+(moving_set.length>1?"s":"")+" copied");
  730. }
  731. }
  732. function calculateTextWidth(str) {
  733. var sp = document.createElement("span");
  734. sp.className = "node_label";
  735. sp.style.position = "absolute";
  736. sp.style.top = "-1000px";
  737. sp.innerHTML = (str||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
  738. document.body.appendChild(sp);
  739. var w = sp.offsetWidth;
  740. document.body.removeChild(sp);
  741. return 50+w;
  742. }
  743. function resetMouseVars() {
  744. mousedown_node = null;
  745. mouseup_node = null;
  746. mousedown_link = null;
  747. mouse_mode = 0;
  748. mousedown_port_type = 0;
  749. }
  750. function portMouseDown(d,portType,portIndex) {
  751. // disable zoom
  752. //vis.call(d3.behavior.zoom().on("zoom"), null);
  753. mousedown_node = d;
  754. selected_link = null;
  755. mouse_mode = RED.state.JOINING;
  756. mousedown_port_type = portType;
  757. mousedown_port_index = portIndex || 0;
  758. document.body.style.cursor = "crosshair";
  759. d3.event.preventDefault();
  760. }
  761. function portMouseUp(d,portType,portIndex) {
  762. document.body.style.cursor = "";
  763. if (mouse_mode == RED.state.JOINING && mousedown_node) {
  764. if (typeof TouchEvent != "undefined" && d3.event instanceof TouchEvent) {
  765. RED.nodes.eachNode(function(n) {
  766. if (n.z == activeWorkspace) {
  767. var hw = n.w/2;
  768. var hh = n.h/2;
  769. if (n.x-hw<mouse_position[0] && n.x+hw> mouse_position[0] &&
  770. n.y-hh<mouse_position[1] && n.y+hh>mouse_position[1]) {
  771. mouseup_node = n;
  772. portType = mouseup_node._def.inputs>0?1:0;
  773. portIndex = 0;
  774. }
  775. }
  776. });
  777. } else {
  778. mouseup_node = d;
  779. }
  780. if (portType == mousedown_port_type || mouseup_node === mousedown_node) {
  781. drag_line.attr("class", "drag_line_hidden");
  782. resetMouseVars();
  783. return;
  784. }
  785. var src,dst,src_port,dst_port;
  786. if (mousedown_port_type === 0) {
  787. src = mousedown_node;
  788. src_port = mousedown_port_index;
  789. dst = mouseup_node;
  790. dst_port = portIndex;
  791. } else if (mousedown_port_type == 1) {
  792. src = mouseup_node;
  793. src_port = portIndex;
  794. dst = mousedown_node;
  795. dst_port = mousedown_port_index;
  796. }
  797. var existingLink = false;
  798. RED.nodes.eachLink(function(d) {
  799. existingLink = existingLink || (d.source === src && d.target === dst && d.sourcePort == src_port && d.targetPort == dst_port);
  800. });
  801. if (!existingLink) {
  802. var link = {source: src, sourcePort:src_port, target: dst, targetPort: dst_port};
  803. RED.nodes.addLink(link);
  804. RED.history.push({t:'add',links:[link],dirty:dirty});
  805. setDirty(true);
  806. // disallow new links to this destination - each input can have only a single link
  807. dst.inputlist[dst_port]
  808. .classed("port_hovered",false)
  809. .on("mousedown",null)
  810. .on("touchstart", null)
  811. .on("mouseup", null)
  812. .on("touchend", null)
  813. .on("mouseover", null)
  814. .on("mouseout", null);
  815. }
  816. selected_link = null;
  817. redraw();
  818. }
  819. }
  820. function nodeMouseUp(d) {
  821. if (dblClickPrimed && mousedown_node == d && clickElapsed > 0 && clickElapsed < 750) {
  822. RED.editor.edit(d);
  823. clickElapsed = 0;
  824. d3.event.stopPropagation();
  825. return;
  826. }
  827. portMouseUp(d, d._def.inputs > 0 ? 1 : 0, 0);
  828. }
  829. function nodeMouseDown(d) {
  830. //var touch0 = d3.event;
  831. //var pos = [touch0.pageX,touch0.pageY];
  832. //RED.touch.radialMenu.show(d3.select(this),pos);
  833. if (mouse_mode == RED.state.IMPORT_DRAGGING) {
  834. RED.keyboard.remove(/* ESCAPE */ 27);
  835. updateSelection();
  836. setDirty(true);
  837. redraw();
  838. resetMouseVars();
  839. d3.event.stopPropagation();
  840. return;
  841. }
  842. mousedown_node = d;
  843. var now = Date.now();
  844. clickElapsed = now-clickTime;
  845. clickTime = now;
  846. dblClickPrimed = (lastClickNode == mousedown_node);
  847. lastClickNode = mousedown_node;
  848. var i;
  849. if (d.selected && d3.event.ctrlKey) {
  850. d.selected = false;
  851. for (i=0;i<moving_set.length;i+=1) {
  852. if (moving_set[i].n === d) {
  853. moving_set.splice(i,1);
  854. break;
  855. }
  856. }
  857. } else {
  858. if (d3.event.shiftKey) {
  859. clearSelection();
  860. var cnodes = RED.nodes.getAllFlowNodes(mousedown_node);
  861. for (var n=0;n<cnodes.length;n++) {
  862. cnodes[n].selected = true;
  863. cnodes[n].dirty = true;
  864. moving_set.push({n:cnodes[n]});
  865. }
  866. } else if (!d.selected) {
  867. if (!d3.event.ctrlKey) {
  868. clearSelection();
  869. }
  870. mousedown_node.selected = true;
  871. moving_set.push({n:mousedown_node});
  872. }
  873. selected_link = null;
  874. if (d3.event.button != 2) {
  875. mouse_mode = RED.state.MOVING;
  876. var mouse = d3.touches(this)[0]||d3.mouse(this);
  877. mouse[0] += d.x-d.w/2;
  878. mouse[1] += d.y-d.h/2;
  879. for (i=0;i<moving_set.length;i++) {
  880. moving_set[i].ox = moving_set[i].n.x;
  881. moving_set[i].oy = moving_set[i].n.y;
  882. moving_set[i].dx = moving_set[i].n.x-mouse[0];
  883. moving_set[i].dy = moving_set[i].n.y-mouse[1];
  884. }
  885. mouse_offset = d3.mouse(document.body);
  886. if (isNaN(mouse_offset[0])) {
  887. mouse_offset = d3.touches(document.body)[0];
  888. }
  889. }
  890. }
  891. d.dirty = true;
  892. updateSelection();
  893. redraw();
  894. d3.event.stopPropagation();
  895. }
  896. function nodeButtonClicked(d) {
  897. if (d._def.button.toggle) {
  898. d[d._def.button.toggle] = !d[d._def.button.toggle];
  899. d.dirty = true;
  900. }
  901. if (d._def.button.onclick) {
  902. d._def.button.onclick.call(d);
  903. }
  904. if (d.dirty) {
  905. redraw();
  906. }
  907. d3.event.preventDefault();
  908. }
  909. function showTouchMenu(obj,pos) {
  910. var mdn = mousedown_node;
  911. var options = [];
  912. options.push({name:"delete",disabled:(moving_set.length===0),onselect:function() {deleteSelection();}});
  913. options.push({name:"cut",disabled:(moving_set.length===0),onselect:function() {copySelection();deleteSelection();}});
  914. options.push({name:"copy",disabled:(moving_set.length===0),onselect:function() {copySelection();}});
  915. options.push({name:"paste",disabled:(clipboard.length===0),onselect:function() {importNodes(clipboard,true);}});
  916. options.push({name:"edit",disabled:(moving_set.length != 1),onselect:function() { RED.editor.edit(mdn);}});
  917. options.push({name:"select",onselect:function() {selectAll();}});
  918. options.push({name:"undo",disabled:(RED.history.depth() === 0),onselect:function() {RED.history.pop();}});
  919. RED.touch.radialMenu.show(obj,pos,options);
  920. resetMouseVars();
  921. }
  922. function checkRequirements(d) {
  923. //Add requirements
  924. d.requirementError = false;
  925. d.conflicts = new Array();
  926. d.requirements = new Array();
  927. requirements.forEach(function(r) {
  928. if (r.type == d.type) d.requirements.push(r);
  929. });
  930. //check for conflicts with other nodes:
  931. d.requirements.forEach(function(r) {
  932. RED.nodes.eachNode(function (n2) {
  933. if (n2 != d && n2.requirements != null ) {
  934. n2.requirements.forEach(function(r2) {
  935. if (r["resource"] == r2["resource"]) {
  936. if (r["shareable"] == false ) {
  937. var msg = "Conflict: shareable '"+r["resource"]+"' "+d.name+" and "+n2.name;
  938. console.log(msg);
  939. msg = n2.name + " uses " + r["resource"] + ", too";
  940. d.conflicts.push(msg);
  941. d.requirementError = true;
  942. }
  943. //else
  944. if (r["setting"] != r2["setting"]) {
  945. var msg = "Conflict: "+ d.name + " setting['"+r["setting"]+"'] and "+n2.name+" setting['"+r2["setting"]+"']";
  946. console.log(msg);
  947. msg = n2.name + " has different settings: " + r["setting"] + " ./. " + r2["setting"];
  948. d.conflicts.push(msg);
  949. d.requirementError = true;
  950. }
  951. }
  952. });
  953. }
  954. });
  955. });
  956. }
  957. function redraw() {
  958. vis.attr("transform","scale("+scaleFactor+")");
  959. outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor);
  960. if (mouse_mode != RED.state.JOINING) {
  961. // Don't bother redrawing nodes if we're drawing links
  962. var node = vis.selectAll(".nodegroup").data(RED.nodes.nodes.filter(function(d) { return d.z == activeWorkspace }),function(d){return d.id});
  963. node.exit().remove();
  964. var nodeEnter = node.enter().insert("svg:g").attr("class", "node nodegroup");
  965. nodeEnter.each(function(d,i) {
  966. var node = d3.select(this);
  967. node.attr("id",d.id);
  968. //var l = d._def.label;
  969. //l = (typeof l === "function" ? l.call(d) : l)||"";
  970. var l = d.name ? d.name : d.id;
  971. d.w = Math.max(node_width,calculateTextWidth(l)+(d._def.inputs>0?7:0) );
  972. d.h = Math.max(node_height,(Math.max(d.outputs,d._def.inputs)||0) * 15);
  973. checkRequirements(d);
  974. if (d._def.badge) {
  975. var badge = node.append("svg:g").attr("class","node_badge_group");
  976. var badgeRect = badge.append("rect").attr("class","node_badge").attr("rx",5).attr("ry",5).attr("width",40).attr("height",15);
  977. badge.append("svg:text").attr("class","node_badge_label").attr("x",35).attr("y",11).attr('text-anchor','end').text(d._def.badge());
  978. if (d._def.onbadgeclick) {
  979. badgeRect.attr("cursor","pointer")
  980. .on("click",function(d) { d._def.onbadgeclick.call(d);d3.event.preventDefault();});
  981. }
  982. }
  983. if (d._def.button) {
  984. var nodeButtonGroup = node.append('svg:g')
  985. .attr("transform",function(d) { return "translate("+((d._def.align == "right") ? 94 : -25)+",2)"; })
  986. .attr("class",function(d) { return "node_button "+((d._def.align == "right") ? "node_right_button" : "node_left_button"); });
  987. nodeButtonGroup.append('rect')
  988. .attr("rx",8)
  989. .attr("ry",8)
  990. .attr("width",32)
  991. .attr("height",node_height-4)
  992. .attr("fill","#eee");//function(d) { return d._def.color;})
  993. nodeButtonGroup.append('rect')
  994. .attr("x",function(d) { return d._def.align == "right"? 10:5})
  995. .attr("y",4)
  996. .attr("rx",5)
  997. .attr("ry",5)
  998. .attr("width",16)
  999. .attr("height",node_height-12)
  1000. .attr("fill",function(d) { return d._def.color;})
  1001. .attr("cursor","pointer")
  1002. .on("mousedown",function(d) {if (!lasso) { d3.select(this).attr("fill-opacity",0.2);d3.event.preventDefault(); d3.event.stopPropagation();}})
  1003. .on("mouseup",function(d) {if (!lasso) { d3.select(this).attr("fill-opacity",0.4);d3.event.preventDefault();d3.event.stopPropagation();}})
  1004. .on("mouseover",function(d) {if (!lasso) { d3.select(this).attr("fill-opacity",0.4);}})
  1005. .on("mouseout",function(d) {if (!lasso) {
  1006. var op = 1;
  1007. if (d._def.button.toggle) {
  1008. op = d[d._def.button.toggle]?1:0.2;
  1009. }
  1010. d3.select(this).attr("fill-opacity",op);
  1011. }})
  1012. .on("click",nodeButtonClicked)
  1013. .on("touchstart",nodeButtonClicked)
  1014. }
  1015. var mainRect = node.append("rect")
  1016. .attr("class", "node")
  1017. .classed("node_unknown",function(d) { return d.type == "unknown"; })
  1018. .attr("rx", 6)
  1019. .attr("ry", 6)
  1020. .attr("fill",function(d) { return d._def.color;})
  1021. .on("mouseup",nodeMouseUp)
  1022. .on("mousedown",nodeMouseDown)
  1023. .on("touchstart",function(d) {
  1024. var obj = d3.select(this);
  1025. var touch0 = d3.event.touches.item(0);
  1026. var pos = [touch0.pageX,touch0.pageY];
  1027. startTouchCenter = [touch0.pageX,touch0.pageY];
  1028. startTouchDistance = 0;
  1029. touchStartTime = setTimeout(function() {
  1030. showTouchMenu(obj,pos);
  1031. },touchLongPressTimeout);
  1032. nodeMouseDown.call(this,d)
  1033. })
  1034. .on("touchend", function(d) {
  1035. clearTimeout(touchStartTime);
  1036. touchStartTime = null;
  1037. if (RED.touch.radialMenu.active()) {
  1038. d3.event.stopPropagation();
  1039. return;
  1040. }
  1041. nodeMouseUp.call(this,d);
  1042. })
  1043. .on("mouseover",function(d) {
  1044. if (mouse_mode === 0) {
  1045. var node = d3.select(this);
  1046. node.classed("node_hovered",true);
  1047. }
  1048. })
  1049. .on("mouseout",function(d) {
  1050. var node = d3.select(this);
  1051. node.classed("node_hovered",false);
  1052. });
  1053. //node.append("rect").attr("class", "node-gradient-top").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-top)").style("pointer-events","none");
  1054. //node.append("rect").attr("class", "node-gradient-bottom").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-bottom)").style("pointer-events","none");
  1055. if (d._def.icon) {
  1056. var icon_group = node.append("g")
  1057. .attr("class","node_icon_group")
  1058. .attr("x",0).attr("y",0);
  1059. var icon_shade = icon_group.append("rect")
  1060. .attr("x",0).attr("y",0)
  1061. .attr("class","node_icon_shade")
  1062. .attr("width","30")
  1063. .attr("stroke","none")
  1064. .attr("fill","#000")
  1065. .attr("fill-opacity","0.05")
  1066. .attr("height",function(d){return Math.min(50,d.h-4);});
  1067. var icon = icon_group.append("image")
  1068. .attr("xlink:href","icons/"+d._def.icon)
  1069. .attr("class","node_icon")
  1070. .attr("x",0)
  1071. .attr("width","30")
  1072. .attr("height","30");
  1073. var icon_shade_border = icon_group.append("path")
  1074. .attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)})
  1075. .attr("class","node_icon_shade_border")
  1076. .attr("stroke-opacity","0.1")
  1077. .attr("stroke","#000")
  1078. .attr("stroke-width","2");
  1079. if ("right" == d._def.align) {
  1080. icon_group.attr('class','node_icon_group node_icon_group_'+d._def.align);
  1081. icon_shade_border.attr("d",function(d) { return "M 0 1 l 0 "+(d.h-2)});
  1082. //icon.attr('class','node_icon node_icon_'+d._def.align);
  1083. //icon.attr('class','node_icon_shade node_icon_shade_'+d._def.align);
  1084. //icon.attr('class','node_icon_shade_border node_icon_shade_border_'+d._def.align);
  1085. }
  1086. //if (d._def.inputs > 0 && d._def.align == null) {
  1087. // icon_shade.attr("width",35);
  1088. // icon.attr("transform","translate(5,0)");
  1089. // icon_shade_border.attr("transform","translate(5,0)");
  1090. //}
  1091. //if (d._def.outputs > 0 && "right" == d._def.align) {
  1092. // icon_shade.attr("width",35); //icon.attr("x",5);
  1093. //}
  1094. var img = new Image();
  1095. img.src = "icons/"+d._def.icon;
  1096. img.onload = function() {
  1097. icon.attr("width",Math.min(img.width,30));
  1098. icon.attr("height",Math.min(img.height,30));
  1099. icon.attr("x",15-Math.min(img.width,30)/2);
  1100. //if ("right" == d._def.align) {
  1101. // icon.attr("x",function(d){return d.w-img.width-1-(d.outputs>0?5:0);});
  1102. // icon_shade.attr("x",function(d){return d.w-30});
  1103. // icon_shade_border.attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2);});
  1104. //}
  1105. };
  1106. //icon.style("pointer-events","none");
  1107. icon_group.style("pointer-events","none");
  1108. }
  1109. var text = node.append('svg:text').attr('class','node_label').attr('x', 38).attr('dy', '.35em').attr('text-anchor','start');
  1110. if (d._def.align) {
  1111. text.attr('class','node_label node_label_'+d._def.align);
  1112. text.attr('text-anchor','end');
  1113. }
  1114. var status = node.append("svg:g").attr("class","node_status_group").style("display","none");
  1115. var statusRect = status.append("rect").attr("class","node_status")
  1116. .attr("x",6).attr("y",1).attr("width",9).attr("height",9)
  1117. .attr("rx",2).attr("ry",2).attr("stroke-width","3");
  1118. var statusLabel = status.append("svg:text")
  1119. .attr("class","node_status_label")
  1120. .attr('x',20).attr('y',9)
  1121. .style({
  1122. 'stroke-width': 0,
  1123. 'fill': '#888',
  1124. 'font-size':'9pt',
  1125. 'stroke':'#000',
  1126. 'text-anchor':'start'
  1127. });
  1128. //node.append("circle").attr({"class":"centerDot","cx":0,"cy":0,"r":5});
  1129. var numInputs = d._def.inputs;
  1130. var inputlist = [];
  1131. for (var n=0; n < numInputs; n++) {
  1132. var link = RED.nodes.links.filter(function(l){return (l.target == d && l.targetPort == n);});
  1133. var y = (d.h/2)-((numInputs-1)/2)*13;
  1134. y = (y+13*n)-5;
  1135. text.attr("x",38);
  1136. var rect = node.append("rect");
  1137. inputlist[n] = rect;
  1138. rect.attr("class","port port_input").attr("rx",3).attr("ry",3)
  1139. .attr("y",y).attr("x",-5).attr("width",10).attr("height",10).attr("index",n);
  1140. if (link && link.length > 0) {
  1141. // this input already has a link connected, so disallow new links
  1142. rect.on("mousedown",null)
  1143. .on("touchstart", null)
  1144. .on("mouseup", null)
  1145. .on("touchend", null)
  1146. .on("mouseover", null)
  1147. .on("mouseout", null)
  1148. .classed("port_hovered",false);
  1149. } else {
  1150. // allow new link on inputs without any link connected
  1151. rect.on("mousedown", (function(nn){return function(d){portMouseDown(d,1,nn);}})(n))
  1152. .on("touchstart", (function(nn){return function(d){portMouseDown(d,1,nn);}})(n))
  1153. .on("mouseup", (function(nn){return function(d){portMouseUp(d,1,nn);}})(n))
  1154. .on("touchend", (function(nn){return function(d){portMouseUp(d,1,nn);}})(n))
  1155. .on("mouseover",function(d) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || mousedown_port_type != 1 ));})
  1156. .on("mouseout",function(d) { var port = d3.select(this); port.classed("port_hovered",false);})
  1157. }
  1158. }
  1159. d.inputlist = inputlist;
  1160. // never show these little status icons
  1161. // people try clicking on them, thinking they're buttons
  1162. // or some sort of user interface widget
  1163. //node.append("path").attr("class","node_error").attr("d","M 3,-3 l 10,0 l -5,-8 z");
  1164. //node.append("image").attr("class","node_error hidden").attr("xlink:href","icons/node-error.png").attr("x",0).attr("y",-6).attr("width",10).attr("height",9);
  1165. //node.append("image").attr("class","node_changed hidden").attr("xlink:href","icons/node-changed.png").attr("x",12).attr("y",-6).attr("width",10).attr("height",10);
  1166. node.append("image").attr("class","node_reqerror hidden").attr("xlink:href","icons/error.png").attr("x",0).attr("y",-12).attr("width",20).attr("height",20);
  1167. });
  1168. node.each(function(d,i) {
  1169. checkRequirements(d);
  1170. if (d.dirty || d.requirementError != undefined) {
  1171. //if (d.x < -50) deleteSelection(); // Delete nodes if dragged back to palette
  1172. if (d.resize) {
  1173. //var l = d._def.label;
  1174. //l = (typeof l === "function" ? l.call(d) : l)||"";
  1175. var l = d.name ? d.name : d.id;
  1176. d.w = Math.max(node_width,calculateTextWidth(l)+(d._def.inputs>0?7:0) );
  1177. d.h = Math.max(node_height,(Math.max(d.outputs,d._def.inputs)||0) * 15);
  1178. }
  1179. var thisNode = d3.select(this);
  1180. //thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}});
  1181. thisNode.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
  1182. thisNode.selectAll(".node")
  1183. .attr("width",function(d){return d.w})
  1184. .attr("height",function(d){return d.h})
  1185. .classed("node_selected",function(d) { return d.selected; })
  1186. .classed("node_highlighted",function(d) { return d.highlighted; })
  1187. ;
  1188. //thisNode.selectAll(".node-gradient-top").attr("width",function(d){return d.w});
  1189. //thisNode.selectAll(".node-gradient-bottom").attr("width",function(d){return d.w}).attr("y",function(d){return d.h-30});
  1190. thisNode.selectAll(".node_icon_group_right").attr('transform', function(d){return "translate("+(d.w-30)+",0)"});
  1191. thisNode.selectAll(".node_label_right").attr('x', function(d){return d.w-38});
  1192. //thisNode.selectAll(".node_icon_right").attr("x",function(d){return d.w-d3.select(this).attr("width")-1-(d.outputs>0?5:0);});
  1193. //thisNode.selectAll(".node_icon_shade_right").attr("x",function(d){return d.w-30;});
  1194. //thisNode.selectAll(".node_icon_shade_border_right").attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2)});
  1195. var numOutputs = d.outputs;
  1196. var y = (d.h/2)-((numOutputs-1)/2)*13;
  1197. d.ports = d.ports || d3.range(numOutputs);
  1198. d._ports = thisNode.selectAll(".port_output").data(d.ports);
  1199. d._ports.enter().append("rect").attr("class","port port_output").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
  1200. .on("mousedown",(function(){var node = d; return function(d,i){portMouseDown(node,0,i);}})() )
  1201. .on("touchstart",(function(){var node = d; return function(d,i){portMouseDown(node,0,i);}})() )
  1202. .on("mouseup",(function(){var node = d; return function(d,i){portMouseUp(node,0,i);}})() )
  1203. .on("touchend",(function(){var node = d; return function(d,i){portMouseUp(node,0,i);}})() )
  1204. .on("mouseover",function(d,i) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || mousedown_port_type !== 0 ));})
  1205. .on("mouseout",function(d,i) { var port = d3.select(this); port.classed("port_hovered",false);});
  1206. d._ports.exit().remove();
  1207. if (d._ports) {
  1208. numOutputs = d.outputs || 1;
  1209. y = (d.h/2)-((numOutputs-1)/2)*13;
  1210. var x = d.w - 5;
  1211. d._ports.each(function(d,i) {
  1212. var port = d3.select(this);
  1213. port.attr("y",(y+13*i)-5).attr("x",x);
  1214. });
  1215. }
  1216. thisNode.selectAll('text.node_label').text(function(d,i){
  1217. /* if (d._def.label) {
  1218. if (typeof d._def.label == "function") {
  1219. return d._def.label.call(d);
  1220. } else {
  1221. return d._def.label;
  1222. }
  1223. }
  1224. return "n.a.";
  1225. */
  1226. return d.name ? d.name : d.id;
  1227. })
  1228. .attr('y', function(d){return (d.h/2)-1;})
  1229. .attr('class',function(d){
  1230. return 'node_label'+
  1231. (d._def.align?' node_label_'+d._def.align:'')+
  1232. (d._def.label?' '+(typeof d._def.labelStyle == "function" ? d._def.labelStyle.call(d):d._def.labelStyle):'') ;
  1233. });
  1234. thisNode.selectAll(".node_tools").attr("x",function(d){return d.w-35;}).attr("y",function(d){return d.h-20;});
  1235. thisNode.selectAll(".node_changed")
  1236. .attr("x",function(d){return d.w-10})
  1237. .classed("hidden",function(d) { return !d.changed; });
  1238. thisNode.selectAll(".node_error")
  1239. .attr("x",function(d){return d.w-10-(d.changed?13:0)})
  1240. .classed("hidden",function(d) { return d.valid; });
  1241. thisNode.selectAll(".port_input").each(function(d,i) {
  1242. var port = d3.select(this);
  1243. var numInputs = d._def.inputs;
  1244. var y = (d.h/2)-((numInputs-1)/2)*13;
  1245. y = (y+13*i)-5;
  1246. port.attr("y",y)
  1247. });
  1248. thisNode.selectAll(".node_reqerror")
  1249. .attr("x",function(d){return d.w-25-(d.changed?13:0)})
  1250. .classed("hidden",function(d){ return !d.requirementError; })
  1251. .on("click", function(){RED.notify(
  1252. 'Conflicts:<ul><li>'+d.conflicts.join('</li><li>')+'</li></ul>'
  1253. )});
  1254. thisNode.selectAll(".node_icon").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;});
  1255. thisNode.selectAll(".node_icon_shade").attr("height",function(d){return d.h;});
  1256. thisNode.selectAll(".node_icon_shade_border").attr("d",function(d){ return "M "+(("right" == d._def.align) ?0:30)+" 1 l 0 "+(d.h-2)});
  1257. thisNode.selectAll('.node_right_button').attr("transform",function(d){
  1258. var x = d.w-6;
  1259. if (d._def.button.toggle && !d[d._def.button.toggle]) {
  1260. x = x - 8;
  1261. }
  1262. return "translate("+x+",2)";
  1263. });
  1264. thisNode.selectAll('.node_right_button rect').attr("fill-opacity",function(d){
  1265. if (d._def.button.toggle) {
  1266. return d[d._def.button.toggle]?1:0.2;
  1267. }
  1268. return 1;
  1269. });
  1270. //thisNode.selectAll('.node_right_button').attr("transform",function(d){return "translate("+(d.w - d._def.button.width.call(d))+","+0+")";}).attr("fill",function(d) {
  1271. // return typeof d._def.button.color === "function" ? d._def.button.color.call(d):(d._def.button.color != null ? d._def.button.color : d._def.color)
  1272. //});
  1273. thisNode.selectAll('.node_badge_group').attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";});
  1274. thisNode.selectAll('text.node_badge_label').text(function(d,i) {
  1275. /* if (d._def.badge) {
  1276. if (typeof d._def.badge == "function") {
  1277. return d._def.badge.call(d);
  1278. } else {
  1279. return d._def.badge;
  1280. }
  1281. }
  1282. return ""; */
  1283. return d.name ? d.name : d.id;
  1284. });
  1285. if (!showStatus || !d.status) {
  1286. thisNode.selectAll('.node_status_group').style("display","none");
  1287. } else {
  1288. thisNode.selectAll('.node_status_group').style("display","inline").attr("transform","translate(3,"+(d.h+3)+")");
  1289. var fill = status_colours[d.status.fill]; // Only allow our colours for now
  1290. if (d.status.shape == null && fill == null) {
  1291. thisNode.selectAll('.node_status').style("display","none");
  1292. } else {
  1293. var style;
  1294. if (d.status.shape == null || d.status.shape == "dot") {
  1295. style = {
  1296. display: "inline",
  1297. fill: fill,
  1298. stroke: fill
  1299. };
  1300. } else if (d.status.shape == "ring" ){
  1301. style = {
  1302. display: "inline",
  1303. fill: '#fff',
  1304. stroke: fill
  1305. }
  1306. }
  1307. thisNode.selectAll('.node_status').style(style);
  1308. }
  1309. if (d.status.text) {
  1310. thisNode.selectAll('.node_status_label').text(d.status.text);
  1311. } else {
  1312. thisNode.selectAll('.node_status_label').text("");
  1313. }
  1314. }
  1315. d.dirty = false;
  1316. }
  1317. });
  1318. }
  1319. var link = vis.selectAll(".link").data(RED.nodes.links.filter(function(d) { return d.source.z == activeWorkspace && d.target.z == activeWorkspace }),function(d) { return d.source.id+":"+d.sourcePort+":"+d.target.id+":"+d.targetPort;});
  1320. var linkEnter = link.enter().insert("g",".node").attr("class","link");
  1321. linkEnter.each(function(d,i) {
  1322. var l = d3.select(this);
  1323. l.append("svg:path").attr("class","link_background link_path")
  1324. .on("mousedown",function(d) {
  1325. mousedown_link = d;
  1326. clearSelection();
  1327. selected_link = mousedown_link;
  1328. updateSelection();
  1329. redraw();
  1330. d3.event.stopPropagation();
  1331. })
  1332. .on("touchstart",function(d) {
  1333. mousedown_link = d;
  1334. clearSelection();
  1335. selected_link = mousedown_link;
  1336. updateSelection();
  1337. redraw();
  1338. d3.event.stopPropagation();
  1339. });
  1340. l.append("svg:path").attr("class","link_outline link_path");
  1341. l.append("svg:path").attr("class","link_line link_path");
  1342. });
  1343. link.exit().remove();
  1344. var links = vis.selectAll(".link_path");
  1345. links.attr("d",function(d){
  1346. var numOutputs = d.source.outputs || 1;
  1347. var sourcePort = d.sourcePort || 0;
  1348. var ysource = -((numOutputs-1)/2)*13 +13*sourcePort;
  1349. var numInputs = d.target._def.inputs || 1;
  1350. var targetPort = d.targetPort || 0;
  1351. var ytarget = -((numInputs-1)/2)*13 +13*targetPort;
  1352. var dy = (d.target.y+ytarget)-(d.source.y+ysource);
  1353. var dx = (d.target.x-d.target.w/2)-(d.source.x+d.source.w/2);
  1354. var delta = Math.sqrt(dy*dy+dx*dx);
  1355. var scale = lineCurveScale;
  1356. var scaleY = 0;
  1357. if (delta < node_width) {
  1358. scale = 0.75-0.75*((node_width-delta)/node_width);
  1359. }
  1360. if (dx < 0) {
  1361. scale += 2*(Math.min(5*node_width,Math.abs(dx))/(5*node_width));
  1362. if (Math.abs(dy) < 3*node_height) {
  1363. scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ;
  1364. }
  1365. }
  1366. d.x1 = d.source.x+d.source.w/2;
  1367. d.y1 = d.source.y+ysource;
  1368. d.x2 = d.target.x-d.target.w/2;
  1369. d.y2 = d.target.y+ytarget;
  1370. return "M "+(d.x1)+" "+(d.y1)+
  1371. " C "+(d.x1+scale*node_width)+" "+(d.y1+scaleY*node_height)+" "+
  1372. (d.x2-scale*node_width)+" "+(d.y2-scaleY*node_height)+" "+
  1373. (d.x2)+" "+d.y2;
  1374. });
  1375. link.classed("link_selected", function(d) { return d === selected_link || d.selected; });
  1376. link.classed("link_unknown",function(d) { return d.target.type == "unknown" || d.source.type == "unknown"});
  1377. if (d3.event) {
  1378. d3.event.preventDefault();
  1379. }
  1380. }
  1381. function doSort (arr) {
  1382. arr.sort(function (a, b) {
  1383. var nameA = a.name ? a.name : a.id;
  1384. var nameB = b.name ? b.name : b.id;
  1385. return nameA.localeCompare(nameB, 'en', {numeric: 'true'});
  1386. });
  1387. }
  1388. function setNewCoords (lastX, lastY, arr) {
  1389. var x = lastX;
  1390. var y = lastY;
  1391. for (var i = 0; i < arr.length; i++) {
  1392. var node = arr[i];
  1393. var name = node.name ? node.name : node.id;
  1394. var def = node._def;
  1395. var dH = Math.max(RED.view.defaults.height, (Math.max(def.outputs, def.inputs) || 0) * 15);
  1396. x = lastX + Math.max(RED.view.defaults.width, RED.view.calculateTextWidth(name) + (def.inputs > 0 ? 7 : 0));
  1397. node.x = x;
  1398. node.y = y + dH/2;
  1399. y = y + dH + 15;
  1400. node.dirty = true;
  1401. }
  1402. return { x: x, y: y };
  1403. }
  1404. function arrangeAll() {
  1405. var ioNoIn = [];
  1406. var ioInOut = [];
  1407. var ioMultiple = [];
  1408. var ioNoOut = [];
  1409. var ioCtrl = [];
  1410. RED.nodes.eachNode(function (node) {
  1411. if (node._def.inputs == 0 && node._def.outputs == 0) {
  1412. ioCtrl.push(node);
  1413. } else if (node._def.inputs == 0) {
  1414. ioNoIn.push(node);
  1415. } else if (node._def.outputs == 0) {
  1416. ioNoOut.push(node);
  1417. } else if (node._def.inputs == 1 && node._def.outputs == 1) {
  1418. ioInOut.push(node);
  1419. } else if (node._def.inputs > 1) {
  1420. ioMultiple.push(node);
  1421. }
  1422. });
  1423. var cols = new Array(ioNoIn, ioInOut, ioMultiple, ioNoOut, ioCtrl);
  1424. var lowestY = 0;
  1425. for (var i = 0; i < cols.length; i++) {
  1426. var dX = ((i < cols.length - 1) ? i : 0) * (RED.view.defaults.width * 2) + (RED.view.defaults.width / 2) + 15;
  1427. var dY = ((i < cols.length - 1) ? (RED.view.defaults.height / 4) : lowestY) + 15;
  1428. var startX = 0;
  1429. var startY = 0;
  1430. doSort(cols[i]);
  1431. var last = setNewCoords(startX + dX, startY + dY, cols[i]);
  1432. lowestY = Math.max(lowestY, last.y);
  1433. startX = ((i < cols.length - 1) ? last.x : 0) + (RED.view.defaults.width) * 4;
  1434. startY = lowestY + (RED.view.defaults.height * 1.5);
  1435. }
  1436. RED.storage.update();
  1437. redraw();
  1438. }
  1439. RED.keyboard.add(/* z */ 90,{ctrl:true},function(){RED.history.pop();});
  1440. RED.keyboard.add(/* o */ 79,{ctrl:true},function(){arrangeAll();d3.event.preventDefault();});
  1441. RED.keyboard.add(/* a */ 65,{ctrl:true},function(){selectAll();d3.event.preventDefault();});
  1442. RED.keyboard.add(/* = */ 187,{ctrl:true},function(){zoomIn();d3.event.preventDefault();});
  1443. RED.keyboard.add(/* - */ 189,{ctrl:true},function(){zoomOut();d3.event.preventDefault();});
  1444. RED.keyboard.add(/* 0 */ 48,{ctrl:true},function(){zoomZero();d3.event.preventDefault();});
  1445. RED.keyboard.add(/* v */ 86,{ctrl:true},function(){importNodes(clipboard);d3.event.preventDefault();});
  1446. RED.keyboard.add(/* e */ 69,{ctrl:true},function(){showExportNodesDialog();d3.event.preventDefault();});
  1447. RED.keyboard.add(/* i */ 73,{ctrl:true},function(){showImportNodesDialog();d3.event.preventDefault();});
  1448. // TODO: 'dirty' should be a property of RED.nodes - with an event callback for ui hooks
  1449. function setDirty(d) {
  1450. dirty = d;
  1451. if (dirty) {
  1452. $("#btn-deploy").removeClass("disabled").addClass("btn-danger");
  1453. RED.storage.update();
  1454. } else {
  1455. $("#btn-deploy").addClass("disabled").removeClass("btn-danger");
  1456. }
  1457. }
  1458. /**
  1459. * Imports a new collection of nodes from a JSON String.
  1460. * - all get new IDs assigned
  1461. * - all 'selected'
  1462. * - attached to mouse for placing - 'IMPORT_DRAGGING'
  1463. */
  1464. function importNodes(newNodesStr,touchImport) {
  1465. var createNewIds = true;
  1466. var useStorage = false;
  1467. if ($("#node-input-arduino").prop('checked') === true) {
  1468. var nodesJSON = RED.nodes.cppToJSON(newNodesStr);
  1469. if (nodesJSON.count <= 0) {
  1470. var note = "No nodes imported!";
  1471. RED.notify("<strong>Note</strong>: " + note, "warning");
  1472. }
  1473. newNodesStr = nodesJSON.data;
  1474. createNewIds = false;
  1475. if (useStorage) {
  1476. RED.storage.clear();
  1477. localStorage.setItem("audio_library_guitool", newNodesStr);
  1478. RED.storage.load();
  1479. redraw();
  1480. return;
  1481. }
  1482. }
  1483. try {
  1484. var result = RED.nodes.import(newNodesStr,createNewIds);
  1485. if (result) {
  1486. var new_nodes = result[0];
  1487. var new_links = result[1];
  1488. var new_ms = new_nodes.map(function(n) { n.z = activeWorkspace; return {n:n};});
  1489. var new_node_ids = new_nodes.map(function(n){ return n.id; });
  1490. // TODO: pick a more sensible root node
  1491. var root_node = new_ms[0].n;
  1492. var dx = root_node.x;
  1493. var dy = root_node.y;
  1494. if (mouse_position == null) {
  1495. mouse_position = [0,0];
  1496. }
  1497. var minX = 0;
  1498. var minY = 0;
  1499. var i;
  1500. var node;
  1501. for (i=0;i<new_ms.length;i++) {
  1502. node = new_ms[i];
  1503. node.n.selected = true;
  1504. node.n.changed = true;
  1505. node.n.x -= dx - mouse_position[0];
  1506. node.n.y -= dy - mouse_position[1];
  1507. node.dx = node.n.x - mouse_position[0];
  1508. node.dy = node.n.y - mouse_position[1];
  1509. minX = Math.min(node.n.x-node_width/2-5,minX);
  1510. minY = Math.min(node.n.y-node_height/2-5,minY);
  1511. }
  1512. for (i=0;i<new_ms.length;i++) {
  1513. node = new_ms[i];
  1514. node.n.x -= minX;
  1515. node.n.y -= minY;
  1516. node.dx -= minX;
  1517. node.dy -= minY;
  1518. }
  1519. if (!touchImport) {
  1520. mouse_mode = RED.state.IMPORT_DRAGGING;
  1521. }
  1522. RED.keyboard.add(/* ESCAPE */ 27,function(){
  1523. RED.keyboard.remove(/* ESCAPE */ 27);
  1524. clearSelection();
  1525. RED.history.pop();
  1526. mouse_mode = 0;
  1527. });
  1528. RED.history.push({t:'add',nodes:new_node_ids,links:new_links,dirty:RED.view.dirty()});
  1529. clearSelection();
  1530. moving_set = new_ms;
  1531. redraw();
  1532. }
  1533. } catch(error) {
  1534. console.log(error);
  1535. RED.notify("<strong>Error</strong>: "+error,"error");
  1536. }
  1537. }
  1538. $('#btn-import').click(function() {showImportNodesDialog();});
  1539. $('#btn-export-clipboard').click(function() {showExportNodesDialog();});
  1540. $('#btn-export-library').click(function() {showExportNodesLibraryDialog();});
  1541. function showExportNodesDialog() {
  1542. mouse_mode = RED.state.EXPORT;
  1543. var nns = RED.nodes.createExportableNodeSet(moving_set);
  1544. //$("#dialog-form").html(getForm("dialog-form", "export-clipboard-dialog"));
  1545. var frm = getForm("dialog-form", "export-clipboard-dialog", function (d, f) {
  1546. $("#node-input-export").val(JSON.stringify(nns)).focus(function() {
  1547. var textarea = $(this);
  1548. textarea.select();
  1549. textarea.mouseup(function() {
  1550. textarea.unbind("mouseup");
  1551. return false;
  1552. });
  1553. }).focus();
  1554. $( "#dialog" ).dialog("option","title","Export nodes to clipboard").dialog( "open" );
  1555. });
  1556. }
  1557. function showExportNodesLibraryDialog() {
  1558. mouse_mode = RED.state.EXPORT;
  1559. var nns = RED.nodes.createExportableNodeSet(moving_set);
  1560. //$("#dialog-form").html(this.getForm('export-library-dialog'));
  1561. getForm("dialog-form", "export-library-dialog", function(d, f) {
  1562. $("#node-input-filename").attr('nodes',JSON.stringify(nns));
  1563. $( "#dialog" ).dialog("option","title","Export nodes to library").dialog( "open" );
  1564. });
  1565. }
  1566. function showImportNodesDialog() {
  1567. mouse_mode = RED.state.IMPORT;
  1568. //$("#dialog-form").html(this.getForm('import-dialog'));
  1569. getForm("dialog-form", "import-dialog", function(d, f) {
  1570. $("#node-input-import").val("");
  1571. $( "#dialog" ).dialog("option","title","Import nodes").dialog( "open" );
  1572. });
  1573. }
  1574. function showRenameWorkspaceDialog(id) {
  1575. var ws = RED.nodes.workspace(id);
  1576. $( "#node-dialog-rename-workspace" ).dialog("option","workspace",ws);
  1577. if (workspace_tabs.count() == 1) {
  1578. $( "#node-dialog-rename-workspace").next().find(".leftButton")
  1579. .prop('disabled',true)
  1580. .addClass("ui-state-disabled");
  1581. } else {
  1582. $( "#node-dialog-rename-workspace").next().find(".leftButton")
  1583. .prop('disabled',false)
  1584. .removeClass("ui-state-disabled");
  1585. }
  1586. $( "#node-input-workspace-name" ).val(ws.label);
  1587. $( "#node-dialog-rename-workspace" ).dialog("open");
  1588. }
  1589. function getForm(formId, key, callback) {
  1590. // server test switched off - test purposes only
  1591. var patt = new RegExp(/^[http|https]/);
  1592. var server = false && patt.test(location.protocol);
  1593. var form = $("<h2>No form found.</h2>");
  1594. if (!server) {
  1595. data = $("script[data-template-name|='" + key + "']").html();
  1596. form = $("#" + formId);
  1597. $(form).empty();
  1598. $(form).append(data);
  1599. if(typeof callback == 'function') {
  1600. callback.call(this, form);
  1601. }
  1602. } else {
  1603. var frmPlugin = "resources/form/" + key + ".html";
  1604. $.get(frmPlugin, function(data) {
  1605. form = $("#" + formId);
  1606. $(form).empty();
  1607. $(form).append(data);
  1608. if(typeof callback == 'function') {
  1609. callback.call(this, form);
  1610. }
  1611. });
  1612. }
  1613. return form;
  1614. }
  1615. $("#node-dialog-rename-workspace form" ).submit(function(e) { e.preventDefault();});
  1616. $( "#node-dialog-rename-workspace" ).dialog({
  1617. modal: true,
  1618. autoOpen: false,
  1619. width: 500,
  1620. title: "Rename sheet",
  1621. buttons: [
  1622. {
  1623. class: 'leftButton',
  1624. text: "Delete",
  1625. click: function() {
  1626. var workspace = $(this).dialog('option','workspace');
  1627. $( this ).dialog( "close" );
  1628. deleteWorkspace(workspace.id);
  1629. }
  1630. },
  1631. {
  1632. text: "Ok",
  1633. click: function() {
  1634. var workspace = $(this).dialog('option','workspace');
  1635. var label = $( "#node-input-workspace-name" ).val();
  1636. if (workspace.label != label) {
  1637. workspace.label = label;
  1638. var link = $("#workspace-tabs a[href='#"+workspace.id+"']");
  1639. link.attr("title",label);
  1640. link.text(label);
  1641. RED.view.dirty(true);
  1642. }
  1643. $( this ).dialog( "close" );
  1644. }
  1645. },
  1646. {
  1647. text: "Cancel",
  1648. click: function() {
  1649. $( this ).dialog( "close" );
  1650. }
  1651. }
  1652. ],
  1653. open: function(e) {
  1654. RED.keyboard.disable();
  1655. },
  1656. close: function(e) {
  1657. RED.keyboard.enable();
  1658. }
  1659. });
  1660. $( "#node-dialog-delete-workspace" ).dialog({
  1661. modal: true,
  1662. autoOpen: false,
  1663. width: 500,
  1664. title: "Confirm delete",
  1665. buttons: [
  1666. {
  1667. text: "Ok",
  1668. click: function() {
  1669. var workspace = $(this).dialog('option','workspace');
  1670. RED.view.removeWorkspace(workspace);
  1671. var historyEvent = RED.nodes.removeWorkspace(workspace.id);
  1672. historyEvent.t = 'delete';
  1673. historyEvent.dirty = dirty;
  1674. historyEvent.workspaces = [workspace];
  1675. RED.history.push(historyEvent);
  1676. RED.view.dirty(true);
  1677. $( this ).dialog( "close" );
  1678. }
  1679. },
  1680. {
  1681. text: "Cancel",
  1682. click: function() {
  1683. $( this ).dialog( "close" );
  1684. }
  1685. }
  1686. ],
  1687. open: function(e) {
  1688. RED.keyboard.disable();
  1689. },
  1690. close: function(e) {
  1691. RED.keyboard.enable();
  1692. }
  1693. });
  1694. return {
  1695. state:function(state) {
  1696. if (state == null) {
  1697. return mouse_mode
  1698. } else {
  1699. mouse_mode = state;
  1700. }
  1701. },
  1702. addWorkspace: function(ws) {
  1703. workspace_tabs.addTab(ws);
  1704. workspace_tabs.resize();
  1705. },
  1706. removeWorkspace: function(ws) {
  1707. workspace_tabs.removeTab(ws.id);
  1708. },
  1709. getWorkspace: function() {
  1710. return activeWorkspace;
  1711. },
  1712. showWorkspace: function(id) {
  1713. workspace_tabs.activateTab(id);
  1714. },
  1715. redraw: redraw,
  1716. dirty: function(d) {
  1717. if (d == null) {
  1718. return dirty;
  1719. } else {
  1720. setDirty(d);
  1721. }
  1722. },
  1723. importNodes: importNodes,
  1724. resize: function() {
  1725. workspace_tabs.resize();
  1726. },
  1727. status: function(s) {
  1728. showStatus = s;
  1729. RED.nodes.eachNode(function(n) { n.dirty = true;});
  1730. //TODO: subscribe/unsubscribe here
  1731. redraw();
  1732. },
  1733. getForm: getForm,
  1734. calculateTextWidth: calculateTextWidth,
  1735. defaults: {
  1736. width: node_width,
  1737. height: node_height
  1738. }
  1739. };
  1740. })();