mirror of
https://github.com/xibyte/jsketcher
synced 2025-12-15 12:53:52 +01:00
UI work
This commit is contained in:
Val Erastov
parent
10c2ce6389
commit
c9245aa313
6 changed files with 119 additions and 60 deletions
|
|
@ -76,10 +76,15 @@ function start() {
|
|||
app.viewer.parametricManager.refresh();
|
||||
}
|
||||
});
|
||||
$('.dock-node').append(constrList.ul);
|
||||
app.dock.views['Constraints'].node.append(constrList.ul);
|
||||
app.viewer.parametricManager.listeners.push(function() {constrList.refresh()});
|
||||
constrList.refresh();
|
||||
|
||||
|
||||
var layerSelection = $('<span>', {id: 'layerSelection'})
|
||||
.append($('<label>', {for : 'layersList'}).text('Layer: '))
|
||||
.append($('<select>', {id : 'layersList'}));
|
||||
app.dock.views['Properties'].node.append(layerSelection);
|
||||
|
||||
var updateLayersList = function () {
|
||||
var options = '';
|
||||
for (var i = 0; i < app.viewer.layers.length; i++) {
|
||||
|
|
|
|||
|
|
@ -87,12 +87,12 @@ TCAD.TWO.Viewer = function(canvas) {
|
|||
canvas.style.height = canvasHeight + "px";
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
this.onWindowResize = function() {
|
||||
updateCanvasSize();
|
||||
viewer.refresh();
|
||||
}
|
||||
};
|
||||
updateCanvasSize();
|
||||
window.addEventListener( 'resize', onWindowResize, false );
|
||||
window.addEventListener( 'resize', this.onWindowResize, false );
|
||||
|
||||
Object.defineProperty(this, "activeLayer", {
|
||||
get: viewer.getActiveLayer ,
|
||||
|
|
@ -713,7 +713,7 @@ TCAD.TWO.ToolManager = function(viewer, defaultTool) {
|
|||
var tm = this;
|
||||
canvas.addEventListener('mousemove', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
//e.stopPropagation(); // allow propagation for move in sake of dynamic layout
|
||||
tm.getTool().mousemove(e);
|
||||
}, false);
|
||||
canvas.addEventListener('mousedown', function (e) {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ TCAD.App2D = function() {
|
|||
var app = this;
|
||||
|
||||
this.viewer = new TCAD.TWO.Viewer(document.getElementById('viewer'));
|
||||
this.winManager = new TCAD.ui.WinManager();
|
||||
|
||||
this.initSketchManager();
|
||||
this._exportWin = new TCAD.ui.Window($('#exportManager'));
|
||||
|
|
@ -17,9 +18,13 @@ TCAD.App2D = function() {
|
|||
//For debug view
|
||||
this._actionsOrder = [];
|
||||
|
||||
this.dock = new TCAD.ui.Dock($('#dock'), $('#status'), TCAD.App2D.viewes);
|
||||
var dockEl = $('#dock');
|
||||
this.dock = new TCAD.ui.Dock(dockEl, $('#status'), TCAD.App2D.views);
|
||||
this.dock.show('Constraints');
|
||||
|
||||
this.winManager.makeHRResizable(dockEl);
|
||||
$('body').on('layout', this.viewer.onWindowResize);
|
||||
|
||||
this.registerAction = function(id, desc, action) {
|
||||
app.actions[id] = {id: id, desc: desc, action: action};
|
||||
app._actionsOrder.push(id);
|
||||
|
|
@ -188,22 +193,14 @@ TCAD.App2D = function() {
|
|||
});
|
||||
};
|
||||
|
||||
TCAD.App2D.viewes = [
|
||||
{
|
||||
name: 'Layers',
|
||||
icon: 'bars'
|
||||
},
|
||||
{
|
||||
name: 'Properties',
|
||||
icon: 'sliders'
|
||||
},
|
||||
TCAD.App2D.views = [
|
||||
{
|
||||
name: 'Dimensions',
|
||||
icon: 'arrows-v'
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
icon: 'wrench'
|
||||
name: 'Properties',
|
||||
icon: 'sliders'
|
||||
},
|
||||
{
|
||||
name: 'Constraints',
|
||||
|
|
@ -306,6 +303,7 @@ TCAD.App2D.prototype.initSketchManager = function(data, ext) {
|
|||
$('#sketchManager').find('.content').append(sketchesList.ul);
|
||||
sketchesList.refresh();
|
||||
this._sketchesList = sketchesList;
|
||||
this.winManager.makeHRResizable($('#sketchManager'));
|
||||
};
|
||||
|
||||
TCAD.App2D.prototype.loadFromLocalStorage = function() {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@ TCAD.ui = {};
|
|||
TCAD.ui.Window = function(el) {
|
||||
this.root = el;
|
||||
var root = this.root;
|
||||
this.root.find('.tool-caption').each(function() {
|
||||
var closeBtn = '<span class="btn rm" style="float: right;"><i class="fa fa-remove"></i></span>';
|
||||
$(this).append(closeBtn);
|
||||
});
|
||||
this.root.find('.tool-caption .rm').click(function() {
|
||||
root.hide();
|
||||
});
|
||||
|
|
@ -63,6 +67,7 @@ TCAD.ui.List.prototype.refresh = function() {
|
|||
li.find('.rm').click(function(e) {
|
||||
model.remove(item, index);
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
li.hover(function() {model.hover(item, index)});
|
||||
li.mouseleave(function() {model.mouseleave(item, index)});
|
||||
|
|
@ -79,11 +84,10 @@ TCAD.ui.List.prototype.refresh = function() {
|
|||
};
|
||||
|
||||
TCAD.ui.Dock = function(dockEl, switcherEl, viewDefinitions) {
|
||||
this.viewes = {};
|
||||
this.views = {};
|
||||
this.dockEl = dockEl;
|
||||
this.order = [];
|
||||
function bindClick(dock, switchEl, viewName) {
|
||||
switchEl.click(function() {
|
||||
switchEl.click(function(e) {
|
||||
if (dock.isVisible(viewName)) {
|
||||
dock.hide(viewName);
|
||||
} else {
|
||||
|
|
@ -94,13 +98,14 @@ TCAD.ui.Dock = function(dockEl, switcherEl, viewDefinitions) {
|
|||
for (var i = 0; i < viewDefinitions.length; i++) {
|
||||
var viewDef = viewDefinitions[i];
|
||||
var view = {};
|
||||
this.viewes[viewDef.name] = view;
|
||||
this.order.push(viewDef.name);
|
||||
this.views[viewDef.name] = view;
|
||||
view.node = $('<div>', {class: 'dock-node'});
|
||||
var caption = $('<div>', {class: 'tool-caption'});
|
||||
caption.append($('<span>', {class: 'txt'}).text(viewDef.name.toUpperCase()));
|
||||
caption.append(TCAD.App2D.faBtn(viewDef.icon));
|
||||
view.node.append(caption);
|
||||
view.node.hide();
|
||||
this.dockEl.append(view.node);
|
||||
|
||||
view.switch = $('<span>', {class: 'dock-btn'});
|
||||
view.switch.append(TCAD.App2D.faBtn(viewDef.icon));
|
||||
|
|
@ -111,40 +116,84 @@ TCAD.ui.Dock = function(dockEl, switcherEl, viewDefinitions) {
|
|||
};
|
||||
|
||||
TCAD.ui.Dock.prototype.show = function(viewName) {
|
||||
var view = this.viewes[viewName];
|
||||
var view = this.views[viewName];
|
||||
if (view.switch.hasClass('selected')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var addAfter = null;
|
||||
for (var i = 0; i < this.order.length; i++) {
|
||||
var otherView = this.order[i];
|
||||
if (viewName == otherView) break;
|
||||
if (this.isVisible(otherView)) {
|
||||
addAfter = this.viewes[otherView]
|
||||
}
|
||||
}
|
||||
if (addAfter == null) {
|
||||
this.dockEl.find('.tool-caption .no-top-border').removeClass('no-top-border');
|
||||
this.dockEl.prepend(view.node);
|
||||
view.node.find('.tool-caption').addClass('no-top-border');
|
||||
} else {
|
||||
view.node.insertAfter(addAfter.node);
|
||||
if (!this.dockEl.is(":visible")) {
|
||||
this.dockEl.show();
|
||||
$('body').trigger('layout');
|
||||
}
|
||||
view.node.show();
|
||||
view.switch.addClass('selected');
|
||||
};
|
||||
|
||||
TCAD.ui.Dock.prototype.hide = function(viewName) {
|
||||
var view = this.viewes[viewName];
|
||||
var view = this.views[viewName];
|
||||
if (!view.switch.hasClass('selected')) {
|
||||
return;
|
||||
}
|
||||
view.node.detach();
|
||||
view.node.hide();
|
||||
view.switch.removeClass('selected');
|
||||
if (this.dockEl.find('.dock-node:visible').length == 0) {
|
||||
this.dockEl.hide();
|
||||
$('body').trigger('layout');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
TCAD.ui.Dock.prototype.isVisible = function(viewName) {
|
||||
return this.viewes[viewName].switch.hasClass('selected');
|
||||
return this.views[viewName].switch.hasClass('selected');
|
||||
};
|
||||
|
||||
TCAD.ui.WinManager = function() {
|
||||
this.moveHandler = null;
|
||||
var wm = this;
|
||||
$('body').mousemove(function(e) {
|
||||
if (wm.moveHandler != null) {
|
||||
wm.moveHandler(e);
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
TCAD.ui.WinManager.prototype.makeHRResizable = function(el) {
|
||||
var origin = {x : NaN, y : NaN};
|
||||
var originSize = {x : NaN, y : NaN};
|
||||
var wm = this;
|
||||
function onEdge(e, el) {
|
||||
var offset = el.offset();
|
||||
var width = el.width();
|
||||
return e.pageX > offset.left + width;
|
||||
}
|
||||
function mousemove(e) {
|
||||
var dx = e.pageX - origin.x;
|
||||
var dy = e.pageY - origin.y;
|
||||
var newWidth = originSize.x + dx;
|
||||
el.css('width', (newWidth) + 'px');
|
||||
$('body').trigger('layout');
|
||||
}
|
||||
el.mousedown(function(e) {
|
||||
if (!onEdge(e, $(this))) {
|
||||
stopDrag(e);
|
||||
return;
|
||||
}
|
||||
origin.x = e.pageX;
|
||||
origin.y = e.pageY;
|
||||
originSize.x = el.width()
|
||||
wm.moveHandler = mousemove;
|
||||
});
|
||||
var stopDrag = function(e) {
|
||||
origin.x = NaN;
|
||||
origin.y = NaN;
|
||||
wm.moveHandler = null;
|
||||
};
|
||||
|
||||
el.mouseup(stopDrag);
|
||||
el.mousemove(function(e) {
|
||||
if (onEdge(e, $(this))) {
|
||||
el.css('cursor', 'ew-resize');
|
||||
} else {
|
||||
el.css('cursor', 'inherited');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ html, body {
|
|||
.b-top { border-top-width: 1px; }
|
||||
.b-bot { border-bottom-width: 1px; }
|
||||
.b-left { border-left-width: 1px; }
|
||||
.b-right { border-right-width: 1px; }
|
||||
.b-right { border-right-width: 5px; border-color: #222222 }
|
||||
|
||||
.btn:hover {
|
||||
background-color: #808080;
|
||||
|
|
@ -119,9 +119,7 @@ html, body {
|
|||
.tool-caption {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #000;
|
||||
border-top: 1px solid #000;
|
||||
padding: 1px 0 1px 3px;
|
||||
padding: 2px 0 2px 3px;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
|
|
@ -187,13 +185,26 @@ html, body {
|
|||
left:100px;
|
||||
top:300px;
|
||||
background: #666;
|
||||
border: 2px solid #ccc;
|
||||
border: 5px solid #444444;
|
||||
box-shadow: 0px 0px 21px 2px rgba(0,0,0,0.75);
|
||||
}
|
||||
|
||||
.win .content {
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.win .tool-caption {
|
||||
cursor: default;
|
||||
}
|
||||
.win .tool-caption .rm {
|
||||
border: 0;
|
||||
border-radius: 0px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
height: 17px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.sep {
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,10 +43,6 @@
|
|||
<body>
|
||||
<a id="downloader" style="display: none;" ></a>
|
||||
<div class="panel b-bot" style="width: 100%; height: 35px; text-align:right;">
|
||||
<span id="layerSelection">
|
||||
<label for="layersList">Layer: </label>
|
||||
<select id="layersList"></select>
|
||||
</span>
|
||||
<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><!--
|
||||
|
|
@ -74,9 +70,6 @@
|
|||
<div style="width: 100%; height: calc(100% - 59px);">
|
||||
|
||||
<div id="dock" class="panel b-right scroll" style="float: left; width: 245px; height: 100%;"></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>
|
||||
|
|
@ -95,26 +88,29 @@
|
|||
<button class="btn rbtn act-pointInMiddle" style="background-image: url(img/vec/pointInMiddle.svg);"></button>
|
||||
<button class="btn rbtn act-llAngle" style="background-image: url(img/vec/angle.svg);"></button>
|
||||
</div>
|
||||
<div style="background: black; overflow: hidden; height: 100%;">
|
||||
<canvas width="300" height="300" id="viewer"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="status" class="panel b-top" style="width: 100%; height:22px; padding-top: 3px;"><span
|
||||
id='showActions' class="dock-btn"><i class="fa fa-slack"></i></span></div>
|
||||
|
||||
<div id="actions" class="scroll win" style="display: none;">
|
||||
<div class="tool-caption" >ACTIONS<div class="rm pseudo-btn" style="float: right;">✘</div></div>
|
||||
<div class="tool-caption" >ACTIONS</div>
|
||||
<div class="content">
|
||||
<div><input class="btn txt-btn" style="width: 100%;" type="submit" value="$value$"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sketchManager" class="win" style="display: none; min-width: 100px;">
|
||||
<div class="tool-caption" >SKETCHES<div class="rm pseudo-btn" style="float: right;">✘</div></div>
|
||||
<div id="sketchManager" class="win" style="display: none;">
|
||||
<div class="tool-caption" >SKETCHES</div>
|
||||
<div class="content panel scroll" style="padding: 0;max-height: 500px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="exportManager" class="scroll win" style="display: none; min-width: 100px;">
|
||||
<div class="tool-caption" >FORMAT<div class="rm pseudo-btn" style="float: right;">✘</div></div>
|
||||
<div class="tool-caption" >FORMAT</div>
|
||||
<div class="content panel" style="padding: 0;">
|
||||
<ul class="tlist">
|
||||
<li class="act-exportSVG">SVG</li>
|
||||
|
|
@ -122,7 +118,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--<div id="log" style="position:absolute; width: 500px; height: 300px; top:500px; pxleft:0; overflow: scroll;background-color: salmon;">-->
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue