Opened 12 years ago

Closed 12 years ago

#3860 closed defect (fixed)

dojox.gfx.matrix.scaleAt issue in IE

Reported by: guest Owned by: Eugene Lazutkin
Priority: high Milestone: 1.0
Component: DojoX GFX Version: 0.9
Keywords: Cc: jayant.b.sai@…
Blocked By: Blocking:

Description

So this issue is a little difficult to explain, so I will try to explain through reproducible steps. The code below is the test page.

In this code:

  1. I create a surface and add a root group node.
  2. A Rect is added to the root.
  3. Clicking 'Scale' applies a dojox.gfx.matrix.scaleAt(2, { x:150, y:150 });
  4. Clicking 'Position' displays left,top,width,height of root.rawNode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>dojox.gfx.matrix.scaleAt</title>
    <script type="text/javascript" src="../../../js/dojo-0.9.0beta/dojo/dojo.js.uncompressed.js"></script>
    <script type="text/javascript">
      dojo.require("dojox.gfx");

      var surface, root, rect;
      function init() {
        surface = dojox.gfx.createSurface(dojo.byId("div"), 300, 300);
        root = surface.createGroup();
        rect = root.createRect({ x:100, y:100, width:100, height:100 });
        rect.setFill([255, 0, 0]);
      }

      function scale() {
        root.applyTransform(dojox.gfx.matrix.scaleAt(2, { x:150, y:150 }));
      }

      function position() {
        if (dojo.isIE) {
          var style = root.rawNode.currentStyle;
          alert(style.left + ", " + style.top + ", " + style.width + ", " + style.height);
        }
        else {
          alert(dojo.toJson(root.getTransform()));
        }
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body>
    <input type="button" value="Scale" onclick="scale()" />
    <input type="button" value="Position" onclick="position()" />
    <div id="div" style="width:300px; height:300px; border:1px solid #000; overflow:hidden;"></div>
  </body>
</html>

Steps:

  1. Copy/paste the code above to an html file & open in IE 6/7
  2. Click Position to view the position of the root's rawNode. Alerts (101px,101px,75pt,75pt)
  3. Click Scale & Position again. Alerts (51px,51px,150pt,150pt)
  4. Click Scale again. First you will notice that the box overflows outside the surface (thats already a ticket #3657). But now clicking Position alerts (0px,0px,300pt,300pt).

Henceforth, clicking Scale & then position will change the width & height, but not the left & top, it is always 0px,0px.

There are 2 issues here:

  1. The style left/top should be negative.
  2. The width & height should probably be applied in pixels & not points.

Additionally, if I add 'position:relative;' to the div's style, the overflow problem is resolved, but the position persists.

Attachments (2)

dojox_gfx_scaleAt.html​ (1.4 KB) - added by guest 12 years ago.
Code sample
dojox_gfx_scaleAt_mod.html​ (1.4 KB) - added by Eugene Lazutkin 12 years ago.
modified test file to accomodate the latest changes

Download all attachments as: .zip

Change History (6)

comment:1 Changed 12 years ago by Eugene Lazutkin

Status: new → assigned

VML does have some weird overflow problems. I am going to investigate it during my dojox.gfx marathon. Some random notes:

  1. VML reports a lot of stuff in points rather than pixels. It does so even if we use any other units when setting properties. There is no way to change this behavior. We provide a convenience function to recalculate anything to pixels: dojox.gfx.normalizedLength().
  2. I am not sure it is wise to access the rawNode directly for this kind of things. Probably we need to have an API for that. To wit: some renderers may not have rawNode at all, if their DOM is separate from the HTML DOM.
  3. If it is possible, please attach files to the ticket rather than including it textually. You cannot attach a file while creating a ticket in the Trac, but you can attach a file to existing tickets. So it is a two-step process:
    1. Create a ticket with description.
    2. Attach necessary files. You can describe them while attaching.

comment:2 Changed 12 years ago by Eugene Lazutkin

Milestone: → 0.9

Changed 12 years ago by guest

Attachment: dojox_gfx_scaleAt.html​ added

Code sample

comment:3 Changed 12 years ago by dylan

Milestone: 0.9 → 1.0

Pushing to 1.0... not sure what we can do (yet) to fix this to work with VML.

Changed 12 years ago by Eugene Lazutkin

Attachment: dojox_gfx_scaleAt_mod.html​ added

modified test file to accomodate the latest changes

comment:4 Changed 12 years ago by Eugene Lazutkin

Resolution: → fixed
Status: assigned → closed

I modified the test file to accommodate the latest changes. It is a minor edit. Now it behaves as expected.

Notes:

  • remove DOCTYPE --- VML misbehaves with [X]HTML documents. Actually VML predates XHTML, and was never designed to work with it. :-(
  • accessing nodes directly using rawNode is bad --- VML reports some bogus values, while the picture is correct. And it will not work with Silverlight and some other upcoming renderers.
Note: See TracTickets for help on using tickets.