fix rotate=90 graph attribute does not set the rotation during transi…

…tion Second and final fix that fixes #251 originally reported as https://github.com/magjac/graphviz-visual-editor/issues/214.
magjac · Oct 10, 2024 · 1bf24ae · 1bf24ae
1 parent a3fd4fd
commit 1bf24ae
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+* rotate=90 graph attribute does not set the rotation #251
+
 ## [5.6.0] – 2024-08-18
 
 ### Changed

diff --git a/src/element.js b/src/element.js
@@ -27,11 +27,13 @@ export function extractElementData(element) {
             // drawing orientation is portrait
             datum.translation = { x: matrix.e, y: matrix.f };
             datum.scale = matrix.a;
+            datum.rotation = 0;
         }
         else {
             // drawing orientation is landscape
             datum.translation = { x: matrix.e, y: matrix.f };
             datum.scale = matrix.c;
+            datum.rotation = -90;
         }
     }
     if (tag == 'ellipse') {

diff --git a/src/graphviz.js b/src/graphviz.js
@@ -138,6 +138,7 @@ export function Graphviz(selection, options) {
     this._images = [];
     this._translation = undefined;
     this._scale = undefined;
+    this._rotation = undefined;
     this._eventTypes = [
         'initEnd',
         'start',

diff --git a/src/render.js b/src/render.js
@@ -289,8 +289,9 @@ function _render(callback) {
                                         .tween("attr.transform", function() {
                                             var node = this;
                                             return function (t) {
-                                                const fromTransform = zoomTransform(graphvizInstance._zoomSelection.node()).toString();
-                                                const toTransform = getTranslatedZoomTransform.call(graphvizInstance, element).toString();
+                                                const rotateStr = ` rotate(${data.rotation})`;
+                                                const fromTransform = zoomTransform(graphvizInstance._zoomSelection.node()).toString() + rotateStr;
+                                                const toTransform = getTranslatedZoomTransform.call(graphvizInstance, element).toString() + rotateStr;
                                                 const interpolationFunction = interpolateTransformSvg(fromTransform, toTransform);
                                                 node.setAttribute("transform", interpolationFunction(t));
                                             };

diff --git a/test/dot-data-test.js b/test/dot-data-test.js
@@ -69,6 +69,7 @@ var basic_data = {
                 "y": 112
             },
             "scale": 1,
+            "rotation": 0,
             "parent": "[Circular ~]",
             "children": [
                 {