summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorjaseg <git@jaseg.de>2023-04-07 19:27:48 +0200
committerjaseg <git@jaseg.de>2023-04-10 23:57:15 +0200
commite18dbb11f84f005574bd2d3205c2101aa6570a9f (patch)
treeffce01b504cf0ad06dacca7b34dab05dafa3be49
parentb1b39cd65c52cece988b7517a04668c839f243dc (diff)
downloadgerbonara-e18dbb11f84f005574bd2d3205c2101aa6570a9f.tar.gz
gerbonara-e18dbb11f84f005574bd2d3205c2101aa6570a9f.tar.bz2
gerbonara-e18dbb11f84f005574bd2d3205c2101aa6570a9f.zip
protoserve WIP
Diffstat
-rw-r--r--gerbonara/data/protoserve.html384
1 files changed, 315 insertions, 69 deletions
diff --git a/gerbonara/data/protoserve.html b/gerbonara/data/protoserve.html
index 757e292..1dba90a 100644
--- a/gerbonara/data/protoserve.html
+++ b/gerbonara/data/protoserve.html
@@ -32,7 +32,8 @@ body {
user-select: none;
display: grid;
grid-template-columns: 10fr 1fr 1fr;
- align-content: start
+ align-content: start;
+ overflow-y: scroll;
}
label {
@@ -51,7 +52,7 @@ input {
align-self: start;
}
-.group > h4 {
+.group > h4, .group > h5 {
text-align: center;
margin: 5px;
grid-column-start: 1;
@@ -100,10 +101,40 @@ input {
display: none;
}
-.group.proportional > div > .proportion {
+.proportional > div > .proportion {
display: grid;
}
+.split-sides .double-sided-only {
+ display: none;
+}
+
+.split-sides > .placeholder .area-controls {
+ display: none;
+}
+
+.board > .placeholder > .area-controls {
+ display: none;
+}
+
+.area-controls .area-move {
+ display: none;
+}
+
+.area-controls .area-move::before {
+ content: "/";
+ padding: 0 5px 0 5px;
+}
+
+.group.proportional > .group > .area-controls .area-move {
+ display: block;
+}
+
+.content.area-controls {
+ flex-direction: row;
+ justify-content: center;
+}
+
.field > input, .field > select { max-width: 5em;
text-align: right;
margin: 0 5px 0 5px;
@@ -142,8 +173,15 @@ input {
grid-column-end: span 3;
}
-a.drop-target {
+.drop-target {
+ grid-column-start: 1;
+ grid-column-end: span 3;
text-align: center;
+ display: none;
+}
+
+.group.drop-enabled > .drop-target {
+ display: block;
}
.placeholder hr {
@@ -151,11 +189,20 @@ a.drop-target {
border: none;
border-top: 1px solid hsl(0 0% 60%);
}
+
+#controls.move-in-progress input {
+ background-color: hsl(0 0% 85%);
+}
+
+#controls.move-in-progress {
+ color: hsl(0 0% 60%);
+}
+
</style>
</head>
<body>
<div id="controls">
- <div class="group">
+ <div class="group board">
<h4>Board settings</h4>
<label id="g-board-units">Units
<select value="metric">
@@ -213,70 +260,7 @@ a.drop-target {
</div>
<h4>Content</h4>
- <div class="group proportional">
- <h4>Proportional Layout</h4>
- <label>Direction
- <select name="direction" value="horizontal">
- <option value="h">horizontal</option>
- <option value="v">vertical</option>
- </select>
- </label>
-
- <div class="group placeholder">
- <h4>Empty area</h4>
- <label class="proportion">Proportion
- <input type="text" name="layout_prop">
- </label>
- <div class="content">
- <a href="#">Add Layout</a>
- <hr/>
- <a href="#">Add SMD area</a>
- <a href="#">Add THT area</a>
- <a href="#">Add Manhattan area</a>
- <a href="#">Add THT Flower area</a>
- </div>
- </div>
-
- <div class="group smd-area">
- <h4>SMD area</h4>
- <label class="proportion">Proportion
- <input type="text" name="layout_prop">
- </label>
- <label>Pitch X
- <input type="text" name="pitch_x" placeholder="length">
- <span class="unit metric">mm</span>
- <span class="unit us">mil</span>
- </label>
- <label>Pitch Y
- <input type="text" name="pitch_y" placeholder="length">
- <span class="unit metric">mm</span>
- <span class="unit us">mil</span>
- </label>
- <label>Clearance
- <input type="text" name="clearance" placeholder="length">
- <span class="unit metric">mm</span>
- <span class="unit us">mil</span>
- </label>
- <label>Pad shape
- <select name="pad_shape" value="rect">
- <option value="rect">Rectangle</option>
- <option value="circle">Circle</option>
- <option value="obround">Obround</option>
- </select>
- </label>
- <label>Pad width
- <input type="text" name="pad_w" placeholder="length">
- <span class="unit metric">mm</span>
- <span class="unit us">mil</span>
- </label>
- <label>Pad height
- <input type="text" name="pad_h" placeholder="length">
- <span class="unit metric">mm</span>
- <span class="unit us">mil</span>
- </label>
- </div>
- <a class="content" href="#">Add element</a>
- </div>
+ <div class="group placeholder"></div>
</div>
</div>
<div id="preview">
@@ -293,6 +277,7 @@ a.drop-target {
Gerbers
</a>
</div>
+
<template id="tpl-drop-target">
<a class="drop-target" href="#">
<svg viewBox="0 0 532 532" width="1em" xmlns="http://www.w3.org/2000/svg">
@@ -301,6 +286,161 @@ a.drop-target {
</svg>
</a>
</template>
+
+ <template id="tpl-g-layout">
+ <div class="group proportional">
+ <h4>Proportional Layout</h4>
+ <span class="content area-controls">(<a href="#" class="area-remove">Remove</a><a href="#" class="area-move">Move</a>)</span>
+ <label class="proportion">Proportion
+ <input type="text" name="layout_prop" value="1">
+ </label>
+
+ <h5>Layout settings</h4>
+ <label>Direction
+ <select name="direction" value="horizontal">
+ <option value="h">horizontal</option>
+ <option value="v">vertical</option>
+ </select>
+ </label>
+
+ <h5>Content</h4>
+ <div class="drop-target"></div>
+ <div class="placeholder"></div>
+ <div class="drop-target"></div>
+ <div class="placeholder"></div>
+ <div class="drop-target"></div>
+ <a class="content add-element" href="#">Add element</a>
+ </div>
+ </template>
+
+ <template id="tpl-g-twoside">
+ <div class="group split-sides">
+ <h4>Split front and back</h4>
+ <span class="content area-controls">(<a href="#" class="area-remove">Remove</a><a href="#" class="area-move">Move</a>)</span>
+ <label class="proportion">Proportion
+ <input type="text" name="layout_prop" value="1">
+ </label>
+
+ <h5>Front</h5>
+ <div class="placeholder"></div>
+ <h5>Back</h5>
+ <div class="placeholder"></div>
+ </div>
+ </template>
+
+ <template id="tpl-g-placeholder">
+ <div class="group placeholder">
+ <h4>Empty area</h4>
+ <span class="content area-controls">(<a href="#" class="area-remove">Remove</a><a href="#" class="area-move">Move</a>)</span>
+ <label class="proportion">Proportion
+ <input type="text" name="layout_prop" value="1">
+ </label>
+
+ <div class="content">
+ <a href="#" data-placeholder="layout">Create Layout</a>
+ <a href="#" data-placeholder="twoside" class="double-sided-only">Split front and back</a>
+ <hr/>
+ <a href="#" data-placeholder="smd">SMD area</a>
+ <a href="#" data-placeholder="tht" class="double-sided-only">THT area</a>
+ <a href="#" data-placeholder="manhattan">Manhattan area</a>
+ <a href="#" data-placeholder="flower"class="double-sided-only">THT Flower area</a>
+ </div>
+ </div>
+ </template>
+
+ <template id="tpl-g-smd">
+ <div class="group smd">
+ <h4>SMD area</h4>
+ <span class="content area-controls">(<a href="#" class="area-remove">Remove</a><a href="#" class="area-move">Move</a>)</span>
+ <label class="proportion">Proportion
+ <input type="text" name="layout_prop" value="1">
+ </label>
+
+ <h5>Area Settings</h5>
+ <label>Pitch X
+ <input type="text" name="pitch_x" placeholder="length">
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label>Pitch Y
+ <input type="text" name="pitch_y" placeholder="length">
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label>Clearance
+ <input type="text" name="clearance" placeholder="length">
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label>Pad shape
+ <select name="pad_shape" value="rect">
+ <option value="rect">Rectangle</option>
+ <option value="circle">Circle</option>
+ <option value="obround">Obround</option>
+ </select>
+ </label>
+ <label>Pad width
+ <input type="text" name="pad_w" placeholder="length">
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label>Pad height
+ <input type="text" name="pad_h" placeholder="length">
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ </div>
+ </template>
+
+ <template id="tpl-g-tht">
+ <div class="group tht">
+ <h4>THT area</h4>
+ <span class="content area-controls">(<a href="#" class="area-remove">Remove</a><a href="#" class="area-move">Move</a>)</span>
+ <label class="proportion">Proportion
+ <input type="text" name="layout_prop" value="1">
+ </label>
+
+ <h5>Area Settings</h5>
+ <label>Pitch X
+ <input type="text" name="pitch_x" placeholder="length">
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label>Pitch Y
+ <input type="text" name="pitch_y" placeholder="length">
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label>Clearance
+ <input type="text" name="clearance" placeholder="length">
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label>Pad shape
+ <select name="pad_shape" value="rect">
+ <option value="rect">Rectangle</option>
+ <option value="circle">Circle</option>
+ <option value="obround">Obround</option>
+ </select>
+ </label>
+ <label>Pad width
+ <input type="text" name="pad_w" placeholder="length">
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label>Pad height
+ <input type="text" name="pad_h" placeholder="length">
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label class="shape-rect">Corner radius
+ <input type="text" name="pad_h" placeholder="length">
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ </div>
+ </template>
+
<script>
document.querySelectorAll('.expand').forEach((elem) => {
const checkbox = elem.querySelector(':first-child > input');
@@ -317,6 +457,112 @@ a.drop-target {
elem.classList.add('collapsed');
}
});
+
+ let g_dropElement = null;
+
+ function hookupAreaRemove(node) {
+ for (const bt of node.querySelectorAll('a.area-remove')) {
+ bt.addEventListener('click', (evt) => {
+ console.log(evt);
+ let elem = evt.target.closest('.group');
+ if (elem.parentElement && elem.parentElement.matches('.proportional')) {
+ let sibling = elem.previousElementSibling;
+ if (sibling.matches('.drop-target')) {
+ sibling.remove();
+ }
+ elem.remove();
+ } else {
+ elem.replaceWith(createPlaceholder());
+ }
+ });
+ }
+ }
+
+ function createDropTarget() {
+ const node = document.querySelector('#tpl-drop-target').content.cloneNode(true);
+ node.querySelector('a').addEventListener('click', (evt) => {
+ if (g_dropElement != null) {
+ const target = evt.target.closest('a');
+
+ let sibling = g_dropElement.previousElementSibling;
+ if (sibling.matches('.drop-target')) {
+ if (sibling == target) {
+ return;
+ }
+ sibling.remove();
+ }
+ g_dropElement.remove();
+ g_dropElement.querySelector('a.area-move').innerText = "Move";
+
+ target.before(sibling);
+ target.before(g_dropElement);
+
+ document.querySelector('#controls').classList.remove('move-in-progress');
+ document.querySelector('.group.drop-enabled').classList.remove('drop-enabled');
+ g_dropElement = null;
+ }
+ });
+ return node;
+ }
+
+ function hookupAreaMove(node) {
+ for (const bt of node.querySelectorAll('a.area-move')) {
+ bt.addEventListener('click', (evt) => {
+ const controls = document.querySelector('#controls');
+ const group = evt.target.closest('.group');
+
+ if (g_dropElement == null) {
+ controls.classList.add('move-in-progress');
+ group.parentElement.classList.add('drop-enabled');
+ g_dropElement = group;
+ evt.target.innerText = "Cancel move";
+ } else {
+ controls.classList.remove('move-in-progress');
+ group.parentElement.classList.remove('drop-enabled');
+ g_dropElement = null;
+ evt.target.innerText = "Move";
+ }
+ });
+ }
+ }
+
+ function createPlaceholder() {
+ const node = document.querySelector('#tpl-g-placeholder').content.cloneNode(true);
+
+ hookupAreaRemove(node);
+ hookupAreaMove(node);
+
+ for (const bt of node.querySelectorAll('.placeholder a[data-placeholder]')) {
+ bt.addEventListener('click', (evt) => {
+ const template = document.querySelector(`#tpl-g-${evt.target.getAttribute('data-placeholder')}`);
+ const node = template.content.cloneNode(true);
+
+ for (const elem of node.querySelectorAll('div.placeholder')) {
+ elem.replaceWith(createPlaceholder());
+ }
+
+ for (const elem of node.querySelectorAll('div.drop-target')) {
+ elem.replaceWith(createDropTarget());
+ }
+
+ hookupAreaRemove(node);
+ hookupAreaMove(node);
+
+ for (const bt of node.querySelectorAll('a.add-element')) {
+ bt.addEventListener('click', (evt) => {
+ evt.target.before(createPlaceholder());
+ evt.target.before(createDropTarget());
+ });
+ }
+
+ evt.target.closest('.group').replaceWith(node);
+ });
+ }
+
+ return node;
+ }
+
+ document.querySelector('div.placeholder').replaceWith(createPlaceholder());
</script>
</body>
</html>
generated by cgit (git 2.34.1) at 2024-11-21 21:27:35 +0000