Events in grouped object #2729

asturur · 2016-01-10T22:41:56Z

Preliminary cleaning and test.

First i remove some duplicate calls of getPointer(e, true); We are passing event e, and in every function searching for the pointer from the event. While we can search pointer once and then just pass reference to it.

Then a nice logic to discern when we should go deep in the groups and when we should stop at first object is still needed.

update to mster

update _normalizePointer

Merge pull request #2720 from asturur/rotatedgroup

asturur · 2016-01-11T01:21:00Z

it detects the object in groups and nested groups, but the mouse over and mouse out logic needs tweaks. i think we need to return an array of found target instead of a single target. The first one gets normal processing (selection, grouping...) , the others just fires mouse up, mouse down, mouse over, mouse out...

asturur · 2016-01-17T13:17:32Z

needed for testing

{"objects":[{"type":"group","originX":"left","originY":"top","left":160.02,"top":107,"width":216.49,"height":262,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"objects":[{"type":"circle","originX":"left","originY":"top","left":-62.27,"top":-31,"width":80,"height":80,"fill":"rgb(0,0,255)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":2,"angle":0,"flipX":false,"flipY":false,"opacity":0.5,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"radius":40,"startAngle":0,"endAngle":6.283185307179586},{"type":"rect","originX":"left","originY":"top","left":-62.27,"top":-131,"width":50,"height":50,"fill":"rgb(255,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0},{"type":"group","originX":"left","originY":"top","left":-37.77,"top":-131,"width":206.5,"height":99.67,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":45,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"objects":[{"type":"circle","originX":"left","originY":"top","left":22.25,"top":-49.83,"width":80,"height":80,"fill":"rgb(0,255,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":0.5,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":10,"radius":40,"startAngle":0,"endAngle":6.283185307179586},{"type":"rect","originX":"left","originY":"top","left":-77.75,"top":-19.83,"width":50,"height":50,"fill":"rgb(255,255,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":30,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0}]}]}],"background":""}

// clear canvas
canvas.clear();

// remove currently selected object
canvas.loadFromJSON({"objects":[{"type":"group","originX":"left","originY":"top","left":160.02,"top":107,"width":216.49,"height":262,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"objects":[{"type":"circle","originX":"left","originY":"top","left":-62.27,"top":-31,"width":80,"height":80,"fill":"rgb(0,0,255)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":2,"angle":0,"flipX":false,"flipY":false,"opacity":0.5,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"radius":40,"startAngle":0,"endAngle":6.283185307179586},{"type":"rect","originX":"left","originY":"top","left":-62.27,"top":-131,"width":50,"height":50,"fill":"rgb(255,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0},{"type":"group","originX":"left","originY":"top","left":-37.77,"top":-131,"width":206.5,"height":99.67,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":45,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"objects":[{"type":"circle","originX":"left","originY":"top","left":22.25,"top":-49.83,"width":80,"height":80,"fill":"rgb(0,255,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":0.5,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":10,"radius":40,"startAngle":0,"endAngle":6.283185307179586},{"type":"rect","originX":"left","originY":"top","left":-77.75,"top":-19.83,"width":50,"height":50,"fill":"rgb(255,255,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":30,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0}]}]}],"background":""});
canvas.renderAll();

canvas._objects[0]._objects[0].hasBorders = true;
canvas._objects[0]._objects[0].hasControls = true;

canvas._objects[0]._objects[1].hasBorders = true;
canvas._objects[0]._objects[1].hasControls = true;

canvas._objects[0]._objects[2].hasBorders = true;
canvas._objects[0]._objects[2].hasControls = true;

canvas._objects[0]._objects[2]._objects[1].hasBorders = true;
canvas._objects[0]._objects[2]._objects[1].hasControls = true;

canvas._objects[0]._objects[2]._objects[0].hasBorders = true;
canvas._objects[0]._objects[2]._objects[0].hasControls = true;

canvas._objects[0]._objects[0].on('mousedown', function(e){ this.stroke = 'black'});
canvas._objects[0]._objects[1].on('mousedown', function(e){ this.stroke = 'black'});
canvas._objects[0]._objects[2]._objects[0].on('mousedown', function(e){this.stroke = 'black'});
canvas._objects[0]._objects[2]._objects[1].on('mousedown', function(e){this.stroke = 'black'});

canvas._objects[0]._objects[0].on('mouseup', function(e){ this.stroke = 'white'});
canvas._objects[0]._objects[1].on('mouseup', function(e){ this.stroke = 'white'});
canvas._objects[0]._objects[2]._objects[0].on('mouseup', function(e){this.stroke = 'white'});
canvas._objects[0]._objects[2]._objects[1].on('mouseup', function(e){this.stroke = 'white'});

asturur · 2016-01-17T14:44:56Z

i left some question @kangax, if you can give some insight on existing code.

asturur · 2016-01-17T14:45:59Z

src/canvas.class.js

@@ -860,38 +858,37 @@
    /**
     * @private
     */
-    _isLastRenderedObject: function(e) {
+    _isLastRenderedObject: function(pointer) {


this function is a shortcut to check last selected target before all. But why just with controls above overaly? i think it should be checked always.

asturur · 2016-01-17T14:52:59Z

Also i have still to figure out mouse over and mouse out, but can be done. Also perPixelTargetFind needs some adjustment.

VictorHagsand · 2016-04-27T17:13:36Z

No update on this?

asturur · 2016-04-27T17:16:35Z

I did not forget it.
I have to rebase on new code, but definitely pushing this forward.
It was done, just i need to check every shift click situations and transparency settings and DOCS.

samuelhorwitz · 2016-05-19T16:29:51Z

Hey, just a quick question. Would this update make it so that grouped objects can be manipulated individually? I have been working on a workaround for my own project in which I use a group subclass that can ungroup and regroup itself as needed so that objects can be manipulated on an individual level. However I feel like it's a bit messy. If the intent of this PR is to allow individual object manipulation, then I'll hold off on cleaning up my code and just wait for this to land so I can re-implement my stuff in a simpler fashion.

PS thanks for all the work on Fabric you've done, it's saved our team a bunch of time

asturur · 2016-05-19T16:53:04Z

no just event handling, click mouse over, mouse out
.. and so on. what you say could be next step. but not this

samuelhorwitz · 2016-05-19T17:32:32Z

Ah okay. Well it still seems like you've done the "hard part" unless I'm missing something. Once you can reliably target objects in a group the way you've done, it's just a small step from providing an interface that allows one to "drill down" to that object and allow current transforms to get setup on that object (while making sure that the group gets updated with every change to a child object). I have a massively subclassed version of Fabric running for my project (1000s of lines of Canvas and Object subclassing) but I think that implementing this via a subclass might not be the best approach. I'm going to look into taking this branch and adding what I'm talking about on top of it to see how it feels.

samuelhorwitz · 2016-05-19T18:30:39Z

src/canvas.class.js

@@ -1293,3 +1292,4 @@
   */
  fabric.Element = fabric.Canvas;
 })();
+s


this should probably not be here :)

asturur · 2016-05-22T07:41:58Z

check #2997

asturur added 8 commits January 3, 2016 16:49

Merge pull request #11 from kangax/master

7b1e7ba

update to mster

Merge pull request #12 from asturur/rotatedgroup

6fd4082

update _normalizePointer

Merge pull request #14 from kangax/master

2a6b2c3

Merge pull request #2720 from asturur/rotatedgroup

preliminary clenaup 1

4a4f42b

Update canvas_grouping.mixin.js

b38c385

Update canvas.class.js

07a2df8

Update canvas_grouping.mixin.js

84a5376

Update canvas.class.js

b3fb4c2

asturur added 3 commits January 17, 2016 15:40

Update canvas.class.js

e374828

Update canvas_events.mixin.js

51482e3

Update object_geometry.mixin.js

42beee7

asturur reviewed Jan 17, 2016
View reviewed changes

asturur mentioned this pull request Jan 17, 2016

Support events for objects in group [$35] #485

Closed

samuelhorwitz reviewed May 19, 2016
View reviewed changes

src/canvas.class.js

@@ -1293,3 +1292,4 @@

*/

fabric.Element = fabric.Canvas;

})();

s

Copy link

samuelhorwitz May 19, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should probably not be here :)

asturur mentioned this pull request May 22, 2016

Target in group #2997

Merged

asturur closed this May 22, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Events in grouped object #2729

Events in grouped object #2729

asturur commented Jan 10, 2016

asturur commented Jan 11, 2016

asturur commented Jan 17, 2016

asturur commented Jan 17, 2016

asturur Jan 17, 2016

asturur commented Jan 17, 2016

VictorHagsand commented Apr 27, 2016

asturur commented Apr 27, 2016

samuelhorwitz commented May 19, 2016 •

edited

Loading

asturur commented May 19, 2016

samuelhorwitz commented May 19, 2016

samuelhorwitz May 19, 2016

asturur commented May 22, 2016

Events in grouped object #2729

Events in grouped object #2729

Conversation

asturur commented Jan 10, 2016

asturur commented Jan 11, 2016

asturur commented Jan 17, 2016

asturur commented Jan 17, 2016

asturur Jan 17, 2016

Choose a reason for hiding this comment

asturur commented Jan 17, 2016

VictorHagsand commented Apr 27, 2016

asturur commented Apr 27, 2016

samuelhorwitz commented May 19, 2016 • edited Loading

asturur commented May 19, 2016

samuelhorwitz commented May 19, 2016

samuelhorwitz May 19, 2016

Choose a reason for hiding this comment

asturur commented May 22, 2016

samuelhorwitz commented May 19, 2016 •

edited

Loading