Skip to content

Commit

Permalink
extended selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@brettforbes
brettforbes committed Jul 26, 2024
1 parent fe16249 commit 85e898d
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 9 deletions.
91 changes: 86 additions & 5 deletions src/js/panel._utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,24 +168,105 @@ window.Widgets.Panel.Utils = {};
// setup the left click capability
ns.selectArray = [];
ns.leftclick = function(event, d) {

// Setup the local theme
if (!ns.theme) {
if (ns.options.theme === 'light') {
ns.theme = ns.options.light_theme
} else {
ns.theme = ns.options.dark_theme
}
}

let len = ns.selectArray.length;
console.log(`clicked on: ${d}`);
const selected = d3.select(this); // can't use arrow scoping
if (event.ctrlKey) {

if (selected.classed('clicked')) {
// Toggle-off the clicked state
//
// 1. Pop the element from the array
for(var i = ns.selectArray.length - 1; i >= 0; i--){
if(ns.selectArray[i].id === selected.id){
ns.selectArray.splice(i, 1);
}
}
// 2. deselect the node
selected.classed("selected", false);
selected.style("stroke", "none");
selected.style("stroke-width", 0);

}
else if (event.ctrlKey) {
// we will do a multi-select
if (len < 2) {
// we add the data element to the array
// Then Just add selected onto the end of the array, and style it
//
// 1. add the data element to the array
ns.selectArray.push(d);
// highlight the node
// 2. highlight the node
selected.classed("selected", true);
selected.style("stroke", ns.theme.select);
selected.style("stroke-width", 5);
} else if (len === 2) {
// we first need to select the first object in the list

// First deselect the first in the list, then add the new one
//
// 1. We need to get and remove the first object in the select array
let deselect = ns.selectArray.shift();
// 2. Get the DOM object that has to be deselected based on the id
const deselected = d3.select("#" + deselect.id);
console.log("multi deselect->", deselect);
console.log("multi deselected->", deselected);
// 3. Use the deselected object ref to remove the styling
deselected.classed("selected", false);
deselected.style("stroke", "none");
deselected.style("stroke-width", 0);
// 4. Add the new data element to the select array
ns.selectArray.push(d);
// 5. Highlight the selected node
selected.classed("selected", true);
selected.style("stroke", ns.theme.select);
selected.style("stroke-width", 5);
} else {
console.log("ERORR: multi-select array is broken, too many items", );
ns.selectArray.length = 0;
}

} else {
// we will do a single select
if (len === 0) {
// Then Just add selected onto the end of the array, and style it
//
// 1. add the data element to the array
ns.selectArray.push(d);
// 2. highlight the node
selected.classed("selected", true);
selected.style("stroke", ns.theme.select);
selected.style("stroke-width", 5);
} else {
// Deselect all in the list, then add the new one
//
// 1. Deselect each object in the array
ns.selectArray.forEach((item, index) => {
// 2. Get the DOM object that has to be deselected based on the id
const deselected = d3.select("#" + item.id);
console.log("single deselect->", item);
console.log("single deselected->", deselected);
// 3. Use the deselected object ref to remove the styling
deselected.classed("selected", false);
deselected.style("stroke", "none");
deselected.style("stroke-width", 0);

});
// 2. Make the List Empty
ns.selectArray.length = 0;
// 3. add the new data element to the array
ns.selectArray.push(d);
// 5. Highlight the newly selected node
selected.classed("selected", true);
selected.style("stroke", ns.theme.select);
selected.style("stroke-width", 5);
}
}

}
Expand Down
7 changes: 3 additions & 4 deletions src/js/panel.promo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,7 @@ window.Widgets.Panel.Promo = {}
// if (ns.options.centreStrength !== undefined) {
// ns.pforceCentre.strength(ns.options.centreStrength);
// }
console.log("panelUtilsNs.split.promo.nodes->",panelUtilsNs.split.promo.nodes);



console.log("panelUtilsNs.split.promo.nodes->",panelUtilsNs.split.promo.nodes);
ns.promotable_sim = d3
.forceSimulation(panelUtilsNs.split.promo.nodes)
.force("link", d3.forceLink() // This force provides links between nodes
Expand Down Expand Up @@ -135,6 +132,7 @@ window.Widgets.Panel.Promo = {}
.data(panelUtilsNs.split.promo.nodes)
.join('image')
.attr('class', 'pnodes')
.attr("id", (d) => d.id)
.attr('xlink:href', function(d) {
// console.log('shape->', ns.options.shape);
return (
Expand All @@ -149,6 +147,7 @@ window.Widgets.Panel.Promo = {}
.on("mousemove", panelUtilsNs.mousemove)
.on("mouseout.tooltip", panelUtilsNs.mouseleave)
.on('contextmenu', panelUtilsNs.contextmenu)
.on('click', panelUtilsNs.leftclick)
.call(
d3
.drag() //sets the event listener for the specified typenames and returns the drag behavior.
Expand Down
1 change: 1 addition & 0 deletions src/js/panel.scratch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@ window.Widgets.Panel.Scratch = {}
.data(panelUtilsNs.split.scratch.nodes)
.join('image')
.attr('class', 'snodes')
.attr("id", (d) => d.id)
.attr('xlink:href', function(d) {
return (
ns.options.prefix + ns.options.shape + d.icon + '.svg'
Expand Down

0 comments on commit 85e898d

Please sign in to comment.