mirror of
https://github.com/xibyte/jsketcher
synced 2025-12-09 09:52:34 +01:00
ui / resize manager
This commit is contained in:
Val Erastov
parent
ea05603f99
commit
ae8bc2ef0a
5 changed files with 163 additions and 63 deletions
|
|
@ -12,7 +12,7 @@ function start() {
|
|||
addLayer("sketch", TCAD.TWO.Styles.DEFAULT);
|
||||
addLayer("_construction_", TCAD.TWO.Styles.CONSTRUCTION);
|
||||
|
||||
var actionsWin = new TCAD.ui.Window($('#actions'));
|
||||
var actionsWin = new TCAD.ui.Window($('#actions'), app.winManager);
|
||||
|
||||
TCAD.ui.bindOpening( $('#showActions'), actionsWin );
|
||||
var addAction = TCAD.ui.createActionsWinBuilder(actionsWin);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ TCAD.App2D = function() {
|
|||
this.winManager = new TCAD.ui.WinManager();
|
||||
|
||||
this.initSketchManager();
|
||||
this._exportWin = new TCAD.ui.Window($('#exportManager'));
|
||||
this._exportWin = new TCAD.ui.Window($('#exportManager'), app.winManager);
|
||||
|
||||
$('#exportManager li').click(function() {TCAD.ui.closeWin(app._exportWin);});
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ TCAD.App2D = function() {
|
|||
this.dock = new TCAD.ui.Dock(dockEl, $('#status'), TCAD.App2D.views);
|
||||
this.dock.show('Constraints');
|
||||
|
||||
this.winManager.makeHRResizable(dockEl);
|
||||
this.winManager.registerResize(dockEl, TCAD.ui.DIRECTIONS.EAST, function() {$('body').trigger('layout'); });
|
||||
$('body').on('layout', this.viewer.onWindowResize);
|
||||
|
||||
this.registerAction = function(id, desc, action) {
|
||||
|
|
@ -208,6 +208,13 @@ TCAD.App2D.views = [
|
|||
}
|
||||
];
|
||||
|
||||
TCAD.App2D.bottomViews = [
|
||||
{
|
||||
name: 'Commands',
|
||||
icon: 'desktop'
|
||||
}
|
||||
];
|
||||
|
||||
TCAD.App2D.faBtn = function(iconName) {
|
||||
return $('<i>', {class : 'fa fa-'+iconName});
|
||||
};
|
||||
|
|
@ -269,7 +276,7 @@ TCAD.App2D.prototype.newSketch = function() {
|
|||
};
|
||||
|
||||
TCAD.App2D.prototype.initSketchManager = function(data, ext) {
|
||||
this._sketchesWin = new TCAD.ui.Window($('#sketchManager'));
|
||||
this._sketchesWin = new TCAD.ui.Window($('#sketchManager'), this.winManager);
|
||||
var app = this;
|
||||
var sketchesList = new TCAD.ui.List('sketchList', {
|
||||
items : function() {
|
||||
|
|
@ -303,7 +310,6 @@ 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() {
|
||||
|
|
|
|||
198
web/app/ui.js
198
web/app/ui.js
|
|
@ -1,8 +1,7 @@
|
|||
TCAD.ui = {};
|
||||
|
||||
|
||||
/** @constructor */
|
||||
TCAD.ui.Window = function(el) {
|
||||
TCAD.ui.Window = function(el, winManager) {
|
||||
this.root = el;
|
||||
var root = this.root;
|
||||
this.root.find('.tool-caption').each(function() {
|
||||
|
|
@ -12,6 +11,148 @@ TCAD.ui.Window = function(el) {
|
|||
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) {
|
||||
|
|
@ -145,55 +286,6 @@ TCAD.ui.Dock.prototype.isVisible = function(viewName) {
|
|||
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');
|
||||
}
|
||||
});
|
||||
TCAD.ui._maskTest = function (mask, value) {
|
||||
return (mask & value) === value;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -184,8 +184,8 @@ html, body {
|
|||
|
||||
.win {
|
||||
position: absolute;
|
||||
min-width: 10px;
|
||||
min-height: 10px;
|
||||
min-width: 100px;
|
||||
min-height: 20px;
|
||||
left:100px;
|
||||
top:300px;
|
||||
background: #666;
|
||||
|
|
@ -195,10 +195,12 @@ html, body {
|
|||
|
||||
.win .content {
|
||||
padding: 7px;
|
||||
height: calc(100% - 19px);
|
||||
}
|
||||
|
||||
.win .tool-caption {
|
||||
cursor: default;
|
||||
height: 15px;
|
||||
}
|
||||
.win .tool-caption .rm {
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -104,13 +104,13 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sketchManager" class="win" style="display: none;">
|
||||
<div id="sketchManager" class="win" style="display: none; height: 300px;">
|
||||
<div class="tool-caption" >SKETCHES</div>
|
||||
<div class="content panel scroll" style="padding: 0;max-height: 500px;">
|
||||
<div class="content panel scroll" style="padding: 0;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="exportManager" class="scroll win" style="display: none; min-width: 100px;">
|
||||
<div id="exportManager" class="scroll win" style="display: none;">
|
||||
<div class="tool-caption" >FORMAT</div>
|
||||
<div class="content panel" style="padding: 0;">
|
||||
<ul class="tlist">
|
||||
|
|
|
|||
Loading…
Reference in a new issue