implement zoom-to-fit with viewBox instead of container width and height

add a test

Author: Kerry Chang

app/plugins/modules/wskflow/lib/fsm2graph.js

@@ -459,8 +459,8 @@ function ir2graph(ir, gm, id, prevId){	// ir and graph model
 }
 
 
-function fsm2graph(ir, containerId, w, h, acts){
-	//console.log(ir, containerId, w, h, act);
+function fsm2graph(ir, containerId, acts){
+	//console.log(ir, containerId, act);
 	taskIndex = 0;
 	activations = acts;
         visited = undefined; // see shell issue #602
@@ -551,7 +551,7 @@ function fsm2graph(ir, containerId, w, h, acts){
 
 	console.log('[wskflow] inserting DOM, calling graph2doms');
 
-	return graph2doms(graphData, containerId, w, h, activations);
+	return graph2doms(graphData, containerId, activations);
 
 }
 

app/plugins/modules/wskflow/lib/graph2doms.js

@@ -78,7 +78,7 @@ const wfColorAct = {
 }
 
 // need to fix center
-function graph2doms(JSONgraph, containerId, width, height, activations){
+function graph2doms(JSONgraph, containerId, activations){
 
 	let zoom = d3.behavior.zoom()
 	    .on("zoom", redraw);
@@ -263,10 +263,7 @@ function graph2doms(JSONgraph, containerId, width, height, activations){
    			elkData = data;           
 
    			// by default, the graph resizes to fit the size of the container i.e. zoom-to-fit, showing the entire graph. This solves #582. 
-			resizeToFit(width, height);
-
-			console.log(`[wskflow] svg canvas width=${width}, height=${height}`);
-
+			resizeToFit();
 
 		    let getNodes = function(graph) {
 		        var queue = [graph],
@@ -1148,27 +1145,25 @@ function graph2doms(JSONgraph, containerId, width, height, activations){
 	*/
 
         let applyAutoScale = true,	// if resizing the window will resize the graph. true by default.
-            customZoom = false
+            customZoom = false;
 
-	function resizeToFit(w, h){	// resizeToFit implements a zoom-to-fit behavior. 
-		width = w;
-		height = h;
-		let initScale = Math.min(width/elkData.width, height/elkData.height, 4),
-			initTransX = Math.max(width/2 - elkData.width*initScale/2, 0),
-			initTransY = 0;
-		zoom.translate([initTransX, initTransY]); 
-		zoom.scale(initScale);
-		container.attr('transform', `matrix(${initScale}, 0, 0, ${initScale}, ${initTransX}, ${initTransY})`);		
+	function resizeToFit(){	
+		// resizeToFit implements a zoom-to-fit behavior using viewBox. 
+		// it no longer requires knowing the size of the container
+		// disadventage is we cannot decide the max zoom level: it will always zoom to fit the entire container
+		ssvg.attr('viewBox', `0 0 ${elkData.width} ${elkData.height}`);		
+		container.attr('transform', '');
+		zoom.translate([0, 0]); 
+		zoom.scale(1);		
 	}
 
-	function pan(w, h){			// pan implements a behavior that zooms in the graph by 2x. 
-		width = w;
-		height = h;
+	function pan(){			// pan implements a behavior that zooms in the graph by 2x. 
 		let initScale = 2,
-			initTransX = width/2 - elkData.width*initScale/2,
+			initTransX = $('#wskflowSVG').width()/2 - elkData.width*initScale/2,
 			initTransY = 0; 
 		zoom.translate([initTransX, initTransY]); 
 		zoom.scale(initScale);
+		$('#wskflowSVG').removeAttr('viewBox');
 		container.attr('transform', `matrix(${initScale}, 0, 0, ${initScale}, ${initTransX}, ${initTransY})`);
 	}
 
@@ -1185,40 +1180,50 @@ function graph2doms(JSONgraph, containerId, width, height, activations){
          */
         const zoomToFit = useThisValue => {
 	        applyAutoScale = useThisValue !== undefined ? useThisValue : !applyAutoScale;	// toggle applyAutoScale
-                customZoom = false
+            customZoom = false
             notify()
             //console.error('ZTF', applyAutoScale, customZoom)
 		if(applyAutoScale){
 			// when clicking to switch from inactive to active, it resizes the graph to fit the window. #422
-			resizeToFit($('#wskflowSVG').width(), $('#wskflowSVG').height());
+			resizeToFit();
 		}
 		else{
 			// when clicking to switch from active to inactive, it resizes the graph to zoom in at graph entry by 2x. 
-			pan($('#wskflowSVG').width(), $('#wskflowSVG').height());
+			pan();
 		}
 	}
 
  	/* 
  		from https://github.com/OpenKieler/klayjs-d3/blob/master/examples/interactive/index.js 	
  		redraw is called by d3. d3.event.translate and d3.event.scale handle moving the graph and zooming. Note that when zooming, both event.translate and event.scale change to let the zoom center be the mouse cursor. Adding ohter values to event.translate and event.scale is likely to cause unwanted behaviors. 
  	*/
-	function redraw() {		
-		if(applyAutoScale || !customZoom){	// exit zoom-to-fit mode when the user uses the mouse to move or zoom the graph 
-		    applyAutoScale = false;
-                    customZoom = true
-                    notify()
+	function redraw() {	// redraw is called when there's mouse scrolling	
+		if(applyAutoScale || !customZoom){	// exit zoom-to-fit mode when the user uses the mouse to move or zoom the graph 				
+			applyAutoScale = false;
+			customZoom = true
+            notify()   
 		}
-     	$("#qtip").removeClass("visible") 
-        container.attr('transform', `translate(${d3.event.translate}) scale(${d3.event.scale})`);
+		container.attr('transform', `translate(${d3.event.translate}) scale(${d3.event.scale})`);
+     	$("#qtip").removeClass("visible")	
 	}	
-
 	// when zoom-to-fit is active, the graph resizes as the window resizes. #422
-	$(window).unbind('resize').resize(() => {
-	 	// auto-resize with window size works when the user haven't adjusted the zooming manually with scrolling. 
-	 	if(applyAutoScale){
-	 		resizeToFit($('#wskflowSVG').width(), $('#wskflowSVG').height());
-	 	}	 	
-	 	
+	$(window).unbind('resize').resize(e => {	 	
+
+	 	if(customZoom && $('#wskflowSVG').attr('viewBox') !== undefined){
+	 		// this code is called when the user is in custom zoom mode but the viewbox still exists
+	 		// remove viewbox here to stop auto-resizing, 
+	 		$('#wskflowSVG').removeAttr('viewBox');
+	 		// adjust transform to let the graph be in the same size and location 
+	 		let width = $('#wskflowSVG').width(),
+	 		height = $('#wskflowSVG').height(),
+	 		scale = Math.min(width/elkData.width, height/elkData.height),
+	 		initScale = scale * zoom.scale(),
+			initTransX = width/2 - elkData.width*scale/2 + zoom.translate()[0]*scale,
+			initTransY = height/2 - elkData.height*scale/2 + zoom.translate()[1]*scale;
+			zoom.translate([initTransX, initTransY]); 
+			zoom.scale(initScale);
+			container.attr('transform', `matrix(${initScale}, 0, 0, ${initScale}, ${initTransX}, ${initTransY})`);
+	 	}
 	});
 
 

app/plugins/modules/wskflow/lib/visualize.js

@@ -35,17 +35,6 @@ module.exports = (passedFsm, container, w, h, activations) => {
     }
 
     // create a copy - all annotations make by wskflow will not affect the original object.
-    let ir = JSON.parse(JSON.stringify(passedFsm)),
-        width, 
-        height;
-
-    if($('body').hasClass('sidecar-full-screen')){   
-        width = $(window).width()-2;               
-    }
-    else{   // not full screen
-        width = $(window).width()*0.6-2;                 
-    }
-    height = $('#sidecar').height()-$('.sidecar-header').height()-$('.sidecar-bottom-stripe').height()-2;
-
-    return fsm2graph(ir, container, width, height, activations); 
+    let ir = JSON.parse(JSON.stringify(passedFsm));
+    return fsm2graph(ir, container, activations); 
 }

tests/tests/passes/07/composer-vis-size.js

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2017 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const fs = require('fs'),
+      common = require('../../../lib/common'),
+      openwhisk = require('../../../lib/openwhisk'),
+      ui = require('../../../lib/ui'),
+      cli = ui.cli,
+      sidecar = ui.sidecar,
+      keys = ui.keys,      
+      assert = require('assert'),
+      //sharedURL = process.env.REDIS_URL || 'redis://127.0.0.1:6379',
+      {
+          input,
+          composerInput,
+          verifyNodeExists,
+          verifyNodeExistsById,
+          verifyEdgeExists,
+          verifyOutgoingEdgeExists,
+          verifyNodeLabelsAreSane,
+          verifyTheBasicStuff
+      } = require('../../../lib/composer-viz-util')
+
+/**
+ * Here starts the test
+ *
+ */
+describe('bring up the composer visualization when the sidecar is minimized', function() {
+    before(common.before(this))
+    after(common.after(this))
+
+    it('should have an active repl', () => this.app.client.waitForText('#openwhisk-api-host', 60000))
+
+    it('should show the if composition graph', () => cli.do('preview data/composer-source/if.js', this.app)
+      .then(verifyTheBasicStuff('if.js', 'composerLib'))  // verify basic things
+      .catch(common.oops(this)))
+
+    it('should minimize the sidecar', () => this.app.client.keys(keys.ESCAPE)
+      .then(() => sidecar.expectClosed(this.app))
+      .catch(common.oops(this)))
+
+    it('should show the if composition graph again', () => cli.do('app preview data/composer-source/if.js', this.app)
+      .then(() => sidecar.expectOpen(this.app))
+      .catch(common.oops(this)))
+
+    it('should use viewBox to let the graph fit the container', () => this.app.client.waitForExist('#wskflowSVG[viewBox]', 3000))
+
+
+});