Project

General

Profile

mouse_20151019_1.txt

Sergey Ivanovskiy, 10/19/2015 08:41 AM

Download (16.2 KB)

 
1
=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.mouse.js'
2
--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.mouse.js	2015-10-14 11:10:46 +0000
3
+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.mouse.js	2015-10-19 12:34:58 +0000
4
@@ -278,7 +278,13 @@
5
 {
6
    var BORDER_SIZE = 4;
7
    var rops = [ "mousemove", "mouseenter", "mouseleave", "mouseout", "mouseover"];
8
-
9
+   //The peer canvas needs to animate the resize operation 
10
+   var canvas = document.createElement('canvas');
11
+   canvas.id = "resizable_peer_canvas";
12
+   canvas.style.visibility  = "hidden";
13
+   canvas.style["position"] = "fixed";
14
+   var ctx = canvas.getContext("2d");
15
+   
16
    // register default mouse listeners last
17
    for (var idx in rops)
18
    {
19
@@ -295,8 +301,149 @@
20
    document.addEventListener("mouseup",     processMouseDragStop ("mouseup"));
21
    document.addEventListener("mousemove",   processMouseDrag     ("mousemove"));
22
    
23
+   /**
24
+    * Resizes the peer canvas according to given area.
25
+    * 
26
+    * @param    {Object} area
27
+    *           The new size and position to be assigned to the peer canvas 
28
+    */
29
+   function resizePeerCanvas(area)
30
+   {
31
+      canvas.height = area.height;
32
+      canvas.width  = area.width;
33
+      canvas.style.top  = area.top  + "px";
34
+      canvas.style.left = area.left + "px";
35
+      ctx.fillStyle = "white";
36
+      ctx.fillRect(0, 0, area.width, area.height);
37
+      ctx.strokeStyle = "black";
38
+      ctx.strokeRect(0, 0, area.width, area.height);
39
+
40
+   }
41
+   
42
+   /**
43
+    * Shows the resized peer canvas that represents the resize of the original window.
44
+    * 
45
+    * @param    {Window} win
46
+    *           The original window to be resized.
47
+    * @param    {String} resizeCursor
48
+    *           The cursor style.
49
+    */
50
+   function dispalayResizedPeerCanvas(win, resizeCursor)
51
+   {
52
+      var parent = win.canvas.parentNode;
53
+      if (parent)
54
+      {
55
+         canvas.height = win.canvas.height;
56
+         canvas.width  = win.canvas.width;
57
+         canvas.style.top  = win.canvas.style.top;
58
+         canvas.style.left = win.canvas.style.left;
59
+         canvas.style.zIndex = win.canvas.style.zIndex + 1;
60
+         canvas.style.visibility  = "visible";
61
+         canvas.style.opacity = 0.5;
62
+         parent.appendChild(canvas);
63
+
64
+         ctx.fillStyle = "white";
65
+         ctx.fillRect(0, 0, canvas.width, canvas.height);
66
+         ctx.strokeStyle = "black";
67
+         ctx.strokeRect(0, 0, canvas.width, canvas.height);
68
+         
69
+         canvas.style.cursor = resizeCursor;
70
+      }
71
+   }
72
+   
73
+   /**
74
+    * Calculates the resize cursor style.
75
+    * 
76
+    * @param    {Object} bounds
77
+    *           The current client area given by its sides coordinates {top, left, right, bottom}
78
+    * @param    {Object} mousePos
79
+    *           The mouse position relative to the current client area given by its coordinates
80
+    *           {x, y}.
81
+    */
82
+   function calculateResizeCursorStyle(bounds, mousePos)
83
+   {
84
+      // check the window borders
85
+      if (mousePos.x <= BORDER_SIZE  || 
86
+          mousePos.x >= bounds.right - bounds.left - BORDER_SIZE ||
87
+          mousePos.y <= BORDER_SIZE   ||
88
+          mousePos.y >= bounds.bottom - bounds.top - BORDER_SIZE)
89
+      {
90
+         // we have 8 cases; corners have precedence
91
+         var cursors =
92
+         [
93
+            "nw-resize",
94
+            "ne-resize",
95
+            "se-resize",
96
+            "sw-resize",
97
+            "n-resize",
98
+            "e-resize",
99
+            "s-resize",
100
+            "w-resize"
101
+         ];
102
+         var xcoords1 =
103
+         [
104
+            bounds.left,  // NW
105
+            bounds.right, // NE
106
+            bounds.right, // SE
107
+            bounds.left,  // SW
108
+            bounds.left,  // N
109
+            bounds.right, // E
110
+            bounds.left,  // S
111
+            bounds.left   // W
112
+         ];
113
+         var xcoords2 =
114
+         [
115
+            bounds.left,  // NW
116
+            bounds.right, // NE
117
+            bounds.right, // SE
118
+            bounds.left,  // SW
119
+            bounds.right, // N
120
+            bounds.right, // E
121
+            bounds.right, // S
122
+            bounds.left   // W
123
+         ];
124
+         var ycoords1 =
125
+         [
126
+            bounds.top,    // NW
127
+            bounds.top,    // NE
128
+            bounds.bottom, // SE
129
+            bounds.bottom, // SW
130
+            bounds.top,    // N
131
+            bounds.top,    // E
132
+            bounds.bottom, // S
133
+            bounds.top     // W
134
+         ];
135
+         var ycoords2 =
136
+         [
137
+            bounds.top,    // NW
138
+            bounds.top,    // NE
139
+            bounds.bottom, // SE
140
+            bounds.bottom, // SW
141
+            bounds.top,    // N
142
+            bounds.bottom, // E
143
+            bounds.bottom, // S
144
+            bounds.bottom  // W
145
+         ];
146
+         
147
+         for (var i = 0; i < cursors.length; i++)
148
+         {
149
+            var x1 = xcoords1[i] - BORDER_SIZE - bounds.left;
150
+            var y1 = ycoords1[i] - BORDER_SIZE - bounds.top;
151
+            var x2 = xcoords2[i] + BORDER_SIZE - bounds.left;
152
+            var y2 = ycoords2[i] + BORDER_SIZE - bounds.top;
153
+            var w = x2 - x1 + 1;
154
+            var h = y2 - y1 + 1;
155
+            
156
+            if (mousePos.x >= x1 && mousePos.x <= x2 && mousePos.y >= y1 && mousePos.y <= y2)
157
+            {
158
+               return cursors[i];
159
+            }
160
+         }
161
+      }
162
+      return "default";
163
+   };
164
+
165
    // leave/out listeners are not required for dragging purposes.
166
-   
167
    /**
168
     * If the event acts on the window border, send it to the Java side immediately.
169
     * 
170
@@ -325,109 +472,22 @@
171
             return;
172
          }
173
 
174
-         var canResize = false;
175
-
176
          var bounds = win.canvas.getBoundingClientRect();
177
          var mousePos = mThis.getMousePos(evt);
178
 
179
-         // check the window borders
180
-         if (evt.clientX <= bounds.left + BORDER_SIZE  || 
181
-             evt.clientX >= bounds.right - BORDER_SIZE ||
182
-             evt.clientY <= bounds.top + BORDER_SIZE   ||
183
-             evt.clientY >= bounds.bottom - BORDER_SIZE)
184
+         var cursor = calculateResizeCursorStyle(bounds, mousePos);
185
+         if (cursor !== "default")
186
          {
187
-            // we have 8 cases; corners have precedence
188
-            var cursors =
189
-            [
190
-               "nw-resize",
191
-               "ne-resize",
192
-               "se-resize",
193
-               "sw-resize",
194
-               "n-resize",
195
-               "e-resize",
196
-               "s-resize",
197
-               "w-resize"
198
-            ];
199
-            var xcoords1 =
200
-            [
201
-               bounds.left,  // NW
202
-               bounds.right, // NE
203
-               bounds.right, // SE
204
-               bounds.left,  // SW
205
-               bounds.left,  // N
206
-               bounds.right, // E
207
-               bounds.left,  // S
208
-               bounds.left   // W
209
-            ];
210
-            var xcoords2 =
211
-            [
212
-               bounds.left,  // NW
213
-               bounds.right, // NE
214
-               bounds.right, // SE
215
-               bounds.left,  // SW
216
-               bounds.right, // N
217
-               bounds.right, // E
218
-               bounds.right, // S
219
-               bounds.left   // W
220
-            ];
221
-            var ycoords1 =
222
-            [
223
-               bounds.top,    // NW
224
-               bounds.top,    // NE
225
-               bounds.bottom, // SE
226
-               bounds.bottom, // SW
227
-               bounds.top,    // N
228
-               bounds.top,    // E
229
-               bounds.bottom, // S
230
-               bounds.top     // W
231
-            ];
232
-            var ycoords2 =
233
-            [
234
-               bounds.top,    // NW
235
-               bounds.top,    // NE
236
-               bounds.bottom, // SE
237
-               bounds.bottom, // SW
238
-               bounds.top,    // N
239
-               bounds.bottom, // E
240
-               bounds.bottom, // S
241
-               bounds.bottom  // W
242
-            ];
243
-            
244
-            var cursor = "default";
245
-            for (var i = 0; i < cursors.length; i++)
246
-            {
247
-               var x1 = xcoords1[i] - BORDER_SIZE - bounds.left;
248
-               var y1 = ycoords1[i] - BORDER_SIZE - bounds.top;
249
-               var x2 = xcoords2[i] + BORDER_SIZE - bounds.left;
250
-               var y2 = ycoords2[i] + BORDER_SIZE - bounds.top;
251
-               var w = x2 - x1 + 1;
252
-               var h = y2 - y1 + 1;
253
-               
254
-               if (mousePos.x >= x1 && mousePos.x <= x2 && mousePos.y >= y1 && mousePos.y <= y2)
255
-               {
256
-                  cursor = cursors[i];
257
-                  canResize = true;
258
-                  break;
259
-               }
260
-            }
261
-
262
             if (cursor != win.getCursorStyle())
263
             {
264
                win.setCursorStyle(cursor);
265
             }
266
-            else if (!canResize)
267
-            {
268
-               cursor = "default";
269
-               win.setCursorStyle(cursor);
270
-            }
271
-
272
-            return;
273
          }
274
          else
275
          {
276
             // restore mouse, if current is set to a "resize" style
277
             var style = win.getCursorStyle();
278
-            if (style.lastIndexOf("resize") >= 0)
279
+            if (style.lastIndexOf("resize") >= 0 && !mThis.mouseDrag)
280
             {
281
                win.setCursorStyle("default");
282
             }
283
@@ -448,11 +508,16 @@
284
          }
285
          var mThis = win.mouseHandler;
286
 
287
-         if (!win.resizeable || !mThis.mouseDrag)
288
+         if (!win.resizeable || !mThis.mouseDrag || !mThis.resizeArea)
289
          {
290
             return;
291
          }
292
-
293
+         // resize canvas
294
+         win.resize(mThis.resizeArea.width, mThis.resizeArea.height);
295
+         // set new location
296
+         win.canvas.style.left = mThis.resizeArea.left + "px";
297
+         win.canvas.style.top  = mThis.resizeArea.top + "px";
298
+         
299
          var bounds = win.canvas.getBoundingClientRect();
300
          var h = bounds.bottom - bounds.top  + 1;
301
          var w = bounds.right - bounds.left + 1;
302
@@ -492,6 +557,13 @@
303
          mThis.initialBounds = undefined;
304
          mThis.resizeEvent = undefined;
305
          mThis.dragOwner = undefined;
306
+         canvas.style.cursor = "default";
307
+         canvas.style.visibility  = "hidden";
308
+         if (canvas.parentNode)
309
+         {
310
+            canvas.parentNode.removeChild(canvas);
311
+         }
312
+         mThis.resizeArea = undefined;
313
 
314
          // event was processed, cancel other listeners
315
          evt.preventDefault();
316
@@ -524,19 +596,22 @@
317
          }
318
 
319
          var bounds = win.canvas.getBoundingClientRect();
320
-
321
-         if (evt.clientX <= bounds.left + BORDER_SIZE  || 
322
-             evt.clientX >= bounds.right - BORDER_SIZE ||
323
-             evt.clientY <= bounds.top + BORDER_SIZE   ||
324
-             evt.clientY >= bounds.bottom - BORDER_SIZE)
325
+         var mousePos = mThis.getMousePos(evt);
326
+         var resizeCursor = calculateResizeCursorStyle(bounds, mousePos);
327
+         var w = bounds.right - bounds.left;
328
+         var h = bounds.bottom - bounds.top;
329
+         if (!(inside(mousePos, BORDER_SIZE, BORDER_SIZE, w - BORDER_SIZE, h - BORDER_SIZE))
330
+               && inside(mousePos, -BORDER_SIZE, -BORDER_SIZE, w + BORDER_SIZE, h + BORDER_SIZE))
331
          {
332
             mThis.dragOwner = win.id;
333
             mThis.mouseDrag = true;
334
-   
335
             // save the location
336
             mThis.initialBounds = win.canvas.getBoundingClientRect();
337
             mThis.resizeEvent = evt;
338
 
339
+            mThis.resizeCursor = resizeCursor;
340
+            
341
+            dispalayResizedPeerCanvas(win, resizeCursor);
342
             // event was processed, cancel other listeners
343
             evt.preventDefault();
344
          }
345
@@ -563,11 +638,11 @@
346
          {
347
             return;
348
          }
349
-         
350
+
351
          var mousePos = win.getMousePos(evt);
352
          var bounds = win.canvas.getBoundingClientRect();
353
 
354
-         var activeCursor = win.getCursorStyle();
355
+         var activeCursor = mThis.resizeCursor;
356
 
357
          // check which cursor is in use
358
          var setLocationX = (activeCursor == "nw-resize" ||
359
@@ -602,6 +677,28 @@
360
          origin.x = bounds.left;
361
          origin.y = bounds.top;
362
          
363
+         
364
+         // determine the new size
365
+         var dx = mThis.initialBounds.right - mThis.initialBounds.left + 1;
366
+         var dy = mThis.initialBounds.bottom - mThis.initialBounds.top + 1;
367
+         var new_dx = dx;
368
+         var new_dy = dy;
369
+         if (resizeX)
370
+         {
371
+            new_dx -= signX * (evt.clientX - mThis.resizeEvent.clientX);
372
+         }
373
+         
374
+         if (resizeY)
375
+         {
376
+            new_dy -= signY * (evt.clientY - mThis.resizeEvent.clientY);
377
+         }
378
+         
379
+         var maxWidth  = Math.max( win.canvas.width,  win.maxWidth);
380
+         var maxHeight = Math.max( win.canvas.height, win.maxHeight);
381
+         // 
382
+         new_dx = Math.min(Math.max(new_dx, win.minWidth), maxWidth);
383
+         new_dy = Math.min(Math.max(new_dy, win.minHeight), maxHeight);
384
+         //recalculate origin 
385
          if (setLocationX || setLocationY)
386
          {
387
             if (!(setLocationX && setLocationY))
388
@@ -617,66 +714,22 @@
389
             
390
             if (setLocationX)
391
             {
392
-               origin.x = evt.clientX;
393
+               origin.x = mThis.resizeEvent.clientX + signX * (dx - new_dx);
394
             }
395
             
396
             if (setLocationY)
397
             {
398
-               origin.y = evt.clientY;
399
+               origin.y = mThis.resizeEvent.clientY + signX * (dx - new_dy);
400
             }
401
          }
402
-         
403
-         // determine the new size
404
-         var dx = mThis.initialBounds.right - mThis.initialBounds.left + 1;
405
-         var dy = mThis.initialBounds.bottom - mThis.initialBounds.top + 1;
406
-         
407
-         if (resizeX)
408
-         {
409
-            dx -= signX * (evt.clientX - mThis.resizeEvent.clientX);
410
-         }
411
-         
412
-         if (resizeY)
413
-         {
414
-            dy -= signY * (evt.clientY - mThis.resizeEvent.clientY);
415
-         }
416
-         
417
-         var w = bounds.right - bounds.left + 1;
418
-         var h = bounds.bottom - bounds.top + 1;
419
-         
420
-         // if the width/height is increased, then do not go past max
421
-         // if the width/height is decreased, then do not go past min
422
-         if ((dx < w && dx <= win.minWidth) ||
423
-             (dx > w && dx >= win.maxWidth) ||
424
-             (dy < h && dy <= win.minHeight) ||
425
-             (dy > h && dy >= win.maxHeight))
426
-         {
427
-            // reached window limits, do nothing
428
-            evt.preventDefault();
429
-            return;
430
-         }
431
-         
432
-         // resize canvas
433
-         win.resize(dx, dy);
434
-         
435
-         // set new location
436
-         win.canvas.style.left = origin.x + "px";
437
-         win.canvas.style.top  = origin.y + "px";
438
-         
439
-         // draw a rectangle
440
-         /*
441
-         win.ctx.save();
442
-         win.ctx.strokeStyle = "#ff0000";
443
-         var tx = win.canvasRenderer.origin.x;
444
-         var ty = win.canvasRenderer.origin.y;
445
-         win.ctx.rect(0 - tx, 0 - ty, dx - tx, dy - ty);
446
-         win.ctx.stroke();
447
-         win.ctx.restore();
448
-         */
449
+         mThis.resizeArea = {left : origin.x, top : origin.y, width : new_dx, height : new_dy};
450
+         resizePeerCanvas(mThis.resizeArea);
451
          
452
          // event was processed, cancel other listeners
453
          evt.preventDefault();
454
       };
455
    };
456
+
457
 }
458
 
459
 /**
460
@@ -705,13 +758,13 @@
461
    {
462
       p2j.screen.setCursorStyle(0, win.id);
463
       evt.preventDefault();
464
-   }
465
+   };
466
 
467
    this.mouseEnter = function(evt)
468
    {
469
       p2j.screen.setCursorStyle(1, win.id);
470
       evt.preventDefault();
471
-   }
472
+   };
473
 
474
    this.deregisterListeners = function()
475
    {
476
@@ -1152,3 +1205,26 @@
477
       return { "click" : true, "mouseDown" : true };
478
    };
479
 };
480
+
481
+/**
482
+ * Returns true if the point is inside the rectangle given by its sides coordinates: left,
483
+ * to, right and bottom.
484
+ * 
485
+ * @param    {Object} point
486
+ *           The point {x: x, y : y} to test.
487
+ * @param    {Number} left
488
+ *           The coord of the left side of the target rectangle.
489
+ * @param    {Number} top
490
+ *           The coord of the top side of the target rectangle.
491
+ * @param    {Number} right
492
+ *           The coord of the right side of the target rectangle.
493
+ * @param    {Number} bottom
494
+ *           The coord of the bottom side of the target rectangle.
495
+ * 
496
+ * @return   {Boolean}
497
+ *           True iff the point is inside the target.
498
+ */
499
+function inside(point, left, top, right, bottom)
500
+{
501
+   return (point.x > left && point.x < right &&  point.y > top  && point.y < bottom);
502
+}
503