Skip to content

Commit 3302164

Browse files
brettforbesbrettforbes
committed
Layout of promo
1 parent c1ca5a9 commit 3302164

File tree

4 files changed

+98
-82
lines changed

4 files changed

+98
-82
lines changed

‎src/css/custom.css

+1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ stroke: #00557d;
5353
margin: 0px;
5454
border: 1px solid #000;
5555
height: 100%;
56+
/* background-color: rgb(23, 118, 201); */
5657
}
5758
#scratch_panel {
5859
/* overflow: scroll; */

‎src/js/panel._utils.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -94,9 +94,12 @@ window.Widgets.Panel.Utils = {};
9494
linkStrength: 200,
9595
nodeStrength: -100,
9696
centreStrength: 80,
97+
promoSim: false,
9798
theme: 'light',
9899
light_theme: {
99-
fill: 'white',
100+
treeFill: 'white',
101+
scratchFill: 'blanchedalmond',
102+
promoFill: 'ivory',
100103
svgName: 'black',
101104
svgBorder: 'black',
102105
checkColour: 'gray',
@@ -116,7 +119,9 @@ window.Widgets.Panel.Utils = {};
116119
},
117120
},
118121
dark_theme: {
119-
fill: 'gray',
122+
treeFill: '#555555',
123+
scratchFill: 'gray',
124+
promoFill: 'dimgray',
120125
svgName: 'white',
121126
svgBorder: 'white',
122127
checkColour: 'white',

‎src/js/panel.promo.js

+66-59
Original file line numberDiff line numberDiff line change
@@ -32,49 +32,39 @@ window.Widgets.Panel.Promo = {}
3232
return
3333
}
3434
// first the variables centreStrength
35-
ns.pforceNode = d3.forceManyBody();
35+
// ns.pforceNode = d3.forceManyBody();
3636

37-
ns.pforceLink = d3
38-
.forceLink(panelUtilsNs.split.promo.edges)
39-
.id(panelUtilsNs.getLinkId)
40-
.distance(4 * ns.options.icon_size);
37+
// ns.pforceLink = d3
38+
// .forceLink(panelUtilsNs.split.promo.edges)
39+
// .id(panelUtilsNs.getLinkId)
40+
// .distance(4 * ns.options.icon_size);
4141

42-
ns.pforceCentre = d3.forceCenter(
43-
ns.options.working_width / 2,
44-
ns.options.svg_height / 4,
45-
);
42+
// ns.pforceCentre = d3.forceCenter(
43+
// ns.options.working_width / 2,
44+
// ns.options.svg_height / 4,
45+
// );
4646

47-
if (ns.options.nodeStrength !== undefined) {
48-
ns.pforceNode.strength(ns.options.nodeStrength);
49-
}
47+
// if (ns.options.nodeStrength !== undefined) {
48+
// ns.pforceNode.strength(ns.options.nodeStrength);
49+
// }
5050

51-
if (ns.options.linkStrength !== undefined) {
52-
ns.pforceLink.strength(ns.options.linkStrength);
53-
}
51+
// if (ns.options.linkStrength !== undefined) {
52+
// ns.pforceLink.strength(ns.options.linkStrength);
53+
// }
5454

55-
if (ns.options.centreStrength !== undefined) {
56-
ns.pforceCentre.strength(ns.options.centreStrength);
57-
}
55+
// if (ns.options.centreStrength !== undefined) {
56+
// ns.pforceCentre.strength(ns.options.centreStrength);
57+
// }
5858
console.log("panelUtilsNs.split.promo.nodes->",panelUtilsNs.split.promo.nodes);
5959

60-
ns.promotable_sim = d3
61-
.forceSimulation()
62-
// .on('end', function() {
63-
// console.log(["promotable_sim",this]);
64-
// this.force('link', options.pforceLink)
65-
// .force('charge', options.pforceNode)
66-
// .force('center', options.pforceCentre);
67-
// });
68-
// .force('link', ns.pforceLink)
69-
// .force('charge', ns.pforceNode)
70-
// .force('center', ns.pforceCentre);
71-
.force("link", d3.forceLink() // This force provides links between nodes
72-
.id(d => d.id) // This sets the node id accessor to the specified function. If not specified, will default to the index of a node.
73-
// .distance(500 * ns.options.icon_size)
74-
)
75-
.force("charge", d3.forceManyBody().strength(-500)) // This adds repulsion (if it's negative) between nodes.
76-
.force("center", d3.forceCenter(ns.options.width / 2, ns.options.height / 2)); // This force attracts nodes to the center of the svg area
7760

61+
62+
ns.promotable_sim = d3
63+
.forceSimulation()
64+
.force("link", d3.forceLink() // This force provides links between nodes
65+
.id(d => d.id) // This sets the node id accessor to the specified function. If not specified, will default to the index of a node.
66+
// .distance(500 * ns.options.icon_size)
67+
);
7868

7969
// 7. Now show split graphs
8070
console.groupEnd();
@@ -215,12 +205,26 @@ window.Widgets.Panel.Promo = {}
215205
// This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated).
216206
ns.promotable_sim.force("link")
217207
.links(panelUtilsNs.split.promo.edges)
218-
.distance(function() {return 5 * ns.options.icon_size;});
219-
208+
.id(d => d.id)
209+
.distance(function() {return 5 * ns.options.icon_size;});
210+
211+
// Setup either the Layout, or Default Force Graph
212+
if (ns.options.promoSim) {
213+
ns.promotable_sim
214+
.force("charge", d3.forceManyBody().strength(-500)) // This adds repulsion (if it's negative) between nodes.
215+
// .force("charge", d3.forceManyBody().strength(-500)) // This adds repulsion (if it's negative) between nodes.
216+
// .force("center", d3.forceCenter(ns.options.width / 2, ns.options.height / 2)); // This force attracts nodes to the center of the svg area
217+
} else {
218+
ns.promotable_sim
219+
.force("charge", d3.forceManyBody().strength(-500)) // This adds repulsion (if it's negative) between nodes.
220+
.force("center", d3.forceCenter(ns.options.width / 2, ns.options.height / 2)); // This force attracts nodes to the center of the svg area
221+
}
222+
223+
220224
//create zoom handler for each
221-
ns.zoom_handler = d3.zoom().on('zoom', function(event, d) {
222-
ns.promo_svg.attr('transform', d3.event.transform);
223-
});
225+
// ns.zoom_handler = d3.zoom().on('zoom', function(event, d) {
226+
// ns.promo_svg_root.attr('transform', event.transform);
227+
// });
224228

225229

226230

@@ -229,23 +233,23 @@ window.Widgets.Panel.Promo = {}
229233
};
230234

231235
//The simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value.
232-
ns.dragstarted = function(d) {
233-
if (!d3.event.active) {
236+
ns.dragstarted = function(event, d) {
237+
if (!event.active) {
234238
ns.promotable_sim.alphaTarget(0.3).restart(); //sets the current target alpha to the specified number in the range [0,1].
235239
}
236240
d.fy = d.y; //fx - the node’s fixed x-position. Original is null.
237241
d.fx = d.x; //fy - the node’s fixed y-position. Original is null.
238242
}
239243

240244
//When the drag gesture starts, the targeted node is fixed to the pointer
241-
ns.dragged = function(d) {
242-
d.fx = d3.event.x;
243-
d.fy = d3.event.y;
245+
ns.dragged = function(event, d) {
246+
d.fx = event.x;
247+
d.fy = event.y;
244248
}
245249

246250
//the targeted node is released when the gesture ends
247-
ns.dragended = function(d) {
248-
if (!d3.event.active) {
251+
ns.dragended = function(event, d) {
252+
if (!event.active) {
249253
ns.promotable_sim.alphaTarget(0);
250254
}
251255
d.fx = null;
@@ -282,17 +286,20 @@ window.Widgets.Panel.Promo = {}
282286
.attr('width', $component.width())
283287
.attr('height', $component.height())
284288
.attr('cursor', 'pointer')
285-
.attr('pointer-events', 'none')
286-
287-
ns.promotable_rect = ns.promo_svg
288-
.append('rect')
289-
.attr('id', 'promotable_rect')
290-
.attr('width', $component.width())
291-
.attr('height', $component.height())
292-
.attr('x', 0)
293-
.attr('y', 0)
294-
.attr('stroke', panelUtilsNs.theme.svgBorder)
295-
.attr('fill', panelUtilsNs.theme.fill);
289+
.attr('pointer-events', 'all')
290+
.style("background", panelUtilsNs.theme.promoFill);
291+
292+
// .attr('pointer-events', 'none')
293+
294+
// ns.promotable_rect = ns.promo_svg
295+
// .append('rect')
296+
// .attr('id', 'promotable_rect')
297+
// .attr('width', $component.width())
298+
// .attr('height', $component.height())
299+
// .attr('x', 0)
300+
// .attr('y', 0)
301+
// .attr('stroke', panelUtilsNs.theme.svgBorder)
302+
// .attr('fill', panelUtilsNs.theme.fill);
296303

297304
ns.promotable_label = ns.promo_svg
298305
.append('g')
@@ -305,7 +312,7 @@ window.Widgets.Panel.Promo = {}
305312
ns.promo_svg_zoom = ns.promo_svg
306313
.call(
307314
d3.zoom().on('zoom', function(event, d) {
308-
ns.promo_svg.attr('transform', event.transform);
315+
ns.promo_svg_root.attr('transform', event.transform);
309316
}),
310317
)
311318
.attr('id', 'promo_svg_zoom');

‎src/js/panel.scratch.js

+24-21
Original file line numberDiff line numberDiff line change
@@ -214,33 +214,33 @@ window.Widgets.Panel.Scratch = {}
214214

215215

216216
//create zoom handler for each
217-
ns.zoom_handler = d3.zoom().on('zoom', function(event, d) {
218-
ns.scratch_svg_root.attr('transform', d3.event.transform);
219-
});
217+
// ns.zoom_handler = d3.zoom().on('zoom', function(event, d) {
218+
// ns.scratch_svg_root.attr('transform', event.transform);
219+
// });
220220

221221

222222
console.groupEnd();
223223

224224
};
225225

226226

227-
ns.dragstarted = function(d) {
228-
if (!d3.event.active) {
227+
ns.dragstarted = function(event, d) {
228+
if (!event.active) {
229229
ns.scratch_sim.alphaTarget(0.3).restart(); //sets the current target alpha to the specified number in the range [0,1].
230230
}
231231
d.fy = d.y; //fx - the node’s fixed x-position. Original is null.
232232
d.fx = d.x; //fy - the node’s fixed y-position. Original is null.
233233
}
234234

235235
//When the drag gesture starts, the targeted node is fixed to the pointer
236-
ns.dragged = function(d) {
237-
d.fx = d3.event.x;
238-
d.fy = d3.event.y;
236+
ns.dragged = function(event, d) {
237+
d.fx = event.x;
238+
d.fy = event.y;
239239
}
240240

241241
//the targeted node is released when the gesture ends
242-
ns.dragended = function(d) {
243-
if (!d3.event.active) {
242+
ns.dragended = function(event, d) {
243+
if (!event.active) {
244244
ns.scratch_sim.alphaTarget(0);
245245
}
246246
d.fx = null;
@@ -277,17 +277,20 @@ window.Widgets.Panel.Scratch = {}
277277
.attr('height', $component.height())
278278
.attr('cursor', 'pointer')
279279
.attr('pointer-events', 'all')
280-
.append('g')
280+
.style("background", panelUtilsNs.theme.scratchFill);
281281

282-
ns.scratch_rect = ns.scratch_svg
283-
.append('rect')
284-
.attr('id', 'scratch_rect')
285-
.attr('width', $component.width())
286-
.attr('height', $component.height())
287-
.attr('x', 0)
288-
.attr('y', 0)
289-
.attr('stroke', panelUtilsNs.theme.svgBorder)
290-
.attr('fill', panelUtilsNs.theme.fill);
282+
283+
// .append('g')
284+
285+
// ns.scratch_rect = ns.scratch_svg
286+
// .append('rect')
287+
// .attr('id', 'scratch_rect')
288+
// .attr('width', $component.width())
289+
// .attr('height', $component.height())
290+
// .attr('x', 0)
291+
// .attr('y', 0)
292+
// .attr('stroke', panelUtilsNs.theme.svgBorder)
293+
// .attr('fill', panelUtilsNs.theme.fill);
291294

292295
ns.scratch_label = ns.scratch_svg
293296
.append('g')
@@ -300,7 +303,7 @@ window.Widgets.Panel.Scratch = {}
300303
ns.scratch_svg_zoom = ns.scratch_svg
301304
.call(
302305
d3.zoom().on('zoom', function(event, d) {
303-
ns.scratch_svg.attr('transform', event.transform);
306+
ns.scratch_svg_root.attr('transform', event.transform);
304307
}),
305308
)
306309
.attr('id', 'scratch_svg_zoom');

0 commit comments

Comments
 (0)