Skip to content

Commit 85e898d

Browse files
brettforbesbrettforbes
committed
extended selection
1 parent fe16249 commit 85e898d

File tree

3 files changed

+90
-9
lines changed

3 files changed

+90
-9
lines changed

‎src/js/panel._utils.js

+86-5
Original file line numberDiff line numberDiff line change
@@ -168,24 +168,105 @@ window.Widgets.Panel.Utils = {};
168168
// setup the left click capability
169169
ns.selectArray = [];
170170
ns.leftclick = function(event, d) {
171+
172+
// Setup the local theme
173+
if (!ns.theme) {
174+
if (ns.options.theme === 'light') {
175+
ns.theme = ns.options.light_theme
176+
} else {
177+
ns.theme = ns.options.dark_theme
178+
}
179+
}
180+
171181
let len = ns.selectArray.length;
172182
console.log(`clicked on: ${d}`);
173183
const selected = d3.select(this); // can't use arrow scoping
174-
if (event.ctrlKey) {
184+
185+
if (selected.classed('clicked')) {
186+
// Toggle-off the clicked state
187+
//
188+
// 1. Pop the element from the array
189+
for(var i = ns.selectArray.length - 1; i >= 0; i--){
190+
if(ns.selectArray[i].id === selected.id){
191+
ns.selectArray.splice(i, 1);
192+
}
193+
}
194+
// 2. deselect the node
195+
selected.classed("selected", false);
196+
selected.style("stroke", "none");
197+
selected.style("stroke-width", 0);
198+
199+
}
200+
else if (event.ctrlKey) {
175201
// we will do a multi-select
176202
if (len < 2) {
177-
// we add the data element to the array
203+
// Then Just add selected onto the end of the array, and style it
204+
//
205+
// 1. add the data element to the array
178206
ns.selectArray.push(d);
179-
// highlight the node
207+
// 2. highlight the node
208+
selected.classed("selected", true);
180209
selected.style("stroke", ns.theme.select);
181210
selected.style("stroke-width", 5);
182211
} else if (len === 2) {
183-
// we first need to select the first object in the list
184-
212+
// First deselect the first in the list, then add the new one
213+
//
214+
// 1. We need to get and remove the first object in the select array
215+
let deselect = ns.selectArray.shift();
216+
// 2. Get the DOM object that has to be deselected based on the id
217+
const deselected = d3.select("#" + deselect.id);
218+
console.log("multi deselect->", deselect);
219+
console.log("multi deselected->", deselected);
220+
// 3. Use the deselected object ref to remove the styling
221+
deselected.classed("selected", false);
222+
deselected.style("stroke", "none");
223+
deselected.style("stroke-width", 0);
224+
// 4. Add the new data element to the select array
225+
ns.selectArray.push(d);
226+
// 5. Highlight the selected node
227+
selected.classed("selected", true);
228+
selected.style("stroke", ns.theme.select);
229+
selected.style("stroke-width", 5);
230+
} else {
231+
console.log("ERORR: multi-select array is broken, too many items", );
232+
ns.selectArray.length = 0;
185233
}
186234

187235
} else {
188236
// we will do a single select
237+
if (len === 0) {
238+
// Then Just add selected onto the end of the array, and style it
239+
//
240+
// 1. add the data element to the array
241+
ns.selectArray.push(d);
242+
// 2. highlight the node
243+
selected.classed("selected", true);
244+
selected.style("stroke", ns.theme.select);
245+
selected.style("stroke-width", 5);
246+
} else {
247+
// Deselect all in the list, then add the new one
248+
//
249+
// 1. Deselect each object in the array
250+
ns.selectArray.forEach((item, index) => {
251+
// 2. Get the DOM object that has to be deselected based on the id
252+
const deselected = d3.select("#" + item.id);
253+
console.log("single deselect->", item);
254+
console.log("single deselected->", deselected);
255+
// 3. Use the deselected object ref to remove the styling
256+
deselected.classed("selected", false);
257+
deselected.style("stroke", "none");
258+
deselected.style("stroke-width", 0);
259+
260+
});
261+
// 2. Make the List Empty
262+
ns.selectArray.length = 0;
263+
// 3. add the new data element to the array
264+
ns.selectArray.push(d);
265+
// 5. Highlight the newly selected node
266+
selected.classed("selected", true);
267+
selected.style("stroke", ns.theme.select);
268+
selected.style("stroke-width", 5);
269+
}
189270
}
190271

191272
}

‎src/js/panel.promo.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,7 @@ window.Widgets.Panel.Promo = {}
5555
// if (ns.options.centreStrength !== undefined) {
5656
// ns.pforceCentre.strength(ns.options.centreStrength);
5757
// }
58-
console.log("panelUtilsNs.split.promo.nodes->",panelUtilsNs.split.promo.nodes);
59-
60-
61-
58+
console.log("panelUtilsNs.split.promo.nodes->",panelUtilsNs.split.promo.nodes);
6259
ns.promotable_sim = d3
6360
.forceSimulation(panelUtilsNs.split.promo.nodes)
6461
.force("link", d3.forceLink() // This force provides links between nodes
@@ -135,6 +132,7 @@ window.Widgets.Panel.Promo = {}
135132
.data(panelUtilsNs.split.promo.nodes)
136133
.join('image')
137134
.attr('class', 'pnodes')
135+
.attr("id", (d) => d.id)
138136
.attr('xlink:href', function(d) {
139137
// console.log('shape->', ns.options.shape);
140138
return (
@@ -149,6 +147,7 @@ window.Widgets.Panel.Promo = {}
149147
.on("mousemove", panelUtilsNs.mousemove)
150148
.on("mouseout.tooltip", panelUtilsNs.mouseleave)
151149
.on('contextmenu', panelUtilsNs.contextmenu)
150+
.on('click', panelUtilsNs.leftclick)
152151
.call(
153152
d3
154153
.drag() //sets the event listener for the specified typenames and returns the drag behavior.

‎src/js/panel.scratch.js

+1
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ window.Widgets.Panel.Scratch = {}
143143
.data(panelUtilsNs.split.scratch.nodes)
144144
.join('image')
145145
.attr('class', 'snodes')
146+
.attr("id", (d) => d.id)
146147
.attr('xlink:href', function(d) {
147148
return (
148149
ns.options.prefix + ns.options.shape + d.icon + '.svg'

0 commit comments

Comments
 (0)