From 0bf50fee4d35467c5335cbaf6c1ca3b7ae2dd1e4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 12 Aug 2014 16:01:42 -0400 Subject: different ui on map editor --- public/assets/javascripts/ui/builder/BuilderToolbar.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'public/assets/javascripts/ui/builder') diff --git a/public/assets/javascripts/ui/builder/BuilderToolbar.js b/public/assets/javascripts/ui/builder/BuilderToolbar.js index df98ab0..239b05e 100644 --- a/public/assets/javascripts/ui/builder/BuilderToolbar.js +++ b/public/assets/javascripts/ui/builder/BuilderToolbar.js @@ -6,9 +6,9 @@ var BuilderToolbar = View.extend({ "click [data-role='toggle-map-view']": 'toggleMap', "click [data-role='toggle-layout-settings']": 'toggleSettings', "click [data-role='undo']": 'undo', - "click [data-role='create-mode']": 'create', - "click [data-role='resize-mode']": 'resize', - "click [data-role='move-mode']": 'move', +// "click [data-role='create-mode']": 'create', +// "click [data-role='resize-mode']": 'resize', +// "click [data-role='move-mode']": 'move', "click [data-role='destroy-mode']": 'destroy', }, @@ -27,7 +27,8 @@ var BuilderToolbar = View.extend({ undo: function(){ }, - + +/* create: function(e){ var state = map.ui.permissions.toggle("create") $(".inuse").removeClass("inuse") @@ -45,7 +46,8 @@ var BuilderToolbar = View.extend({ $(".inuse").removeClass("inuse") $(e.currentTarget).toggleClass("inuse", state) }, - +*/ + destroy: function(e){ var state = map.ui.permissions.toggle("destroy") $(".inuse").removeClass("inuse") -- cgit v1.2.3-70-g09d2 From 838ccfe6c2125e464d3c95c6e222e7e762dc8fd2 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 12 Aug 2014 18:19:33 -0400 Subject: undo stack for undo/redo --- public/assets/javascripts/rectangles/_env.js | 14 +++++++++ .../javascripts/rectangles/engine/map/ui_editor.js | 21 +++++++++++-- .../javascripts/rectangles/engine/scenery/undo.js | 34 +++++++++++++++++----- .../assets/javascripts/rectangles/models/rect.js | 4 +++ .../assets/javascripts/rectangles/models/room.js | 8 +++++ .../assets/javascripts/rectangles/models/vec2.js | 4 +++ .../assets/javascripts/rectangles/models/wall.js | 2 -- public/assets/javascripts/rectangles/util/keys.js | 6 ++-- .../javascripts/rectangles/util/permissions.js | 13 ++++++--- .../javascripts/ui/builder/BuilderToolbar.js | 9 +++++- views/partials/scripts.ejs | 2 ++ 11 files changed, 98 insertions(+), 19 deletions(-) (limited to 'public/assets/javascripts/ui/builder') diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js index 3cfe969..4b14a21 100644 --- a/public/assets/javascripts/rectangles/_env.js +++ b/public/assets/javascripts/rectangles/_env.js @@ -35,6 +35,20 @@ environment.init = function(){ zoom: -4.8 }) } + + keys.on("z", function(e){ + e.preventDefault() + if (e.ctrlKey || e.metaKey) { + if (e.shiftKey) { + var canRedo = UndoStack.redo() + console.log("can redo", canRedo) + } + else { + var canUndo = UndoStack.undo() + console.log("can undo", canUndo) + } + } + }) } environment.update = function(t){ map.update() diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 016a8ad..4b5f784 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -30,6 +30,7 @@ Map.UI.Editor = function(map){ // function down (e, cursor){ + var room cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) @@ -52,8 +53,17 @@ Map.UI.Editor = function(map){ if (intersects.length && base.permissions.destroy) { base.mouse.down = false - Rooms.remove(intersects[0]) - app.tube("builder-destroy-room", intersects[0]) + + room = intersects[0] + + UndoStack.push({ + type: "destroy-room", + prev: room.clone(), + next: { id: room.id }, + }) + + Rooms.remove(room) + app.tube("builder-destroy-room", room) return } else if (intersects.length) { @@ -151,6 +161,13 @@ Map.UI.Editor = function(map){ cursor.x.abs().quantize(1) cursor.y.abs().quantize(1) var room = Rooms.add_with_rect( cursor ) + + UndoStack.push({ + type: "create-room", + prev: { id: room.id }, + next: room.clone() + }) + app.tube("builder-pick-room", room) } } diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index fb221f5..b10a101 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -25,24 +25,44 @@ // { - type: "create-rectangle", - undo: function(state){ + type: "create-room", + undo: function(room){ + Rooms.remove(room) + Rooms.clipper.update() }, - redo: function(state){ + redo: function(room){ + Rooms.add(room) + Rooms.clipper.update() + app.tube("builder-pick-room", room) }, }, { - type: "update-rectangle", + type: "update-room", undo: function(state){ + var room = Rooms.list[state.id] + room.rect.assign( state.rect ) + room.height = state.height + Rooms.clipper.update() + app.tube("builder-pick-room", room) }, redo: function(state){ + var room = Rooms.list[state.id] + room.rect.assign( state.rect ) + room.height = state.height + Rooms.clipper.update() + app.tube("builder-pick-room", room) }, }, { - type: "destroy-rectangle", - undo: function(state){ + type: "destroy-room", + undo: function(room){ + Rooms.add(room) + Rooms.clipper.update() + app.tube("builder-pick-room", room) }, - redo: function(state){ + redo: function(room){ + Rooms.remove(room) + Rooms.clipper.update() }, }, diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js index 58469bc..0642a65 100644 --- a/public/assets/javascripts/rectangles/models/rect.js +++ b/public/assets/javascripts/rectangles/models/rect.js @@ -39,6 +39,10 @@ Rect.prototype.clone = function(){ return new Rect( this.x.clone(), this.y.clone() ) } + Rect.prototype.assign = function(r) { + this.x.copy(r.x) + this.y.copy(r.y) + } Rect.prototype.center = function(){ return new vec2(this.x.midpoint(), this.y.midpoint()) } diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js index c2850ba..6c0e1bb 100644 --- a/public/assets/javascripts/rectangles/models/room.js +++ b/public/assets/javascripts/rectangles/models/room.js @@ -40,6 +40,14 @@ this.focused = false } + Room.prototype.clone = function(){ + return new Room ({ + id: this.id, + rect: this.rect.clone(), + height: this.height, + }) + } + Room.prototype.toString = function(){ return this.rect.toString() } diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index 104c6f7..214feb9 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -17,6 +17,10 @@ vec2.prototype.clone = function(){ return new vec2(this.a, this.b) } + vec2.prototype.assign = function(v){ + this.a = v.a + this.b = v.b + } vec2.prototype.abs = function(){ if (this.b < this.a) { this.invert() diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 027d5f5..91e7c18 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -146,8 +146,6 @@ window.Wall = (function(){ if (shouldFlip) { sortedWalls = sortedWalls.reverse() } - -console.log(sortedWalls.map(function(z){return useX ? z.x : z.z}).join(" ")) var len = sortedWalls.length diff --git a/public/assets/javascripts/rectangles/util/keys.js b/public/assets/javascripts/rectangles/util/keys.js index 5a5c9d2..62d763f 100644 --- a/public/assets/javascripts/rectangles/util/keys.js +++ b/public/assets/javascripts/rectangles/util/keys.js @@ -19,7 +19,7 @@ var keys = (function(){ break; default: if (keys.debug) console.log(key) - base.tube(key) + base.tube(key, e) break; } }) @@ -158,8 +158,8 @@ var keys = (function(){ 'backslash' : '220', 'closebracket' : '221', 'single_quote' : '222' - } - var KEY_NAMES = invert_hash(KEYCODES) + }, + KEY_NAMES = invert_hash(KEYCODES) return base })() \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/util/permissions.js b/public/assets/javascripts/rectangles/util/permissions.js index 394b7d6..1b5a1b5 100644 --- a/public/assets/javascripts/rectangles/util/permissions.js +++ b/public/assets/javascripts/rectangles/util/permissions.js @@ -26,14 +26,12 @@ Permissions.prototype.assign = function (key, state) { Permissions.prototype.add = function (key) { var base = this - base[op] = true - return state + base[key] = true } Permissions.prototype.remove = function (key) { var base = this - base[op] = true - return state + base[key] = true } Permissions.prototype.clear = function () { @@ -42,3 +40,10 @@ Permissions.prototype.clear = function () { base[op] = false }) } + +Permissions.prototype.log = function () { + var base = this + base.keys.forEach(function(op){ + console.log(op, base[op]) + }) +} \ No newline at end of file diff --git a/public/assets/javascripts/ui/builder/BuilderToolbar.js b/public/assets/javascripts/ui/builder/BuilderToolbar.js index 239b05e..2eb7590 100644 --- a/public/assets/javascripts/ui/builder/BuilderToolbar.js +++ b/public/assets/javascripts/ui/builder/BuilderToolbar.js @@ -14,7 +14,14 @@ var BuilderToolbar = View.extend({ initialize: function(opt){ this.parent = opt.parent - map.ui.permissions.toggle() + this.resetPermissions() + }, + + resetPermissions: function(){ + map.ui.permissions.clear() + map.ui.permissions.add("create") + map.ui.permissions.add("move") + map.ui.permissions.add("resize") }, toggleMap: function(){ diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index a1f51ef..b63d1bf 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -28,6 +28,7 @@ + @@ -44,6 +45,7 @@ + -- cgit v1.2.3-70-g09d2 From a279338f4dff62d87021ca28252d68b0c586d3a7 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Wed, 13 Aug 2014 02:12:40 -0400 Subject: add measurement stuff to media editor --- .../javascripts/mx/extensions/mx.movements.js | 4 +- .../rectangles/engine/scenery/types/_object.js | 4 ++ .../javascripts/rectangles/util/measurement.js | 82 +++++++++++++++++++++ .../assets/javascripts/ui/builder/BuilderInfo.js | 83 ---------------------- public/assets/javascripts/ui/editor/MediaEditor.js | 34 +++++++-- public/assets/stylesheets/app.css | 7 ++ test/09-test-undo.js | 1 + views/controls/editor/media-editor.ejs | 20 ++++-- views/partials/scripts.ejs | 1 + 9 files changed, 138 insertions(+), 98 deletions(-) create mode 100644 public/assets/javascripts/rectangles/util/measurement.js (limited to 'public/assets/javascripts/ui/builder') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 191088f..3b7d3e2 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -149,7 +149,8 @@ MX.Movements = function (cam) { case 32: // space moveUp = moveDown = false break - + +/* case 48: // 0 cam.rotationX = 0 cam.rotationY = 0 @@ -157,6 +158,7 @@ MX.Movements = function (cam) { cam.y = viewHeight cam.z = 0 break +*/ } }) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index 7202ce0..66e0faf 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -66,6 +66,10 @@ Scenery.types.base = Fiber.extend(function(base){ this.center = this.wall.center() }, + set_scale: function(scale){ + this.scale = this.mx.scale = this.mx.ops.scale = scale || 1.0 + }, + recenter: function(){ this.mx.move({ x: this.center.a, diff --git a/public/assets/javascripts/rectangles/util/measurement.js b/public/assets/javascripts/rectangles/util/measurement.js new file mode 100644 index 0000000..d6a0b35 --- /dev/null +++ b/public/assets/javascripts/rectangles/util/measurement.js @@ -0,0 +1,82 @@ +$.fn.resetUnitVal = function(){ + this.each(function(){ + var n = $(this).data("px") + $(this).unitVal(n) + }); +} + +$.fn.unitVal = function(n){ + var s + if (typeof n === "undefined") { + s = $(this).val() + n = stringToMeasurement( s ) + if (! n || isNaN(n)) { + n = $(this).data("px") + } + } + s = measurementToString( n ) + $(this).val( s ).data("px", n) + return n +} + +function measurementToString( n ) { + var s, ft, inch + switch (app.units) { + case 'm': + s = round(n/36 * 0.3048 * 100) / 100 + " m" + break + case 'ft': + ft = floor(n / 36) + inch = abs(round((n % 36) / 3)) + s = ft + "'" + if (inch > 0) { + s += " " + inch + '"' + } + break + case 'px': + default: + s = round(n) + " px" + break + } + return s +} +function stringToMeasurement( s ) { + var ft, inch, ft_in, type + if (! s.match(/[0-9]/)) { + return NaN + } + if (s.indexOf("'") !== -1 || s.indexOf('"') !== -1 || s.indexOf('ft') !== -1) { + ft_in = s.match(/[0-9.]+/g) + if (ft_in.length >= 2) { + ft = parseFloat( ft_in[0] ) + inch = parseFloat( ft_in[1] ) + } + else if (ft_in.length == 1) { + if (s.indexOf('"') !== -1) { + ft = 0 + inch = parseFloat( ft_in[0] ) + } + else { + ft = parseFloat( ft_in[0] ) + inch = 0 + } + } + else { + ft = inch = 0 + } + n = ft * 36 + inch * 3 + } + else if (s.indexOf("m") !== -1) { + n = parseFloat(s.match(/[0-9.]+/)) * 36 / 0.3048 + } + else if (s.indexOf("px") !== -1) { + n = parseFloat(s.match(/[0-9.]+/)) + } + else { + n = abs( stringToMeasurement( s + app.units ) ) + } + if (s.indexOf('-') !== -1) { + n *= -1 + } + return n +} diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index 56f1338..2fffdba 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -96,86 +96,3 @@ var BuilderInfo = View.extend({ }, }) - -$.fn.resetUnitVal = function(){ - this.each(function(){ - var n = $(this).data("px") - $(this).unitVal(n) - }); -} - -$.fn.unitVal = function(n){ - var s - if (typeof n === "undefined") { - s = $(this).val() - n = stringToMeasurement( s ) - if (! n || isNaN(n)) { - n = $(this).data("px") - } - } - s = measurementToString( n ) - $(this).val( s ).data("px", n) - return n -} - -function measurementToString( n ) { - var s, ft, inch - switch (app.units) { - case 'm': - s = round(n/36 * 0.3048 * 100) / 100 + " m" - break - case 'ft': - ft = floor(n / 36) - inch = abs(round((n % 36) / 3)) - s = ft + "'" - if (inch > 0) { - s += " " + inch + '"' - } - break - case 'px': - default: - s = round(n) + " px" - break - } - return s -} -function stringToMeasurement( s ) { - var ft, inch, ft_in, type - if (! s.match(/[0-9]/)) { - return NaN - } - if (s.indexOf("'") !== -1 || s.indexOf('"') !== -1 || s.indexOf('ft') !== -1) { - ft_in = s.match(/[0-9.]+/g) - if (ft_in.length >= 2) { - ft = parseFloat( ft_in[0] ) - inch = parseFloat( ft_in[1] ) - } - else if (ft_in.length == 1) { - if (s.indexOf('"') !== -1) { - ft = 0 - inch = parseFloat( ft_in[0] ) - } - else { - ft = parseFloat( ft_in[0] ) - inch = 0 - } - } - else { - ft = inch = 0 - } - n = ft * 36 + inch * 3 - } - else if (s.indexOf("m") !== -1) { - n = parseFloat(s.match(/[0-9.]+/)) * 36 / 0.3048 - } - else if (s.indexOf("px") !== -1) { - n = parseFloat(s.match(/[0-9.]+/)) - } - else { - n = abs( stringToMeasurement( s + app.units ) ) - } - if (s.indexOf('-') !== -1) { - n *= -1 - } - return n -} \ No newline at end of file diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index cd8fb63..b9eb8fc 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -11,6 +11,9 @@ var MediaEditor = FormView.extend({ "change [name=autoplay]": "setAutoplay", "change [name=loop]": "setLoop", "change [name=mute]": "setMute", + "change [name=width]": 'changeWidth', + "change [name=height]": 'changeHeight', + "change [name=units]": 'changeUnits', "click [data-role=destroy-media]": "destroy", }, @@ -22,8 +25,8 @@ var MediaEditor = FormView.extend({ this.$description = this.$("[name=description]") // image fields - this.$widthDimension = this.$("[name=width]") - this.$heightDimension = this.$("[name=height]") + this.$width = this.$("[name=width]") + this.$height = this.$("[name=height]") this.$units = this.$("[name=units]") // video fields @@ -55,16 +58,14 @@ var MediaEditor = FormView.extend({ this.$name.val(media.title) this.$description.val(media.description) + this.setDimensions() + this.$units.val( "ft" ) switch (media.type) { case "image": this.$(".image").show() this.$(".video").hide() - - this.$widthDimension.val( Number(media.widthDimension) || "" ) - this.$heightDimension.val( Number(media.heightDimension) || "" ) - this.$units.val( media.units || "cm" ) - + break case "youtube": @@ -113,6 +114,25 @@ var MediaEditor = FormView.extend({ this.scenery.mute(checked) }, + setDimensions: function(){ + this.$width.unitVal( Number(this.scenery.dimensions.a * this.scenery.scale) || "" ) + this.$height.unitVal( Number(this.scenery.dimensions.b * this.scenery.scale) || "" ) + }, + changeWidth: function(e){ + e.stopPropagation() + this.scenery.set_scale( this.$width.unitVal() / this.scenery.dimensions.a ) + this.setDimensions() + }, + changeHeight: function(e){ + e.stopPropagation() + this.scenery.set_scale( this.$height.unitVal() / this.scenery.dimensions.b ) + this.setDimensions() + }, + changeUnits: function(){ + app.units = this.$units.val() + this.$('.units').resetUnitVal() + }, + bind: function(scenery){ this.scenery = scenery this.scenery.mx.bound = true diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 1863add..8508cf7 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1295,6 +1295,13 @@ input[type="range"]::-webkit-slider-thumb { top: 0px; } +#mediaEditor .setting.number label { + width: 40px; +} +#mediaEditor .setting.number [type=text] { + width: 140px; +} + .playButton,.muteButton { color: white; background: black; diff --git a/test/09-test-undo.js b/test/09-test-undo.js index 17998a9..f774c04 100644 --- a/test/09-test-undo.js +++ b/test/09-test-undo.js @@ -1,5 +1,6 @@ var assert = require("assert") var UndoStack = require("../public/assets/javascripts/rectangles/util/undo.js") +UndoStack.debug = false describe('undo', function(){ diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs index 5db1fb2..7f8f299 100644 --- a/views/controls/editor/media-editor.ejs +++ b/views/controls/editor/media-editor.ejs @@ -34,13 +34,19 @@ -
- Dimensions
- - - +
+
+ + +
+
+
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index b63d1bf..087c0d7 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -23,6 +23,7 @@ + -- cgit v1.2.3-70-g09d2