Skip to content
Browse files

switching to the new, simpler, 1 canvas for all fluo

  • Loading branch information...
1 parent 6e0a168 commit 4d3959d2cd5e8f9c801bf7d67a2b1a3c4abb9507 @jmettraux committed Jul 7, 2008
Showing with 520 additions and 76 deletions.
  1. +3 −12 experimental/can.html
  2. +11 −58 lib/ruote-fluo.rb
  3. +506 −0 public/js/fluo-can.js
  4. +0 −6 public/pdef_ttt.rb
View
15 experimental/can.html
@@ -404,21 +404,12 @@
var HANDLERS = {
'process-definition': ProcessDefinitionHandler,
'sequence': VerticalHandler,
- //'concurrence': ConcurrenceHandler,
+ 'concurrence': ConcurrenceHandler,
'if': HorizontalHandler
//'participant': ParticipantHandler
};
- function newCan (id, width, height) {
- var can = document.createElement('canvas');
- can.id = id;
- can.setAttribute('width', width);
- can.setAttribute('height', height);
- return can;
- }
-
function renderExpression (context, exp, expid) {
- if ( ! expid) expid = "0";
return getHandler(exp).render(context, exp, expid);
}
@@ -496,7 +487,7 @@
//c.stroke();
c.translate(300, 1);
-FluoCan.renderExpression(c, flow1);
+FluoCan.renderExpression(c, flow1, '0');
var cfluo = FluoCan.newCan('fluo', 600, 400);
document.body.appendChild(cfluo);
@@ -513,7 +504,7 @@
c.translate(4, 200);
c.rotate(-Math.PI/2);
c.fluoVertical = false;
-FluoCan.renderExpression(c, flow1);
+FluoCan.renderExpression(c, flow1, '0');
</script>
View
69 lib/ruote-fluo.rb
@@ -16,13 +16,10 @@
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <script src="/js/prototype.js?nocache=#{Time.now.to_f}"></script>
- <script src="/js/fluo-canvas.js?nocache=#{Time.now.to_f}"></script>
- <script src="/js/fluo.js?nocache=#{Time.now.to_f}"></script>
+ <script src="/js/fluo-can.js?nocache=#{Time.now.to_f}"></script>
<script src="/js/fluo-dial.js?nocache=#{Time.now.to_f}"></script>
<script src="/js/fluo-tred.js?nocache=#{Time.now.to_f}"></script>
- <link href="/css/fluo.css?nocache=#{Time.now.to_f}" rel="Stylesheet" type="text/css" />
<link href="/css/fluo-dial.css?nocache=#{Time.now.to_f}" rel="Stylesheet" type="text/css" />
<link href="/css/fluo-tred.css?nocache=#{Time.now.to_f}" rel="Stylesheet" type="text/css" />
@@ -35,7 +32,7 @@
</style>
</head>
-<body onresize="Fluo.tagExpressionsWithWorkitems('fluo', [ '#{@wi}' ]);">
+<body>
<div>
<div style="float:left; width: 49%">
@@ -49,31 +46,23 @@
var tout = document.getElementById("tred__out");
Tred.onChange = function (jsonTree) {
- Fluo.renderExpression('fluo', null, jsonTree);
+ FluoCan.renderExpression('fluo', jsonTree);
}
</script>
</div>
-<div style="float:left; width: 49%">
+<div id="leftpane" style="float:left; width: 49%">
- <div id="fluo" style="width: 100%">
- </div>
- <script>
- Fluo.renderExpression('fluo', null, #{@prep});
- Fluo.tagExpressionsWithWorkitems('fluo', [ '#{@wi}' ]);
- </script>
-
- <br/>
- <br/>
- <!--
- <div class="fluo_text">
- <a href="#" onclick="Fluo.toggleMinorExpressions('fluo'); return false;">show / hide minor expressions</a> |
- <a href="fluo?pdef=#{request['pdef']}">graph only</a>
- </div>
- -->
+ <canvas id="fluo" width="500" height="800"></canvas>
</div>
</div>
+<script>
+ var c = document.getElementById('fluo').getContext("2d");
+ FluoCan.renderExpression(c, #{@prep});
+ //Fluo.tagExpressionsWithWorkitems('fluo', [ '#{@wi}' ]);
+</script>
+
</body>
</html>
@@ -105,42 +94,6 @@
}
end
-get "/fluo" do
-
- prepare
-
- %{
-<html>
-<head>
- <title>fluo bench</title>
-
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-
- <script src="/js/prototype.js?nocache=#{Time.now.to_f}"></script>
- <script src="/js/fluo-canvas.js?nocache=#{Time.now.to_f}"></script>
- <script src="/js/fluo.js?nocache=#{Time.now.to_f}"></script>
-
- <link href="/css/fluo.css?nocache=#{Time.now.to_f}" rel="Stylesheet" type="text/css" />
-</head>
-<body onresize="Fluo.tagExpressionsWithWorkitems('fluo', [ '#{@wi}' ]);">
-<div id="fluo" style="width: 50%">
-</div>
-<script>
- Fluo.renderExpression('fluo', null, #{@prep});
- Fluo.tagExpressionsWithWorkitems('fluo', [ '#{@wi}' ]);
-</script>
-
-<br/>
-<br/>
-<div class="fluo_text">
- <a href="#" onclick="Fluo.toggleMinorExpressions('fluo'); return false;">show / hide minor expressions</a>
-</div>
-</body>
-</html>
- }
-end
-
-
def prepare
@pdef = request['pdef'] || 'pdef.rb'
View
506 public/js/fluo-can.js
@@ -0,0 +1,506 @@
+
+/*
+ * OpenWFEru - open source ruby workflow and bpm engine
+ * (c) 2007-2008 OpenWFE.org
+ *
+ * OpenWFEru is freely distributable under the terms
+ * of a BSD-style license.
+ * For details, see the OpenWFEru web site: http://openwferu.rubyforge.org
+ *
+ * Made in Japan
+ *
+ * John Mettraux
+ * Juan-Pedro Paredes
+ */
+
+var FluoCanvas = function() {
+
+ //
+ // draws centered text
+ //
+ function drawText (c, text, bwidth, bheight) {
+
+ c.save();
+ if (c.fluoVertical == false) {
+ c.translate(bwidth/2, bheight/2);
+ c.rotate(Math.PI/2);
+ }
+ c.mozTextStyle = "14px helvetica";
+ var width = c.mozMeasureText(text);
+ c.translate(-(width/2), 17);
+ c.mozDrawText(text);
+ c.translate(+(width/2), -17);
+ c.restore();
+ }
+
+ function drawArrow (c, length) {
+ var w = 4;
+ c.beginPath();
+ c.moveTo(0, 0);
+ c.lineTo(0, length);
+ c.stroke();
+ c.beginPath();
+ c.moveTo(0, length);
+ c.lineTo(-w, length-w*2);
+ c.lineTo(w, length-w*2);
+ c.lineTo(0, length);
+ c.fill();
+ }
+
+ function drawRoundedRect (c, width, height, radius) {
+ var w2 = width / 2;
+ c.beginPath();
+ c.moveTo(0, 0);
+ c.lineTo(w2 - radius, 0);
+ c.quadraticCurveTo(w2, 0, w2, radius);
+ c.lineTo(w2, height - radius);
+ c.quadraticCurveTo(w2, height, w2 - radius, height);
+ c.lineTo(-w2 + radius, height);
+ c.quadraticCurveTo(-w2, height, -w2, height - radius);
+ c.lineTo(-w2, radius);
+ c.quadraticCurveTo(-w2, 0, -w2 + radius, 0);
+ c.lineTo(0, 0);
+ c.stroke();
+ }
+
+ function drawQuadraticPath (c, x, y, radius) {
+ var xradius = radius;
+ if (x < 0) xradius = -radius;
+ var yradius = radius;
+ if (y < 0) yradius = -radius;
+ c.beginPath();
+ c.moveTo(0, 0);
+ c.lineTo(x - xradius, 0);
+ c.quadraticCurveTo(x, 0, x, yradius);
+ c.lineTo(x, y);
+ c.stroke();
+ }
+
+ function drawDiamond (c, height) {
+ var h = height / 2;
+ for (var i = 0; i < 2; i++) {
+ c.beginPath();
+ c.moveTo(0, 0);
+ c.lineTo(h, h);
+ c.lineTo(0, height);
+ c.lineTo(-h, h);
+ c.lineTo(0, 0);
+ if (i == 0) {
+ c.save();
+ c.fillStyle = 'rgb(255, 255, 255)';
+ c.fill();
+ c.restore();
+ }
+ else {
+ c.stroke();
+ }
+ }
+ }
+
+ function drawParaDiamond (c, height) {
+ drawDiamond(c, height);
+ c.save();
+ c.lineWidth = 2.5;
+ var l = height / 4;
+ c.beginPath();
+ c.moveTo(0, l); c.lineTo(0, l * 3);
+ c.stroke();
+ c.beginPath();
+ c.moveTo(-l, l * 2); c.lineTo(l, l * 2);
+ c.stroke();
+ c.restore();
+ }
+
+ return {
+ drawText: drawText,
+ drawArrow: drawArrow,
+ drawRoundedRect: drawRoundedRect,
+ drawQuadraticPath: drawQuadraticPath,
+ drawDiamond: drawDiamond,
+ drawParaDiamond: drawParaDiamond
+ };
+}();
+
+var FluoCan = function() {
+
+ //
+ // MISC METHODS
+
+ function childrenMax (c, exp, funcname) {
+ var max = 0;
+ for (var i = 0; i < exp[2].length; i++) {
+ var val = FluoCan[funcname](c, exp[2][i]);
+ if (val > max) max = val;
+ }
+ return max;
+ }
+
+ function childrenSum (c, exp, funcname) {
+ var sum = 0;
+ for (var i = 0; i < exp[2].length; i++) {
+ sum += FluoCan[funcname](c, exp[2][i]);
+ }
+ return sum;
+ }
+
+ function attributesMaxWidth (c, exp, title) {
+ var max = 0;
+ if (title) max = c.mozMeasureText(title);
+ for (var attname in exp[1]) {
+ var text = ""+attname+": "+exp[1][attname];
+ var l = c.mozMeasureText(text);
+ if (l > max) max = l;
+ }
+ return max;
+ }
+
+ function attributesCount (exp) {
+ var count = 0;
+ for (var k in exp[1]) { count++; }
+ return count;
+ }
+
+ function drawAttributes (c, exp, expname, width, height) {
+ if (expname) {
+ FluoCanvas.drawText(c, exp[0], width, height);
+ if (c.fluoVertical == false) c.translate(-20, 0);
+ else c.translate(0, 20);
+ }
+ for (var attname in exp[1]) {
+ FluoCanvas.drawText(c, attname+": "+exp[1][attname], width, height);
+ if (c.fluoVertical == false) c.translate(-20, 0);
+ else c.translate(0, 20);
+ }
+ }
+
+ //
+ // returns a copy of a handler, some kind of static inheritance
+ //
+ function copyHandler (h) {
+ var result = {};
+ for (var k in h) result[k] = h[k];
+ return result;
+ }
+
+ //
+ // EXPRESSION HANDLERS
+
+ var GenericHandler = {
+ render: function (c, exp, expid) {
+ var width = getWidth(c, exp);
+ var height = getHeight(c, exp);
+ FluoCanvas.drawRoundedRect(c, width, height, 8);
+ c.save();
+ drawAttributes(c, exp, true, width, height);
+ c.restore();
+ },
+ getRealHeight: function (c, exp) {
+ return 7 + (1 + attributesCount(exp)) * 20;
+ },
+ getRealWidth: function (c, exp) {
+ return 10 + attributesMaxWidth(c, exp, exp[0]);
+ },
+ getHeight: function (c, exp) {
+ if (c.fluoVertical == false) return this.getRealWidth(c, exp);
+ return this.getRealHeight(c, exp);
+ },
+ getWidth: function (c, exp) {
+ if (c.fluoVertical == false) return this.getRealHeight(c, exp);
+ return this.getRealWidth(c, exp);
+ }
+ };
+
+ var GenericWithChildrenHandler = {
+ render: function (c, exp, expid) {
+ var width = this.getWidth(c, exp);
+ var height = this.getHeight(c, exp);
+ var attWidth = attributesMaxWidth(c, exp, exp[0]) + 7;
+ var attHeight = attributesCount(exp) * 20;
+ if (c.fluoVertical == false) {
+ var w = attWidth;
+ attWidth = attHeight;
+ attHeight = w;
+ }
+ FluoCanvas.drawRoundedRect(c, width, height, 8);
+ c.save();
+ c.translate(-width/2 + attWidth/2, 0);
+ if (c.fluoVertical == false) c.translate(attHeight/2, 0);
+ drawAttributes(c, exp, true, attWidth, attHeight);
+ c.restore();
+ c.save();
+ c.translate(width/2 - childrenMax(c, exp, 'getWidth')/2 - 3, 5);
+ for (var i = 0; i < exp[2].length; i++) {
+ var child = exp[2][i];
+ renderExp(c, child, expid + '.' + i);
+ c.translate(0, 7 + FluoCan.getHeight(c, child));
+ }
+ c.restore();
+ },
+ getHeight: function (c, exp) {
+ return (exp[2].length + 1) * 7 + childrenSum(c, exp, 'getHeight');
+ },
+ getWidth: function (c, exp) {
+ return attributesMaxWidth(c, exp, exp[0]) + 14 + childrenMax(c, exp, 'getWidth');
+ }
+ };
+
+ var TextHandler = {
+ render: function (c, exp, expid) {
+ var h = getHeight(c, exp);
+ var w = getWidth(c, exp);
+ FluoCanvas.drawText(c, this.getText(exp), h, w);
+ },
+ getText: function (exp) {
+ var t = exp[0];
+ for (var attname in exp[1]) {
+ t += (' ' + attname + ': "' + exp[1][attname] + '"');
+ }
+ return t;
+ },
+ getHeight: function (c, exp) {
+ return 20;
+ },
+ getWidth: function (c, exp) {
+ return c.mozMeasureText(this.getText(exp));
+ }
+ };
+
+ var VerticalHandler = {
+ render: function (c, exp, expid) {
+ c.save();
+ var children = exp[2];
+ for (var i = 0; i < children.length; i++) {
+ var child = children[i];
+ renderExp(c, child, expid + "." + i);
+ c.translate(0, FluoCan.getHeight(c, child));
+ if (i < children.length - 1) {
+ FluoCanvas.drawArrow(c, 20);
+ c.translate(0, 20);
+ }
+ }
+ c.restore();
+ },
+ getHeight: function (c, exp) {
+ return (exp[2].length - 1) * 20 + childrenSum(c, exp, 'getHeight');
+ },
+ getWidth: function (c, exp) {
+ return childrenMax(c, exp, 'getWidth');
+ }
+ };
+
+ var HorizontalHandler = {
+ render: function (c, exp, expid) {
+ var dist = this.computeDistribution(c, exp);
+ var childrenHeight = this.getChildrenHeight(c, exp);
+ this.renderHeader(c, exp, dist);
+ c.save();
+ c.translate(0, this.getHeaderHeight(c, exp));
+ for (var i=0; i < exp[2].length; i++) {
+ var child = exp[2][i];
+ c.save();
+ c.translate(dist[i], 0);
+ this.renderChild(c, child, expid + '.' + i, childrenHeight);
+ c.restore();
+ }
+ c.restore();
+ this.renderFooter(c, exp, dist, childrenHeight);
+ },
+ getHeaderHeight: function (c, exp) {
+ if (c.fluoVertical == false) return 23 + attributesMaxWidth(c, exp);
+ return 23 + attributesCount(exp) * 20;
+ },
+ getChildrenHeight: function (c, exp) {
+ return childrenMax(c, exp, 'getHeight');
+ },
+ getHeight: function (c, exp) {
+ return this.getHeaderHeight(c, exp) + this.getChildrenHeight(c, exp) + 10;
+ },
+ getWidth: function (c, exp) {
+ return (exp[2].length - 1) * 3 + childrenSum(c, exp, 'getWidth');
+ },
+ computeDistribution: function (c, exp) {
+ var totalWidth = this.getWidth(c, exp);
+ var offset = -totalWidth/2;
+ var dist = new Array(exp[2].length);
+ for (var i = 0; i < exp[2].length; i++) {
+ var cWidth = FluoCan.getWidth(c, exp[2][i]);
+ dist[i] = offset + cWidth / 2;
+ offset += (cWidth + 3);
+ }
+ return dist;
+ },
+ renderHeader: function (c, exp, distribution) {
+ var hheight = this.getHeaderHeight(c, exp) - 10;
+ c.save();
+ c.translate(0, 10);
+ FluoCanvas.drawQuadraticPath(
+ c, distribution[0], hheight, 8);
+ FluoCanvas.drawQuadraticPath(
+ c, distribution[distribution.length-1], hheight, 8);
+ for (var i = 1; i < distribution.length - 1; i++) {
+ c.beginPath();
+ c.moveTo(distribution[i], 0);
+ c.lineTo(distribution[i], hheight);
+ c.stroke();
+ }
+ c.restore();
+ this.renderHeaderSymbol(c);
+ this.renderHeaderLabel(c, exp);
+ },
+ renderHeaderSymbol: function (c) {
+ FluoCanvas.drawDiamond(c, 20);
+ },
+ renderHeaderLabel: function (c, exp) {
+ var width = attributesMaxWidth(c, exp);
+ var height = attributesCount(exp) * 20;
+ if (c.fluoVertical == false) {
+ var w = width;
+ width = height;
+ height = w;
+ }
+ c.save();
+ c.translate(0, 20);
+ c.save();
+ c.fillStyle = 'rgb(255, 255, 255)';
+ c.fillRect(-width/2, 0, width, height);
+ c.restore();
+ drawAttributes(c, exp, false, width, height);
+ c.restore();
+ },
+ renderChild: function (c, exp, expid, childrenHeight) {
+ var cheight = FluoCan.getHeight(c, exp);
+ renderExp(c, exp, expid);
+ c.beginPath();
+ c.moveTo(0, cheight); c.lineTo(0, childrenHeight);
+ c.stroke();
+ },
+ renderFooter: function (c, exp, distribution) {
+ var childrenHeight = this.getChildrenHeight(c, exp);
+ c.save();
+ c.translate(
+ 0, this.getHeaderHeight(c, exp) + this.getChildrenHeight(c, exp) + 10);
+ FluoCanvas.drawQuadraticPath(
+ c, distribution[0], -10, 8);
+ FluoCanvas.drawQuadraticPath(
+ c, distribution[distribution.length-1], -10, 8);
+ for (var i = 1; i < distribution.length - 1; i++) {
+ c.beginPath();
+ c.moveTo(distribution[i], 0);
+ c.lineTo(distribution[i], -10);
+ c.stroke();
+ }
+ c.restore();
+ },
+ renderFooterDiamond: function (c) {
+ }
+ };
+
+ var ConcurrenceHandler = copyHandler(HorizontalHandler);
+ ConcurrenceHandler.renderHeaderSymbol = function (c) {
+ FluoCanvas.drawParaDiamond(c, 20);
+ };
+
+ /*
+ var ParticipantHandler = {
+ render: function (c, exp, expid) {
+ var width = getWidth(c, exp);
+ var height = getHeight(c, exp);
+ FluoCanvas.drawRoundedRect(c, width, height, 8);
+ FluoCanvas.drawText(c, exp[1]['ref'], width, height);
+ },
+ getHeight: function (c, exp) {
+ if (c.fluoVertical == false) return 80;
+ return 50;
+ },
+ getWidth: function (c, exp) {
+ if (c.fluoVertical == false) return 50;
+ return 80;
+ }
+ };
+ */
+
+ var HANDLERS = {
+ //'participant': ParticipantHandler
+ 'sequence': VerticalHandler,
+ 'concurrence': ConcurrenceHandler,
+ 'if': HorizontalHandler,
+ 'set': TextHandler
+ };
+
+ function newCan (id, width, height) {
+ var can = document.createElement('canvas');
+ can.id = id;
+ can.setAttribute('width', width);
+ can.setAttribute('height', height);
+ return can;
+ }
+
+ function renderExpression (context, exp) {
+
+ context = resolveContext(context);
+ neutralizeContext(context);
+
+ context.save();
+
+ context.clearRect(0, 0, c.canvas.width, c.canvas.height);
+
+ context.translate(c.canvas.width/2, 0);
+
+ renderExp(context, exp, '0');
+
+ context.restore();
+ }
+
+ function renderExp (c, exp, expid) {
+ getHandler(exp).render(c, exp, expid);
+ }
+
+ //function clear (c) {
+ // c = resolveContext(c);
+ // c.clearRect(0, 0, c.canvas.width, c.canvas.height);
+ //}
+
+ function resolveContext (c) {
+ if (c.translate != null) return c;
+ return document.getElementById(c).getContext('2d');
+ }
+
+ function neutralizeContext (c) {
+ if (window.navigator.userAgent.match(/Firefox/)) return;
+ c.mozDrawText = function (t) {
+ // do nothing
+ };
+ c.mozMeasureText = function (t) {
+ return t.length * 5;
+ };
+ }
+
+ //
+ // returns the raw height of an expression
+ //
+ function getHeight (c, exp) {
+ return getHandler(exp).getHeight(c, exp);
+ }
+
+ //
+ // return the raw width of an expression
+ //
+ function getWidth (c, exp) {
+ return getHandler(exp).getWidth(c, exp);
+ }
+
+ function getHandler (exp) {
+ var h = HANDLERS[exp[0]];
+ if (h != null) return h;
+ if (exp[2].length > 0) return GenericWithChildrenHandler;
+ return GenericHandler;
+ }
+
+ return {
+ newCan: newCan,
+ renderExpression: renderExpression,
+ //clear: clear,
+ getHeight: getHeight,
+ getWidth: getWidth
+ };
+}();
View
6 public/pdef_ttt.rb
@@ -1,6 +0,0 @@
-
-engine.register_participant "Tang" do |workitem|
- puts "Hello, my name is Tang and I just received some work..."
- workitem.fields["total_price"] = 12000 * workitem.fields["count"]
-end
-

0 comments on commit 4d3959d

Please sign in to comment.
Something went wrong with that request. Please try again.