Skip to content

Commit 7a99c97

Browse files
Theo-JaunetTheo-Jaunet
committed
anchors & force
1 parent e997681 commit 7a99c97

9 files changed

Lines changed: 182 additions & 47 deletions

File tree

‎assets/css/main.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -546,10 +546,9 @@ table th {
546546
}
547547

548548
#AllPaletteCont canvas {
549-
550549
border: 1px solid #555;
551-
552550
border-radius: 4px;
551+
background: #F1F1F1;
553552
}
554553

555554
/*#chartSettings*/
@@ -573,7 +572,6 @@ table th {
573572
display: flex;
574573
width: 100%;
575574
flex-wrap: wrap;
576-
577575
}
578576

579577

‎assets/js/AllPalettes.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,12 @@ async function loadSavedPalette(url) {
103103
for (const [key, value] of Object.entries(palette.encodings.range.marks)) {
104104
if (value.proto) {
105105
value.proto.canvas = await convertToCanvas(value.proto.canvas)
106+
// removeColor(241, 241, 241, value.proto.canvas, 15)
106107
}
107108

108109
if (value.source) {
109110
value.source = await convertToCanvas(value.source)
111+
// removeColor(241, 241, 241, value.source, 15)
110112
}
111113
}
112114

‎assets/js/collageGrid.js‎

Lines changed: 36 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -244,21 +244,19 @@ function makeCollageFromData(palettes, order, marks, row, color = undefined, siz
244244

245245
let offX = base[0]
246246
let offY = base[0]
247+
console.log(ref.apply);
247248

248-
249+
let toOffX = 0
250+
let toOffY = 0
249251
if (ref.apply) {
250252
let anchorId = ref.linkTo
251253

252254
let to = megaPalettes[ref.apply]
253255

254256
//WHERE PREVIOUS WAS DRAWN
255-
offX = drawnMarks[ref.apply].x
256-
offY = drawnMarks[ref.apply].y
257-
258-
let selfAnchor = mark.proto.anchors[anchorId]
259-
260-
offX += selfAnchor.rx * sourceW
261-
offY += selfAnchor.ry * sourceH
257+
offX = drawnMarks[ref.apply].x - (drawnMarks[ref.apply].w / 2)
258+
offY = drawnMarks[ref.apply].y - (drawnMarks[ref.apply].h / 2)
259+
// tcon.fillRect(offX, offY, 5, 5)
262260

263261
if (to.displayType === "range") {
264262
let instancedMark = marks[ref.apply][row[dataBinding[ref.apply]]]
@@ -267,21 +265,45 @@ function makeCollageFromData(palettes, order, marks, row, color = undefined, siz
267265
if (instancedMark.scale) {
268266
tsc = instancedMark.scale
269267
}
270-
offX -= ToAnchor.rx * (instancedMark.source.width * tsc)
271-
offY -= ToAnchor.ry * (instancedMark.source.height * tsc)
268+
269+
270+
offX += ToAnchor.rx * (instancedMark.source.width * tsc)
271+
offY += ToAnchor.ry * (instancedMark.source.height * tsc)
272272

273273
}
274+
// tcon.fillStyle = "red"
275+
// tcon.fillRect(offX, offY, 5, 5)
276+
277+
let selfAnchor = mark.proto.anchors[anchorId]
278+
279+
// offX += selfAnchor.rx * sourceW
280+
// offY += selfAnchor.ry * sourceH
281+
282+
toOffX = selfAnchor.rx * sourceW
283+
toOffY = selfAnchor.ry * sourceH
284+
285+
console.log(toOffX * sourceW,toOffY)
286+
287+
tcon.drawImage(can,
288+
offX - toOffX,
289+
offY - toOffY,
290+
sourceW,
291+
sourceH)
292+
293+
} else {
294+
tcon.drawImage(can,
295+
offX - (sourceW / 2 + toOffX),
296+
offY - (sourceH / 2 + toOffY),
297+
sourceW,
298+
sourceH)
274299
}
275300

301+
//TODO: bug inducing with chained anchors
276302
drawnMarks[order[j]] = {x: offX, y: offY, w: sourceW, h: sourceH}
277303

278304

279-
// tcon.drawImage(mark.source, offX - sourceW / 2, offY - sourceH / 2, sourceW, sourceH)
280-
tcon.drawImage(can, offX - sourceW / 2, offY - sourceH / 2, sourceW, sourceH)
281305

282306
}
283-
// console.log(drawnMarks);
284-
285307

286308
}
287309

‎assets/js/dragStuff.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,21 @@ function dropPalette(e, elmnt) {
102102
let num = +elmnt.getAttribute("number")
103103
let name = elmnt.getAttribute("name")
104104
addPaletteInfoToCollage(allPalettes[num],name)
105+
megaPalettes[name] = allPalettes[num]
106+
107+
megaGlyph[name] = {
108+
dataColumn: "",
109+
size: {
110+
dataColumn: "",
111+
scale: "",
112+
},
113+
intensity: {
114+
dataColumn: "",
115+
scale: "",
116+
}
117+
}
118+
megaGlyph[name].color = makeColorScale(name, "")
119+
makeMarkTree()
105120
}
106121
}
107122

‎assets/js/main.js‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,9 @@ async function init() {
163163
initAllPalette()
164164

165165
// await loadDataset("assets/tempData/datasets/penguins.csv")
166-
await loadDataset("assets/tempData/datasets/week26.csv")
166+
// await loadDataset("assets/tempData/datasets/week26.csv")
167+
168+
chartDataset.data = fakeWeek26()
167169
drawSvg()
168170
// document.getElementById("jsonLoader").addEventListener("change", importFromJson);
169171
document.getElementById("imgLoader").addEventListener("change", importImg);
@@ -418,8 +420,6 @@ onkeydown = function (e) {
418420
}
419421

420422

421-
422-
423423
// function updateMarks(type) {
424424
//
425425
// let container = document.getElementById("marks");
@@ -764,8 +764,6 @@ function purge() {
764764
selectedMark = null
765765

766766

767-
768-
769767
// document.getElementById("paletteCont").innerHTML = "";
770768
// populateSelect()
771769
// fillTable()
@@ -850,4 +848,28 @@ function switchPalette() {
850848
container.style.display = "none"
851849
}
852850

851+
}
852+
853+
854+
function fakeWeek26() {
855+
let tdat = [53, 44, 27, 22, 23, 15, 14, 12, 12, 11, 8]
856+
857+
let res = []
858+
859+
let id = 0
860+
for (let i = 0; i < tdat.length; i++) {
861+
for (let j = 0; j < tdat[i]; j++) {
862+
863+
res.push({
864+
id: id,
865+
category: i,
866+
})
867+
++id
868+
}
869+
870+
}
871+
872+
return res
873+
874+
853875
}

‎assets/js/newCollage.js‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ let anchoring = false
1212
let newAnchors = []
1313

1414
let anchoringRef = ""
15+
let nAnchor = 0
1516

1617
function placeMark() {
1718

@@ -33,7 +34,7 @@ function addPaletteInfoToCollage(palette, name) {
3334
let show = palette.encodings.range.marks["mark0"].proto.canvas
3435

3536
drawnMarks[name] = placeMark()
36-
console.log(drawnMarks[name]);
37+
3738
svg.append("image")
3839
.attr("class", "collageElement")
3940
.attr("xlink:href", show.toDataURL("image/png"))
@@ -44,7 +45,7 @@ function addPaletteInfoToCollage(palette, name) {
4445
.attr("height", drawnMarks[name].h)
4546
.on("click", function (e) {
4647
let elem = e.target
47-
console.log(e)
48+
4849
if (!anchoring) {
4950
anchoring = true
5051
anchoringRef = name
@@ -62,7 +63,8 @@ function addPaletteInfoToCollage(palette, name) {
6263
.attr("fill", drawnMarks[name].x)
6364

6465
tFrom = {x: drawnMarks[name].x + offx, y: drawnMarks[name].y + offy, rx: offx, ry: offy, name: name}
65-
66+
megaPalettes[name].linkto = name
67+
setAnchorOnAllMarks(name, offx, offy, nAnchor)
6668
} else {
6769
if (anchoringRef !== name) {
6870

@@ -94,6 +96,13 @@ function addPaletteInfoToCollage(palette, name) {
9496
.attr("fill", "none")
9597
// .attr("stroke", drawnMarks[name].x)
9698

99+
megaPalettes[name].apply = tFrom.name
100+
megaPalettes[name].linkTo = nAnchor
101+
setAnchorOnAllMarks(name, offx, offy, nAnchor)
102+
// setAnchorOnAllMarks(tFrom.name, offx, offy, name)
103+
nAnchor++
104+
anchoring = false
105+
anchoringRef = ""
97106

98107
} else {
99108
let imCord = {x: +elem.getAttribute("x"), y: +elem.getAttribute("y")}
@@ -110,10 +119,27 @@ function addPaletteInfoToCollage(palette, name) {
110119
}
111120
}
112121
})
122+
}
123+
124+
125+
function setAnchorOnAllMarks(name, x, y, from) {
113126

114127

128+
for (const [id, value] of Object.entries(megaPalettes[name].encodings.range.marks)) {
129+
if (!value.proto.anchors) {
130+
value.proto.anchors = {}
131+
}
132+
133+
value.proto.anchors[from] = {
134+
x: x,
135+
y: y,
136+
rx: x / 60,
137+
ry: y / 60,
138+
}
139+
}
115140
}
116141

142+
117143
function rand(n) {
118144
return (Math.random() - 0.5) * n;
119145
}

‎assets/js/paletteHandler.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1168,7 +1168,7 @@ function setAnchorOnProto(e, el) {
11681168
// ty = (xy.y *source.height) / th
11691169

11701170
} else {
1171-
console.log("heheheh");
1171+
11721172
// tx = clampVal(xy.x - tw / 2 + source.width / 2, 0, source.width)
11731173
// ty = clampVal(xy.y - th / 2 + source.height / 2, 0, source.height)
11741174

@@ -1222,7 +1222,6 @@ function setAnchorOnProto(e, el) {
12221222
key: key,
12231223
number: num,
12241224
data: selProto.anchors[currAnchor]
1225-
12261225
}
12271226

12281227
// }

0 commit comments

Comments
 (0)