mirror of
https://github.com/xibyte/jsketcher
synced 2025-12-10 02:13:58 +01:00
341 lines
No EOL
11 KiB
HTML
341 lines
No EOL
11 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<html>
|
|
<head>
|
|
<title>TCAD</title>
|
|
<style>
|
|
body {
|
|
font-family: Monospace;
|
|
overflow: hidden;
|
|
}
|
|
|
|
html, body {
|
|
background: gray;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.logo {
|
|
color: #fff;
|
|
font-size: 16px;
|
|
padding: 6px 0 0 10px;
|
|
}
|
|
|
|
.panel {
|
|
background: #444;
|
|
border: 0px solid black;
|
|
}
|
|
.b-top { border-top-width: 1px; }
|
|
.b-bot { border-bottom-width: 1px; }
|
|
.b-left { border-left-width: 1px; }
|
|
.b-right { border-right-width: 1px; }
|
|
|
|
.btn:hover {
|
|
background-color: #808080;
|
|
border-color: #ccc;
|
|
}
|
|
|
|
.btn {
|
|
border:1px solid black;
|
|
background-color: #606060;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
border-radius: 4px;
|
|
color: white;
|
|
font-size: 16px;
|
|
font-family: DejaVu Sans, Symbola, Everson Mono, Dingbats, Segoe UI Symbol,
|
|
Quivira, SunExt-A, FreeSerif, Universalia, unifont;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.txt-btn {
|
|
font-family: monospace;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.sbtn {
|
|
min-width:20px;
|
|
height:20px;
|
|
line-height: 1.1;
|
|
border-color: #999;
|
|
padding: 1px 3px;
|
|
}
|
|
|
|
.rbtn {
|
|
width:37px;
|
|
height:37px;
|
|
margin: 2px 6px;
|
|
font-size: 22px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.tbtn {
|
|
width:31px;
|
|
height:31px;
|
|
margin: 2px 2px;
|
|
font-size: 20px;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
.tlist {
|
|
list-style-type: none;
|
|
padding: 0px;
|
|
margin:0;
|
|
color: #fff;
|
|
}
|
|
|
|
.tlist li {
|
|
border-bottom: 1px solid #777;
|
|
padding: 4px 3px 4px 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tlist li:hover {
|
|
background: #222;
|
|
}
|
|
|
|
.tool-caption {
|
|
font-weight: bold;
|
|
color: #fff;
|
|
border-bottom: 1px solid #000;
|
|
padding: 1px 3px;
|
|
background: #333;
|
|
}
|
|
|
|
#status > * {
|
|
margin: 1px;
|
|
}
|
|
|
|
.tool-caption .btn {
|
|
width:14px;
|
|
height:14px;
|
|
font-size: 10px;
|
|
line-height: 11px;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
|
|
.tlist .btn {
|
|
width:18px;
|
|
height:19px;
|
|
font-size: 12px;
|
|
line-height: 17px;
|
|
margin-top: -2px;
|
|
}
|
|
|
|
.tlist .rm {
|
|
display: none;
|
|
}
|
|
|
|
.tlist li:hover .rm {
|
|
display: block;
|
|
}
|
|
|
|
.scroll {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.scroll::-webkit-scrollbar {
|
|
width: 2px;
|
|
}
|
|
|
|
.scroll::-webkit-scrollbar-track {
|
|
background:#eee;
|
|
border: thin solid lightgray;
|
|
box-shadow: 0px 0px 3px #dfdfdf inset;
|
|
border-radius:10px;
|
|
}
|
|
.scroll::-webkit-scrollbar-thumb {
|
|
background:#999;
|
|
border: thin solid gray;
|
|
border-radius:10px;
|
|
}
|
|
|
|
.scroll::-webkit-scrollbar-thumb:hover {
|
|
background:#7d7d7d;
|
|
}
|
|
|
|
|
|
.win {
|
|
position: absolute;
|
|
min-width: 10px;
|
|
min-height: 10px;
|
|
left:100px;
|
|
top:300px;
|
|
background: #666;
|
|
border: 2px solid #ccc;
|
|
}
|
|
|
|
.win .content {
|
|
padding: 7px;
|
|
}
|
|
|
|
.sep {
|
|
margin-right: 13px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
|
|
|
|
<script src="lib/jquery-2.1.0.min.js"></script>
|
|
<script src="lib/three/three.js"></script>
|
|
<script src="lib/numeric-1.2.6.js"></script>
|
|
<script src="lib/diff_match_patch.js"></script>
|
|
<script src="app/sketcher/canvas.js"></script>
|
|
<script src="app/sketcher/io.js"></script>
|
|
<script src="app/sketcher/history.js"></script>
|
|
<script src="app/sketcher/shapes/arc.js"></script>
|
|
<script src="app/sketcher/shapes/circle.js"></script>
|
|
<script src="app/sketcher/shapes/segment.js"></script>
|
|
<script src="app/sketcher/shapes/dim.js"></script>
|
|
<script src="app/sketcher/helpers.js"></script>
|
|
|
|
<script src="app/math/vector.js"></script>
|
|
<script src="app/math/math.js"></script>
|
|
<script src="app/math/qr.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/sketcher/constr/constraints.js"></script>
|
|
<script src="app/sketcher/constr/solver.js"></script>
|
|
|
|
<script src="app/sketcher/parametric.js"></script>
|
|
<script src="app/sketcher/fetchers.js"></script>
|
|
<script src="app/engine.js"></script>
|
|
<script src="app/sketcher/main2d.js"></script>
|
|
<script src="app/workbench.js"></script>
|
|
<script src="app/ui.js"></script>
|
|
<script src="app/math/graph.js"></script>
|
|
|
|
<script>
|
|
function start() {
|
|
var app = new TCAD.App2D();
|
|
app.loadFromLocalStorage();
|
|
var actionsWin = new TCAD.ui.Window($('#actions'));
|
|
TCAD.ui.bindOpening( $('#showActions'), actionsWin );
|
|
var addAction = TCAD.ui.createActionsWinBuilder(actionsWin);
|
|
|
|
for (var p = 0; p < app._actionsOrder.length; ++p) {
|
|
var act = app.actions[app._actionsOrder[p]];
|
|
addAction(act.desc, act.action);
|
|
$('.act-' + act.id).click(act.action).attr('title', act.desc);
|
|
}
|
|
|
|
var pm = app.viewer.parametricManager;
|
|
var constrList = new TCAD.ui.List($('#constrs'), {
|
|
items : function() {
|
|
var theItems = [];
|
|
for (var j = 0; j < pm.subSystems.length; j++) {
|
|
var sub = pm.subSystems[j];
|
|
for (var i = 0; i < sub.constraints.length; ++i) {
|
|
var constr = sub.constraints[i];
|
|
if (constr.aux !== true) {
|
|
theItems.push({name : constr.UI_NAME, constr : constr});
|
|
}
|
|
}
|
|
}
|
|
return theItems;
|
|
},
|
|
|
|
remove : function(item) {
|
|
pm.remove(item.constr);
|
|
},
|
|
|
|
mouseleave : function(item) {
|
|
app.viewer.deselectAll();
|
|
app.viewer.refresh();
|
|
},
|
|
|
|
hover : function(item) {
|
|
app.viewer.select(item.constr.getObjects(), true);
|
|
app.viewer.refresh();
|
|
}
|
|
|
|
});
|
|
app.viewer.parametricManager.listeners.push(function() {constrList.refresh()});
|
|
constrList.refresh();
|
|
}
|
|
window.___log = function(log) {
|
|
$('#log').append( " *****************<br><br><br><br>");
|
|
for (var i = 0; i < log.length; i++) {
|
|
$('#log').append( log[i] + " <br>");
|
|
}
|
|
};
|
|
window.onload = function() {
|
|
setTimeout(start, 0);
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="panel b-bot" style="width: 100%; height: 35px; text-align:right;">
|
|
<span class="logo" style="float:left">sketcher.js <span style="font-size: 10px">(alpha)</span></span>
|
|
|
|
<button class="btn tbtn act-undo" ><i class="fa fa-arrow-left"></i></button><!--
|
|
--><button class="btn tbtn act-redo sep" ><i class="fa fa-arrow-right"></i></button><!--
|
|
-- <button class="btn tbtn act-checkpoint sep" ><i class="fa fa-check-circle"></i></button><!--
|
|
--><button class="btn tbtn act-save" ><i class="fa fa-floppy-o"></i></button><!--
|
|
--><button class="btn tbtn sep" ><i class="fa fa-upload"></i></button><!--
|
|
--><button class="btn tbtn sep act-pan" ><i class="fa fa-arrows"></i></button><!--
|
|
--><button class="btn tbtn act-addPoint" style="background-image: url(img/dot.png);" type="submit" value=""></button><!--
|
|
--><button class="btn tbtn act-addSegment" style="background-image: url(img/line.png);" type="submit" value=""></button><!--
|
|
--><button class="btn tbtn act-addMultiSegment" style="background-image: url(img/mline.png);" type="submit" value=""></button><!--
|
|
--><button class="btn tbtn act-addCircle" style="background-image: url(img/circle.png);" type="submit" value=""></button><!--
|
|
--><button class="btn tbtn act-addArc sep" style="background-image: url(img/arc.png);" type="submit" value=""></button><!--
|
|
--><button class="btn tbtn act-addFillet sep" type="submit" value="">F</button><!--
|
|
--><button class="btn tbtn act-addHDim" style="background-image: url(img/hdim.png);" type="submit" value=""></button><!--
|
|
--><button class="btn tbtn act-addVDim" style="background-image: url(img/vdim.png);" type="submit" value=""></button><!--
|
|
--><button class="btn tbtn act-addDim" style="background-image: url(img/dim.png);" type="submit" value=""></button><!--
|
|
--><button class="btn tbtn" style="background-image: url(img/ddim.png);" type="submit" value=""></button><!--
|
|
-->
|
|
</div>
|
|
<div style="width: 100%; height: calc(100% - 59px);">
|
|
|
|
<div class="panel b-right scroll" style="float: left; width: 245px; height: 100%;">
|
|
<div class="tool-caption">CONSTRAINTS</div>
|
|
<ul class="tlist" id='constrs'>
|
|
<li>$name$<span class="rm" style="float: right;"><input class="btn sbtn ui-rm" style="" type="submit" value="✘"></span></li>
|
|
</ul>
|
|
</div>
|
|
<div style="background: black; float: left; width: calc(100% - 298px); height: 100%;">
|
|
<canvas width="300" height="300" id="viewer"></canvas>
|
|
</div>
|
|
<div id="right-toolbar" class="panel b-left scroll" style="width: 50px; float: right; height: 100%; ">
|
|
<div style="width:50%; height: 2px"></div>
|
|
<button class="btn rbtn act-coincident" style="background-image: url(img/coi.png);"></button>
|
|
<button class="btn rbtn act-verticalConstraint" style="background-image: url(img/vert.png);"></button>
|
|
<button class="btn rbtn act-horizontalConstraint" style="background-image: url(img/hor.png);"></button>
|
|
<button class="btn rbtn act-parallelConstraint" style="background-image: url(img/par.png);"></button>
|
|
<button class="btn rbtn act-perpendicularConstraint" style="background-image: url(img/per.png);"></button>
|
|
<button class="btn rbtn act-P2LDistanceConstraint" style="background-image: url(img/p2l.png);"></button>
|
|
<button class="btn rbtn act-P2PDistanceConstraint" style="background-image: url(img/p2p.png);"></button>
|
|
<button class="btn rbtn act-REqualsRConstraint" style="background-image: url(img/eq.png);"></button>
|
|
<button class="btn rbtn act-tangentConstraint" style="background-image: url(img/tgn.png);"></button>
|
|
<button class="btn rbtn act-RadiusConstraint" style="background-image: url(img/rad.png);"></button>
|
|
<button class="btn rbtn act-lockConstraint" ><i class="fa fa-lock"></i></button>
|
|
<button class="btn rbtn act-pointOnLine" >PL</button>
|
|
</div>
|
|
</div>
|
|
<div id="status" class="panel b-top" style="width: 100%; height:22px;">
|
|
<input id='showActions' class="btn sbtn" style="" type="submit" value="⌘">
|
|
</div>
|
|
|
|
<div id="actions" class="scroll win" style="display: none;">
|
|
<div class="tool-caption" >ACTIONS<span class="rm" style="float: right; "><input class="btn sbtn" style="" type="submit" value="✘"></span></div>
|
|
<div class="content">
|
|
<div><input class="btn txt-btn" style="width: 100%;" type="submit" value="$value$"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--<div id="log" style="position:absolute; width: 500px; height: 300px; top:500px; pxleft:0; overflow: scroll;background-color: salmon;">-->
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |