mirror of
https://github.com/xibyte/jsketcher
synced 2026-01-30 03:56:26 +01:00
first approach to layout
This commit is contained in:
parent
cb75f7361c
commit
eccfa6bc04
3 changed files with 87 additions and 51 deletions
|
|
@ -55,9 +55,9 @@ TCAD.TWO.utils.setStyle = function(style, ctx, scale) {
|
|||
TCAD.TWO.Viewer = function(canvas) {
|
||||
|
||||
this.canvas = canvas;
|
||||
|
||||
this.canvas.width = window.innerWidth;
|
||||
this.canvas.height = window.innerHeight;
|
||||
|
||||
this.canvas.width = canvas.parentNode.offsetWidth;
|
||||
this.canvas.height = canvas.parentNode.offsetHeight;
|
||||
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
this.layers = [];
|
||||
|
|
|
|||
|
|
@ -1,23 +1,70 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Sandbox</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Monospace;
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<title>TCAD</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Monospace;
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="lib/three/three.min.js"></script>
|
||||
<script src="lib/three/TrackballControls.js"></script>
|
||||
<script src="lib/three/OrbitControls.js"></script>
|
||||
<script src="lib/dat.gui.min.js"></script>
|
||||
<script src="app/sandbox.js"></script>
|
||||
<script src="lib/three/three.js"></script>
|
||||
<script src="lib/numeric-1.2.6.js"></script>
|
||||
<script src="lib/dat.gui.min.js"></script>
|
||||
<script src="app/canvas.js"></script>
|
||||
<script src="app/sketch/arc.js"></script>
|
||||
<script src="app/sketch/circle.js"></script>
|
||||
<script src="app/sketch/segment.js"></script>
|
||||
<script src="app/math/math.js"></script>
|
||||
<script src="app/math/matrix.js"></script>
|
||||
<script src="app/math/optim.js"></script>
|
||||
<script src="app/math/noptim.js"></script>
|
||||
|
||||
<script>window.onload = init;</script>
|
||||
<script src="app/math/lm.js"></script>
|
||||
<script src="app/constr/constraints.js"></script>
|
||||
<script src="app/constr/solver.js"></script>
|
||||
|
||||
<script src="app/parametric.js"></script>
|
||||
<script src="app/fetchers.js"></script>
|
||||
<script src="app/engine.js"></script>
|
||||
<script src="app/vector.js"></script>
|
||||
<script src="app/bsp.js"></script>
|
||||
<script src="app/main2d.js"></script>
|
||||
<script src="app/workbench.js"></script>
|
||||
|
||||
<script>
|
||||
function start() {
|
||||
new TCAD.App2D();
|
||||
}
|
||||
window.onload = function() {
|
||||
setTimeout(start, 0);
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.child {
|
||||
width: 100px; /* Or whatever */
|
||||
height: 100%; /* Or whatever */
|
||||
margin: auto; /* Magic! */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<div style="width:100%; height: 20px; background-color: black;">
|
||||
</div>
|
||||
<div class="parent" style="height: 100%; background-color: green;">
|
||||
<div class="child" style="background-color: blue; "></div>
|
||||
<!-- div style="background-color: blue; height: 20px; width: 100px; float: left;"><canvas width="300" height="300" id="viewer"></canvas></div-->
|
||||
<div class="child" style="background-color: black; width: 100%; "></div>
|
||||
<div class="child" style="background-color: yellow; width: 50px; float: left;" ></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,42 +1,31 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<title>TCAD</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Monospace;
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<script> TCAD = {} </script>
|
||||
<script src="lib/three/three.js"></script>
|
||||
<script src="lib/numeric-1.2.6.js"></script>
|
||||
<script src="app/engine.js"></script>
|
||||
<script src="app/canvas.js"></script>
|
||||
<script src="app/math/math.js"></script>
|
||||
<script src="app/math/matrix.js"></script>
|
||||
<script src="app/math/optim.js"></script>
|
||||
<script src="app/math/noptim.js"></script>
|
||||
|
||||
<script src="app/math/lm.js"></script>
|
||||
<script src="app/constr/constraints.js"></script>
|
||||
<script src="app/constr/solver.js"></script>
|
||||
<style>
|
||||
html, body {
|
||||
background: gray;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.panel {
|
||||
background: #444;
|
||||
border: 0px solid black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="app/engine.js"></script>
|
||||
<script src="app/vector.js"></script>
|
||||
<script src="app/math/test.js"></script>
|
||||
|
||||
<script>
|
||||
function start() {
|
||||
new TCAD.App2D();
|
||||
}
|
||||
window.onload = function() {
|
||||
// testCompare();
|
||||
lsolve();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<body>
|
||||
<div class="panel" style="width: 100%; height: 50px;"></div>
|
||||
<div style="width: 100%; height: calc(100% - 100px);">
|
||||
|
||||
<div class="panel" style="background: blue; float: left; width: 245px; height: 100%;"></div>
|
||||
<!-- div style="background-color: blue; height: 20px; width: 100px; float: left;"><canvas width="300" height="300" id="viewer"></canvas></div-->
|
||||
<div style="background: black; float: left; width: calc(100% - 296px); height: 100%;"></div>
|
||||
<div class="panel" style="background-color: yellow; width: 50px; float: right; height: 100%; "></div>
|
||||
</div>
|
||||
<div class="panel" style="width: 100%; height: 50px; border-top-width: 1px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue