diff options
Diffstat (limited to 'public/assets/javascripts/rectangles')
13 files changed, 431 insertions, 365 deletions
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index 29dee41..5ed7be8 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -35,7 +35,6 @@ var base = this base.list = {} - base.walls = {} base.regions = [] base.uid = new UidGenerator(base.list) @@ -110,14 +109,6 @@ Rooms.clipper.update() } - base.serializeWalls = function(){ - return [] - } - - base.deserializeWalls = function(walls_data){ - return [] - } - base.sorted_by_position = function(){ return sort.rooms_by_position( base.values() ) } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js new file mode 100644 index 0000000..f2f395b --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -0,0 +1,134 @@ +(function(){ + + var vec2, Rect, Room, sort, UidGenerator, _ + if ('window' in this) { + vec2 = window.vec2 + Rect = window.Rect + Room = window.Room + sort = window.sort + UidGenerator = window.UidGenerator + _ = window._ + } + else { + vec2 = require('../../models/vec2') + Rect = require('../../models/rect') + Room = require('../../models/room') + UidGenerator = require('../../util/uid') + sort = require('../../util/sort') + _ = require('lodash') + FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8, FLOOR = 0x10, CEILING = 0x20 + TOP = CEILING, BOTTOM = FLOOR + function sidesToString(sides){ + var s = "" + if (sides & FRONT) s += "front " + if (sides & BACK) s += "back " + if (sides & LEFT) s += "left " + if (sides & RIGHT) s += "right " + if (sides & TOP) s += "top " + if (sides & BOTTOM) s += "bottom " + return s + } + } + + var Walls = new function(){ + + var base = this + + base.list = [] + base.lookup = {} + base.colors = {} + + base.first = function(){ + for (var i in base.list) { + if (base.list.hasOwnProperty(i)) { + return base.list[i] + } + } + } + + base.assign = function(list){ + base.list = list + base.lookup = {} + list.forEach(function(wall){ + base.lookup[wall.id] = wall + }) + } + + base.bind = function(){ + base.list.forEach(function(wall){ + wall.bind() + }) + } + + base.count = function(){ + return this.list.length + } + + base.forEach = function(f){ + return base.list.forEach(f) + } + + base.map = function(f){ + return base.list.map(f) + } + + base.serialize = function(){ + var data = [] + base.list.forEach(function(wall){ + data.push(wall.serialize()) + }) + return data + } + + base.deserialize = function(walls_data){ + walls_data.forEach(function(wall_data){ + if (! wall_data) { return } + var wall = base.lookup[ wall_data.id ] + wall.deserialize( wall_data ) + }) + }, + + base.setColor = { + + wall: function(rgb){ + var rgbaColor = rgba_string(rgb, app.defaults.wallOpacity) + Walls.colors.wall = rgb + Walls.forEach(function(wall){ + wall.outline(rgbaColor, null) + }) + }, + + outline: function(rgb){ + var rgbColor = rgb_string(rgb) + Walls.colors.outline = rgb + Walls.forEach(function(wall){ + wall.outline(null, rgbColor) + }) + }, + + floor: function(rgb){ + var rgbColor = rgb_string(rgb) + Walls.colors.floor = rgb + Rooms.forEach(function(room){ + room.setFloorColor(rgbColor) + }) + }, + + ceiling: function(rgb){ + var rgbColor = rgb_string(rgb) + Walls.colors.ceiling = rgb + Rooms.forEach(function(room){ + room.setCeilingColor(rgbColor) + }) + }, + + } + } + + if ('window' in this) { + window.Walls = Walls + } + else { + module.exports = Walls + } +})() diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js index f321f71..f0935d4 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/builder.js +++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js @@ -165,7 +165,6 @@ room.mx_ceiling.push(el) } }.bind(this)) - } else { // render floor and ceiling for the entire rectangle @@ -282,8 +281,8 @@ el.side = CEILING return el } - this.make_wall = function (klass) { + // klass += ".backface-hidden" var el = new MX.Object3D(".face" + (klass || "")) el.width = el.height = el.scaleX = el.scaleY = el.scaleZ = 1 el.z = el.y = el.x = 0 @@ -293,7 +292,7 @@ el.side = 0 el.rect = null el.destroy = function(){ - this.el = this.rect = this.face = null + this.el = this.rect = this.face = null } // possible if walls are opaque diff --git a/public/assets/javascripts/rectangles/engine/rooms/grouper.js b/public/assets/javascripts/rectangles/engine/rooms/grouper.js index cde9fbb..ba510e1 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/grouper.js +++ b/public/assets/javascripts/rectangles/engine/rooms/grouper.js @@ -52,8 +52,8 @@ base.group(walls, collections, BACK) base.group(walls, collections, LEFT) base.group(walls, collections, RIGHT) - Rooms.walls = walls - base.bind() + Walls.assign( walls ) + Walls.bind() } base.collect = function(){ var collections = {} @@ -83,7 +83,10 @@ collection.sort( useX ? sort.compare_zx : sort.compare_xz ) collection.forEach(function(mx){ - if (last_mx && last_mx.rect.eq(mx.rect)) { + if (mx.culled) { + return + } + if (last_mx && mx && last_mx.rect.eq(mx.rect)) { // culls half-walls if (last_mx.rect.id == mx.rect.id) { last_mx.height += mx.height/2 @@ -91,9 +94,11 @@ last_mx.face.y.b += mx.height/2 } last_mx.side = side - mx.culled = true - mx.destroy() - scene.remove(mx) + if (! mx.culled) { + scene.remove(mx) + mx.destroy() + mx.culled = true + } return } widthVec = mx.rect[useX ? 'x' : 'y'].clone() @@ -142,7 +147,6 @@ } } wall = new Wall ({ - id: base.uid(), side: side, mx: [ mx ], surface: new Surface( mx.face ), @@ -155,13 +159,6 @@ return walls } - - base.bind = function(){ - Rooms.walls.forEach(function(wall){ - wall.bind() - wall.randomize_colors() - }) - } } diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 2fd6122..4cf5b06 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -84,7 +84,7 @@ var Scenery = new function(){ base.deserialize = function(scenery_data){ scenery_data.forEach(function(data){ - var wall = Rooms.walls[data.wall_id] || Rooms.walls[0] + var wall = Walls.list[data.wall_id] || Walls.first() var scene_media = base.add({ data: data, wall: wall, diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index d9cce18..e26c0a7 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -109,6 +109,7 @@ Scenery.resize = new function(){ } base.hide = function () { + if (! obj) return obj = null dots.forEach(function(dot){ scene.remove(dot) @@ -175,7 +176,8 @@ Scenery.resize = new function(){ mag = y_sign * mag * sign(height) } - obj.mx.scale = ( dimension.a + mag ) / naturalDimension.a // dimension.a // scale * (old_width + mag) / old_width + obj.set_scale( ( dimension.a + mag ) / naturalDimension.a ) + // dimension.a // scale * (old_width + mag) / old_width // console.log(scale, obj.mx.scale, dimension.a + mag, naturalDimension.a) @@ -188,6 +190,8 @@ Scenery.resize = new function(){ } base.move_dots() + + app.router.editorView.mediaEditor.setDimensions() } function up (e, cursor){ diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index 54ab755..e5624a0 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -1,7 +1,7 @@ (function(){ - UndoStack.register([ - { - type: "create-scenery", + UndoStack.register([ + { + type: "create-scenery", undo: function(state){ Scenery.remove(state.id) @@ -14,13 +14,13 @@ // TODO: watch individual scenery object here Minotaur.watch( app.router.editorView.settings ) }, - }, - { - type: "update-scenery", + }, + { + type: "update-scenery", undo: function(state){ var scenery = Scenery.find(state.id) scenery.deserialize(state) - scenery.set_wall(Rooms.walls[ state.wall_id ]) + scenery.set_wall(Walls.find( state.wall_id )) if (editor.permissions.resize) { Scenery.resize.show(scenery) @@ -32,7 +32,7 @@ redo: function(state){ var scenery = Scenery.find(state.id) scenery.deserialize(state) - scenery.set_wall(Rooms.walls[ state.wall_id ]) + scenery.set_wall(Walls.find( state.wall_id )) if (editor.permissions.resize) { Scenery.resize.show(scenery) @@ -43,9 +43,9 @@ // TODO: watch individual scenery object here Minotaur.watch( app.router.editorView.settings ) }, - }, - { - type: "destroy-scenery", + }, + { + type: "destroy-scenery", undo: function(state){ Scenery.deserialize([ state ]) @@ -58,12 +58,12 @@ // TODO: watch individual scenery object here Minotaur.watch( app.router.editorView.settings ) }, - }, - - // - - { - type: "create-room", + }, + + // + + { + type: "create-room", undo: function(room){ Rooms.remove(room) Rooms.clipper.update() @@ -71,48 +71,59 @@ redo: function(room){ Rooms.add(new Room(room)) Rooms.clipper.update() - app.tube("builder-pick-room", room) + app.tube("builder-pick-room", room) }, - }, - { - type: "update-room", + }, + { + 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) + 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) + app.tube("builder-pick-room", room) }, - }, - { - type: "destroy-room", + }, + { + type: "destroy-room", undo: function(room){ Rooms.add(new Room(room)) Rooms.clipper.update() - app.tube("builder-pick-room", room) + app.tube("builder-pick-room", room) }, redo: function(room){ Rooms.remove(room) Rooms.clipper.update() }, - }, - - // + }, + + // - { - type: "update-wallpaper", + { + type: "update-wallpaper", undo: function(state){ + var wall = Walls.lookup[state.id] + wall.deserialize(state) + + Minotaur.watch( app.router.editorView.settings ) }, - redo: function(state){ + }, + { + type: "update-colors", + undo: function(state){ + Walls.setColor[ state.mode ]( state.rgb ) + app.router.editorView.lightControl.setSwatchColor( state.mode, state.rgb ) + + Minotaur.watch( app.router.editorView.settings ) }, - }, - - ]) + }, + + ]) })() diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js index 33a94d0..0f09325 100644 --- a/public/assets/javascripts/rectangles/models/room.js +++ b/public/assets/javascripts/rectangles/models/room.js @@ -32,9 +32,6 @@ this.id = opt.id || Rooms.uid("room_") this.rect = opt.rect this.regions = [] - this.walls = [] - this.floor = [] - this.ceiling = [] this.height = opt.height || 200 this.focused = false @@ -69,30 +66,10 @@ this.intersects = [] this.constructed = false - this.walls = [] - this.mx_walls = [] this.mx_floor = [] this.mx_ceiling = [] } - - Room.prototype.bind = function(){ - var base = this - base.mx_walls.forEach(function(wall){ - $(wall.el).bind({ - mouseover: function(){ - }, - mousemove: function(e){ - var color = choice(window.palettes.colors) - base.mx_walls.forEach(function(wall){ - $(wall.el).css("background-color", color) - }) - }, - mousedown: function(){ - } - }) - }) - } Room.prototype.clipTo = function(r){ // for each of this rect's regions split the region if necessary @@ -182,6 +159,18 @@ return collision } + Room.prototype.setFloorColor = function(rgbColor) { + this.mx_floor.map(function(mx){ + mx.el.style.backgroundColor = rgbColor + }) + } + + Room.prototype.setCeilingColor = function(rgbColor) { + this.mx_ceiling.map(function(mx){ + mx.el.style.backgroundColor = rgbColor + }) + } + if ('window' in this) { window.Room = Room } diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 8723c3c..6043181 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -13,12 +13,13 @@ } var Wall = function(opt){ - this.id = opt.id + this.id = [ opt.side, opt.edge, opt.vec.a ].join("_") this.vec = opt.vec this.edge = opt.edge this.side = opt.side this.surface = opt.surface this.mx = opt.mx + this.background = "" } Wall.prototype.toString = function(){ @@ -63,26 +64,49 @@ e.stopPropagation() return } - + UndoStack.push({ type: 'create-scenery', undo: { id: scenery.id }, redo: scenery.serialize(), }) - - // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) } else if (Scenery.nextWallpaper) { - base.wallpaper() - } + var oldState = base.serialize() + base.wallpaper(Scenery.nextWallpaper) + Scenery.nextWallpaper = null + + UndoStack.push({ + type: 'update-wallpaper', + undo: oldState, + redo: base.serialize(), + }) + } else { app.controller.hideExtras() } } }) }) - this.outline() + + // flip the mx order + var shouldFlip = this.side & (LEFT | BACK) + if (! shouldFlip) { + this.mx.reverse() + } + + // this.outline(wallColor, outlineColor) + } + + Wall.prototype.serialize = function(){ + return { + id: this.id, + background: this.background, + } + } + + Wall.prototype.deserialize = function(data){ + this.wallpaper( data.background ) } @@ -140,143 +164,63 @@ position.a -= dimension.a / 2 position.b -= dimension.b / 2 } -// if (mx.width) { position.a -= mx.width / 2 } -// if (mx.height) { position.b -= mx.height / 2 } return position } - Wall.prototype.bounds_for = function(img, scale) { - scale = scale || 1 - var coord = this.side & FRONT_BACK ? this.rect.x : this.rect.y - var halfWidth = img.width/2 * scale - var halfHeight = img.height/2 * scale - - return new Rect( new vec2( coord.a + halfWidth, coord.b - halfWidth ), - new vec2( halfHeight, Rooms.list[this.room].height - halfHeight ) ) - } - - Wall.prototype.fits = function(img, scale){ - if (this.side & FRONT_BACK && this.rect.x.length() < img.width * scale) { - return false - } - if (this.side & LEFT_RIGHT && this.rect.y.length() < img.width * scale) { - return false - } - return true - } - - Wall.prototype.center = function(offset){ - - switch (this.side) { - case FRONT: - x = this.vec.midpoint() - z = this.edge + painting_distance_from_wall - break - case BACK: - x = this.vec.midpoint() - z = this.edge - painting_distance_from_wall - break - case LEFT: - x = this.edge + painting_distance_from_wall - z = this.vec.midpoint() - break - case RIGHT: - x = this.edge - painting_distance_from_wall - z = this.vec.midpoint() - break - } - - return new vec2 (x, z) - } - Wall.prototype.color = function(color){ - this.$walls && this.$walls.css("background-color", color) + this.$walls.css("background-color", color) } - Wall.prototype.wallpaper = function(){ + Wall.prototype.wallpaper = function(background){ var useX = this.side & FRONT_BACK var shouldFlip = this.side & (LEFT | BACK) + + this.background = background || "none" + this.mx.forEach(function(mx){ var partitionOffset = useX ? mx.x : mx.z if (shouldFlip) partitionOffset *= -1 partitionOffset += mx.width/2 var floorOffset = mx.y + mx.height/2 - mx.el.style.backgroundImage = Scenery.nextWallpaper + mx.el.style.backgroundImage = background mx.el.style.backgroundPosition = (~~partitionOffset) + "px " + (~~floorOffset) + "px" }) } - Wall.prototype.outline = function(){ + Wall.prototype.outline = function(wallColor, outlineColor){ var useX = this.side & FRONT_BACK - var shouldFlip = this.side & (LEFT | BACK) var mx = this.mx - if (! shouldFlip) { - mx = mx.reverse() - } - var len = this.mx.length - - var backgroundColor = "rgba(255,255,255,0.95)" - var borderColor = "rgba(0,0,0,1.0)" - - zz = window.zz || 0 + var outlineString = app.defaults.outlineWidth + "px solid " + outlineColor + zz = 0 mx.forEach(function(mx, i){ - if (mx.outlined) return - mx.outlined = true - mx.el.style.backgroundColor = backgroundColor - - // all walls get bottom lines - mx.el.style.borderBottom = "1px solid " + borderColor - - // all walls get top lines - mx.el.style.borderTop = "1px solid " + borderColor - - // walls on initial sides get left lines - // if their left edge lines up with the rect edge - if (i == 0) { - mx.el.style.borderLeft = "1px solid " + borderColor - } - - // walls on terminal sides get right lines.... - // if their right edge lines up with the rect edge - if (i == len-1) { - mx.el.style.borderRight = "1px solid " + borderColor - } - }) - } - - Wall.prototype.siblings = function(){ - return this -// var base = this -// var match = base.side | base.half_side -// var walls = Rooms.list[this.room].walls.filter(function(w){ -// return (w.side | w.half_side) & match && w.$walls -// }) -// return walls - } - - Wall.prototype.randomize_colors = function(){ - var color = window.grayColors[ this.side | this.half_side ] - // this.color(color) - } - - Wall.prototype.stroke_colors = function(){ - var color = "#fff" - var siblings = this.siblings() - siblings.forEach(function(w, i){ - if (! w.$walls) return - w.color(color) - if (i == 0) { - w.$walls.css("border-left", "1px solid #000") - } - if (i == siblings.length-1) { - w.$walls.css("border-right", "1px solid #000") - } - w.$walls.css("border-top", "1px solid #000") - w.$walls.css("border-bottom", "1px solid #000") + // if (mx.outlined) return + // mx.outlined = true + if (wallColor) { + mx.el.style.backgroundColor = wallColor + } + if (outlineColor) { + // all walls get bottom lines + mx.el.style.borderBottom = outlineString + + // all walls get top lines + mx.el.style.borderTop = outlineString + + // walls on initial sides get left lines + // if their left edge lines up with the rect edge + if (i == 0) { + mx.el.style.borderLeft = outlineString + } + + // walls on terminal sides get right lines.... + // if their right edge lines up with the rect edge + if (i == len-1) { + mx.el.style.borderRight = outlineString + } + } }) } diff --git a/public/assets/javascripts/rectangles/util/colors.js b/public/assets/javascripts/rectangles/util/colors.js index 16d34dd..4ad96fc 100644 --- a/public/assets/javascripts/rectangles/util/colors.js +++ b/public/assets/javascripts/rectangles/util/colors.js @@ -50,11 +50,6 @@ var select = document.querySelector("#palette") select && select.addEventListener("change", function(){ colors = color_palettes[select.value] - Rooms.forEach(function(room){ - room.walls.forEach(function(wall){ - wall.randomize_colors() - }) - }) select.blur() }) diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js index 039a053..e6a37e0 100644 --- a/public/assets/javascripts/rectangles/util/minotaur.js +++ b/public/assets/javascripts/rectangles/util/minotaur.js @@ -4,7 +4,7 @@ var base = this base.$el = $("#minotaur") base.timeout = null - base.delay = 500 + base.delay = 1000 base.objects = {} base.init = function () { diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js index 34d3f5e..cb36038 100644 --- a/public/assets/javascripts/rectangles/util/mouse.js +++ b/public/assets/javascripts/rectangles/util/mouse.js @@ -1,65 +1,66 @@ /* - usage: - - base.mouse = new mouse({ - el: document.querySelector("#map"), - down: function(e, cursor){ - // do something with val - // cursor.x.a - // cursor.y.a - }, - move: function(e, cursor){ - // delta.a (x) - // delta.b (y) - }, - up: function(e, cursor, new_cursor){ - // cursor.x.a - // cursor.y.a - }, - }) + usage: + + base.mouse = new mouse({ + el: document.querySelector("#map"), + down: function(e, cursor){ + // do something with val + // cursor.x.a + // cursor.y.a + }, + move: function(e, cursor){ + // var delta = cursor.delta() + // delta.a (x) + // delta.b (y) + }, + up: function(e, cursor, new_cursor){ + // cursor.x.a + // cursor.y.a + }, + }) */ function mouse (opt) { - var base = this + var base = this - opt = defaults(opt, { - el: null, - down: null, - move: null, - drag: null, - enter: null, - up: null, - rightclick: null, - propagate: false, - locked: false, - use_offset: true, - val: 0, - }) - - base.down = false + opt = defaults(opt, { + el: null, + down: null, + move: null, + drag: null, + enter: null, + up: null, + rightclick: null, + propagate: false, + locked: false, + use_offset: true, + val: 0, + }) + + base.down = false - base.creating = false - base.dragging = false + base.creating = false + base.dragging = false - base.cursor = new Rect(0,0,0,0) + base.cursor = new Rect(0,0,0,0) - base.tube = new Tube () - opt.down && base.tube.on("down", opt.down) - opt.move && base.tube.on("move", opt.move) - opt.drag && base.tube.on("drag", opt.drag) - opt.enter && base.tube.on("enter", opt.enter) - opt.leave && base.tube.on("leave", opt.leave) - opt.up && base.tube.on("up", opt.up) - opt.rightclick && base.tube.on("rightclick", opt.rightclick) - - var offset = (opt.use_offset && opt.el) ? opt.el.getBoundingClientRect() : null - - base.init = function (){ - base.bind() - } + base.tube = new Tube () + opt.down && base.tube.on("down", opt.down) + opt.move && base.tube.on("move", opt.move) + opt.drag && base.tube.on("drag", opt.drag) + opt.enter && base.tube.on("enter", opt.enter) + opt.leave && base.tube.on("leave", opt.leave) + opt.up && base.tube.on("up", opt.up) + opt.rightclick && base.tube.on("rightclick", opt.rightclick) + + var offset = (opt.use_offset && opt.el) ? opt.el.getBoundingClientRect() : null + + base.init = function (){ + base.bind() + } - base.on = function(){ + base.on = function(){ base.tube.on.apply(base.tube, arguments) } @@ -67,104 +68,104 @@ function mouse (opt) { base.tube.off.apply(base.tube, arguments) } - base.bind = function(){ - if (opt.el) { - opt.el.addEventListener("mousedown", base.mousedown) - opt.el.addEventListener("contextmenu", base.contextmenu) - } - window.addEventListener("mousemove", base.mousemove) - window.addEventListener("mouseup", base.mouseup) - } + base.bind = function(){ + if (opt.el) { + opt.el.addEventListener("mousedown", base.mousedown) + opt.el.addEventListener("contextmenu", base.contextmenu) + } + window.addEventListener("mousemove", base.mousemove) + window.addEventListener("mouseup", base.mouseup) + } - base.bind_el = function(el){ - el.addEventListener("mousedown", base.mousedown) - el.addEventListener("mousemove", base.mousemove) - } - base.unbind_el = function(el){ - el.removeEventListener("mousedown", base.mousedown) - el.removeEventListener("mousemove", base.mousemove) - } + base.bind_el = function(el){ + el.addEventListener("mousedown", base.mousedown) + el.addEventListener("mousemove", base.mousemove) + } + base.unbind_el = function(el){ + el.removeEventListener("mousedown", base.mousedown) + el.removeEventListener("mousemove", base.mousemove) + } - function positionFromMouse(e) { - if (offset) { - return new vec2(offset.left - e.pageX, e.pageY - offset.top) - } - else { - return new vec2(e.pageX, e.pageY) - } - } - - base.mousedown = function(e){ - if (opt.use_offset) { - offset = this.getBoundingClientRect() - } - - var pos = positionFromMouse(e) - - var x = pos.a, y = pos.b - base.cursor = new Rect (x,y, x,y) - base.down = true - e.clickAccepted = true - - base.tube("down", e, base.cursor) + function positionFromMouse(e) { + if (offset) { + return new vec2(offset.left - e.pageX, e.pageY - offset.top) + } + else { + return new vec2(e.pageX, e.pageY) + } + } + + base.mousedown = function(e){ + if (opt.use_offset) { + offset = this.getBoundingClientRect() + } + + var pos = positionFromMouse(e) + + var x = pos.a, y = pos.b + base.cursor = new Rect (x,y, x,y) + base.down = true + e.clickAccepted = true + + base.tube("down", e, base.cursor) - if (e.clickAccepted) { - e.stopPropagation() - } - else { - base.down = false - } - } - base.mousemove = function(e){ - if (opt.use_offset && ! offset) return - - var pos = positionFromMouse(e) + if (e.clickAccepted) { + e.stopPropagation() + } + else { + base.down = false + } + } + base.mousemove = function(e){ + if (opt.use_offset && ! offset) return + + var pos = positionFromMouse(e) - if (e.shiftKey) { - pos.quantize(10) - } + if (e.shiftKey) { + pos.quantize(10) + } - var x = pos.a, y = pos.b - - if (base.down) { - base.cursor.x.b = x - base.cursor.y.b = y - base.tube("drag", e, base.cursor) - e.stopPropagation() - } - else { - base.cursor.x.a = base.cursor.x.b = x - base.cursor.y.a = base.cursor.y.b = y - base.tube("move", e, base.cursor) - } - } - base.mouseenter = function(e, target, index){ - if (! base.down) return - if (opt.use_offset && ! offset) return - base.tube("enter", e, target, base.cursor) - } - base.mouseleave = function(e, target){ - if (! base.down) return - if (opt.use_offset && ! offset) return - base.tube("leave", e, target, base.cursor) - } - base.mouseup = function(e){ - var pos, new_cursor - - if (base.down) { - e.stopPropagation() - base.down = false - pos = positionFromMouse(e) - new_cursor = new Rect (pos.a, pos.b) - base.tube("up", e, base.cursor, new_cursor) - base.cursor = new_cursor - } - } - base.contextmenu = function(e){ - e.preventDefault() - base.tube("rightclick", e, base.cursor) - } + var x = pos.a, y = pos.b + + if (base.down) { + base.cursor.x.b = x + base.cursor.y.b = y + base.tube("drag", e, base.cursor) + e.stopPropagation() + } + else { + base.cursor.x.a = base.cursor.x.b = x + base.cursor.y.a = base.cursor.y.b = y + base.tube("move", e, base.cursor) + } + } + base.mouseenter = function(e, target, index){ + if (! base.down) return + if (opt.use_offset && ! offset) return + base.tube("enter", e, target, base.cursor) + } + base.mouseleave = function(e, target){ + if (! base.down) return + if (opt.use_offset && ! offset) return + base.tube("leave", e, target, base.cursor) + } + base.mouseup = function(e){ + var pos, new_cursor + + if (base.down) { + e.stopPropagation() + base.down = false + pos = positionFromMouse(e) + new_cursor = new Rect (pos.a, pos.b) + base.tube("up", e, base.cursor, new_cursor) + base.cursor = new_cursor + } + } + base.contextmenu = function(e){ + e.preventDefault() + base.tube("rightclick", e, base.cursor) + } - base.init() + base.init() } diff --git a/public/assets/javascripts/rectangles/util/undostack.js b/public/assets/javascripts/rectangles/util/undostack.js index b93c79e..959e3d1 100644 --- a/public/assets/javascripts/rectangles/util/undostack.js +++ b/public/assets/javascripts/rectangles/util/undostack.js @@ -31,16 +31,17 @@ this.types[ action.type ].redo(action.redo) return this.pointer < this.stack.length-1 } - UndoStack.prototype.register = function(actionType){ - if (actionType.length) { - actionType.forEach(this.registerOne.bind(this)) + UndoStack.prototype.register = function(actions){ + if (actions.length) { + actions.forEach(this.registerOne.bind(this)) } else { - this.registerOne(actionType) + this.registerOne(actions) } } - UndoStack.prototype.registerOne = function(actionType){ - this.types[ actionType.type ] = actionType + UndoStack.prototype.registerOne = function(action){ + if (! action.redo) { action.redo = action.undo } + this.types[ action.type ] = action } if ('window' in this) { window.UndoStack = new UndoStack |