-
Notifications
You must be signed in to change notification settings - Fork 51
/
stage.module.coffee
121 lines (91 loc) · 2.67 KB
/
stage.module.coffee
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
Rectangle = require('./elements/rectangle')
Selection = require('./selection')
class Stage extends Spine.Controller
className: 'stage'
events:
'select': 'select'
'mousedown.deselect': 'deselect'
'mousedown .selected': 'dragListen'
'mousedown.selectarea': 'selectAreaListen'
'resize.start': 'resizeStart'
'resize.end': 'resizeEnd'
constructor: ->
super
@selection = new Selection
@elements = []
# FIXME: Test data
@rectangle1 = new Rectangle(background: 'url(assets/whitey.png)', boxShadow: '0 1px 3px rgba(0,0,0,0.4)')
@rectangle2 = new Rectangle(left: '200px', top: '200px', background: 'url(assets/blacky.png)')
@add(@rectangle1)
@add(@rectangle2)
add: (element) =>
@elements.push(element)
@append(element)
# Dragging elements
dragListen: (e) =>
e.preventDefault()
e.stopPropagation()
@dragPosition = {left: e.pageX, top: e.pageY}
$(@el).mousemove(@drag)
$(@el).mouseup(@drop)
# TODO: Snapping:
# - Middle of x axis
# - Middle of y axis
# - Middle of element x axis
# - Middle of element y axis
# - Same distance from two elements
# - Element edge?
drag: (e) =>
difference =
left: e.pageX - @dragPosition.left
top: e.pageY - @dragPosition.top
@selection.set('translate', difference)
drop: (e) =>
@selection.set('fix')
$(@el).unbind('mousemove', @drag)
$(@el).unbind('mouseup', @drop)
# Selecting elements
select: (e, element, modifier) =>
# Clear selection unless multiple items are
# selected, or the shift key is pressed
if !@selection.isMultiple() and !modifier
@selection.clear()
@selection.add(element)
deselect: (e) =>
if (e.target is e.currentTarget)
@selection.clear()
# Select area
selectAreaListen: (e) =>
e.preventDefault()
e.stopPropagation()
# Mouse events need to be offset
# by the height of the header
@offset = @el.offset()
@$selectArea = new Selection.Area(
e.clientX - @offset.left,
e.clientY - @offset.top
)
@append(@$selectArea)
$(@el).mousemove(@selectArea)
$(@el).mouseup(@selectAreaRemove)
selectArea: (e) =>
@$selectArea.resize(
e.clientX - @offset.left,
e.clientY - @offset.top
)
area = @$selectArea.area()
for element in @elements
if element.inArea(area)
@selection.add(element)
else
@selection.remove(element)
selectAreaRemove: (e) =>
@$selectArea.remove()
$(@el).unbind('mousemove', @selectArea)
$(@el).unbind('mouseup', @selectAreaRemove)
# Resizing
resizeStart: ->
@$('.thumb').hide()
resizeEnd: ->
@$('.thumb').show()
module.exports = Stage