More improvement for toolbar.
This commit is contained in:
Yaro Kasear
parent
a05218b985
commit
3864f27cc6
3 changed files with 338 additions and 217 deletions
|
|
@ -1,9 +1,15 @@
|
||||||
|
:root {
|
||||||
|
--tb-h: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
.grid-widget {
|
.grid-widget {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
position: relative;
|
||||||
|
isolation: isolate;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-widget .grid-wrap {
|
.grid-widget .grid-wrap {
|
||||||
|
|
@ -13,6 +19,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-widget [data-grid] {
|
.grid-widget [data-grid] {
|
||||||
|
|
@ -23,10 +30,12 @@
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-widget [data-toolbar]::-webkit-scrollbar {
|
.grid-widget [data-toolbar]::-webkit-scrollbar {
|
||||||
height: 8px;
|
height: 8px;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-widget [data-grid-wrap] {
|
.grid-widget [data-grid-wrap] {
|
||||||
|
|
@ -51,6 +60,9 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-widget [data-dot] {
|
.grid-widget [data-dot] {
|
||||||
|
|
@ -60,12 +72,25 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-widget .toolbar {
|
.grid-widget .toolbar {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-wrap: nowrap;
|
|
||||||
overflow-x: auto;
|
|
||||||
overflow-y: visible;
|
|
||||||
gap: .5rem;
|
gap: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-widget .toolbar-row {
|
||||||
|
display: flex;
|
||||||
align-items: center;
|
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 {
|
.grid-widget .toolbar-range {
|
||||||
|
|
@ -75,10 +100,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-widget .dropdown-menu {
|
.grid-widget .dropdown-menu {
|
||||||
z-index: 2000;
|
min-width: 200px;
|
||||||
min-width: 220px;
|
|
||||||
padding: .5rem .75rem;
|
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 {
|
.grid-widget .dropdown-menu>*:first-child {
|
||||||
|
|
@ -105,4 +133,82 @@
|
||||||
|
|
||||||
.grid-widget [data-toolbar] .vr {
|
.grid-widget [data-toolbar] .vr {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,222 +2,230 @@
|
||||||
<div class="grid-widget" data-grid-widget>
|
<div class="grid-widget" data-grid-widget>
|
||||||
<div data-toolbar
|
<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">
|
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="toolbar-row toolbar-row--primary">
|
||||||
<div class="dropdown">
|
<div class="toolbar-group">
|
||||||
<button type="button" class="btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
|
<div class="btn-group">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
<input type="radio" class="btn-check" value="pen" name="tool-{{ uid }}" id="tool-pen-{{ uid }}"
|
||||||
class="bi bi-grid-3x3-gap" viewBox="0 0 16 16">
|
data-tool checked>
|
||||||
<path
|
<label for="tool-pen-{{ uid }}"
|
||||||
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" />
|
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
|
||||||
</svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||||||
<span class="badge text-bg-secondary" data-cell-size-val>25px</span>
|
class="bi bi-pen" viewBox="0 0 16 16">
|
||||||
</button>
|
<path
|
||||||
<ul class="dropdown-menu p-2">
|
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" />
|
||||||
<li>
|
</svg>
|
||||||
<div class="small text-secondary mb-1">Cell Size</div>
|
</label>
|
||||||
<input type="range" min="1" max="100" step="1" value="25" data-cell-size
|
|
||||||
class="form-range w-100">
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="dropdown">
|
<input type="radio" class="btn-check" value="outline" name="tool-{{ uid }}"
|
||||||
<button type="button" class="btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
|
id="tool-outline-{{ uid }}" data-tool>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
<label for="tool-outline-{{ uid }}"
|
||||||
class="bi bi-droplet-fill" viewBox="0 0 16 16">
|
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
|
||||||
<path
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||||||
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" />
|
class="bi bi-square" viewBox="0 0 16 16">
|
||||||
</svg>
|
<path
|
||||||
<span class="badge text-bg-secondary" data-fill-opacity-val>100%</span>
|
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" />
|
||||||
</button>
|
</svg>
|
||||||
<ul class="dropdown-menu p-2">
|
</label>
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="dropdown">
|
<input type="radio" class="btn-check" value="filled" name="tool-{{ uid }}"
|
||||||
<button type="button" class="btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
|
id="tool-filled-{{ uid }}" data-tool>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
<label for="tool-filled-{{ uid }}"
|
||||||
class="bi bi-dash-square-dotted" viewBox="0 0 16 16">
|
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
|
||||||
<path
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||||||
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" />
|
class="bi bi-square-fill" viewBox="0 0 16 16">
|
||||||
</svg>
|
<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" />
|
||||||
<span class="badge text-bg-secondary" data-stroke-opacity-val>100%</span>
|
</svg>
|
||||||
</button>
|
</label>
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="dropdown">
|
<input type="radio" class="btn-check" value="outlineEllipse" name="tool-{{ uid }}"
|
||||||
<button type="button" class="btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
|
id="tool-outline-ellipse-{{ uid }}" data-tool>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
|
<label for="tool-outline-ellipse-{{ uid }}"
|
||||||
fill="currentColor" class="me-1" aria-hidden="true">
|
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
|
||||||
<rect x="2" y="3" width="12" height="1" rx=".5"></rect>
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||||||
<rect x="2" y="7" width="12" height="2" rx="1"></rect>
|
class="bi bi-circle" viewBox="0 0 16 16">
|
||||||
<rect x="2" y="12" width="12" height="3" rx="1.5"></rect>
|
<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>
|
</svg>
|
||||||
<span class="badge text-bg-secondary" data-stroke-width-val>12%</span>
|
</label>
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu p-2">
|
<input type="radio" class="btn-check" value="filledEllipse" name="tool-{{ uid }}"
|
||||||
<li>
|
id="tool-filled-ellipse-{{ uid }}" data-tool>
|
||||||
<div class="small text-secondary mb-1">Stroke Width</div>
|
<label for="tool-filled-ellipse-{{ uid }}"
|
||||||
<input type="range" min="0" max="1" step="0.01" value="0.12" data-stroke-width
|
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
|
||||||
class="form-range w-100">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||||||
</li>
|
class="bi bi-circle-fill" viewBox="0 0 16 16">
|
||||||
</ul>
|
<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>
|
</div>
|
||||||
<div class="vr mx-1"></div>
|
<div class="toolbar-row toolbar-row--secondary">
|
||||||
<input type="color" class="form-control form-control-sm form-control-color" data-color>
|
<div class="toolbar-group">
|
||||||
<div class="vr mx-1"></div>
|
<div class="btn-group">
|
||||||
<div class="btn-group">
|
<input type="radio" class="btn-check" name="gridType-{{ uid }}" value="noGrid"
|
||||||
<input type="radio" class="btn-check" value="pen" name="tool-{{ uid }}" id="tool-pen-{{ uid }}" data-tool
|
id="type-no-grid-{{ uid }}" data-gridtype checked>
|
||||||
checked>
|
<label for="type-no-grid-{{ uid }}"
|
||||||
<label for="tool-pen-{{ uid }}"
|
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
|
||||||
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"
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pen"
|
class="bi bi-border" viewBox="0 0 16 16">
|
||||||
viewBox="0 0 16 16">
|
<path
|
||||||
<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" />
|
||||||
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>
|
||||||
</svg>
|
</label>
|
||||||
</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 }}"
|
<div class="dropdown">
|
||||||
data-tool>
|
<button type="button" class="btn tb-btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
|
||||||
<label for="tool-outline-{{ uid }}"
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||||||
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
|
class="bi bi-droplet-fill" viewBox="0 0 16 16">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-square"
|
<path
|
||||||
viewBox="0 0 16 16">
|
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" />
|
||||||
<path
|
</svg>
|
||||||
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" />
|
<small>100%</small>
|
||||||
</svg>
|
</button>
|
||||||
</label>
|
<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 }}"
|
<div class="dropdown">
|
||||||
data-tool>
|
<button type="button" class="btn tb-btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
|
||||||
<label for="tool-filled-{{ uid }}"
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||||||
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
|
class="bi bi-dash-square-dotted" viewBox="0 0 16 16">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
<path
|
||||||
class="bi bi-square-fill" viewBox="0 0 16 16">
|
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" />
|
||||||
<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>
|
||||||
</svg>
|
<small>100%</small>
|
||||||
</label>
|
</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 }}"
|
<div class="dropdown">
|
||||||
id="tool-outline-ellipse-{{ uid }}" data-tool>
|
<button type="button" class="btn tb-btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
|
||||||
<label for="tool-outline-ellipse-{{ uid }}"
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
|
||||||
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
|
fill="currentColor" class="me-1" aria-hidden="true">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle"
|
<rect x="2" y="3" width="12" height="1" rx=".5"></rect>
|
||||||
viewBox="0 0 16 16">
|
<rect x="2" y="7" width="12" height="2" rx="1"></rect>
|
||||||
<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" />
|
<rect x="2" y="12" width="12" height="3" rx="1.5"></rect>
|
||||||
</svg>
|
</svg>
|
||||||
</label>
|
<small>12%</small>
|
||||||
|
</button>
|
||||||
<input type="radio" class="btn-check" value="filledEllipse" name="tool-{{ uid }}"
|
<ul class="dropdown-menu p-2">
|
||||||
id="tool-filled-ellipse-{{ uid }}" data-tool>
|
<li>
|
||||||
<label for="tool-filled-ellipse-{{ uid }}"
|
<div class="small text-secondary mb-1">Stroke Width</div>
|
||||||
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
|
<input type="range" min="0" max="1" step="0.01" value="0.12" data-stroke-width
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
class="form-range w-100">
|
||||||
class="bi bi-circle-fill" viewBox="0 0 16 16">
|
</li>
|
||||||
<circle cx="8" cy="8" r="8" />
|
</ul>
|
||||||
</svg>
|
</div>
|
||||||
</label>
|
</div>
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-wrap" data-grid-wrap>
|
<div class="grid-wrap" data-grid-wrap>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,14 @@
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block main %}
|
{% block main %}
|
||||||
{{ draw.drawWidget('test1') }}
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
{{ draw.drawWidget('test1') }}
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
{{ draw.drawWidget('test2') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block scriptincludes %}
|
{% block scriptincludes %}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue