From ae8bc2ef0a3940079e88764b2b2eeeb06e8edf5e Mon Sep 17 00:00:00 2001 From: Val Erastov Date: Fri, 19 Feb 2016 21:19:08 -0800 Subject: [PATCH] ui / resize manager --- web/app/app-init.js | 2 +- web/app/sketcher/main2d.js | 14 ++- web/app/ui.js | 198 +++++++++++++++++++++++++++---------- web/css/app.css | 6 +- web/sketcher.html | 6 +- 5 files changed, 163 insertions(+), 63 deletions(-) diff --git a/web/app/app-init.js b/web/app/app-init.js index 86a4c12b..f46114c3 100644 --- a/web/app/app-init.js +++ b/web/app/app-init.js @@ -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); diff --git a/web/app/sketcher/main2d.js b/web/app/sketcher/main2d.js index 432ebcf7..129150f0 100644 --- a/web/app/sketcher/main2d.js +++ b/web/app/sketcher/main2d.js @@ -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 $('', {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() { diff --git a/web/app/ui.js b/web/app/ui.js index 927cd47d..c023a097 100644 --- a/web/app/ui.js +++ b/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; }; diff --git a/web/css/app.css b/web/css/app.css index b02b2668..90264f08 100644 --- a/web/css/app.css +++ b/web/css/app.css @@ -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; diff --git a/web/sketcher.html b/web/sketcher.html index 0d90f67c..550f6ec0 100644 --- a/web/sketcher.html +++ b/web/sketcher.html @@ -104,13 +104,13 @@ -