Re: drag-and-drop with line

[takpoli]

 

Oop!  Here is the attachment.

 

Tak

On Wed, Aug 12, 2009 at 10:00 PM, Tak-po Li <[e-mail]> wrote:

 
I am new with gfx.  To experience line drag-and-drop with gfx, I did the following:
 
1. change 100 circles example to make 10 circles only.
2. draw 9 lines between them, from center to center.
3. change x1y1 or x2y2 of the lines that attached to the circle by
   using xxx.setShape("x1: xx, y1: yy")
 
It is not working.  The code is attached.  Please help.
Thanks,
 
Tak

 
 

On Wed, Oct 15, 2008 at 8:00 AM, <dojo-interest-request@...> wrote:

Send Dojo-interest mailing list submissions to
       dojo-interest@...

To subscribe or unsubscribe via the World Wide Web, visit
       http://turtle.dojotoolkit.org/mailman/listinfo/dojo-interest
or, via email, send a message with subject or body 'help' to
       dojo-interest-request@...

You can reach the person managing the list at
       dojo-interest-owner@...

When replying, please edit your Subject line so it is more specific
than "Re: Contents of Dojo-interest digest..."


Today's Topics:

  1. Re: gfx (Eugene Lazutkin)
  2. Re: gfx (Eugene Lazutkin)
  3. Re: dojox.layout.ContentPane not loading CSS linked       in
     included page (Deno Vichas)
  4. Re: dojox.layout.ContentPane not loading CSS linked in
     included page (Alessandro Vernet)
  5. [Q] declaring variables in module for export (V S P)
  6. Re: [Q] declaring variables in module for export (Peter Svensson)
  7. Re: [Q] declaring variables in module for export (Peter E Higgins)
  8. Drag and Drop - Problem in Dragging the Item ( (?`?.k ! k !.???))
  9. any good resources? (Scott Ballantyne)
 10. Re: any good resources? (Peter Svensson)


----------------------------------------------------------------------

Message: 1
Date: Tue, 14 Oct 2008 11:35:47 -0500
From: Eugene Lazutkin <eugene.lazutkin@...>
Subject: Re: [Dojo-interest] gfx
To: dojo-interest@...
Message-ID: <gd2hp3$54i$1@...>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed

gfx is meant to shield you from details of an actual implementation. You
definitely can use it for SVG only, but any SVG trick would not work
with other renderers. For example, there are renderers that are not
DOM-based, or use a separate DOM (outside of HTML). It is better to
follow the documentation: http://docs.dojocampus.org/dojox/gfx. It
explains what's universally available and what platform-specific
differences can be encountered.

Thanks,

Eugene

Tak-po Li wrote:
>
> Eugene,
>
> I can live with the problem with clipped border by assigning width 2.
> The border of rect itself is OK.
>
> I can use createGroup and createText to generate the following svg dom
> structure in FF:
>
> <g>
>   <rect>....</rect>
>   <text>...</text>
>   <g></g>
>   <g></g>
> </g>
>
> I attach the top group to your Movable and the whole group moves with
> the cursor movement.
>
>  From dom inspector, I notice the group attribute is empty when it is
> generated.  I need some attributes such as 'id', 'attachedto'....for the
> group.  Where is best module to add them to the group?  I also notice
> attribute 'transform' is added when the group is moved by 'Movable'.  As
> you know, I plan to handle event myself, do I still need attribute
> 'transform'?  If I do needed it, where is a good example that get added?
>
> Thanks again,
>
> Tak
>
>

>
>
>   _renderShape: function(/* Object */ ctx){
>    // nothing
>   },
>
>
>
>
> ------------------------------------------------------------------------

>
> _______________________________________________
> FAQ: http://dojotoolkit.org/support/faq
> Book: http://dojotoolkit.org/docs/book
> Forums: http://dojotoolkit.org/forum
> Dojo-interest@...
> http://turtle.dojotoolkit.org/mailman/listinfo/dojo-interest



------------------------------

Message: 2
Date: Tue, 14 Oct 2008 11:39:00 -0500
From: Eugene Lazutkin <eugene.lazutkin@...>
Subject: Re: [Dojo-interest] gfx
To: dojo-interest@...
Message-ID: <gd2hv5$5ri$1@...>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed

Yes, this picture is mostly correct. But instead of dojo.connect() gfx
provides it's one method on shape objects: shape.connect() that is
modeled after dojo.connect(). It is documented and used in tests and
demos. The reason is that dojo.connect() works with HTML DOM, while some
renderers don't use HTML DOM at all.

But if you want to attach events to HTML DOM objects (e.g., document,
body, or surface.rawNode) dojo.connect() is the right way to go.

Thanks,

Eugene

Tak-po Li wrote:
>
> Eugene,
>
> I misunderstood what you wrote.
>
> It sounds I should use dojo.connect function for creating the linkage
> between Shapes and Functions.  I should save them in my own storage and
> add to the Json in serializer when user wants to save his work.  I
> should reconnect Shapes and Functions in deserializer from the saved
> Json when user resume his work, right?
>
> Thanks,
>
> Tak
>
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> FAQ: http://dojotoolkit.org/support/faq
> Book: http://dojotoolkit.org/docs/book
> Forums: http://dojotoolkit.org/forum
> Dojo-interest@...
> http://turtle.dojotoolkit.org/mailman/listinfo/dojo-interest

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://dojotoolkit.org/docs/book
Forums: http://dojotoolkit.org/forum
Dojo-interest@...
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

[Eugene Lazutkin]

Your example is still too complex (XHTML, chrome extensions,
undocumented gfx functions...). So I wrote a simpler one with exactly
two circles and one line (attached).

I decided to add it to the list of demos as well --- somehow circles
connected with lines are very popular with gfx users. ;-)

Let me know, if you have more questions.

Thanks,

Eugene Lazutkin
Dojo Toolkit, Committer
http://lazutkin.com/


On 08/12/2009 10:39 PM, Tak-po Li wrote:

>  
> Oop!  Here is the attachment.
>  
> Tak
>
> On Wed, Aug 12, 2009 at 10:00 PM, Tak-po Li <takpo.li
> <http://takpo.li>@gmail.com <http://gmail.com>> wrote:
>
>      
>     I am new with gfx.  To experience line drag-and-drop with gfx, I did
>     the following:
>      
>     1. change 100 circles example to make 10 circles only.
>     2. draw 9 lines between them, from center to center.
>     3. change x1y1 or x2y2 of the lines that attached to the circle by
>        using xxx.setShape("x1: xx, y1: yy")
>      
>     It is not working.  The code is attached.  Please help.
>     Thanks,
>      
>     Tak
>
>      
>      
>
>     On Wed, Oct 15, 2008 at 8:00 AM,
>     <dojo-interest-request@...
>     <mailto:dojo-interest-request@...>> wrote:
>
>         Send Dojo-interest mailing list submissions to
>                dojo-interest@...
>         <mailto:dojo-interest@...>
>
>         To subscribe or unsubscribe via the World Wide Web, visit
>                http://turtle.dojotoolkit.org/mailman/listinfo/dojo-interest
>         or, via email, send a message with subject or body 'help' to
>                dojo-interest-request@...
>         <mailto:dojo-interest-request@...>
>
>         You can reach the person managing the list at
>                dojo-interest-owner@...
>         <mailto:dojo-interest-owner@...>
>
>         When replying, please edit your Subject line so it is more specific
>         than "Re: Contents of Dojo-interest digest..."
>
>
>         Today's Topics:
>
>           1. Re: gfx (Eugene Lazutkin)
>           2. Re: gfx (Eugene Lazutkin)
>           3. Re: dojox.layout.ContentPane not loading CSS linked       in
>              included page (Deno Vichas)
>           4. Re: dojox.layout.ContentPane not loading CSS linked in
>              included page (Alessandro Vernet)
>           5. [Q] declaring variables in module for export (V S P)
>           6. Re: [Q] declaring variables in module for export (Peter
>         Svensson)
>           7. Re: [Q] declaring variables in module for export (Peter E
>         Higgins)
>           8. Drag and Drop - Problem in Dragging the Item ( (?`?.k ! k
>         !.???))
>           9. any good resources? (Scott Ballantyne)
>          10. Re: any good resources? (Peter Svensson)
>
>
>         ----------------------------------------------------------------------
>
>         Message: 1
>         Date: Tue, 14 Oct 2008 11:35:47 -0500
>         From: Eugene Lazutkin <eugene.lazutkin@...
>         <mailto:eugene.lazutkin@...>>
>         Subject: Re: [Dojo-interest] gfx
>         To: dojo-interest@...
>         <mailto:dojo-interest@...>
>         Message-ID: <gd2hp3$54i$1@... <mailto:1@...>>
>         Content-Type: text/plain; charset=ISO-8859-1; format=flowed
>
>         gfx is meant to shield you from details of an actual
>         implementation. You
>         definitely can use it for SVG only, but any SVG trick would not work
>         with other renderers. For example, there are renderers that are not
>         DOM-based, or use a separate DOM (outside of HTML). It is better to
>         follow the documentation: http://docs.dojocampus.org/dojox/gfx. It
>         explains what's universally available and what platform-specific
>         differences can be encountered.
>
>         Thanks,
>
>         Eugene
>
>         Tak-po Li wrote:
>         >
>         > Eugene,
>         >
>         > I can live with the problem with clipped border by assigning
>         width 2.
>         > The border of rect itself is OK.
>         >
>         > I can use createGroup and createText to generate the following
>         svg dom
>         > structure in FF:
>         >
>         > <g>
>         >   <rect>....</rect>
>         >   <text>...</text>
>         >   <g></g>
>         >   <g></g>
>         > </g>
>         >
>         > I attach the top group to your Movable and the whole group
>         moves with
>         > the cursor movement.
>         >
>         >  From dom inspector, I notice the group attribute is empty
>         when it is
>         > generated.  I need some attributes such as 'id',
>         'attachedto'....for the
>         > group.  Where is best module to add them to the group?  I also
>         notice
>         > attribute 'transform' is added when the group is moved by
>         'Movable'.  As
>         > you know, I plan to handle event myself, do I still need attribute
>         > 'transform'?  If I do needed it, where is a good example that
>         get added?
>         >
>         > Thanks again,
>         >
>         > Tak
>         >
>         >
>         >
>         >
>         >   _renderShape: function(/* Object */ ctx){
>         >    // nothing
>         >   },
>         >
>         >
>         >
>         >
>         >
>         ------------------------------------------------------------------------
>         >
>         > _______________________________________________
>         > FAQ: http://dojotoolkit.org/support/faq
>         > Book: http://dojotoolkit.org/docs/book
>         > Forums: http://dojotoolkit.org/forum
>         > Dojo-interest@...
>         <mailto:Dojo-interest@...>
>         > http://turtle.dojotoolkit.org/mailman/listinfo/dojo-interest
>
>
>
>         ------------------------------
>
>         Message: 2
>         Date: Tue, 14 Oct 2008 11:39:00 -0500
>         From: Eugene Lazutkin <eugene.lazutkin@...
>         <mailto:eugene.lazutkin@...>>
>         Subject: Re: [Dojo-interest] gfx
>         To: dojo-interest@...
>         <mailto:dojo-interest@...>
>         Message-ID: <gd2hv5$5ri$1@... <mailto:1@...>>
>         Content-Type: text/plain; charset=ISO-8859-1; format=flowed
>
>         Yes, this picture is mostly correct. But instead of
>         dojo.connect() gfx
>         provides it's one method on shape objects: shape.connect() that is
>         modeled after dojo.connect(). It is documented and used in tests and
>         demos. The reason is that dojo.connect() works with HTML DOM,
>         while some
>         renderers don't use HTML DOM at all.
>
>         But if you want to attach events to HTML DOM objects (e.g.,
>         document,
>         body, or surface.rawNode) dojo.connect() is the right way to go.
>
>         Thanks,
>
>         Eugene
>
>         Tak-po Li wrote:
>         >
>         > Eugene,
>         >
>         > I misunderstood what you wrote.
>         >
>         > It sounds I should use dojo.connect function for creating the
>         linkage
>         > between Shapes and Functions.  I should save them in my own
>         storage and
>         > add to the Json in serializer when user wants to save his work.  I
>         > should reconnect Shapes and Functions in deserializer from the
>         saved
>         > Json when user resume his work, right?
>         >
>         > Thanks,
>         >
>         > Tak
>         >
>         >
>         >
>         ------------------------------------------------------------------------
>         >
>         > _______________________________________________
>         > FAQ: http://dojotoolkit.org/support/faq
>         > Book: http://dojotoolkit.org/docs/book
>         > Forums: http://dojotoolkit.org/forum
>         > Dojo-interest@...
>         <mailto:Dojo-interest@...>
>         > http://turtle.dojotoolkit.org/mailman/listinfo/dojo-interest
>
>
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> FAQ: http://dojotoolkit.org/support/faq
> Book: http://dojotoolkit.org/docs/book
> Forums: http://dojotoolkit.org/forum
> Dojo-interest@...
> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>dojox.gfx: 2 draggable circles</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
        @import "../../../dojo/resources/dojo.css";
        @import "../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
<script type="text/javascript">

dojo.require("dojox.gfx");
dojo.require("dojox.gfx.move");

var container = null,
        surface = null,
        surface_size = null;

function makeCircles(){
        // our geometry
        var x1 = 100, y1 = 100, x2 = 400, y2 = 400, r = 50;
       
        // our shapes
        var line = surface.createLine({x1: x1, y1: y1, x2: x2, y2: y2}).setStroke("red"),
                circle1 = surface.createCircle({cx: x1, cy: y1, r: r}).setStroke("red").setFill("white"),
                circle2 = surface.createCircle({cx: x2, cy: y2, r: r}).setStroke("red").setFill("white");
       
        // circle movers
        var m1 = new dojox.gfx.Moveable(circle1),
                m2 = new dojox.gfx.Moveable(circle2);
               
        // custom event processing
        dojo.connect(m1, "onMoved", function(mover, shift){
                var o = line.getShape();
                line.setShape({x1: o.x1 + shift.dx, y1: o.y1 + shift.dy, x2: o.x2, y2: o.y2});
        });
        dojo.connect(m2, "onMoved", function(mover, shift){
                var o = line.getShape();
                line.setShape({x1: o.x1, y1: o.y1, x2: o.x2 + shift.dx, y2: o.y2 + shift.dy});
        });
}

function initGfx(){
        container = dojo.byId("gfx_holder");
        surface = dojox.gfx.createSurface(container, 500, 500);
        surface_size = {width: 500, height: 500};

        makeCircles();

        // cancel text selection and text dragging
        dojo.connect(container, "ondragstart",   dojo, "stopEvent");
        dojo.connect(container, "onselectstart", dojo, "stopEvent");
}

dojo.addOnLoad(initGfx);

</script>

<style type="text/css">
.movable { cursor: pointer; }
</style>

</head>
<body>
<h1>dojox.gfx: 2 draggable circles</h1>
<p>Warning: Canvas renderer doesn't implement event handling.</p>
<div id="gfx_holder" style="width: 500px; height: 500px;"></div>
</body>
</html>

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://dojotoolkit.org/docs/book
Forums: http://dojotoolkit.org/forum
Dojo-interest@...
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

[takpoli]

 

Hi Eugene,

 

I am sorry that I did a bad job of posting that did not include the details.  I found some of your old posting (below) that helps understand more on how Movable works in Gfx.  Let me try more in that direction.

 

Thanks,

 

Tak

 

 

 

Submitted by eugene on Wed, 04/30/2008 - 02:35.

Moveable doesn't modify a shape, but updates a matrix on the shape. You can access matrix like that:

var matrix = shape.getTransform();

You can get new physical circle's center like that:

var matrix = circle._getRealMatrix(),
    shape  = circle.getShape(),
    center = dojox.gfx.matrix.multiplyPoint(matrix, shape.cx, shape.cy);

In simple cases when you know 100% that your application doesn't scale, skew, or rotate matrices you can simplify this code like that:

var matrix = circle._getRealMatrix(),
    shape  = circle.getShape(),
    center = {x: shape.cx + matrix.dx, y: shape.cy + matrix.dy};

If you know for sure that circle's parents (groups) don't use transformations, you can simplify it even more:

var matrix = circle.getTransform(),
    shape  = circle.getShape(),
    center = {x: shape.cx + matrix.dx, y: shape.cy + matrix.dy};

Bonus question: why Moveable doesn't modify a shape? Because it'll make it shape-specific ⇒ several versions of Moveable should be maintained ⇒ code bloat and support nightmare. Working with matrices makes it universal — you can use it to move groups simulating manipulations with complex objects.

Update: I added a description of _getRealMatrix() to dojox.gfx documentation.

On Wed, Aug 12, 2009 at 11:39 PM, Tak-po Li <[e-mail]> wrote:

 

Oop!  Here is the attachment.

 

Tak

On Wed, Aug 12, 2009 at 10:00 PM, Tak-po Li <[e-mail]> wrote:

 
I am new with gfx.  To experience line drag-and-drop with gfx, I did the following:
 
1. change 100 circles example to make 10 circles only.
2. draw 9 lines between them, from center to center.
3. change x1y1 or x2y2 of the lines that attached to the circle by
   using xxx.setShape("x1: xx, y1: yy")
 
It is not working.  The code is attached.  Please help.
Thanks,
 
Tak

 

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://dojotoolkit.org/docs/book
Forums: http://dojotoolkit.org/forum
Dojo-interest@...
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest