protoserve WIP
This commit is contained in:
jaseg
parent
10cd29b96c
commit
3b5fb41ecb
1 changed files with 315 additions and 69 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue