1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
var wallHeight = 180
var shapes = new ShapeList
var last_point = new vec2 (0,0)
var BlueprintEditor = View.extend(AnimatedView.prototype).extend({
regions: [],
initialize: function(opt){
this.parent = opt.parent
$(window).resize(this.resize.bind(this))
scene = new MX.Scene().addTo("#perspective")
scene.camera.radius = 20
cam = scene.camera
scene.width = window.innerWidth/2
scene.height = window.innerHeight
scene.perspective = window.innerHeight
movements = new MX.Movements(cam, viewHeight)
movements.init()
movements.lock()
app.on("move", function(pos){
cam.x = pos.x
cam.y = pos.y
cam.z = pos.z
})
var floorplan = this.floorplan = new MX.Image({
backface: true,
})
scene.add(this.floorplan)
// recenter perspective view by rightclicking map
this.floorplan.el.addEventListener("contextmenu", function(e){
e.preventDefault()
var offset = offsetFromPoint(e, this)
var x = (offset.left - 0.5) * floorplan.width * floorplan.scale
var z = (offset.top - 0.5) * floorplan.height * floorplan.scale
controls.opt.center.x = -x
controls.opt.center.y = 0
controls.opt.center.z = z
}, true)
scene.update()
controls = new MX.OrbitCamera({
el: scene.el,
radius: 3000,
radiusRange: [ 10, 10000 ],
rotationX: PI/4,
rotationY: PI/2,
})
controls.init()
},
resize: function(){
if (this.parent.orbiting) {
scene.width = window.innerWidth/2
scene.height = window.innerHeight
this.parent.map.resize( window.innerWidth/2, window.innerHeight )
this.parent.map.canvas.style.display = "block"
}
else {
scene.width = window.innerWidth
scene.height = window.innerHeight
this.parent.map.canvas.style.display = "none"
}
},
loadFloorplan: function(media){
// console.log(media)
this.floorplan.load({
media: media,
keepImage: true,
rotationX: -PI/2,
rotationY: PI,
scale: media.scale,
})
this.startAnimating()
this.regions = RegionList.build()
},
animate: function(t, dt){
map.update(t)
movements.update(dt)
controls.update()
scene.update()
map.draw.ctx.save()
map.draw.translate()
this.floorplan.draw(map.draw.ctx, true)
map.draw.coords()
if (shapes.workline) {
shapes.workline.draw(map.draw.ctx)
if (map.ui.placing && last_point) {
shapes.workline.draw_line( map.draw.ctx, last_point )
}
}
shapes.draw(map.draw.ctx, "rgba(255,255,0,0.1)", "#f80")
map.draw.ctx.strokeStyle = "#f00";
map.draw.x_at(0,0)
map.draw.mouse(map.ui.mouse.cursor)
map.draw.camera(scene.camera)
// var colors = ["rgba(0,0,0,0.1)"]
// var colors = ["rgba(255,255,255,1)"]
//
// map.draw.regions(this.regions, colors, "#000")
// this.regions.forEach(function(room,i){
// map.draw.ctx.fillStyle = colors[i % colors.length]
// map.draw.ctx.fillRect( room.x.a, room.y.a, room.width(), room.height() )
// })
map.draw.ctx.restore()
},
})
|
