Skip to content

Commit 57e9187

Browse files
brettforbesbrettforbes
committed
Pan and Zoom, but it doesn't work
1 parent fcba09b commit 57e9187

File tree

3 files changed

+35
-26
lines changed

3 files changed

+35
-26
lines changed

‎src/js/panel._utils.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ window.Widgets.Panel.Utils = {};
183183
let heading = "";
184184
let description = "";
185185
let jason = {};
186-
console.log('d->',d);
186+
// console.log('d->',d);
187187
if ('original' in d) {
188188
heading = d.heading;
189189
description = d.description;
@@ -222,7 +222,7 @@ window.Widgets.Panel.Utils = {};
222222

223223
d3.select(this)
224224
.style("stroke", window.Widgets.Widget.theme.select)
225-
.style("opacity", 1)
225+
.style("opacity", 0.8)
226226
}
227227

228228
}
@@ -247,6 +247,7 @@ window.Widgets.Panel.Utils = {};
247247
}
248248
ns.mouseleave = function(event, d) {
249249
//console.log('mouseleave contentMenuItem ', event, d);
250+
ns.hideTooltip();
250251
if (ns.contentMenuItem == d) {
251252
// console.log('mouseleave remove contentMenuItem');
252253
ns.contentMenuItem = null;
@@ -256,7 +257,7 @@ window.Widgets.Panel.Utils = {};
256257

257258
d3.select(this)
258259
.style("stroke", "none")
259-
.style("opacity", 0.8)
260+
.style("opacity", 1)
260261
}
261262

262263
ns.showTooltip = function(d) {

‎src/js/panel.promo.js

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ window.Widgets.Panel.Promo = {}
8585
return
8686
}
8787

88-
ns.promoLink = ns.promo_svg
88+
ns.promoLink = ns.promo_svg_root
8989
.selectAll('.plinks')
9090
.data(panelUtilsNs.split.promo.edges)
9191
.join('line')
@@ -96,7 +96,7 @@ window.Widgets.Panel.Promo = {}
9696
.attr('stroke', 'grey')
9797
.attr('marker-end', 'url(#parrowhead)'); //The marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape.
9898

99-
ns.promoEdgepaths = ns.promo_svg
99+
ns.promoEdgepaths = ns.promo_svg_root
100100
.selectAll('.pedgepath') //make path go along with the link provide position for link labels
101101
.data(panelUtilsNs.split.promo.edges)
102102
.join('path')
@@ -108,7 +108,7 @@ window.Widgets.Panel.Promo = {}
108108
})
109109
.style('pointer-events', 'none');
110110

111-
ns.promoEdgelabels = ns.promo_svg
111+
ns.promoEdgelabels = ns.promo_svg_root
112112
.selectAll('.pedgelabel')
113113
.data(panelUtilsNs.split.promo.edges)
114114
.join('text')
@@ -134,7 +134,7 @@ window.Widgets.Panel.Promo = {}
134134
// Initialize the nodes with attached image, changed to join data
135135
// add hover over effect
136136
// for promo
137-
ns.promoNode = ns.promo_svg
137+
ns.promoNode = ns.promo_svg_root
138138
.append('g')
139139
.selectAll('pnodes')
140140
.data(panelUtilsNs.split.promo.nodes)
@@ -214,19 +214,19 @@ window.Widgets.Panel.Promo = {}
214214
.on('tick', function() {
215215
// console.log(['promotable_sim ticked',this, ns.promo_svg
216216
// .selectAll('.plinks')]);
217-
ns.promo_svg
217+
ns.promo_svg_root
218218
.selectAll('.plinks')
219219
.attr('x1', (d) => d.source.x)
220220
.attr('y1', (d) => d.source.y)
221221
.attr('x2', (d) => d.target.x)
222222
.attr('y2', (d) => d.target.y);
223223

224-
ns.promo_svg
224+
ns.promo_svg_root
225225
.selectAll('.pnodes')
226226
.attr('x', (d) => d.x - ns.options.icon_size / 2)
227227
.attr('y', (d) => d.y - ns.options.icon_size / 2);
228228

229-
ns.promo_svg.selectAll('.pedgepath').attr(
229+
ns.promo_svg_root.selectAll('.pedgepath').attr(
230230
'd',
231231
function(d) {
232232
//console.log('pedgepath->', d);
@@ -322,6 +322,8 @@ window.Widgets.Panel.Promo = {}
322322
.attr('id', 'promo_svg')
323323
.attr('width', $component.width())
324324
.attr('height', $component.height())
325+
.attr('cursor', 'pointer')
326+
.attr('pointer-events', 'none')
325327

326328
ns.promotable_rect = ns.promo_svg
327329
.append('rect')
@@ -341,18 +343,19 @@ window.Widgets.Panel.Promo = {}
341343
.text('Promotable')
342344
.style('fill', panelUtilsNs.theme.svgName);
343345

344-
ns.promo_svg_root = ns.promo_svg
346+
ns.promo_svg_zoom = ns.promo_svg
345347
.call(
346348
d3.zoom().on('zoom', function(event, d) {
347349
ns.promo_svg.attr('transform', event.transform);
348350
}),
349351
)
350-
.append('g')
351-
.attr('id', 'promo_svg_root');
352+
.attr('id', 'promo_svg_zoom');
352353

354+
ns.promo_svg_root = ns.promo_svg
355+
.append('g');
353356

354357
// Append the Arrowhead in Promo and Scratch SVG's
355-
ns.promo_svg_defs = ns.promo_svg
358+
ns.promo_svg_defs = ns.promo_svg_root
356359
.append('defs')
357360
.attr('id', 'promo_svg_defs')
358361
.append('marker')

‎src/js/panel.scratch.js

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ window.Widgets.Panel.Scratch = {}
8585
return
8686
}
8787

88-
ns.scratchLink = ns.scratch_svg
88+
ns.scratchLink = ns.scratch_svg_root
8989
.selectAll('.slinks')
9090
.data(panelUtilsNs.split.scratch.edges)
9191
.join('line')
@@ -96,7 +96,7 @@ window.Widgets.Panel.Scratch = {}
9696
.attr('stroke', 'grey')
9797
.attr('marker-end', 'url(#sarrowhead)'); //The marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape.
9898

99-
ns.scratchEdgepaths = ns.scratch_svg
99+
ns.scratchEdgepaths = ns.scratch_svg_root
100100
.selectAll('.sedgepath') //make path go along with the link provide position for link labels
101101
.data(panelUtilsNs.split.scratch.edges)
102102
.join('path')
@@ -108,7 +108,7 @@ window.Widgets.Panel.Scratch = {}
108108
})
109109
.style('pointer-events', 'none');
110110

111-
ns.scratchEdgelabels = ns.scratch_svg
111+
ns.scratchEdgelabels = ns.scratch_svg_root
112112
.selectAll('.sedgelabel')
113113
.data(panelUtilsNs.split.scratch.edges)
114114
.join('text')
@@ -131,7 +131,7 @@ window.Widgets.Panel.Scratch = {}
131131
.text((d) => d.name);
132132

133133
// for scratch
134-
ns.scratchNode = ns.scratch_svg
134+
ns.scratchNode = ns.scratch_svg_root
135135
.append('g')
136136
.selectAll('snodes')
137137
.data(panelUtilsNs.split.scratch.nodes)
@@ -208,19 +208,19 @@ window.Widgets.Panel.Scratch = {}
208208
ns.scratch_sim
209209
.nodes(panelUtilsNs.split.scratch.nodes)
210210
.on('tick', function() {
211-
ns.scratch_svg
211+
ns.scratch_svg_root
212212
.selectAll('.slinks')
213213
.attr('x1', (d) => d.source.x)
214214
.attr('y1', (d) => d.source.y)
215215
.attr('x2', (d) => d.target.x)
216216
.attr('y2', (d) => d.target.y);
217217

218-
ns.scratch_svg
218+
ns.scratch_svg_root
219219
.selectAll('.snodes')
220220
.attr('x', (d) => d.x - ns.options.icon_size / 2)
221221
.attr('y', (d) => d.y - ns.options.icon_size / 2);
222222

223-
ns.scratch_svg.selectAll('.sedgepath').attr(
223+
ns.scratch_svg_root.selectAll('.sedgepath').attr(
224224
'd',
225225
function(d) {
226226
// console.log('sedgepath->', d);
@@ -255,7 +255,7 @@ window.Widgets.Panel.Scratch = {}
255255

256256
//create zoom handler for each
257257
ns.zoom_handler = d3.zoom().on('zoom', function(event, d) {
258-
ns.scratch_svg.attr('transform', d3.event.transform);
258+
ns.scratch_svg_root.attr('transform', d3.event.transform);
259259
});
260260

261261

@@ -315,6 +315,9 @@ window.Widgets.Panel.Scratch = {}
315315
.attr('id', 'scratch_svg')
316316
.attr('width', $component.width())
317317
.attr('height', $component.height())
318+
.attr('cursor', 'pointer')
319+
.attr('pointer-events', 'all')
320+
.append('g')
318321

319322
ns.scratch_rect = ns.scratch_svg
320323
.append('rect')
@@ -334,17 +337,19 @@ window.Widgets.Panel.Scratch = {}
334337
.text('Scratch Pad')
335338
.style('fill', panelUtilsNs.theme.svgName);
336339

337-
ns.scratch_svg_root = ns.scratch_svg
340+
ns.scratch_svg_zoom = ns.scratch_svg
338341
.call(
339342
d3.zoom().on('zoom', function(event, d) {
340343
ns.scratch_svg.attr('transform', event.transform);
341344
}),
342345
)
343-
.append('g')
344-
.attr('id', 'scratch_svg_root');
346+
.attr('id', 'scratch_svg_zoom');
347+
348+
ns.scratch_svg_root = ns.scratch_svg
349+
.append('g');
345350

346351

347-
ns.scratch_svg_defs = ns.scratch_svg
352+
ns.scratch_svg_defs = ns.scratch_svg_root
348353
.append('defs')
349354
.attr('id', 'scratch_svg_defs')
350355
.append('marker')

0 commit comments

Comments
 (0)