Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make save dropdown menu #505

Merged
merged 4 commits into from
Jul 28, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 43 additions & 8 deletions bindings/wasm/examples/editor.css
Original file line number Diff line number Diff line change
Expand Up @@ -130,18 +130,14 @@ model-viewer {

.header .margin {
font-size: 16px;
margin: 1em;
}

#file {
width: 250px;
margin: 1em 0.5em;
}

.dropdown {
display: none;
position: absolute;
z-index: 1;
width: 250px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
}
Expand All @@ -150,6 +146,10 @@ model-viewer {
display: block;
}

.hide {
display: none;
}

.uparrow {
display: inline-block;
position: relative;
Expand All @@ -174,6 +174,7 @@ model-viewer {
position: absolute;
width: 36px;
top: 0px;
right: 0px;
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
Expand All @@ -193,7 +194,6 @@ model-viewer {

.trash {
background-image: url(/icons/trash.png);
right: 0px;
}

.icon:hover {
Expand All @@ -212,6 +212,15 @@ model-viewer {
background-color: rgb(255, 177, 177);
}

#file-margin {
position: relative;
width: 250px;
}

#save {
width: 125px;
}

@media only screen and (max-width: 600px) {
.container {
flex-direction: column;
Expand All @@ -220,5 +229,31 @@ model-viewer {

.col {
width: 100%;
height: 50%;
}

#file-margin {
width: calc(100% - 32px);
}

p {
margin: .2em 1em;
text-align: center;
}
}

.header .margin {
margin: 0.2em 16px;
}

#button-container {
flex-direction: row;
margin-left: 8px;
margin-right: 8px;
width: calc(100% - 16px);
}

#button-container .margin {
width: calc(50% - 16px);
margin: 8px;
}
}
97 changes: 58 additions & 39 deletions bindings/wasm/examples/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,31 @@ let editor = undefined;

// File UI ------------------------------------------------------------
const fileButton = document.querySelector('#file');
const currentElement = document.querySelector('#current');
const arrow = document.querySelector('.uparrow');
const dropdown = document.querySelector('.dropdown');
const currentFileElement = document.querySelector('#current');
const fileArrow = document.querySelector('#file .uparrow');
const fileDropdown = document.querySelector('#fileDropdown');
const saveContainer = document.querySelector('#save');
const saveDropdown = document.querySelector('#saveDropdown');
const saveArrow = document.querySelector('#save .uparrow');

const hideDropdown = function() {
dropdown.classList.remove('show');
arrow.classList.remove('down');
fileDropdown.classList.remove('show');
saveDropdown.classList.remove('show');
fileArrow.classList.remove('down');
saveArrow.classList.remove('down');
};
const toggleDropdown = function(event) {
const toggleFileDropdown = function(event) {
event.stopPropagation();
dropdown.classList.toggle('show');
arrow.classList.toggle('down');
fileDropdown.classList.toggle('show');
fileArrow.classList.toggle('down');
};
fileButton.onclick = toggleDropdown;
const toggleSaveDropdown = function(event) {
event.stopPropagation();
saveDropdown.classList.toggle('show');
saveArrow.classList.toggle('down');
};
fileButton.onclick = toggleFileDropdown;
saveArrow.parentElement.onclick = toggleSaveDropdown;
document.body.onclick = hideDropdown;

const prefix = 'ManifoldCAD';
Expand All @@ -62,7 +73,7 @@ function nthKey(n) {

function saveCurrent() {
if (editor) {
const currentName = currentElement.textContent;
const currentName = currentFileElement.textContent;
if (!exampleFunctions.get(currentName)) {
setScript(currentName, editor.getValue());
}
Expand All @@ -77,7 +88,7 @@ let isExample = true;
function switchTo(scriptName) {
if (editor) {
switching = true;
currentElement.textContent = scriptName;
currentFileElement.textContent = scriptName;
setScript('currentName', scriptName);
const code =
exampleFunctions.get(scriptName) ?? getScript(scriptName) ?? '';
Expand Down Expand Up @@ -148,8 +159,8 @@ function addEdit(button) {
if (!input) return;
const newName = uniqueName(input);
label.textContent = newName;
if (currentElement.textContent == oldName) {
currentElement.textContent = newName;
if (currentFileElement.textContent == oldName) {
currentFileElement.textContent = newName;
}
removeScript(oldName);
setScript(newName, code);
Expand Down Expand Up @@ -182,7 +193,7 @@ function addEdit(button) {
}, {once: true});
} else if (performance.now() - lastClick > 500) {
removeScript(label.textContent);
if (currentElement.textContent == label.textContent) {
if (currentFileElement.textContent == label.textContent) {
switchTo('Intro');
}
const container = button.parentElement;
Expand Down Expand Up @@ -269,10 +280,10 @@ require(['vs/editor/editor.main'], async function() {

for (const [name] of exampleFunctions) {
const button = createDropdownItem(name);
dropdown.appendChild(button.parentElement);
fileDropdown.appendChild(button.parentElement);
}

let currentName = currentElement.textContent;
let currentName = currentFileElement.textContent;

for (let i = 0; i < window.localStorage.length; i++) {
const key = nthKey(i);
Expand Down Expand Up @@ -347,8 +358,10 @@ function finishRun() {
}

const mv = document.querySelector('model-viewer');
let glbURL = null;
let threeMFURL = null;
const output = {
glbURL: null,
threeMFURL: null
};
let manifoldWorker = null;

function createWorker() {
Expand All @@ -371,16 +384,16 @@ function createWorker() {
finishRun();
runButton.disabled = true;

if (threeMFURL != undefined) {
URL.revokeObjectURL(threeMFURL);
threeMFURL = undefined;
if (output.threeMFURL != null) {
URL.revokeObjectURL(output.threeMFURL);
output.threeMFURL = null;
}
URL.revokeObjectURL(glbURL);
glbURL = e.data.glbURL;
threeMFURL = e.data.threeMFURL;
threemfButton.disabled = threeMFURL == undefined;
mv.src = glbURL;
if (glbURL == null) {
URL.revokeObjectURL(output.glbURL);
output.glbURL = e.data.glbURL;
output.threeMFURL = e.data.threeMFURL;
threemfButton.disabled = output.threeMFURL == null;
mv.src = output.glbURL;
if (output.glbURL == null) {
mv.showPoster();
poster.textContent = 'Error';
createWorker();
Expand Down Expand Up @@ -418,18 +431,24 @@ runButton.onclick = function() {
}
};

function clickSave(saveButton, filename, outputName) {
const container = saveButton.parentElement;
return () => {
const oldSave = saveContainer.firstElementChild;
if (oldSave !== container) {
saveDropdown.insertBefore(oldSave, saveDropdown.firstElementChild);
saveContainer.insertBefore(container, saveDropdown);
container.appendChild(saveArrow.parentElement);
}
const link = document.createElement('a');
link.download = filename;
link.href = output[outputName];
link.click();
};
}

const glbButton = document.querySelector('#glb');
glbButton.onclick = function() {
const link = document.createElement('a');
link.download = 'manifold.glb';
link.href = glbURL;
link.click();
};
glbButton.onclick = clickSave(glbButton, 'manifold.glb', 'glbURL');

const threemfButton = document.querySelector('#threemf');
threemfButton.onclick = function() {
const link = document.createElement('a');
link.download = 'manifold.3mf';
link.href = threeMFURL;
link.click();
};
threemfButton.onclick = clickSave(threemfButton, 'manifold.3mf', 'threeMFURL');
23 changes: 17 additions & 6 deletions bindings/wasm/examples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,27 @@
<div class="page">
<div class="container header" style="background-color: #A288B3;">
<p style="flex: 2;"><a target="_blank" href="https://github.com/elalish/manifold">Manifold</a>CAD </p>
<div class="margin" style="position: relative;">
<button type="button" id="file" class="blue"><b class="uparrow"></b>&nbsp;&nbsp;<span
<div class="margin" id="file-margin" >
<button type="button" id="file" class="blue item"><b class="uparrow"></b>&nbsp;&nbsp;<span
id="current">Intro</span></button>
<div class="dropdown">
<div class="dropdown" id="fileDropdown">
<button type="button" class="green item" id="new">New</button>
</div>
</div>
<button type="button" id="compile" class="margin green" disabled><span>Run</span></button>
<button type="button" id="glb" class="blue margin">Save GLB</button>
<button type="button" id="threemf" class="blue margin">Save 3MF</button>
<div class="container" id="button-container">
<button type="button" id="compile" class="margin green" disabled><span>Run</span></button>
<div id="save" class="margin" style="position: relative; ">
<div class="item">
<button type="button" id="glb" class="blue item">Save GLB</button>
<button type="button" class="icon"><b class="uparrow" style="right: 2px;"></b></button>
</div>
<div class="dropdown" id="saveDropdown">
<div class="item">
<button type="button" id="threemf" class="blue item">Save 3MF</button>
</div>
</div>
</div>
</div>
</div>
<div class="container" style="flex: 2;">
<div id="editor" class="col"></div>
Expand Down
18 changes: 9 additions & 9 deletions src/polygon/src/polygon.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
#endif
#include <list>
#include <map>
#if !__APPLE__
#if __has_include(<memory_resource>)
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I ran into a problem where __APPLE__ is not defined for a WASM build even on my Mac. However, it looks like C++17 has a much better solution. There are probably some other places we should use this too.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting. I somehow remember that another issue I encounter is the lack of support for pstl, that is why I put __APPLE__ to those macros using PSTL. I think the <execution> header is there, but it does not contain the required definitions.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thinking about it, __APPLE__ is not defined for WASM build sounds fine, as that is cross compilation and the target platform is indeed not apple. It is interesting that it builds correctly for me, as emscripten is using clang, which should not have <memory_resource> as well.

Anyway, this looks fine to me.

#include <memory_resource>
#endif
#include <queue>
Expand Down Expand Up @@ -311,14 +311,7 @@ class Monotones {
struct VertAdj;
struct EdgePair;
enum VertType { Start, WestSide, EastSide, Merge, End, Skip };
#if __APPLE__
typedef std::list<VertAdj>::iterator VertItr;
typedef std::list<EdgePair>::iterator PairItr;

std::list<VertAdj> monotones_; // sweep-line list of verts
std::list<EdgePair> activePairs_; // west to east monotone edges
std::list<EdgePair> inactivePairs_; // completed monotones
#else
#if __has_include(<memory_resource>)
typedef std::pmr::list<VertAdj>::iterator VertItr;
typedef std::pmr::list<EdgePair>::iterator PairItr;

Expand All @@ -327,6 +320,13 @@ class Monotones {
std::pmr::list<VertAdj> monotones_{pa}; // sweep-line list of verts
std::pmr::list<EdgePair> activePairs_{pa}; // west to east monotone edges
std::pmr::list<EdgePair> inactivePairs_{pa}; // completed monotones
#else
typedef std::list<VertAdj>::iterator VertItr;
typedef std::list<EdgePair>::iterator PairItr;

std::list<VertAdj> monotones_; // sweep-line list of verts
std::list<EdgePair> activePairs_; // west to east monotone edges
std::list<EdgePair> inactivePairs_; // completed monotones
#endif
float precision_; // a triangle of this height or less is degenerate

Expand Down
Loading