summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--public/assets/img/destroy-cursor.pngbin0 -> 1082 bytes
-rw-r--r--public/assets/javascripts/mx/primitives/mx.image.js1
-rw-r--r--public/assets/javascripts/mx/primitives/mx.video.js1
-rw-r--r--public/assets/javascripts/mx/primitives/mx.vimeo.js1
-rw-r--r--public/assets/javascripts/mx/primitives/mx.youtube.js1
-rw-r--r--public/assets/javascripts/rectangles/engine/map/draw.js4
-rw-r--r--public/assets/javascripts/rectangles/engine/map/ui_editor.js46
-rw-r--r--public/assets/javascripts/rectangles/util/constants.js6
-rw-r--r--public/assets/javascripts/rectangles/util/permissions.js12
-rw-r--r--public/assets/javascripts/ui/builder/BuilderToolbar.js12
-rwxr-xr-xpublic/assets/stylesheets/app.css40
-rw-r--r--views/controls/builder/toolbar.ejs2
12 files changed, 107 insertions, 19 deletions
diff --git a/public/assets/img/destroy-cursor.png b/public/assets/img/destroy-cursor.png
new file mode 100644
index 0000000..eebe3cd
--- /dev/null
+++ b/public/assets/img/destroy-cursor.png
Binary files differ
diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js
index 278fa1e..a640620 100644
--- a/public/assets/javascripts/mx/primitives/mx.image.js
+++ b/public/assets/javascripts/mx/primitives/mx.image.js
@@ -14,6 +14,7 @@ MX.Image = MX.Object3D.extend({
ops.className && this.el.classList.add(ops.className)
this.backface && this.el.classList.add("backface-visible")
this.el.classList.add("image")
+ this.el.classList.add("mx-scenery")
this.el.style.backgroundRepeat = 'no-repeat'
diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js
index cdb92c8..7c0cd33 100644
--- a/public/assets/javascripts/mx/primitives/mx.video.js
+++ b/public/assets/javascripts/mx/primitives/mx.video.js
@@ -19,6 +19,7 @@ MX.Video = MX.Object3D.extend({
ops.className && this.el.classList.add(ops.className)
this.backface && this.el.classList.add("backface-visible")
this.el.classList.add("video")
+ this.el.classList.add("mx-scenery")
this.paused = !! this.media.autoplay
this.muted = app.muted || !! this.media.mute
diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js
index 64d9103..5b22821 100644
--- a/public/assets/javascripts/mx/primitives/mx.vimeo.js
+++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js
@@ -19,6 +19,7 @@ MX.Vimeo = MX.Object3D.extend({
ops.className && this.el.classList.add(ops.className)
this.backface && this.el.classList.add("backface-visible")
this.el.classList.add("video")
+ this.el.classList.add("mx-scenery")
this.paused = !! this.media.autoplay
this.muted = app.muted || !! this.media.mute
this.started = false
diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index f7f00aa..7846649 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -19,6 +19,7 @@ MX.Youtube = MX.Object3D.extend({
ops.className && this.el.classList.add(ops.className)
this.backface && this.el.classList.add("backface-visible")
this.el.classList.add("video")
+ this.el.classList.add("mx-scenery")
this.paused = !! this.media.autoplay
this.muted = app.muted || !! this.media.mute
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index 8e1fe5a..3e185d2 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -29,7 +29,7 @@ Map.Draw = function(map, opt){
ctx.translate( map.center.a, map.center.b )
ctx.scale( -1, 1 )
- draw.regions(Rooms.regions, colors)
+ draw.regions(Rooms.regions, [ "#f8f8f8" ])
draw.mouse(map.ui.mouse.cursor)
draw.coords()
scene && draw.camera(scene.camera)
@@ -55,7 +55,7 @@ Map.Draw = function(map, opt){
}
draw.clear = function(){
- ctx.fillStyle = "rgba(255,255,255,0.9)"
+ ctx.fillStyle = "rgba(255,255,255,0.98)"
ctx.clearRect(0, 0, map.dimensions.a, map.dimensions.b)
ctx.fillRect(0, 0, map.dimensions.a, map.dimensions.b)
}
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
index 577ea32..016a8ad 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
@@ -56,18 +56,15 @@ Map.UI.Editor = function(map){
app.tube("builder-destroy-room", intersects[0])
return
}
- else if (intersects.length && (base.permissions.move || base.permissions.resize)) {
+ else if (intersects.length) {
base.dragging = intersects[0]
- base.resizing = base.permissions.resize && base.dragging.rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom)
+ base.resizing = base.dragging.rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom)
base.dragging.rect.translation.sides = base.resizing
app.tube("builder-pick-room", intersects[0])
}
else if (base.permissions.create) {
base.creating = true
}
- else if (intersects.length) {
- app.tube("builder-pick-room", intersects[0])
- }
if (e.shiftKey && base.dragging) {
base.dragging.rect.quantize(10/map.zoom)
@@ -77,6 +74,45 @@ Map.UI.Editor = function(map){
function move (e, cursor) {
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)
+
+ var intersects = Rooms.filter(function(r){
+ return r.rect.contains(cursor.x.a, cursor.y.a)
+ })
+
+ if (base.permissions.destroy) {
+ map.el.className = "destroy"
+ }
+ else if (intersects.length) {
+ var edges = intersects[0].rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom)
+ switch (edges) {
+ case FRONT_LEFT:
+ case BACK_RIGHT:
+ map.el.className = "nesw-resize"
+ break
+
+ case FRONT_RIGHT:
+ case BACK_LEFT:
+ map.el.className = "nwse-resize"
+ break
+
+ case FRONT:
+ case BACK:
+ map.el.className = "ns-resize"
+ break
+
+ case LEFT:
+ case RIGHT:
+ map.el.className = "ew-resize"
+ break
+
+ default:
+ map.el.className = "move"
+ break
+ }
+ }
+ else {
+ map.el.className = ""
+ }
}
function drag (e, cursor) {
diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js
index 58cb1a5..b9485ca 100644
--- a/public/assets/javascripts/rectangles/util/constants.js
+++ b/public/assets/javascripts/rectangles/util/constants.js
@@ -8,6 +8,12 @@ var TOP = CEILING, BOTTOM = FLOOR,
BOTTOM_RIGHT = BOTTOM | RIGHT,
TOP_BOTTOM = TOP | BOTTOM
+var FRONT_LEFT = FRONT | LEFT,
+ FRONT_RIGHT = FRONT | RIGHT,
+ BACK_LEFT = BACK | LEFT,
+ BACK_RIGHT = BACK | RIGHT
+
+
var height_min = 200,
height_max = 2000,
side_min = 10,
diff --git a/public/assets/javascripts/rectangles/util/permissions.js b/public/assets/javascripts/rectangles/util/permissions.js
index adb2498..394b7d6 100644
--- a/public/assets/javascripts/rectangles/util/permissions.js
+++ b/public/assets/javascripts/rectangles/util/permissions.js
@@ -24,6 +24,18 @@ Permissions.prototype.assign = function (key, state) {
return state
}
+Permissions.prototype.add = function (key) {
+ var base = this
+ base[op] = true
+ return state
+}
+
+Permissions.prototype.remove = function (key) {
+ var base = this
+ base[op] = true
+ return state
+}
+
Permissions.prototype.clear = function () {
var base = this
base.keys.forEach(function(op){
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")
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index a5b1733..1863add 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -526,20 +526,25 @@ iframe.embed {
position:fixed;
top:0;
left:0;
- cursor: -webkit-grab;
- cursor: -moz-grab;
z-index: 1;
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
- cursor:pointer;
+ cursor: -webkit-grab;
+ cursor: -moz-grab;
}
.mx-scene:active{
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
}
+.mx-scenery {
+ cursor: pointer;
+}
+.mx-scenery:active {
+ cursor: pointer;
+}
.mx-object3d.image,
.mx-object3d.video,
.mx-object3d iframe,
@@ -573,6 +578,28 @@ iframe.embed {
z-index: 10;
}
+#map {
+ cursor: crosshair;
+}
+#map.move {
+ cursor: move;
+}
+#map.ew-resize {
+ cursor: ew-resize;
+}
+#map.ns-resize {
+ cursor: ns-resize;
+}
+#map.nesw-resize {
+ cursor: nesw-resize;
+}
+#map.nwse-resize {
+ cursor: nwse-resize;
+}
+#map.destroy {
+ cursor: url(/assets/img/destroy-cursor.png) 12 12, auto;
+}
+
.face {
background-color: #fff;
transition: 0.1s background-color ease;
@@ -581,11 +608,10 @@ iframe.embed {
.back { background-color: #fff; }
.left { background-color: #fff; }
.right { background-color: #fff; }
-.floor { background-color: #eee; }
-.ceiling { background-color: rgba(230,230,255,0.3); }
+.floor { background-color: #f8f8f8; }
+.ceiling { background-color: rgba(255,525,255,0.3); }
-.active.floor { background-color: #ffe; }
-.active.ceiling { background-color: rgba(230,230,255,0.3); }
+.active.floor { background-color: #f8f8f8; }
.dragging .mx-object3d.image {
pointer-events: none;
diff --git a/views/controls/builder/toolbar.ejs b/views/controls/builder/toolbar.ejs
index 98aee1e..a00249c 100644
--- a/views/controls/builder/toolbar.ejs
+++ b/views/controls/builder/toolbar.ejs
@@ -3,6 +3,7 @@
data-role='toggle-map-view'
data-info="toggle map view"
class="icon-ios7-photos-outline"></span>
+<!--
<span
data-role='create-mode'
data-info="draw"
@@ -15,6 +16,7 @@
data-role='resize-mode'
data-info="resize"
class="icon-arrow-resize"></span>
+-->
<span
data-role='destroy-mode'
data-info="delete"
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 13:01:12 +0000