Skip to content

Commit 7c4cb47

Browse files
Theo-JaunetTheo-Jaunet
committed
start of new ui
1 parent 7a99c97 commit 7c4cb47

4 files changed

Lines changed: 536 additions & 16 deletions

File tree

‎assets/js/newCollage.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ function placeMark() {
1818

1919
let rects = Object.keys(drawnMarks).map(d => drawnMarks[d])
2020
if (Object.keys(drawnMarks).length === 0) {
21-
return {x: 250 - 30, y: 250 - 30, w: 60, h: 60};
21+
return {x: 125 - 30, y: 125 - 30, w: 60, h: 60};
2222
} else {
2323
return placeRectangleSpiral(rects,
2424
{w: 60, h: 60}, spiralOptions
@@ -183,10 +183,10 @@ function placeRectangleSpiral(
183183

184184

185185
// console.log(size);
186-
const center = {x: 250, y: 250}
186+
const center = {x: 125, y: 125}
187187

188-
const containerWidth = 500
189-
const containerHeight = 500;
188+
const containerWidth = 250
189+
const containerHeight = 250;
190190

191191
const padding = options.padding ?? 6;
192192
const step = options.step ?? 12;

‎assets/js/sandbox.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -465,8 +465,8 @@ async function drawSvg() {
465465
function ticked() {
466466

467467
timages
468-
.attr("x", d => clampVal(d.x, 0, 800))
469-
.attr("y", d => clampVal(d.y, 0, 460))
468+
.attr("x", d => clampVal(d.x, 0, size.width))
469+
.attr("y", d => clampVal(d.y, 0, size.height))
470470
}//function ticked
471471
}
472472
populateSandboxMenu(data)

‎index.html‎

Lines changed: 52 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@ <h3 style="display: inline;font-weight:700;margin-left:10px;color: #eeeeee">Desc
5151
<div style="justify-content: center;width: 80vw;margin-left: 60px;margin-top: 5px;display: flex" id="navButtonList">
5252
<button onclick="">Import CSV</button>
5353
<button onclick="switchPalette()">Make a Palette</button>
54+
<button onclick="switchGrid()"> Grid Layout</button>
55+
<button onclick="switchForce()"> Force Layout</button>
5456
<!-- <button onclick="fakeGpx()">Import GPX</button>-->
5557
<!-- <button onclick="fakeBg()">Import Background</button>-->
5658
<!-- <button onclick="">Import Data</button>-->
@@ -62,7 +64,47 @@ <h3 style="display: inline;font-weight:700;margin-left:10px;color: #eeeeee">Desc
6264
</div>
6365
<!-- Primary Page Layout
6466
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
65-
<div class="container" style="max-width: unset;width:94vw;margin-bottom: 5%" id="testContainer">
67+
<div class="container"
68+
style="max-width: unset;width:96vw;margin-bottom: 5%;display: flex;max-height:92vh;padding-top: 20px" id="">
69+
<div style="width: 350px;display: flex;flex-direction:column " id="sideSettings">
70+
<div>
71+
<svg id="composition" width="320" height="320" style="border: 1px solid #555">
72+
73+
74+
</svg>
75+
</div>
76+
<div>
77+
<div style="" class="">
78+
<p style="margin: 0;font-size:16pt;font-weight: 600;"> Available Palettes</p>
79+
<div id="AllPaletteCont">
80+
81+
</div>
82+
83+
84+
</div>
85+
</div>
86+
87+
</div>
88+
<div style="width: calc(100% - 350px)">
89+
<canvas id="inVis" style="width: 100%;height: 100%;border-radius: 5px;border: solid 1px #555;display: none"> </canvas>
90+
<!-- <div id="fakePreview">-->
91+
<svg id="fakePreviewSvg"></svg>
92+
<!-- </div>-->
93+
</div>
94+
</div>
95+
96+
97+
98+
<div id="fakeGrammar"></div>
99+
<div id="markTreeList">
100+
101+
102+
<ul id="glyphTree" class="tree">
103+
104+
</ul>
105+
</div>
106+
107+
<div class="container" style="max-width: unset;width:94vw;margin-bottom: 5%;display: none" id="testContainer">
66108

67109
<div id="paletteCollector" style="display: none">
68110
<div class="row" style="margin-top: 3%;text-align: center;display:flex">
@@ -103,8 +145,8 @@ <h3 style="display: inline;font-weight:700;margin-left:10px;color: #eeeeee">Desc
103145
</div>
104146
<div class="ten columns " style="margin-left:1%">
105147

106-
<canvas class="lightBorder" id="inVis"
107-
style="z-index: 99;display: inline-block;border-radius:5px;width: 100%;height: 100%"></canvas>
148+
<!-- <canvas class="lightBorder" id="inVis"-->
149+
<!-- style="z-index: 99;display: inline-block;border-radius:5px;width: 100%;height: 100%"></canvas>-->
108150
</div>
109151

110152
</div>
@@ -318,9 +360,9 @@ <h3 style="width: 100%;text-align:center;display: inline-block;margin-top:3%">Co
318360
</div>
319361
<div style="" class="sideContent">
320362
<p style="margin: 0;font-size:16pt;font-weight: 600;"> Available Palettes</p>
321-
<div id="AllPaletteCont">
363+
<!-- <div id="AllPaletteCont">-->
322364

323-
</div>
365+
<!-- </div>-->
324366

325367

326368
</div>
@@ -352,13 +394,13 @@ <h5> Chart Settings</h5>
352394
</div>
353395
<div>
354396
<h5> Composition</h5>
355-
<div id="fakeGrammar"></div>
397+
<!-- <div id="fakeGrammar"></div>
356398
<div id="markTreeList">
357399
358400
359401
<ul id="glyphTree" class="tree">
360402
361-
</ul>
403+
</ul>-->
362404

363405

364406
<div style="width: 100%;">
@@ -368,7 +410,7 @@ <h5> Composition</h5>
368410
</div>
369411
</div>
370412

371-
</div>
413+
<!-- </div>-->
372414

373415
<!-- <div>
374416
<ul class="tree">
@@ -404,9 +446,9 @@ <h5> Composition</h5>
404446
</div>
405447

406448

407-
<div id="fakePreview">
449+
<!-- <div id="fakePreview">
408450
<svg id="fakePreviewSvg"></svg>
409-
</div>
451+
</div>-->
410452

411453
</div>
412454
</div>

0 commit comments

Comments
 (0)