mirror of
https://github.com/xibyte/jsketcher
synced 2025-12-07 17:04:58 +01:00
291 lines
8.7 KiB
JavaScript
291 lines
8.7 KiB
JavaScript
TCAD.ui = {};
|
|
|
|
/** @constructor */
|
|
TCAD.ui.Window = function(el, winManager) {
|
|
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();
|
|
});
|
|
var DIRS = TCAD.ui.DIRECTIONS;
|
|
winManager.registerResize(this.root, DIRS.NORTH | DIRS.SOUTH | DIRS.WEST | DIRS.EAST);
|
|
};
|
|
|
|
TCAD.ui.WinManager = function() {
|
|
this.moveHandler = null;
|
|
var wm = this;
|
|
$('body').mousemove(function(e) {
|
|
if (wm.moveHandler != null) {
|
|
wm.moveHandler(e);
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
$('body').mouseup(function(e) {
|
|
wm.moveHandler = null;
|
|
});
|
|
};
|
|
|
|
TCAD.ui.WinManager.prototype.captureResize = function(el, dirMask, e, onResize) {
|
|
|
|
var origin = {x : e.pageX, y : e.pageY};
|
|
var originSize = {x : el.width(), y : el.height()};
|
|
var originLocation = el.offset();
|
|
var north = TCAD.ui._maskTest(dirMask, TCAD.ui.DIRECTIONS.NORTH);
|
|
var south = TCAD.ui._maskTest(dirMask, TCAD.ui.DIRECTIONS.SOUTH);
|
|
var west = TCAD.ui._maskTest(dirMask, TCAD.ui.DIRECTIONS.WEST);
|
|
var east = TCAD.ui._maskTest(dirMask, TCAD.ui.DIRECTIONS.EAST);
|
|
|
|
this.moveHandler = function(e) {
|
|
var dx = e.pageX - origin.x;
|
|
var dy = e.pageY - origin.y;
|
|
if (east) {
|
|
el.css('width', (originSize.x + dx) + 'px');
|
|
}
|
|
var top = originLocation.top;
|
|
var left = originLocation.left;
|
|
var setLoc = false;
|
|
if (west) {
|
|
el.css('width', (originSize.x - dx) + 'px');
|
|
left += dx;
|
|
setLoc = true;
|
|
}
|
|
if (south) {
|
|
el.css('height', (originSize.y + dy) + 'px');
|
|
}
|
|
if (north) {
|
|
el.css('height', (originSize.y - dy) + 'px');
|
|
top += dy;
|
|
setLoc = true;
|
|
}
|
|
if (setLoc) {
|
|
el.offset({left : left, top: top});
|
|
}
|
|
if (onResize !== undefined) {
|
|
onResize();
|
|
}
|
|
}
|
|
};
|
|
|
|
TCAD.ui.DIRECTIONS = {
|
|
NORTH : 0x0001,
|
|
SOUTH : 0x0010,
|
|
WEST : 0x0100,
|
|
EAST : 0x1000,
|
|
};
|
|
|
|
TCAD.ui.WinManager.prototype.registerResize = function(el, dirMask, onResize) {
|
|
var wm = this;
|
|
var north = TCAD.ui._maskTest(dirMask, TCAD.ui.DIRECTIONS.NORTH);
|
|
var south = TCAD.ui._maskTest(dirMask, TCAD.ui.DIRECTIONS.SOUTH);
|
|
var west = TCAD.ui._maskTest(dirMask, TCAD.ui.DIRECTIONS.WEST);
|
|
var east = TCAD.ui._maskTest(dirMask, TCAD.ui.DIRECTIONS.EAST);
|
|
|
|
var borderTop = parseInt(el.css('borderTopWidth'), 10);
|
|
var borderLeft = parseInt(el.css('borderLeftWidth'), 10);
|
|
|
|
function onNorthEdge(e, el) {
|
|
var offset = el.offset();
|
|
return e.pageY < offset.top + borderTop;
|
|
}
|
|
|
|
function onSouthEdge(e, el) {
|
|
var offset = el.offset();
|
|
var height = el.height();
|
|
return e.pageY > offset.top + height + borderTop;
|
|
}
|
|
|
|
function onWestEdge(e, el) {
|
|
var offset = el.offset();
|
|
return e.pageX < offset.left + borderLeft;
|
|
}
|
|
|
|
function onEastEdge(e, el) {
|
|
var offset = el.offset();
|
|
var width = el.width();
|
|
return e.pageX > offset.left + width + borderLeft;
|
|
}
|
|
|
|
|
|
el.mousedown(function(e) {
|
|
var $this = $(this);
|
|
if (north && east && onNorthEdge(e, $this) && onEastEdge(e, $this)) {
|
|
wm.captureResize(el, TCAD.ui.DIRECTIONS.NORTH | TCAD.ui.DIRECTIONS.EAST, e, onResize);
|
|
} else if (north && west && onNorthEdge(e, $this) && onWestEdge(e, $this)) {
|
|
wm.captureResize(el, TCAD.ui.DIRECTIONS.NORTH | TCAD.ui.DIRECTIONS.WEST, e, onResize);
|
|
} else if (south && east && onSouthEdge(e, $this) && onEastEdge(e, $this)) {
|
|
wm.captureResize(el, TCAD.ui.DIRECTIONS.SOUTH | TCAD.ui.DIRECTIONS.EAST, e, onResize);
|
|
} else if (south && west && onSouthEdge(e, $this) && onWestEdge(e, $this)) {
|
|
wm.captureResize(el, TCAD.ui.DIRECTIONS.SOUTH | TCAD.ui.DIRECTIONS.WEST, e, onResize);
|
|
} else if (north && onNorthEdge(e, $this)) {
|
|
wm.captureResize(el, TCAD.ui.DIRECTIONS.NORTH, e, onResize);
|
|
} else if (south && onSouthEdge(e, $this)) {
|
|
wm.captureResize(el, TCAD.ui.DIRECTIONS.SOUTH, e, onResize);
|
|
} else if (west && onWestEdge(e, $this)) {
|
|
wm.captureResize(el, TCAD.ui.DIRECTIONS.WEST, e, onResize);
|
|
} else if (east && onEastEdge(e, $this)) {
|
|
wm.captureResize(el, TCAD.ui.DIRECTIONS.EAST, e, onResize);
|
|
}
|
|
});
|
|
el.mousemove(function(e) {
|
|
|
|
var $this = $(this);
|
|
if (north && east && onNorthEdge(e, $this) && onEastEdge(e, $this)) {
|
|
el.css('cursor', 'nesw-resize');
|
|
} else if (north && west && onNorthEdge(e, $this) && onWestEdge(e, $this)) {
|
|
el.css('cursor', 'nwse-resize');
|
|
} else if (south && east && onSouthEdge(e, $this) && onEastEdge(e, $this)) {
|
|
el.css('cursor', 'nwse-resize');
|
|
} else if (south && west && onSouthEdge(e, $this) && onWestEdge(e, $this)) {
|
|
el.css('cursor', 'nesw-resize');
|
|
} else if (south && onSouthEdge(e, $this)) {
|
|
el.css('cursor', 'ns-resize');
|
|
} else if (north && onNorthEdge(e, $this)) {
|
|
el.css('cursor', 'ns-resize');
|
|
} else if (east && onEastEdge(e, $this)) {
|
|
el.css('cursor', 'ew-resize');
|
|
} else if (west && onWestEdge(e, $this)) {
|
|
el.css('cursor', 'ew-resize');
|
|
} else {
|
|
el.css('cursor', 'inherited');
|
|
}
|
|
});
|
|
};
|
|
|
|
TCAD.ui.bindOpening = function(btn, win) {
|
|
|
|
btn.click(function(e) {
|
|
TCAD.ui.openWin(win, e);
|
|
});
|
|
};
|
|
|
|
TCAD.ui.createActionsWinBuilder = function(win) {
|
|
var content = win.root.find('.content');
|
|
var template = content.html();
|
|
content.empty();
|
|
return function(name, action) {
|
|
content.append(template.replace("$value$", name));
|
|
content.find('div:last input').click(action);
|
|
};
|
|
};
|
|
|
|
TCAD.ui.closeWin = function(win) {
|
|
win.root.hide();
|
|
};
|
|
|
|
TCAD.ui.openWin = function(win, mouseEvent) {
|
|
|
|
var x = mouseEvent.pageX;
|
|
var y = mouseEvent.pageY;
|
|
var pageW = $(window).width();
|
|
var pageH = $(window).height();
|
|
var winW = win.root.width();
|
|
var winH = win.root.height();
|
|
|
|
var left = x < pageW / 2 ? x : x - winW;
|
|
var top = y < pageH / 2 ? y : y - winH;
|
|
|
|
win.root.show();
|
|
win.root.offset({top : top, left : left});
|
|
|
|
};
|
|
|
|
/** @constructor */
|
|
TCAD.ui.List = function(id, model) {
|
|
this.ul = $('<ul>', { class : 'tlist', id : id});
|
|
this.model = model;
|
|
this.template = '<li>$name$<span class="btn rm" style="float: right;"><i class="fa fa-remove"></i></span></li>';
|
|
};
|
|
|
|
TCAD.ui.List.prototype.refresh = function() {
|
|
this.ul.empty();
|
|
var items = this.model.items();
|
|
var model = this.model;
|
|
function makeCallbacks(li, item, index) {
|
|
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)});
|
|
li.click(function() {model.click(item, index)});
|
|
}
|
|
|
|
|
|
for (var i = 0; i < items.length; ++i) {
|
|
var item = items[i];
|
|
var li = $(this.template.replace('$name$', item.name));
|
|
this.ul.append(li);
|
|
makeCallbacks(li, item, i)
|
|
}
|
|
};
|
|
|
|
TCAD.ui.Dock = function(dockEl, switcherEl, viewDefinitions) {
|
|
this.views = {};
|
|
this.dockEl = dockEl;
|
|
function bindClick(dock, switchEl, viewName) {
|
|
switchEl.click(function(e) {
|
|
if (dock.isVisible(viewName)) {
|
|
dock.hide(viewName);
|
|
} else {
|
|
dock.show(viewName);
|
|
}
|
|
});
|
|
}
|
|
for (var i = 0; i < viewDefinitions.length; i++) {
|
|
var viewDef = viewDefinitions[i];
|
|
var view = {};
|
|
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));
|
|
view.switch.append($('<span>', {class: 'txt'}).text(viewDef.name));
|
|
bindClick(this, view.switch, viewDef.name);
|
|
switcherEl.append(view.switch);
|
|
}
|
|
};
|
|
|
|
TCAD.ui.Dock.prototype.show = function(viewName) {
|
|
var view = this.views[viewName];
|
|
if (view.switch.hasClass('selected')) {
|
|
return;
|
|
}
|
|
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.views[viewName];
|
|
if (!view.switch.hasClass('selected')) {
|
|
return;
|
|
}
|
|
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.views[viewName].switch.hasClass('selected');
|
|
};
|
|
|
|
TCAD.ui._maskTest = function (mask, value) {
|
|
return (mask & value) === value;
|
|
};
|