BETTER GRIDS

mapbuilder/index.html

@@ -12,10 +12,40 @@
 
     <div id="mySidepanel" class="sidepanel">
         <a href="javascript:void(0)" class="closebtn" onclick="toggleNav()">&times;</a>
-        <a href="#">About</a>
-        <a href="#">Services</a>
-        <a href="#">Clients</a>
-        <a href="#">Contact</a>
+
+        <div class="section">
+            <span class="title">Grid</span>
+            <div class="prop gridline">
+                <div class="item">
+                    <label for="mwidth" class="input">Line width</label>
+                    <input type="number" id="mwidth" value="4">
+                </div>
+                <div class="item">
+                    <label for="mwidth" class="input">Seperation</label>
+                    <input type="number" id="mwidth" value="100">
+                </div>
+                <div class="item">
+                    <label for="mwidth" class="input">Color</label>
+                    <input type="text" id="mwidth" value="#333">
+                </div>
+            </div>
+            <hr>
+            <div class="prop gridline">
+                <div class="item">
+                    <label for="mwidth" class="input">Line width</label>
+                    <input type="number" id="mwidth" value="2">
+                </div>
+                <div class="item">
+                    <label for="mwidth" class="input">Seperation</label>
+                    <input type="number" id="mwidth" value="20">
+                </div>
+                <div class="item">
+                    <label for="mwidth" class="input">Color</label>
+                    <input type="text" id="mwidth" value="#333">
+                </div>
+            </div>
+        </div>
+
     </div>
 
     <div id="canvasWrapper" class="wrapper">
@@ -33,7 +63,7 @@
         if (nav_open) {
             document.getElementById("mySidepanel").style.width = "0";
         } else {
-            document.getElementById("mySidepanel").style.width = "250px";
+            document.getElementById("mySidepanel").style.width = "350px";
         }
         nav_open = !nav_open;
     }

mapbuilder/src/index.ts

@@ -1,4 +1,25 @@
 
+let gridlineEls:any;
+let gridlineNeedsUpdate = true;
+
+function get_line_widths(): string[][] {
+    if (gridlineNeedsUpdate) {
+        gridlineEls = document.getElementsByClassName("gridline");
+        gridlineNeedsUpdate = false;
+    }
+    const out: string[][] = [[], [], []];
+    for(let el of <any[]>gridlineEls) {
+        let i = 0;
+        for( let c of el.getElementsByTagName('input')) {
+            out[i].push(
+                c.value
+            );
+            i += 1;
+        }
+    }
+    return out;
+}
+
 function main() {
     const canvas = <HTMLCanvasElement>document.getElementById("canvas");
     const ctx = canvas.getContext('2d');
@@ -9,44 +30,52 @@ function main() {
     canvas.width = width;
     canvas.height = height;
 
+    function draw() {
+        ctx.clearRect(0, 0, width, height);
+
+        ctx.save();
+
         ctx.translate(width / 2, height / 2);
 
-
-    ctx.strokeStyle = "#333"
-    draw_grid(
-        ctx, [width, 100, 20], [width / 2, height / 2], [width, height],
-        4, 0.30
-    );
+        ctx.strokeStyle = "#333";
+        draw_grid(ctx, get_line_widths(), [width / 2, height / 2], [width, height]);
         ctx.fillStyle = "#ff5f00";
 
         ctx.fillRect(0, 0, 100, 100);
 
+        ctx.restore();
+        requestAnimationFrame(draw);
+    }
+
     console.log("hallo");
+    draw();
+
 }
 
 function draw_grid(
     ctx: CanvasRenderingContext2D,
-    lines: number[],    // number of pixels between lines, with smaller gettings lines
+    lines: string[][],    // number of pixels between lines, with smaller gettings lines
     transform: [number, number],
-    size: [number, number],
-    init_width = 2, factor = 0.5) {
+    size: [number, number]) {
 
     ctx.save();
 
     ctx.translate(-transform[0], -transform[1]);
 
-
-    for (let delta of lines) {
-        ctx.lineWidth = init_width;
+    for (let i = lines[0].length - 1; i >= 0 ; i -= 1) {
+        ctx.lineWidth = parseInt(lines[0][i]);
+        const delta = parseInt(lines[1][i]);
+        ctx.strokeStyle = "transparent";
+        ctx.strokeStyle = lines[2][i];
 
         let xoff = transform[0] % delta;
         let yoff = transform[1] % delta;
 
         ctx.beginPath();
 
-        for (let i = xoff; i < size[0]; i += delta) {
-            ctx.moveTo(i, 0);
-            ctx.lineTo(i, size[1]);
+        for (let j = xoff; j < size[0]; j += delta) {
+            ctx.moveTo(j, 0);
+            ctx.lineTo(j, size[1]);
         }
         for (let j = yoff; j < size[1]; j += delta) {
             ctx.moveTo(0, j);
@@ -54,8 +83,6 @@ function draw_grid(
         }
 
         ctx.stroke();
-
-        init_width *= factor;
     }
 
     ctx.restore();

mapbuilder/src/style/style.scss

@@ -28,10 +28,12 @@ $darkgrey: darken($grey, 20);
     overflow-x: hidden;
     padding-top: 60px;
     transition: 0.5s;
-    a {
+    a,
+    input,
+    p {
         padding: 8px 8px 8px 32px;
         text-decoration: none;
-        font-size: 25px;
+        font-size: 20px;
         color: white;
         display: block;
         transition: 0.3s;
@@ -47,6 +49,52 @@ $darkgrey: darken($grey, 20);
     }
 }
 
+.section {
+    border: 2px solid $orange;
+    border-radius: 8px;
+    position: relative;
+    padding: 10px;
+    margin: 10px;
+    .title {
+        font-size: 24px;
+        color: $orange;
+        padding: 0 5px;
+        position: absolute;
+        top: -13px;
+        left: 8px;
+        display: inline-block;
+        background-color: $grey;
+    }
+    hr {
+        border: 1px dashed $lightgrey;
+    }
+}
+
+.prop {
+    margin: 10px;
+    color: white;
+    .item {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        label {
+            width: 40%;
+        }
+        input {
+            font-size: 15px;
+            margin-top: 2px;
+            color: $orange;
+            padding: 5px 10px;
+            width: 40%;
+            background-color: $lightgrey;
+        }
+    }
+    .item+.item {
+        margin-top: 10px;
+    }
+}
+
 .openbtn {
     position: absolute;
     right: 5px;