first approach to layout

This commit is contained in:
Val Erastov 2014-12-10 23:53:12 -08:00
parent cb75f7361c
commit eccfa6bc04
3 changed files with 87 additions and 51 deletions

View file

@ -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 = [];

View file

@ -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>

View file

@ -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>