Skip to content

Commit

Permalink
Fix bug when adding new node by clicking on a component icon in a pal…
Browse files Browse the repository at this point in the history 
…ette
  • Loading branch information
@james-strauss-uwa
james-strauss-uwa committed Oct 13, 2023
1 parent e0aa6aa commit 3dd9468
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 29 deletions.
27 changes: 16 additions & 11 deletions src/Eagle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3104,8 +3104,8 @@ export class Eagle {
}
}

addNodeToLogicalGraphAndConnect = (newNode:Node) : void => {
this.addNodeToLogicalGraph(newNode,(node: Node)=>{
addNodeToLogicalGraphAndConnect = (newNodeId: string) : void => {
this.addNodeToLogicalGraph(null, newNodeId, Eagle.AddNodeMode.ContextMenu, (node: Node)=>{
const realSourceNode = RightClick.edgeDropSrcNode;
const realSourcePort = RightClick.edgeDropSrcPort;
const realDestNode = node;
Expand All @@ -3122,10 +3122,10 @@ export class Eagle {
} else {
this.addEdge(realDestNode, realDestPort, realSourceNode, realSourcePort, false, false, null);
}
},'contextMenu')
});
}

addNodeToLogicalGraph = (node : any, callback: (node: Node) => void, mode:string) : void => {
addNodeToLogicalGraph = (node: Node, nodeId: string, mode: Eagle.AddNodeMode, callback: (node: Node) => void) : void => {
let pos : {x:number, y:number};
pos = {x:0,y:0}

Expand All @@ -3136,19 +3136,19 @@ export class Eagle {
return;
}

if(mode === 'contextMenu'){
if(mode === Eagle.AddNodeMode.ContextMenu){
let nodeFound = false

pos = Eagle.selectedRightClickPosition;
this.palettes().forEach(function(palette){
if(palette.findNodeById(node)!==null){
node = palette.findNodeById(node)
if(palette.findNodeById(nodeId)!==null){
node = palette.findNodeById(nodeId)
nodeFound = true
}
})

if (!nodeFound){
node = this.logicalGraph().findNodeById(node)
node = this.logicalGraph().findNodeById(nodeId)
}
$('#customContextMenu').remove()
}
Expand All @@ -3162,7 +3162,7 @@ export class Eagle {
if(pos.x === 0 && pos.y === 0){
// get new position for node
if (Eagle.nodeDropLocation.x === 0 && Eagle.nodeDropLocation.y === 0){
pos = this.getNewNodePosition(node.getWidth(), node.getHeight());
pos = this.getNewNodePosition(node.getRadius(), node.getRadius());
} else {
pos = Eagle.nodeDropLocation;
}
Expand Down Expand Up @@ -3849,7 +3849,7 @@ export class Eagle {

// add each of the nodes we are moving
for (const sourceComponent of sourceComponents){
this.addNodeToLogicalGraph(sourceComponent, null,'');
this.addNodeToLogicalGraph(sourceComponent, "", Eagle.AddNodeMode.Default, null);

// to avoid placing all the selected nodes on top of each other at the same spot, we increment the nodeDropLocation after each node
Eagle.nodeDropLocation.x += 20;
Expand Down Expand Up @@ -4212,7 +4212,7 @@ export class Eagle {
});
}

getNewNodePosition = (width:number, height:number) : {x:number, y:number} => {
getNewNodePosition = (width: number, height: number) : {x:number, y:number} => {
const MARGIN = 100; // buffer to keep new nodes away from the maxX and maxY sides of the LG display area
let suitablePositionFound = false;
let numIterations = 0;
Expand Down Expand Up @@ -4605,6 +4605,11 @@ export namespace Eagle
Hierarchy = "Hierarchy"
}

export enum AddNodeMode {
ContextMenu = "ContextMenu",
Default = "Default"
}

export enum FileType {
Graph = "Graph",
Palette = "Palette",
Expand Down
33 changes: 16 additions & 17 deletions src/RightClick.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import {Eagle} from './Eagle';
import {Edge} from './Edge';
import {Node} from './Node';
import { Eagle } from './Eagle';
import { Edge } from './Edge';
import { Node } from './Node';
import { Palette } from './Palette';
import { TutorialSystem } from './Tutorial';
import { Setting } from './Setting';


Expand Down Expand Up @@ -148,7 +147,7 @@ export class RightClick {

//toggling showing only filtered nodes or showing all
if(!Setting.findValue(Setting.FILTER_NODE_SUGGESTIONS)){
let x : Node[] = []
const x : Node[] = []
palettes.forEach(function(palette){

palette.getNodes().forEach(function(node){
Expand Down Expand Up @@ -218,13 +217,13 @@ export class RightClick {
collectionOfNodes.forEach(function(node){
//this mode is the simplest version for right click adding a node on the graph canvas
if(node.isData()){
dataHtml = dataHtml+`<a id='rightclickNode_`+node.getId()+`' onclick='eagle.addNodeToLogicalGraph("`+node.getId()+`",null,"contextMenu")' class='contextMenuDropdownOption rightClickPaletteNode `+originClass+`'>`+node.getName()+'</a>'
dataHtml = dataHtml+`<a id='rightclickNode_`+node.getId()+`' onclick='eagle.addNodeToLogicalGraph(null,"`+node.getId()+`",Eagle.AddNodeMode.ContextMenu, null)' class='contextMenuDropdownOption rightClickPaletteNode `+originClass+`'>`+node.getName()+'</a>'
dataFound = true
}else if (node.isApplication()){
appHtml = appHtml+`<a id='rightclickNode_`+node.getId()+`' onclick='eagle.addNodeToLogicalGraph("`+node.getId()+`",null,"contextMenu")' class='contextMenuDropdownOption rightClickPaletteNode `+originClass+`'>`+node.getName()+'</a>'
appHtml = appHtml+`<a id='rightclickNode_`+node.getId()+`' onclick='eagle.addNodeToLogicalGraph(null,"`+node.getId()+`",Eagle.AddNodeMode.ContextMenu, null)' class='contextMenuDropdownOption rightClickPaletteNode `+originClass+`'>`+node.getName()+'</a>'
appFound = true
}else{
otherHtml = otherHtml+`<a id='rightclickNode_`+node.getId()+`' onclick='eagle.addNodeToLogicalGraph("`+node.getId()+`",null,"contextMenu")' class='contextMenuDropdownOption rightClickPaletteNode `+originClass+`'>`+node.getName()+'</a>'
otherHtml = otherHtml+`<a id='rightclickNode_`+node.getId()+`' onclick='eagle.addNodeToLogicalGraph(null,"`+node.getId()+`",Eagle.AddNodeMode.ContextMenu, null)' class='contextMenuDropdownOption rightClickPaletteNode `+originClass+`'>`+node.getName()+'</a>'
otherFound = true
}
nodeFound = true
Expand Down Expand Up @@ -428,8 +427,8 @@ export class RightClick {
Eagle.selectedRightClickPosition = {x:x, y:y};
}

var selectedObjectAmount = eagle.selectedObjects().length
var rightClickObjectInSelection = false
const selectedObjectAmount = eagle.selectedObjects().length
let rightClickObjectInSelection = false
if (selectedObjectAmount > 1){
//if more than one node is selected
eagle.selectedObjects().forEach(function(selectedObject){
Expand All @@ -452,7 +451,7 @@ export class RightClick {
//append function options depending on the right click object
if(passedObjectClass === 'rightClick_logicalGraph'){
if(Setting.findValue(Setting.ALLOW_GRAPH_EDITING)){
var searchbar = `<div class="searchBarContainer" data-bind="clickBubble:false, click:function(){}">
const searchbar = `<div class="searchBarContainer" data-bind="clickBubble:false, click:function(){}">
<i class="material-icons md-18 searchBarIcon">search</i>
<a onclick="RightClick.clearSearchField()">
<i class="material-icons md-18 searchBarIconClose">close</i>
Expand All @@ -463,20 +462,20 @@ export class RightClick {
$('#customContextMenu').append(searchbar)

$('#customContextMenu').append('<div id="rightClickPaletteList"></div>')
var paletteList = RightClick.createHtmlPaletteList()
const paletteList = RightClick.createHtmlPaletteList()

$('#rightClickPaletteList').append(paletteList)

Eagle.selectedRightClickLocation(Eagle.FileType.Graph)
$('#rightClickSearchBar').focus()
RightClick.initiateQuickSelect()
}else{
var message = '<span>Lacking graph editing permissions</span>'
const message = '<span>Lacking graph editing permissions</span>'
$('#customContextMenu').append(message)
}
}else if(passedObjectClass === 'edgeDropCreate'){
if(Setting.findValue(Setting.ALLOW_GRAPH_EDITING)){
var searchbar = `<div class="searchBarContainer" data-bind="clickBubble:false, click:function(){}">
const searchbar = `<div class="searchBarContainer" data-bind="clickBubble:false, click:function(){}">
<i class="material-icons md-18 searchBarIcon">search</i>
<a onclick="RightClick.clearSearchField()">
<i class="material-icons md-18 searchBarIconClose">close</i>
Expand All @@ -487,14 +486,14 @@ export class RightClick {
$('#customContextMenu').append(searchbar)

$('#customContextMenu').append('<div id="rightClickPaletteList"></div>')
var paletteList = RightClick.createHtmlEdgeDragList(data)
const paletteList = RightClick.createHtmlEdgeDragList(data)
$('#rightClickPaletteList').append(paletteList)

Eagle.selectedRightClickLocation(Eagle.FileType.Graph)
$('#rightClickSearchBar').focus()
RightClick.initiateQuickSelect()
}else{
var message = '<span>Lacking graph editing permissions</span>'
const message = '<span>Lacking graph editing permissions</span>'
$('#customContextMenu').append(message)
}
}else if(passedObjectClass === 'rightClick_paletteComponent'){
Expand Down Expand Up @@ -559,7 +558,7 @@ export class RightClick {
}
}
// adding a listener to function options that closes the menu if an option is clicked
$('#customContextMenu a').on('click',function(){if($(event.target).parents('.searchBarContainer').length){return};RightClick.closeCustomContextMenu(true)})
$('#customContextMenu a').on('click',function(){if($(event.target).parents('.searchBarContainer').length){return}RightClick.closeCustomContextMenu(true)})
}

}
2 changes: 1 addition & 1 deletion static/components/palette-component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="col" draggable="true" data-bind="event: {dragstart: SideWindow.nodeDragStart, dragend: SideWindow.nodeDragEnd}, attr: {'data-palette-index': $parentContext.$parentContext.$index, 'data-component-index': $index}">
<div class="input-group mb-1 rightClick_paletteComponent" data-bind="attr: {id: 'palette_' + $parentContext.$parentContext.$index() + '_' + $data.getPaletteComponentId()}, click: $root.paletteComponentClick, eagleTooltip: $data.getHelpHTML(), eagleRightClick: {data:$data,type:'rightClick_paletteComponent'}">
<div class="input-group-prepend">
<button class="nodeBtn" type="button" data-bind="click: function(){$root.addNodeToLogicalGraph($data, null,'')}, clickBubble: false, attr: {id: 'addPaletteNode' + $data.getNoWhiteSpaceName()}">
<button class="nodeBtn" type="button" data-bind="click: function(){$root.addNodeToLogicalGraph($data, '', Eagle.AddNodeMode.Default, null)}, clickBubble: false, attr: {id: 'addPaletteNode' + $data.getNoWhiteSpaceName()}">
<span class="input-group-text" data-bind="style: {'background-color': $data.color}">
<i data-bind="class: $data.getIcon()"></i>
</span>
Expand Down

0 comments on commit 3dd9468

Please sign in to comment.