fix rotate=90 graph attribute does not set the rotation when zooming …

…is enabled

Fixes first part of #251
originally reported as
https://github.com/magjac/graphviz-visual-editor/issues/214.

src/element.js

@@ -23,8 +23,16 @@ export function extractElementData(element) {
     var transform = element.node().transform;
     if (transform && transform.baseVal.numberOfItems != 0) {
         var matrix = transform.baseVal.consolidate().matrix;
-        datum.translation = {x: matrix.e, y: matrix.f};
-        datum.scale = matrix.a;
+        if (matrix.b == 0) {
+            // drawing orientation is portrait
+            datum.translation = { x: matrix.e, y: matrix.f };
+            datum.scale = matrix.a;
+        }
+        else {
+            // drawing orientation is landscape
+            datum.translation = { x: matrix.e, y: matrix.f };
+            datum.scale = matrix.c;
+        }
     }
     if (tag == 'ellipse') {
         datum.center = {

src/zoom.js

@@ -21,7 +21,18 @@ export function createZoomBehavior() {
     var graphvizInstance = this;
     function zoomed(event) {
         var g = d3.select(svg.node().querySelector("g"));
-        g.attr('transform', event.transform);
+        var transform = g.node().transform;
+        var matrix = transform.baseVal.consolidate().matrix;
+        if (matrix.b == 0) {
+            // drawing orientation is portrait
+            g.attr('transform', event.transform);
+        }
+        else {
+            // drawing orientation is landscape
+            const t = event.transform;
+            const transformStr = `rotate(-90) translate(${-t.y} ${t.x}) scale(${t.k})`;
+            g.attr('transform', transformStr);
+        }
         graphvizInstance._dispatch.call('zoom', graphvizInstance);
     }
 

test/simple-rotation-test.js

@@ -1,6 +1,5 @@
 import assert from "assert";
 import it from "./it.js";
-import { it_xfail } from "./it.js";
 import jsdom from "./jsdom.js";
 import * as d3 from "d3-selection";
 import * as d3_graphviz from "../index.js";
@@ -26,7 +25,7 @@ it("Simple rendering an SVG from graphviz DOT with rotate=90 and zoom disabled."
     assert.equal(d3.select('#graph0').attr("transform"), "scale(1 1) rotate(-90) translate(-58 112)");
 });
 
-it_xfail("Simple rendering an SVG from graphviz DOT with rotate=90 and zoom enabled.", async () => {
+it("Simple rendering an SVG from graphviz DOT with rotate=90 and zoom enabled.", async () => {
     var window = global.window = jsdom('<div id="graph"></div>');
     global.document = window.document;
 

test/zoom-rotation-test.js

@@ -7,7 +7,7 @@ import * as d3_transition from "d3-transition";
 import * as d3_zoom from "d3-zoom";
 import * as d3_selection from "d3-selection";
 
-it_xfail("resetZoom resets the zoom transform to the original transform when rotate=90.", async () => {
+it("resetZoom resets the zoom transform to the original transform when rotate=90.", async () => {
     var window = global.window = jsdom('<div id="graph"></div>');
     global.document = window.document;
     var graphviz;
@@ -90,7 +90,7 @@ it_xfail("resetZoom resets the zoom transform to the original transform when rot
 
 });
 
-it_xfail("resetZoom resets the zoom transform to the original transform of the latest rendered graph when rotate=90.", async () => {
+it("resetZoom resets the zoom transform to the original transform of the latest rendered graph when rotate=90.", async () => {
     var window = global.window = jsdom('<div id="graph"></div>');
     global.document = window.document;
     var graphviz;