From 3864f27cc6dbf22cffbd6f71ef29090a6ef22ef6 Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Wed, 31 Dec 2025 13:06:41 -0600
Subject: [PATCH] More improvement for toolbar.

---
 inventory/static/css/components/draw.css | 122 ++++++-
 inventory/templates/components/draw.html | 424 ++++++++++++-----------
 inventory/templates/testing.html         |   9 +-
 3 files changed, 338 insertions(+), 217 deletions(-)

diff --git a/inventory/static/css/components/draw.css b/inventory/static/css/components/draw.css
index 11470be..a0cee01 100644
--- a/inventory/static/css/components/draw.css
+++ b/inventory/static/css/components/draw.css
@@ -1,9 +1,15 @@
+:root {
+    --tb-h: 34px;
+}
+
 .grid-widget {
     display: flex;
     flex-direction: column;
     height: 100%;
     min-width: 0;
     min-height: 0;
+    position: relative;
+    isolation: isolate;
 }
 
 .grid-widget .grid-wrap {
@@ -13,6 +19,7 @@
     position: relative;
     overflow: hidden;
     min-height: 0;
+    z-index: 0;
 }
 
 .grid-widget [data-grid] {
@@ -23,10 +30,12 @@
     touch-action: none;
     margin: 0 auto;
     max-width: 100%;
+    z-index: 0;
 }
 
 .grid-widget [data-toolbar]::-webkit-scrollbar {
     height: 8px;
+    z-index: 10;
 }
 
 .grid-widget [data-grid-wrap] {
@@ -51,6 +60,9 @@
     box-sizing: border-box;
     margin: 0 auto;
     max-width: 100%;
+    position: relative;
+    z-index: 10;
+    overflow: visible;
 }
 
 .grid-widget [data-dot] {
@@ -60,12 +72,25 @@
 }
 
 .grid-widget .toolbar {
-    display: flex;
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    overflow-y: visible;
+    display: grid;
     gap: .5rem;
+}
+
+.grid-widget .toolbar-row {
+    display: flex;
     align-items: center;
+    gap: .5rem;
+    min-width: 0;
+    flex-wrap: nowrap;
+}
+
+.toolbar-row--primary {
+    overflow-x: auto;
+}
+
+.toolbar-row--secondary {
+    overflow-x: auto;
+    opacity: .95;
 }
 
 .grid-widget .toolbar-range {
@@ -75,10 +100,13 @@
 }
 
 .grid-widget .dropdown-menu {
-    z-index: 2000;
-    min-width: 220px;
+    min-width: 200px;
     padding: .5rem .75rem;
-    border-radius: .5rem;
+    border-radius: .75rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
+    position: absolute;
+    z-index: 1000 !important;
+    pointer-events: auto;
 }
 
 .grid-widget .dropdown-menu>*:first-child {
@@ -105,4 +133,82 @@
 
 .grid-widget [data-toolbar] .vr {
     align-self: stretch;
-}
\ No newline at end of file
+}
+
+.grid-widget [data-toolbar] .btn-group,
+.grid-widget [data-toolbar] .dropdown,
+.grid-widget [data-toolbar] .vr {
+    flex: 0 0 auto;
+}
+
+.grid-widget .toolbar-group {
+    display: flex;
+    align-items: center;
+    gap: .25rem;
+    padding: .25rem;
+    border: 1px solid rgba(0, 0, 0, .08);
+    border-radius: .5rem;
+    background: rgba(0, 0, 0, .02);
+}
+
+.grid-widget .btn,
+.grid-widget .form-control,
+.grid-widget .badge {
+    height: var(--tb-h);
+}
+
+.grid-widget .toolbar .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 .5rem;
+}
+
+.grid-widget .toolbar .form-control-color {
+    width: var(--tb-h);
+    padding: 0;
+}
+
+.grid-widget .tb-btn {
+    flex-direction: column;
+    gap: 2px;
+    line-height: 1;
+}
+
+.grid-widget .tb-btn small {
+    font-size: 11px;
+    opacity: .75;
+}
+
+.grid-widget .dropdown-toggle::after {
+    display: none;
+}
+
+.grid-widget .toolbar .btn-group .btn {
+    border-radius: 0;
+}
+
+.grid-widget .toolbar .btn-group .btn:first-child {
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+}
+
+.grid-widget .toolbar .btn-group .btn:last-child {
+    border-top-right-radius: .5rem;
+    border-bottom-right-radius: .5rem;
+}
+
+.grid-widget .btn-check:checked+.btn {
+    background: rgba(0, 0, 0, .08);
+    border-color: rgba(0, 0, 0, .18);
+}
+
+.grid-widget [data-toolbar],
+.grid-widget [data-grid] {
+    margin-inline: auto;
+}
+
+.grid-widget [data-toolbar] {
+    max-width: var(--grid-maxw, 100%);
+    width: 100%;
+}
diff --git a/inventory/templates/components/draw.html b/inventory/templates/components/draw.html
index 6bf02fc..fefc903 100644
--- a/inventory/templates/components/draw.html
+++ b/inventory/templates/components/draw.html
@@ -2,222 +2,230 @@
 <div class="grid-widget" data-grid-widget>
     <div data-toolbar
         class="btn-toolbar bg-light border border-bottom-0 rounded-bottom-0 border-secondary-subtle rounded p-1 align-items-center flex-nowrap overflow-auto toolbar">
-        <div class="d-flex flex-wrap align-items-center gap-2">
-            <div class="dropdown">
-                <button type="button" class="btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                        class="bi bi-grid-3x3-gap" viewBox="0 0 16 16">
-                        <path
-                            d="M4 2v2H2V2zm1 12v-2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m0-5V7a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m0-5V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m5 10v-2a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m0-5V7a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m0-5V2a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1M9 2v2H7V2zm5 0v2h-2V2zM4 7v2H2V7zm5 0v2H7V7zm5 0h-2v2h2zM4 12v2H2v-2zm5 0v2H7v-2zm5 0v2h-2v-2zM12 1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm-1 6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zm1 4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1z" />
-                    </svg>
-                    <span class="badge text-bg-secondary" data-cell-size-val>25px</span>
-                </button>
-                <ul class="dropdown-menu p-2">
-                    <li>
-                        <div class="small text-secondary mb-1">Cell Size</div>
-                        <input type="range" min="1" max="100" step="1" value="25" data-cell-size
-                            class="form-range w-100">
-                    </li>
-                </ul>
-            </div>
+        <div class="toolbar-row toolbar-row--primary">
+            <div class="toolbar-group">
+                <div class="btn-group">
+                    <input type="radio" class="btn-check" value="pen" name="tool-{{ uid }}" id="tool-pen-{{ uid }}"
+                        data-tool checked>
+                    <label for="tool-pen-{{ uid }}"
+                        class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-pen" viewBox="0 0 16 16">
+                            <path
+                                d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708z" />
+                        </svg>
+                    </label>
 
-            <div class="dropdown">
-                <button type="button" class="btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                        class="bi bi-droplet-fill" viewBox="0 0 16 16">
-                        <path
-                            d="M8 16a6 6 0 0 0 6-6c0-1.655-1.122-2.904-2.432-4.362C10.254 4.176 8.75 2.503 8 0c0 0-6 5.686-6 10a6 6 0 0 0 6 6M6.646 4.646l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448c.82-1.641 1.717-2.753 2.093-3.13" />
-                    </svg>
-                    <span class="badge text-bg-secondary" data-fill-opacity-val>100%</span>
-                </button>
-                <ul class="dropdown-menu p-2">
-                    <li>
-                        <div class="small text-secondary mb-1">Fill Opacity</div>
-                        <input type="range" min="0" max="1" step="0.01" value="1" data-fill-opacity
-                            class="form-range w-100">
-                    </li>
-                </ul>
-            </div>
+                    <input type="radio" class="btn-check" value="outline" name="tool-{{ uid }}"
+                        id="tool-outline-{{ uid }}" data-tool>
+                    <label for="tool-outline-{{ uid }}"
+                        class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-square" viewBox="0 0 16 16">
+                            <path
+                                d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" />
+                        </svg>
+                    </label>
 
-            <div class="dropdown">
-                <button type="button" class="btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                        class="bi bi-dash-square-dotted" viewBox="0 0 16 16">
-                        <path
-                            d="M2.5 0q-.25 0-.487.048l.194.98A1.5 1.5 0 0 1 2.5 1h.458V0zm2.292 0h-.917v1h.917zm1.833 0h-.917v1h.917zm1.833 0h-.916v1h.916zm1.834 0h-.917v1h.917zm1.833 0h-.917v1h.917zM13.5 0h-.458v1h.458q.151 0 .293.029l.194-.981A2.5 2.5 0 0 0 13.5 0m2.079 1.11a2.5 2.5 0 0 0-.69-.689l-.556.831q.248.167.415.415l.83-.556zM1.11.421a2.5 2.5 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415zM16 2.5q0-.25-.048-.487l-.98.194q.027.141.028.293v.458h1zM.048 2.013A2.5 2.5 0 0 0 0 2.5v.458h1V2.5q0-.151.029-.293zM0 3.875v.917h1v-.917zm16 .917v-.917h-1v.917zM0 5.708v.917h1v-.917zm16 .917v-.917h-1v.917zM0 7.542v.916h1v-.916zm15 .916h1v-.916h-1zM0 9.375v.917h1v-.917zm16 .917v-.917h-1v.917zm-16 .916v.917h1v-.917zm16 .917v-.917h-1v.917zm-16 .917v.458q0 .25.048.487l.98-.194A1.5 1.5 0 0 1 1 13.5v-.458zm16 .458v-.458h-1v.458q0 .151-.029.293l.981.194Q16 13.75 16 13.5M.421 14.89c.183.272.417.506.69.689l.556-.831a1.5 1.5 0 0 1-.415-.415zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373Q2.25 16 2.5 16h.458v-1H2.5q-.151 0-.293-.029zM13.5 16q.25 0 .487-.048l-.194-.98A1.5 1.5 0 0 1 13.5 15h-.458v1zm-9.625 0h.917v-1h-.917zm1.833 0h.917v-1h-.917zm1.834 0h.916v-1h-.916zm1.833 0h.917v-1h-.917zm1.833 0h.917v-1h-.917zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z" />
-                    </svg>
-                    <span class="badge text-bg-secondary" data-stroke-opacity-val>100%</span>
-                </button>
-                <ul class="dropdown-menu p-2">
-                    <li>
-                        <div class="small text-secondary mb-1">Stroke Opacity</div>
-                        <input type="range" min="0" max="1" step="0.01" value="1" data-stroke-opacity
-                            class="form-range w-100">
-                    </li>
-                </ul>
-            </div>
+                    <input type="radio" class="btn-check" value="filled" name="tool-{{ uid }}"
+                        id="tool-filled-{{ uid }}" data-tool>
+                    <label for="tool-filled-{{ uid }}"
+                        class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-square-fill" viewBox="0 0 16 16">
+                            <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2z" />
+                        </svg>
+                    </label>
 
-            <div class="dropdown">
-                <button type="button" class="btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
-                        fill="currentColor" class="me-1" aria-hidden="true">
-                        <rect x="2" y="3" width="12" height="1" rx=".5"></rect>
-                        <rect x="2" y="7" width="12" height="2" rx="1"></rect>
-                        <rect x="2" y="12" width="12" height="3" rx="1.5"></rect>
-                    </svg>
-                    <span class="badge text-bg-secondary" data-stroke-width-val>12%</span>
-                </button>
-                <ul class="dropdown-menu p-2">
-                    <li>
-                        <div class="small text-secondary mb-1">Stroke Width</div>
-                        <input type="range" min="0" max="1" step="0.01" value="0.12" data-stroke-width
-                            class="form-range w-100">
-                    </li>
-                </ul>
+                    <input type="radio" class="btn-check" value="outlineEllipse" name="tool-{{ uid }}"
+                        id="tool-outline-ellipse-{{ uid }}" data-tool>
+                    <label for="tool-outline-ellipse-{{ uid }}"
+                        class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-circle" viewBox="0 0 16 16">
+                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
+                        </svg>
+                    </label>
+
+                    <input type="radio" class="btn-check" value="filledEllipse" name="tool-{{ uid }}"
+                        id="tool-filled-ellipse-{{ uid }}" data-tool>
+                    <label for="tool-filled-ellipse-{{ uid }}"
+                        class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-circle-fill" viewBox="0 0 16 16">
+                            <circle cx="8" cy="8" r="8" />
+                        </svg>
+                    </label>
+
+                    <input type="radio" class="btn-check" value="line" name="tool-{{ uid }}" id="tool-line-{{ uid }}"
+                        data-tool>
+                    <label for="tool-line-{{ uid }}"
+                        class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"
+                            aria-hidden="true">
+                            <path d="M4 12 L12 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                            <circle cx="4" cy="12" r="1.5" fill="currentColor" />
+                            <circle cx="12" cy="4" r="1.5" fill="currentColor" />
+                        </svg>
+                    </label>
+                </div>
+                <input type="color" class="form-control form-control-sm form-control-color" data-color>
+            </div>
+            <div class="toolbar-group">
+                <div class="btn-group">
+                    <button type="button"
+                        class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center"
+                        data-export>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-download" viewBox="0 0 16 16">
+                            <path
+                                d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
+                            <path
+                                d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" />
+                        </svg>
+                    </button>
+                    <input type="file" data-import accept="application/json" class="d-none">
+                    <button type="button"
+                        class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center"
+                        data-import-button>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-upload" viewBox="0 0 16 16">
+                            <path
+                                d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
+                            <path
+                                d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z" />
+                        </svg>
+                    </button>
+                    <button type="button"
+                        class="btn btn-sm btn-danger border d-inline-flex align-items-center justify-content-center"
+                        data-clear>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-x-lg" viewBox="0 0 16 16">
+                            <path
+                                d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z" />
+                        </svg>
+                    </button>
+                </div>
             </div>
         </div>
-        <div class="vr mx-1"></div>
-        <input type="color" class="form-control form-control-sm form-control-color" data-color>
-        <div class="vr mx-1"></div>
-        <div class="btn-group">
-            <input type="radio" class="btn-check" value="pen" name="tool-{{ uid }}" id="tool-pen-{{ uid }}" data-tool
-                checked>
-            <label for="tool-pen-{{ uid }}"
-                class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pen"
-                    viewBox="0 0 16 16">
-                    <path
-                        d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708z" />
-                </svg>
-            </label>
+        <div class="toolbar-row toolbar-row--secondary">
+            <div class="toolbar-group">
+                <div class="btn-group">
+                    <input type="radio" class="btn-check" name="gridType-{{ uid }}" value="noGrid"
+                        id="type-no-grid-{{ uid }}" data-gridtype checked>
+                    <label for="type-no-grid-{{ uid }}"
+                        class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-border" viewBox="0 0 16 16">
+                            <path
+                                d="M0 0h.969v.5H1v.469H.969V1H.5V.969H0zm2.844 1h-.938V0h.938zm1.875 0H3.78V0h.938v1zm1.875 0h-.938V0h.938zm.937 0V.969H7.5V.5h.031V0h.938v.5H8.5v.469h-.031V1zm2.813 0h-.938V0h.938zm1.875 0h-.938V0h.938zm1.875 0h-.938V0h.938zM15.5 1h-.469V.969H15V.5h.031V0H16v.969h-.5zM1 1.906v.938H0v-.938zm6.5.938v-.938h1v.938zm7.5 0v-.938h1v.938zM1 3.78v.938H0V3.78zm6.5.938V3.78h1v.938zm7.5 0V3.78h1v.938zM1 5.656v.938H0v-.938zm6.5.938v-.938h1v.938zm7.5 0v-.938h1v.938zM.969 8.5H.5v-.031H0V7.53h.5V7.5h.469v.031H1v.938H.969zm1.875 0h-.938v-1h.938zm1.875 0H3.78v-1h.938v1zm1.875 0h-.938v-1h.938zm1.875-.031V8.5H7.53v-.031H7.5V7.53h.031V7.5h.938v.031H8.5v.938zm1.875.031h-.938v-1h.938zm1.875 0h-.938v-1h.938zm1.875 0h-.938v-1h.938zm1.406 0h-.469v-.031H15V7.53h.031V7.5h.469v.031h.5v.938h-.5zM0 10.344v-.938h1v.938zm7.5 0v-.938h1v.938zm8.5-.938v.938h-1v-.938zM0 12.22v-.938h1v.938zm7.5 0v-.938h1v.938zm8.5-.938v.938h-1v-.938zM0 14.094v-.938h1v.938zm7.5 0v-.938h1v.938zm8.5-.938v.938h-1v-.938zM.969 16H0v-.969h.5V15h.469v.031H1v.469H.969zm1.875 0h-.938v-1h.938zm1.875 0H3.78v-1h.938v1zm1.875 0h-.938v-1h.938zm.937 0v-.5H7.5v-.469h.031V15h.938v.031H8.5v.469h-.031v.5zm2.813 0h-.938v-1h.938zm1.875 0h-.938v-1h.938zm1.875 0h-.938v-1h.938zm.937 0v-.5H15v-.469h.031V15h.469v.031h.5V16z" />
+                        </svg>
+                    </label>
+                    <input type="radio" class="btn-check" name="gridType-{{ uid }}" value="horizontalGrid"
+                        id="type-horizontal-{{ uid }}" data-gridtype>
+                    <label for="type-horizontal-{{ uid }}"
+                        class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-border-center" viewBox="0 0 16 16">
+                            <path
+                                d="M.969 0H0v.969h.5V1h.469V.969H1V.5H.969zm.937 1h.938V0h-.938zm1.875 0h.938V0H3.78v1zm1.875 0h.938V0h-.938zM7.531.969V1h.938V.969H8.5V.5h-.031V0H7.53v.5H7.5v.469zM9.406 1h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.469V.969h.5V0h-.969v.5H15v.469h.031zM1 2.844v-.938H0v.938zm6.5-.938v.938h1v-.938zm7.5 0v.938h1v-.938zM1 4.719V3.78H0v.938h1zm6.5-.938v.938h1V3.78h-1zm7.5 0v.938h1V3.78h-1zM1 6.594v-.938H0v.938zm6.5-.938v.938h1v-.938zm7.5 0v.938h1v-.938zM0 8.5v-1h16v1zm0 .906v.938h1v-.938zm7.5 0v.938h1v-.938zm8.5.938v-.938h-1v.938zm-16 .937v.938h1v-.938zm7.5 0v.938h1v-.938zm8.5.938v-.938h-1v.938zm-16 .937v.938h1v-.938zm7.5 0v.938h1v-.938zm8.5.938v-.938h-1v.938zM0 16h.969v-.5H1v-.469H.969V15H.5v.031H0zm1.906 0h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm1.875-.5v.5h.938v-.5H8.5v-.469h-.031V15H7.53v.031H7.5v.469zm1.875.5h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875-.5v.5H16v-.969h-.5V15h-.469v.031H15v.469z" />
+                        </svg>
+                    </label>
+                    <input type="radio" class="btn-check" name="gridType-{{ uid }}" value="verticalGrid"
+                        id="type-vertical-{{ uid }}" data-gridtype>
+                    <label for="type-vertical-{{ uid }}"
+                        class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-border-middle" viewBox="0 0 16 16">
+                            <path
+                                d="M.969 0H0v.969h.5V1h.469V.969H1V.5H.969zm.937 1h.938V0h-.938zm1.875 0h.938V0H3.78v1zm1.875 0h.938V0h-.938zM8.5 16h-1V0h1zm.906-15h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.469V.969h.5V0h-.969v.5H15v.469h.031zM1 2.844v-.938H0v.938zm14-.938v.938h1v-.938zM1 4.719V3.78H0v.938h1zm14-.938v.938h1V3.78h-1zM1 6.594v-.938H0v.938zm14-.938v.938h1v-.938zM.5 8.5h.469v-.031H1V7.53H.969V7.5H.5v.031H0v.938h.5zm1.406 0h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm3.75 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.469v-.031h.5V7.53h-.5V7.5h-.469v.031H15v.938h.031zM0 9.406v.938h1v-.938zm16 .938v-.938h-1v.938zm-16 .937v.938h1v-.938zm16 .938v-.938h-1v.938zm-16 .937v.938h1v-.938zm16 .938v-.938h-1v.938zM0 16h.969v-.5H1v-.469H.969V15H.5v.031H0zm1.906 0h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm3.75 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875-.5v.5H16v-.969h-.5V15h-.469v.031H15v.469z" />
+                        </svg>
+                    </label>
+                    <input type="radio" class="btn-check" name="gridType-{{ uid }}" value="fullGrid"
+                        id="type-full-{{ uid }}" data-gridtype>
+                    <label for="type-full-{{ uid }}"
+                        class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-border-all" viewBox="0 0 16 16">
+                            <path d="M0 0h16v16H0zm1 1v6.5h6.5V1zm7.5 0v6.5H15V1zM15 8.5H8.5V15H15zM7.5 15V8.5H1V15z" />
+                        </svg>
+                    </label>
+                </div>
+            </div>
+            <div class="toolbar-group">
+                <div class="dropdown">
+                    <button type="button" class="btn tb-btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-grid-3x3-gap" viewBox="0 0 16 16">
+                            <path
+                                d="M4 2v2H2V2zm1 12v-2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m0-5V7a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m0-5V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m5 10v-2a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m0-5V7a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m0-5V2a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1M9 2v2H7V2zm5 0v2h-2V2zM4 7v2H2V7zm5 0v2H7V7zm5 0h-2v2h2zM4 12v2H2v-2zm5 0v2H7v-2zm5 0v2h-2v-2zM12 1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm-1 6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zm1 4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1z" />
+                        </svg>
+                        <small>25px</small>
+                    </button>
+                    <ul class="dropdown-menu p-2">
+                        <li>
+                            <div class="small text-secondary mb-1">Cell Size</div>
+                            <input type="range" min="1" max="100" step="1" value="25" data-cell-size
+                                class="form-range w-100">
+                        </li>
+                    </ul>
+                </div>
 
-            <input type="radio" class="btn-check" value="outline" name="tool-{{ uid }}" id="tool-outline-{{ uid }}"
-                data-tool>
-            <label for="tool-outline-{{ uid }}"
-                class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-square"
-                    viewBox="0 0 16 16">
-                    <path
-                        d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" />
-                </svg>
-            </label>
+                <div class="dropdown">
+                    <button type="button" class="btn tb-btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-droplet-fill" viewBox="0 0 16 16">
+                            <path
+                                d="M8 16a6 6 0 0 0 6-6c0-1.655-1.122-2.904-2.432-4.362C10.254 4.176 8.75 2.503 8 0c0 0-6 5.686-6 10a6 6 0 0 0 6 6M6.646 4.646l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448c.82-1.641 1.717-2.753 2.093-3.13" />
+                        </svg>
+                        <small>100%</small>
+                    </button>
+                    <ul class="dropdown-menu p-2">
+                        <li>
+                            <div class="small text-secondary mb-1">Fill Opacity</div>
+                            <input type="range" min="0" max="1" step="0.01" value="1" data-fill-opacity
+                                class="form-range w-100">
+                        </li>
+                    </ul>
+                </div>
 
-            <input type="radio" class="btn-check" value="filled" name="tool-{{ uid }}" id="tool-filled-{{ uid }}"
-                data-tool>
-            <label for="tool-filled-{{ uid }}"
-                class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                    class="bi bi-square-fill" viewBox="0 0 16 16">
-                    <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2z" />
-                </svg>
-            </label>
+                <div class="dropdown">
+                    <button type="button" class="btn tb-btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-dash-square-dotted" viewBox="0 0 16 16">
+                            <path
+                                d="M2.5 0q-.25 0-.487.048l.194.98A1.5 1.5 0 0 1 2.5 1h.458V0zm2.292 0h-.917v1h.917zm1.833 0h-.917v1h.917zm1.833 0h-.916v1h.916zm1.834 0h-.917v1h.917zm1.833 0h-.917v1h.917zM13.5 0h-.458v1h.458q.151 0 .293.029l.194-.981A2.5 2.5 0 0 0 13.5 0m2.079 1.11a2.5 2.5 0 0 0-.69-.689l-.556.831q.248.167.415.415l.83-.556zM1.11.421a2.5 2.5 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415zM16 2.5q0-.25-.048-.487l-.98.194q.027.141.028.293v.458h1zM.048 2.013A2.5 2.5 0 0 0 0 2.5v.458h1V2.5q0-.151.029-.293zM0 3.875v.917h1v-.917zm16 .917v-.917h-1v.917zM0 5.708v.917h1v-.917zm16 .917v-.917h-1v.917zM0 7.542v.916h1v-.916zm15 .916h1v-.916h-1zM0 9.375v.917h1v-.917zm16 .917v-.917h-1v.917zm-16 .916v.917h1v-.917zm16 .917v-.917h-1v.917zm-16 .917v.458q0 .25.048.487l.98-.194A1.5 1.5 0 0 1 1 13.5v-.458zm16 .458v-.458h-1v.458q0 .151-.029.293l.981.194Q16 13.75 16 13.5M.421 14.89c.183.272.417.506.69.689l.556-.831a1.5 1.5 0 0 1-.415-.415zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373Q2.25 16 2.5 16h.458v-1H2.5q-.151 0-.293-.029zM13.5 16q.25 0 .487-.048l-.194-.98A1.5 1.5 0 0 1 13.5 15h-.458v1zm-9.625 0h.917v-1h-.917zm1.833 0h.917v-1h-.917zm1.834 0h.916v-1h-.916zm1.833 0h.917v-1h-.917zm1.833 0h.917v-1h-.917zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z" />
+                        </svg>
+                        <small>100%</small>
+                    </button>
+                    <ul class="dropdown-menu p-2">
+                        <li>
+                            <div class="small text-secondary mb-1">Stroke Opacity</div>
+                            <input type="range" min="0" max="1" step="0.01" value="1" data-stroke-opacity
+                                class="form-range w-100">
+                        </li>
+                    </ul>
+                </div>
 
-            <input type="radio" class="btn-check" value="outlineEllipse" name="tool-{{ uid }}"
-                id="tool-outline-ellipse-{{ uid }}" data-tool>
-            <label for="tool-outline-ellipse-{{ uid }}"
-                class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle"
-                    viewBox="0 0 16 16">
-                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
-                </svg>
-            </label>
-
-            <input type="radio" class="btn-check" value="filledEllipse" name="tool-{{ uid }}"
-                id="tool-filled-ellipse-{{ uid }}" data-tool>
-            <label for="tool-filled-ellipse-{{ uid }}"
-                class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                    class="bi bi-circle-fill" viewBox="0 0 16 16">
-                    <circle cx="8" cy="8" r="8" />
-                </svg>
-            </label>
-
-            <input type="radio" class="btn-check" value="line" name="tool-{{ uid }}" id="tool-line-{{ uid }}" data-tool>
-            <label for="tool-line-{{ uid }}"
-                class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"
-                    aria-hidden="true">
-                    <path d="M4 12 L12 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-                    <circle cx="4" cy="12" r="1.5" fill="currentColor" />
-                    <circle cx="12" cy="4" r="1.5" fill="currentColor" />
-                </svg>
-            </label>
-        </div>
-
-        <div class="vr mx-1"></div>
-        <div class="btn-group">
-            <input type="radio" class="btn-check" name="gridType-{{ uid }}" value="noGrid" id="type-no-grid-{{ uid }}"
-                data-gridtype checked>
-            <label for="type-no-grid-{{ uid }}"
-                class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-border"
-                    viewBox="0 0 16 16">
-                    <path
-                        d="M0 0h.969v.5H1v.469H.969V1H.5V.969H0zm2.844 1h-.938V0h.938zm1.875 0H3.78V0h.938v1zm1.875 0h-.938V0h.938zm.937 0V.969H7.5V.5h.031V0h.938v.5H8.5v.469h-.031V1zm2.813 0h-.938V0h.938zm1.875 0h-.938V0h.938zm1.875 0h-.938V0h.938zM15.5 1h-.469V.969H15V.5h.031V0H16v.969h-.5zM1 1.906v.938H0v-.938zm6.5.938v-.938h1v.938zm7.5 0v-.938h1v.938zM1 3.78v.938H0V3.78zm6.5.938V3.78h1v.938zm7.5 0V3.78h1v.938zM1 5.656v.938H0v-.938zm6.5.938v-.938h1v.938zm7.5 0v-.938h1v.938zM.969 8.5H.5v-.031H0V7.53h.5V7.5h.469v.031H1v.938H.969zm1.875 0h-.938v-1h.938zm1.875 0H3.78v-1h.938v1zm1.875 0h-.938v-1h.938zm1.875-.031V8.5H7.53v-.031H7.5V7.53h.031V7.5h.938v.031H8.5v.938zm1.875.031h-.938v-1h.938zm1.875 0h-.938v-1h.938zm1.875 0h-.938v-1h.938zm1.406 0h-.469v-.031H15V7.53h.031V7.5h.469v.031h.5v.938h-.5zM0 10.344v-.938h1v.938zm7.5 0v-.938h1v.938zm8.5-.938v.938h-1v-.938zM0 12.22v-.938h1v.938zm7.5 0v-.938h1v.938zm8.5-.938v.938h-1v-.938zM0 14.094v-.938h1v.938zm7.5 0v-.938h1v.938zm8.5-.938v.938h-1v-.938zM.969 16H0v-.969h.5V15h.469v.031H1v.469H.969zm1.875 0h-.938v-1h.938zm1.875 0H3.78v-1h.938v1zm1.875 0h-.938v-1h.938zm.937 0v-.5H7.5v-.469h.031V15h.938v.031H8.5v.469h-.031v.5zm2.813 0h-.938v-1h.938zm1.875 0h-.938v-1h.938zm1.875 0h-.938v-1h.938zm.937 0v-.5H15v-.469h.031V15h.469v.031h.5V16z" />
-                </svg>
-            </label>
-            <input type="radio" class="btn-check" name="gridType-{{ uid }}" value="horizontalGrid"
-                id="type-horizontal-{{ uid }}" data-gridtype>
-            <label for="type-horizontal-{{ uid }}"
-                class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                    class="bi bi-border-center" viewBox="0 0 16 16">
-                    <path
-                        d="M.969 0H0v.969h.5V1h.469V.969H1V.5H.969zm.937 1h.938V0h-.938zm1.875 0h.938V0H3.78v1zm1.875 0h.938V0h-.938zM7.531.969V1h.938V.969H8.5V.5h-.031V0H7.53v.5H7.5v.469zM9.406 1h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.469V.969h.5V0h-.969v.5H15v.469h.031zM1 2.844v-.938H0v.938zm6.5-.938v.938h1v-.938zm7.5 0v.938h1v-.938zM1 4.719V3.78H0v.938h1zm6.5-.938v.938h1V3.78h-1zm7.5 0v.938h1V3.78h-1zM1 6.594v-.938H0v.938zm6.5-.938v.938h1v-.938zm7.5 0v.938h1v-.938zM0 8.5v-1h16v1zm0 .906v.938h1v-.938zm7.5 0v.938h1v-.938zm8.5.938v-.938h-1v.938zm-16 .937v.938h1v-.938zm7.5 0v.938h1v-.938zm8.5.938v-.938h-1v.938zm-16 .937v.938h1v-.938zm7.5 0v.938h1v-.938zm8.5.938v-.938h-1v.938zM0 16h.969v-.5H1v-.469H.969V15H.5v.031H0zm1.906 0h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm1.875-.5v.5h.938v-.5H8.5v-.469h-.031V15H7.53v.031H7.5v.469zm1.875.5h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875-.5v.5H16v-.969h-.5V15h-.469v.031H15v.469z" />
-                </svg>
-            </label>
-            <input type="radio" class="btn-check" name="gridType-{{ uid }}" value="verticalGrid"
-                id="type-vertical-{{ uid }}" data-gridtype>
-            <label for="type-vertical-{{ uid }}"
-                class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                    class="bi bi-border-middle" viewBox="0 0 16 16">
-                    <path
-                        d="M.969 0H0v.969h.5V1h.469V.969H1V.5H.969zm.937 1h.938V0h-.938zm1.875 0h.938V0H3.78v1zm1.875 0h.938V0h-.938zM8.5 16h-1V0h1zm.906-15h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.469V.969h.5V0h-.969v.5H15v.469h.031zM1 2.844v-.938H0v.938zm14-.938v.938h1v-.938zM1 4.719V3.78H0v.938h1zm14-.938v.938h1V3.78h-1zM1 6.594v-.938H0v.938zm14-.938v.938h1v-.938zM.5 8.5h.469v-.031H1V7.53H.969V7.5H.5v.031H0v.938h.5zm1.406 0h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm3.75 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.469v-.031h.5V7.53h-.5V7.5h-.469v.031H15v.938h.031zM0 9.406v.938h1v-.938zm16 .938v-.938h-1v.938zm-16 .937v.938h1v-.938zm16 .938v-.938h-1v.938zm-16 .937v.938h1v-.938zm16 .938v-.938h-1v.938zM0 16h.969v-.5H1v-.469H.969V15H.5v.031H0zm1.906 0h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm3.75 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875-.5v.5H16v-.969h-.5V15h-.469v.031H15v.469z" />
-                </svg>
-            </label>
-            <input type="radio" class="btn-check" name="gridType-{{ uid }}" value="fullGrid" id="type-full-{{ uid }}"
-                data-gridtype>
-            <label for="type-full-{{ uid }}"
-                class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                    class="bi bi-border-all" viewBox="0 0 16 16">
-                    <path d="M0 0h16v16H0zm1 1v6.5h6.5V1zm7.5 0v6.5H15V1zM15 8.5H8.5V15H15zM7.5 15V8.5H1V15z" />
-                </svg>
-            </label>
-        </div>
-        <div class="vr mx-1"></div>
-        <div class="btn-group">
-            <button type="button"
-                class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center" data-export>
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                    class="bi bi-download" viewBox="0 0 16 16">
-                    <path
-                        d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
-                    <path
-                        d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" />
-                </svg>
-            </button>
-            <input type="file" data-import accept="application/json" class="d-none">
-            <button type="button"
-                class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center"
-                data-import-button>
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-upload"
-                    viewBox="0 0 16 16">
-                    <path
-                        d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
-                    <path
-                        d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z" />
-                </svg>
-            </button>
-            <button type="button"
-                class="btn btn-sm btn-danger border d-inline-flex align-items-center justify-content-center" data-clear>
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
-                    viewBox="0 0 16 16">
-                    <path
-                        d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z" />
-                </svg>
-            </button>
+                <div class="dropdown">
+                    <button type="button" class="btn tb-btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+                            fill="currentColor" class="me-1" aria-hidden="true">
+                            <rect x="2" y="3" width="12" height="1" rx=".5"></rect>
+                            <rect x="2" y="7" width="12" height="2" rx="1"></rect>
+                            <rect x="2" y="12" width="12" height="3" rx="1.5"></rect>
+                        </svg>
+                        <small>12%</small>
+                    </button>
+                    <ul class="dropdown-menu p-2">
+                        <li>
+                            <div class="small text-secondary mb-1">Stroke Width</div>
+                            <input type="range" min="0" max="1" step="0.01" value="0.12" data-stroke-width
+                                class="form-range w-100">
+                        </li>
+                    </ul>
+                </div>
+            </div>
         </div>
     </div>
     <div class="grid-wrap" data-grid-wrap>
diff --git a/inventory/templates/testing.html b/inventory/templates/testing.html
index 2e8736f..26e8c8f 100644
--- a/inventory/templates/testing.html
+++ b/inventory/templates/testing.html
@@ -7,7 +7,14 @@
 {% endblock %}
 
 {% block main %}
-{{ draw.drawWidget('test1') }}
+    <div class="row">
+        <div class="col">
+            {{ draw.drawWidget('test1') }}
+        </div>
+        <div class="col">
+            {{ draw.drawWidget('test2') }}
+        </div>
+    </div>
 {% endblock %}
 
 {% block scriptincludes %}