2 var canvas_keyup_temp; |
2 var canvas_keyup_temp; |
3 var CANVAS_KEY_ESC = 27; |
3 var CANVAS_KEY_ESC = 27; |
4 |
4 |
5 function canvas_click(obj) |
5 function canvas_click(obj) |
6 { |
6 { |
7 var click_x = mouseX - $dynano(obj).Left(); |
7 var click_x = mouseX - $dynano(obj).Left(); |
8 var click_y = mouseY - $dynano(obj).Top() + getScrollOffset(); |
8 var click_y = mouseY - $dynano(obj).Top() + getScrollOffset(); |
9 |
9 |
10 if ( obj.canvas_in_draw ) |
10 if ( obj.canvas_in_draw ) |
11 { |
11 { |
12 canvas_close_draw(obj, click_x, click_y); |
12 canvas_close_draw(obj, click_x, click_y); |
13 } |
13 } |
14 else |
14 else |
15 { |
15 { |
16 canvas_open_draw(obj, click_x, click_y); |
16 canvas_open_draw(obj, click_x, click_y); |
17 } |
17 } |
18 } |
18 } |
19 |
19 |
20 function canvas_open_draw(obj, x, y) |
20 function canvas_open_draw(obj, x, y) |
21 { |
21 { |
22 obj.canvas_box_obj = canvas_create_box(obj, x, y, 1, 1); |
22 obj.canvas_box_obj = canvas_create_box(obj, x, y, 1, 1); |
23 obj.canvas_in_draw = true; |
23 obj.canvas_in_draw = true; |
24 obj.onclick = function(e) |
24 obj.onclick = function(e) |
25 { |
25 { |
26 canvas_click(this); |
26 canvas_click(this); |
27 var onclose = this.getAttribute('canvas:oncomplete'); |
27 var onclose = this.getAttribute('canvas:oncomplete'); |
28 if ( onclose ) |
28 if ( onclose ) |
29 { |
29 { |
30 eval(onclose); |
30 eval(onclose); |
31 } |
31 } |
32 } |
32 } |
33 canvas_replace_mousemove(obj); |
33 canvas_replace_mousemove(obj); |
34 } |
34 } |
35 |
35 |
36 function canvas_replace_mousemove(obj) |
36 function canvas_replace_mousemove(obj) |
37 { |
37 { |
38 canvas_mousemove_temp = document.onmousemove; |
38 canvas_mousemove_temp = document.onmousemove; |
39 canvas_mousemove_temp.box_obj = obj; |
39 canvas_mousemove_temp.box_obj = obj; |
40 canvas_keyup_temp = document.onkeyup; |
40 canvas_keyup_temp = document.onkeyup; |
41 document.onmousemove = function(e) |
41 document.onmousemove = function(e) |
42 { |
42 { |
43 canvas_mousemove_temp(e); |
43 canvas_mousemove_temp(e); |
44 canvas_redraw_box(canvas_mousemove_temp.box_obj); |
44 canvas_redraw_box(canvas_mousemove_temp.box_obj); |
45 } |
45 } |
46 document.onkeyup = function(e) |
46 document.onkeyup = function(e) |
47 { |
47 { |
48 if ( typeof(canvas_keyup_temp) == 'function' ) |
48 if ( typeof(canvas_keyup_temp) == 'function' ) |
49 canvas_keyup_temp(e); |
49 canvas_keyup_temp(e); |
50 |
50 |
51 if ( e.keyCode == CANVAS_KEY_ESC ) |
51 if ( e.keyCode == CANVAS_KEY_ESC ) |
52 canvas_cancel_draw(canvas_mousemove_temp.box_obj); |
52 canvas_cancel_draw(canvas_mousemove_temp.box_obj); |
53 } |
53 } |
54 } |
54 } |
55 |
55 |
56 function canvas_restore_mousemove() |
56 function canvas_restore_mousemove() |
57 { |
57 { |
58 document.onmousemove = canvas_mousemove_temp; |
58 document.onmousemove = canvas_mousemove_temp; |
59 document.onkeyup = canvas_keyup_temp; |
59 document.onkeyup = canvas_keyup_temp; |
60 } |
60 } |
61 |
61 |
62 function canvas_create_box(obj, x, y, width, height) |
62 function canvas_create_box(obj, x, y, width, height) |
63 { |
63 { |
64 var inner_width = width - 2; |
64 var inner_width = width - 2; |
65 var inner_height = height - 2; |
65 var inner_height = height - 2; |
66 var top = $dynano(obj).Top() + y; |
66 var top = $dynano(obj).Top() + y; |
67 var left = $dynano(obj).Left() + x; |
67 var left = $dynano(obj).Left() + x; |
68 |
68 |
69 // draw outer box |
69 // draw outer box |
70 var div_outer = document.createElement('div'); |
70 var div_outer = document.createElement('div'); |
71 div_outer.className = 'canvasbox'; |
71 div_outer.className = 'canvasbox'; |
72 div_outer.style.border = '1px solid #000000'; |
72 div_outer.style.border = '1px solid #000000'; |
73 div_outer.style.position = 'absolute'; |
73 div_outer.style.position = 'absolute'; |
74 div_outer.style.width = String(width) + 'px'; |
74 div_outer.style.width = String(width) + 'px'; |
75 div_outer.style.height = String(height) + 'px'; |
75 div_outer.style.height = String(height) + 'px'; |
76 div_outer.style.top = String(top) + 'px'; |
76 div_outer.style.top = String(top) + 'px'; |
77 div_outer.style.left = String(left) + 'px'; |
77 div_outer.style.left = String(left) + 'px'; |
78 |
78 |
79 div_outer.rootY = y; |
79 div_outer.rootY = y; |
80 div_outer.rootX = x; |
80 div_outer.rootX = x; |
81 |
81 |
82 var div_inner = document.createElement('div'); |
82 var div_inner = document.createElement('div'); |
83 div_inner.style.border = '1px solid #FFFFFF'; |
83 div_inner.style.border = '1px solid #FFFFFF'; |
84 if ( IE ) |
84 if ( IE ) |
85 { |
85 { |
86 div_inner.style.width = '100%'; |
86 div_inner.style.width = '100%'; |
87 div_inner.style.height = '100%'; |
87 div_inner.style.height = '100%'; |
88 } |
88 } |
89 else |
89 else |
90 { |
90 { |
91 div_inner.style.width = String(inner_width) + 'px'; |
91 div_inner.style.width = String(inner_width) + 'px'; |
92 div_inner.style.height = String(inner_height) + 'px'; |
92 div_inner.style.height = String(inner_height) + 'px'; |
93 } |
93 } |
94 |
94 |
95 div_outer.appendChild(div_inner); |
95 div_outer.appendChild(div_inner); |
96 |
96 |
97 obj.appendChild(div_outer); |
97 obj.appendChild(div_outer); |
98 return div_outer; |
98 return div_outer; |
99 } |
99 } |
100 |
100 |
101 function canvas_redraw_box(obj) |
101 function canvas_redraw_box(obj) |
102 { |
102 { |
103 if ( !obj.canvas_box_obj ) |
103 if ( !obj.canvas_box_obj ) |
104 return false; |
104 return false; |
105 var rel_x = mouseX - $dynano(obj).Left(); |
105 var rel_x = mouseX - $dynano(obj).Left(); |
106 var rel_y = mouseY - $dynano(obj).Top() + getScrollOffset(); |
106 var rel_y = mouseY - $dynano(obj).Top() + getScrollOffset(); |
107 var new_width = rel_x - obj.canvas_box_obj.rootX; |
107 var new_width = rel_x - obj.canvas_box_obj.rootX; |
108 var new_height = rel_y - obj.canvas_box_obj.rootY; |
108 var new_height = rel_y - obj.canvas_box_obj.rootY; |
109 var rootX = obj.canvas_box_obj.rootX; |
109 var rootX = obj.canvas_box_obj.rootX; |
110 var rootY = obj.canvas_box_obj.rootY; |
110 var rootY = obj.canvas_box_obj.rootY; |
111 // Limit dimensions to width - origin_x and height - origin_y |
111 // Limit dimensions to width - origin_x and height - origin_y |
112 if ( new_width + rootX > $dynano(obj).Width() ) |
112 if ( new_width + rootX > $dynano(obj).Width() ) |
113 new_width = $dynano(obj).Width() - rootX; |
113 new_width = $dynano(obj).Width() - rootX; |
114 if ( new_height + rootY > $dynano(obj).Height() ) |
114 if ( new_height + rootY > $dynano(obj).Height() ) |
115 new_height = $dynano(obj).Height() - rootY; |
115 new_height = $dynano(obj).Height() - rootY; |
116 // If going to the top or left of the origin, avoid negative width/height by moving the box |
116 // If going to the top or left of the origin, avoid negative width/height by moving the box |
117 if ( new_width < 1 ) |
117 if ( new_width < 1 ) |
118 { |
118 { |
119 new_width = rootX - rel_x; |
119 new_width = rootX - rel_x; |
120 obj.canvas_box_obj.style.left = String(mouseX + 2) + 'px'; |
120 obj.canvas_box_obj.style.left = String(mouseX + 2) + 'px'; |
121 } |
121 } |
122 if ( new_height < 1 ) |
122 if ( new_height < 1 ) |
123 { |
123 { |
124 new_height = rootY - rel_y; |
124 new_height = rootY - rel_y; |
125 obj.canvas_box_obj.style.top = String(mouseY + getScrollOffset() + 2) + 'px'; |
125 obj.canvas_box_obj.style.top = String(mouseY + getScrollOffset() + 2) + 'px'; |
126 } |
126 } |
127 obj.canvas_box_obj.style.width = String(new_width) + 'px'; |
127 obj.canvas_box_obj.style.width = String(new_width) + 'px'; |
128 obj.canvas_box_obj.style.height = String(new_height) + 'px'; |
128 obj.canvas_box_obj.style.height = String(new_height) + 'px'; |
129 new_width = new_width - 2; |
129 new_width = new_width - 2; |
130 new_height = new_height - 2; |
130 new_height = new_height - 2; |
131 if ( IE ) |
131 if ( IE ) |
132 { |
132 { |
133 var nw = new_width; |
133 var nw = new_width; |
134 var nh = new_height; |
134 var nh = new_height; |
135 obj.canvas_box_obj.firstChild.style.width = String(nw) + 'px'; |
135 obj.canvas_box_obj.firstChild.style.width = String(nw) + 'px'; |
136 obj.canvas_box_obj.firstChild.style.height = String(nh) + 'px'; |
136 obj.canvas_box_obj.firstChild.style.height = String(nh) + 'px'; |
137 } |
137 } |
138 else |
138 else |
139 { |
139 { |
140 obj.canvas_box_obj.firstChild.style.width = String(new_width) + 'px'; |
140 obj.canvas_box_obj.firstChild.style.width = String(new_width) + 'px'; |
141 obj.canvas_box_obj.firstChild.style.height = String(new_height) + 'px'; |
141 obj.canvas_box_obj.firstChild.style.height = String(new_height) + 'px'; |
142 } |
142 } |
143 } |
143 } |
144 |
144 |
145 function canvas_close_draw(obj, x, y) |
145 function canvas_close_draw(obj, x, y) |
146 { |
146 { |
147 canvas_restore_mousemove(); |
147 canvas_restore_mousemove(); |
148 obj.canvas_in_draw = false; |
148 obj.canvas_in_draw = false; |
149 obj.canvas = { |
149 obj.canvas = { |
150 top: $dynano(obj.canvas_box_obj).Top() - $dynano(obj).Top(), |
150 top: $dynano(obj.canvas_box_obj).Top() - $dynano(obj).Top(), |
151 left: $dynano(obj.canvas_box_obj).Left() - $dynano(obj).Left(), |
151 left: $dynano(obj.canvas_box_obj).Left() - $dynano(obj).Left(), |
152 width: $dynano(obj.canvas_box_obj).Width(), |
152 width: $dynano(obj.canvas_box_obj).Width(), |
153 height: $dynano(obj.canvas_box_obj).Height() |
153 height: $dynano(obj.canvas_box_obj).Height() |
154 } |
154 } |
155 obj.onclick = function(e) |
155 obj.onclick = function(e) |
156 { |
156 { |
157 canvas_click(this); |
157 canvas_click(this); |
158 } |
158 } |
159 } |
159 } |
160 |
160 |
161 function canvas_cancel_draw(obj) |
161 function canvas_cancel_draw(obj) |
162 { |
162 { |
163 canvas_restore_mousemove(); |
163 canvas_restore_mousemove(); |
164 obj.canvas_in_draw = false; |
164 obj.canvas_in_draw = false; |
165 obj.removeChild(obj.canvas_box_obj); |
165 obj.removeChild(obj.canvas_box_obj); |
166 obj.canvas_box_obj = null; |
166 obj.canvas_box_obj = null; |
167 obj.onclick = function(e) |
167 obj.onclick = function(e) |
168 { |
168 { |
169 canvas_click(this); |
169 canvas_click(this); |
170 } |
170 } |
171 var ga = obj.getAttribute('canvas:oncancel'); |
171 var ga = obj.getAttribute('canvas:oncancel'); |
172 if ( ga ) |
172 if ( ga ) |
173 { |
173 { |
174 eval(ga); |
174 eval(ga); |
175 } |
175 } |
176 } |
176 } |
177 |
177 |