Skip to content

Commit 4eb873d

Browse files
Theo-JaunetTheo-Jaunet
committed
drag of nodes to update anchors + drag of data on composition to bind
1 parent 4a0a633 commit 4eb873d

4 files changed

Lines changed: 76 additions & 21 deletions

File tree

‎assets/js/datasetStuff.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@ function fillSidePanel() {
2424
let cont = isCont(chartDataset.data, tkeys[i])
2525
if (cont) {
2626
let trange = d3.extent(chartDataset.data.map(d => d[tkeys[i]]))
27-
container.innerHTML += `<div class="dataRow"><p class="dataColumn">${tkeys[i]}: </p><p> [${trange[0]}-${trange[1]}]</p></div>`
27+
container.innerHTML += `<div dataColumn="${tkeys[i]}" class="dataRow"><p class="dataColumn">${tkeys[i]}: </p><p> [${trange[0]}-${trange[1]}]</p></div>`
2828
} else {
2929

3030
let set = new Set(chartDataset.data.map(d => d[tkeys[i]]));
31-
container.innerHTML += `<div class="dataRow"><p class="dataColumn">${tkeys[i]}: </p><p> [${Array.from(set)}]</p></div>`
31+
container.innerHTML += `<div dataColumn="${tkeys[i]}" class="dataRow"><p class="dataColumn">${tkeys[i]}: </p><p> [${Array.from(set)}]</p></div>`
3232
}
3333

3434

‎assets/js/dragStuff.js‎

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ let dragging = false;
55
let offsetX = 0;
66
let offsetY = 0;
77

8+
let selectedDataColumn = ""
89

910
function dragElement(elmnt) {
1011
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
@@ -22,6 +23,7 @@ function dragElement(elmnt) {
2223
}
2324

2425

26+
2527
const rect = elmnt.getBoundingClientRect();
2628

2729
offsetX = e.clientX - rect.left;
@@ -84,11 +86,12 @@ function dragElement2(elmnt) {
8486

8587
elmnt.onmousedown = dragMouseDown;
8688

89+
8790
function dragMouseDown(e) {
8891
e = e || window.event;
8992
e.preventDefault();
93+
selectedDataColumn = elmnt.getAttribute("datacolumn");
9094

91-
console.log();
9295
const rect = elmnt.getBoundingClientRect();
9396

9497
offsetX = e.clientX - rect.left
@@ -137,10 +140,23 @@ function dragElement2(elmnt) {
137140
dragging = false
138141

139142

140-
if (e.target.matches("#paletteDetails")) {
143+
if (e.target.matches(".collageElement")) {
144+
let id = e.target.getAttribute("id").split("collage-")[1]
145+
146+
console.log(id);
147+
console.log(selectedDataColumn);
148+
149+
megaGlyph[id].dataColumn = selectedDataColumn
150+
151+
dataBinding[id] = selectedDataColumn
152+
153+
drawSvg()
154+
141155

142156
}
143157

158+
selectedDataColumn = ""
159+
144160

145161
}
146162
}
@@ -287,29 +303,47 @@ function dragstarted(event, d) {
287303

288304
function dragged(event, d) {
289305
let elem = d3.select(this)
290-
elem.attr("cx", event.x).attr("cy", event.y);
306+
291307

292308
let type = elem.attr("type")
293309
let name = elem.attr("name")
294-
295310
let svg = d3.select("#composition")
296311

297-
let from = svg.select(`circle[name='${name}'][type='from']`)
298-
let to = svg.select(`circle[name='${name}'][type='to']`)
312+
let tname = ""
313+
if (type === "from") {
314+
let node = svg.select(`circle[name='${name}'][type='from']`)
315+
316+
tname += svg.select(`circle[name='${name}'][type='from']`).attr("from")
299317

300-
let link = svg.select(`path[name='${name}']`)
318+
} else if (type === "to") {
319+
tname += svg.select(`circle[name='${name}'][type='to']`).attr("to")
320+
}
301321

322+
let mark = svg.select(`#collage-${tname}`)
302323

303-
link.transition().duration(40).attr("d", makeLink(+from.attr("cx"), +from.attr("cy"), +to.attr("cx"), +to.attr("cy")))
304-
// megaPalettes[name].apply = tFrom.name
305324

306-
if (type === "from") {
325+
let tx = event.x - mark.attr("x")
326+
let ty = event.y - mark.attr("y")
307327

308-
} else if (type === "to") {
328+
if ((tx > 0 && tx < 60) && (ty > 0 && ty < 60)) {
329+
elem.attr("cx", event.x).attr("cy", event.y);
309330

310-
}
311331

332+
let from = svg.select(`circle[name='${name}'][type='from']`)
333+
let to = svg.select(`circle[name='${name}'][type='to']`)
334+
335+
let link = svg.select(`path[name='${name}']`)
312336

337+
link.transition().duration(40).attr("d", makeLink(+from.attr("cx"), +from.attr("cy"), +to.attr("cx"), +to.attr("cy")))
338+
// megaPalettes[name].apply = tFrom.name
339+
340+
let id = from.attr("nAnchor")
341+
342+
343+
setAnchorOnAllMarks(tname, tx, ty, +id)
344+
345+
346+
}
313347
}
314348

315349
function dragended(event, d) {

‎assets/js/newCollage.js‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,14 @@ function addPaletteInfoToCollage(palette, name) {
9292
.attr("cy", drawnMarks[name].y + offy)
9393
.attr("r", 5)
9494
.attr("fill", drawnMarks[name].x)
95+
.attr("type", "from")
96+
.attr("from", name)
97+
.attr("name", name)
98+
.attr("nAnchor", nAnchor)
99+
.call(d3.drag()
100+
.on("start", dragstarted)
101+
.on("drag", dragged)
102+
.on("end", dragended))
95103

96104
tFrom = {x: drawnMarks[name].x + offx, y: drawnMarks[name].y + offy, rx: offx, ry: offy, name: name}
97105
megaPalettes[name].linkto = name
@@ -157,8 +165,15 @@ function addPaletteInfoToCollage(palette, name) {
157165
.attr("cy", drawnMarks[name].y + offy)
158166
.attr("r", 5)
159167
.attr("fill", drawnMarks[name].x)
160-
.call(dragCircle)
161-
168+
.attr("type", "to")
169+
.attr("from", tFrom.name)
170+
.attr("to", tTo.name)
171+
.attr("name", name)
172+
.attr("nAnchor", nAnchor)
173+
.call(d3.drag()
174+
.on("start", dragstarted)
175+
.on("drag", dragged)
176+
.on("end", dragended))
162177
}
163178
}
164179

@@ -195,16 +210,18 @@ function addPaletteInfoToCollage(palette, name) {
195210
.attr("stroke", "red")
196211
.attr("fill", "none")
197212
.attr("name", name)
198-
// .attr("marker-mid", "url(#arrow)")
213+
// .attr("marker-mid", "url(#arrow)")
199214
// .attr("stroke", drawnMarks[name].x)
200215

201216

202-
203217
svg.append("circle")
204218
.attr("cx", tFrom.x)
205219
.attr("cy", tFrom.y)
206220
.attr("type", "from")
221+
.attr("from", tFrom.name)
222+
.attr("to", tTo.name)
207223
.attr("name", name)
224+
.attr("nAnchor", nAnchor)
208225
.attr("r", 5)
209226
.attr("fill", drawnMarks[name].x)
210227
.call(d3.drag()
@@ -217,7 +234,10 @@ function addPaletteInfoToCollage(palette, name) {
217234
.attr("cx", tTo.x)
218235
.attr("cy", tTo.y)
219236
.attr("type", "to")
237+
.attr("from", tFrom.name)
238+
.attr("to", tTo.name)
220239
.attr("name", name)
240+
.attr("nAnchor", nAnchor)
221241
.attr("r", 5)
222242
.attr("fill", drawnMarks[name].x)
223243
.call(d3.drag()
@@ -227,6 +247,7 @@ function addPaletteInfoToCollage(palette, name) {
227247

228248
megaPalettes[name].apply = tFrom.name
229249
megaPalettes[name].linkTo = nAnchor
250+
nAnchor++
230251
}
231252
}
232253

‎assets/js/sandbox.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ function isCont(data, column) {
8383
}
8484
}
8585

86-
async function drawSvg() {
86+
function drawSvg() {
8787

8888
let svg = d3.select("#fakePreviewSvg")
8989

@@ -105,7 +105,7 @@ async function drawSvg() {
105105
data[i].y = size.height / 2
106106
}
107107

108-
let encodings = Object.keys(dataBinding)
108+
let encodings = Object.keys(dataBinding) //TODO: Replace with MegaGlyph
109109

110110
if (encodings.length === 0) {
111111

@@ -315,7 +315,7 @@ async function drawSvg() {
315315
tcol = hexToRgb(colScale[d[useDatCol]])
316316
// can = toColor(can, tcol.r * cl, tcol.g * cl, tcol.b * cl, 210)
317317
// can = toColor(can, tcol.r * cl, tcol.g * cl, tcol.b * cl, 210)
318-
recolorCanvasLAB(can,[tcol.r,tcol.g,tcol.b],1)
318+
recolorCanvasLAB(can, [tcol.r, tcol.g, tcol.b], 1)
319319
}
320320

321321
// removeColor(230, 230, 230, can, 25)

0 commit comments

Comments
 (0)