Menu
▾
▴
[Openautomation-svn] SF.net SVN: openautomation:[259] PyWireGate/trunk/logic_editor
|
From: <ma...@us...> - 2011-01-16 21:08:53
|
Revision: 259
http://openautomation.svn.sourceforge.net/openautomation/?rev=259&view=rev
Author: mayerch
Date: 2011-01-16 21:08:47 +0000 (Sun, 16 Jan 2011)
Log Message:
-----------
* Added new block: sum
* Added ability to have non horizontal inports and outports
* Added ability for custom funtion that calculates the port position
* Changed some coordinates from Array [x,y] towards Object {x:x,y:y}
Modified Paths:
--------------
PyWireGate/trunk/logic_editor/backendCommunication.js
PyWireGate/trunk/logic_editor/gle/gle.block.js
PyWireGate/trunk/logic_editor/gle/gle.connection.js
PyWireGate/trunk/logic_editor/logicEditor.js
Modified: PyWireGate/trunk/logic_editor/backendCommunication.js
===================================================================
--- PyWireGate/trunk/logic_editor/backendCommunication.js 2011-01-16 15:39:18 UTC (rev 258)
+++ PyWireGate/trunk/logic_editor/backendCommunication.js 2011-01-16 21:08:47 UTC (rev 259)
@@ -95,8 +95,8 @@
'mask': [
{ 'type': 'move', 'x': 0.999, 'y': 0.5 }, // just to show what's possible
{ 'type': 'line', 'x': 0 , 'y': 0.999 },
- { 'type': 'line', 'x': 0 , 'y': 0 }
- // auto close
+ { 'type': 'line', 'x': 0 , 'y': 0 },
+ { 'type': 'close' }
],
'maskOptions': {
'showLabel': false
@@ -119,6 +119,79 @@
'type': 'float'
}
]
+ },
+ 'sum': {
+ 'width': 100,
+ 'height': 100,
+ 'rotation': 0,
+ 'flip': false,
+ 'color': [0.0, 0.0, 0.0],
+ 'background': [1.0, 1.0, 1.0],
+ 'mask': [
+ { 'type': 'move', 'x': 0 , 'y': 0.495 },
+ { 'type': 'arc' , 'x': 0 , 'y': 0.01 ,
+ 'rx': 50, 'ry': 50, 'xRotate':0, 'large':true, 'clockwise': true,
+ 'relative': true
+ },
+ { 'type': 'close' }
+ ],
+ 'maskOptions': {
+ 'showLabel': true,
+ 'inPortPos': function( nr, block, options, parameter ){
+ var x = block.getX();
+ var y = block.getY();
+ var width = block.getWidth();
+ var height = block.getHeight();
+ var type = parameter.inputs.split('');
+ if( type.length < 1 )
+ return [
+ { x: x , y: y + height / 2 },
+ { x: x-10, y: y + height / 2 }
+ ];
+ for( var i = 0; i < type.length; i++ )
+ {
+ if( type[i] != '|' )
+ {
+ if( nr == 0 )
+ {
+ var angle = Math.PI * (0.5 + i / (type.length-1));
+ var s = Math.sin( angle );
+ var c = Math.cos( angle );
+ return [ { x: x + width * 0.5 * ( 1 + c ),
+ y: y + height * 0.5 * ( 1 - s ) },
+ { x: x + width * 0.5 + (width +5) * 0.5 * c,
+ y: y + height * 0.5 - (height+5) * 0.5 * s }
+ ];
+ }
+ nr--;
+ }
+ }
+ return [ {x: undefined, y: undefined}, {x: undefined, y: undefined} ];
+ }
+ },
+ 'inPorts': [
+ {
+ 'name': '+',
+ 'type': 'event'
+ },
+ {
+ 'name': '+',
+ 'type': 'event'
+ }
+ ],
+ 'outPorts': [
+ {
+ 'name': 'out',
+ 'type': 'event'
+ }
+ ],
+ 'parameters': [
+ {
+ 'name': 'inputs',
+ 'type': 'string',
+ 'default': '|++'
+ }
+ ]
}
}
};
Modified: PyWireGate/trunk/logic_editor/gle/gle.block.js
===================================================================
--- PyWireGate/trunk/logic_editor/gle/gle.block.js 2011-01-16 15:39:18 UTC (rev 258)
+++ PyWireGate/trunk/logic_editor/gle/gle.block.js 2011-01-16 21:08:47 UTC (rev 259)
@@ -46,6 +46,7 @@
var inPorts = type.inPorts || [];
var outPorts = type.outPorts || [];
var parameters = type.parameters || {};
+ var parameter = type.parameter || createParameter( type.parameters );
var canvas = svg || $('#editor').svg('get');
var addEvent = interactive !== undefined ? interactive : true;
@@ -79,7 +80,8 @@
};
// Draw the body
- var body = canvas.group( g, {'transform':'translate(6,1)'} );
+ //var body = canvas.group( g, {'transform':'translate(6,1)'} );
+ var body = canvas.group( g );
if( mask )
{
var path = canvas.createPath();
@@ -97,9 +99,17 @@
case 'line':
path.line( sx, sy );
break;
+
+ case 'arc':
+ path.arc( obj.rx, obj.ry, obj.xRotate, obj.large, obj.clockwise, sx, sy, obj.relative );
+ break;
+
+ case 'close':
+ path.close();
+ break;
}
}
- canvas.path( body, path.close(), style );
+ canvas.path( body, path, style );
} else {
canvas.rect( body, 0, 0, width, height, style );
}
@@ -112,25 +122,45 @@
// Draw the inports
var inPortsLength = inPorts.length;
$.each( inPorts, function(i){
- var y = 1 + height * (0.5 + i)/inPortsLength;
+ var p = that.inPortPos( i );
+ p[0].x -= x; p[0].y -= y; // translate back as we are in a transform
+ p[1].x -= x; p[1].y -= y; // translate back as we are in a transform
if( 'connection' in this )
- canvas.line( g, 0, y, 6, y, style );
- else
- editorConnectionPointCreate( canvas.polyline( g, [[1, y-4],[6, y],[1, y+4]], style ), 'inPort', i );
+ canvas.line( g, p[0].x, p[0].y, p[1].x, p[1].y, style );
+ else {
+ var parameter = {
+ stroke: '#ff0000',//colorByArray( origin.getColor() ),
+ 'marker-end' : 'url(#EmptyInPort)'
+ };
+ editorConnectionPointCreate(
+ canvas.line( g, p[1].x, p[1].y, p[0].x, p[0].y, parameter )
+ , 'inPort', i );
+ }
if( maskOptions.showLabel )
- canvas.text( g, 10, y, this.name, {'dominant-baseline':'middle','text-anchor':'start'} );
+ canvas.text( g, 2*p[0].x-p[1].x, 2*p[0].y-p[1].y, this.name,
+ {'dominant-baseline':'middle','text-anchor':'start'} );
});
// Draw the outports
var outPortsLength = outPorts.length;
$.each( outPorts, function(i){
- var y = 1 + height * (0.5 + i)/outPortsLength;
+ var p = that.outPortPos( i );
+ p[0].x -= x; p[0].y -= y; // translate back as we are in a transform
+ p[1].x -= x; p[1].y -= y; // translate back as we are in a transform
if( 'connection' in this )
- canvas.line( g, width+6, y, width+12, y, style );
+ canvas.line( g, p[0].x, p[0].y, p[1].x, p[1].y, style );
else
- editorConnectionPointCreate( canvas.polyline( g, [[width+6, y-4],[width+11, y],[width+6, y+4]], style ), 'outPort', i );
+ //editorConnectionPointCreate( canvas.polyline( g, [[width+6, y-4],[width+11, y],[width+6, y+4]], style ), 'outPort', i );
+ var parameter = {
+ stroke: '#ff0000',//colorByArray( origin.getColor() ),
+ 'marker-start' : 'url(#EmptyOutPort)'
+ };
+ editorConnectionPointCreate(
+ canvas.line( g, p[0].x, p[0].y, p[1].x, p[1].y, parameter )
+ , 'outPort', i );
if( maskOptions.showLabel )
- canvas.text( g, width, y, this.name, {'dominant-baseline':'middle','text-anchor':'end'} );
+ canvas.text( g, 2*p[0].x-p[1].x, 2*p[0].y-p[1].y, this.name,
+ {'dominant-baseline':'middle','text-anchor':'end'} );
});
// shotcut
@@ -144,13 +174,23 @@
editorDrag( g, g ); // move
// Draw the handles
- editorDrag( g, canvas.rect( g, 5-outset , -outset , 1+inset+outset, 1+inset+outset, {class:'nw-resize'} ) );
- editorDrag( g, canvas.rect( g, 6+width-inset, -outset , 1+inset+outset, 1+inset+outset, {class:'ne-resize'} ) );
- editorDrag( g, canvas.rect( g, 5-outset , height+1-inset, 1+inset+outset, 1+inset+outset, {class:'sw-resize'} ) );
- editorDrag( g, canvas.rect( g, 6+width-inset, height+1-inset, 1+inset+outset, 1+inset+outset, {class:'se-resize'} ) );
+ editorDrag( g, canvas.rect( g, -outset , -outset , inset+outset, inset+outset, {class:'nw-resize'} ) );
+ editorDrag( g, canvas.rect( g, width-inset, -outset , inset+outset, inset+outset, {class:'ne-resize'} ) );
+ editorDrag( g, canvas.rect( g, -outset , height-inset, inset+outset, inset+outset, {class:'sw-resize'} ) );
+ editorDrag( g, canvas.rect( g, width-inset, height-inset, inset+outset, inset+outset, {class:'se-resize'} ) );
}
+ function createParameter( structure )
+ {
+ var retVal = {};
+ for( var i = 0; i < structure.length; i++ )
+ {
+ retVal[ structure[i].name ] = structure[i].default;
+ }
+ return retVal;
+ }
+
// relocate itself on the canvas
function relocate()
{
@@ -227,14 +267,14 @@
//if( 'connection' in this )
if( this.connection !== undefined )
{
- this.connection.lastMove( that.inPortPos( i ), true );
+ this.connection.lastMove( that.inPortPos( i )[0], true );
}
});
$.each( outPorts, function(i){
if( 'connection' in this )
{
- this.connection.firstMove( that.outPortPos( i ) );
+ this.connection.firstMove( that.outPortPos( i )[0] );
}
});
}
@@ -266,11 +306,21 @@
}
this.inPortPos = function( number )
{
- return [ x , y + 1 + height * (0.5 + number) / inPorts.length ];
+ if( maskOptions.inPortPos !== undefined )
+ {
+ return maskOptions.inPortPos( number, that, maskOptions, parameter );
+ } else
+ return [
+ { x: x , y: y + height * (0.5 + number) / inPorts.length },
+ { x: x - 5, y: y + height * (0.5 + number) / inPorts.length }
+ ];
}
this.outPortPos = function( number )
{
- return [ x + width + 10, y + 1 + height * (0.5 + number) / outPorts.length ];
+ return [
+ { x: x + width , y: y + height * (0.5 + number) / outPorts.length },
+ { x: x + width + 5, y: y + height * (0.5 + number) / outPorts.length }
+ ];
}
// Dump this Block in JSON notation to serialize it
@@ -319,10 +369,11 @@
console.log( 'Block: eCPD', event );
var pn = event.data.portNumber;
var pt = event.data.portType;
+ var op = that.outPortPos( pn )[0];
var c = new Connection({
origin : that,
originPortNumber: pn,
- paths : [{path:[that.outPortPos( pn )]}]
+ paths : [{path:[ [op.x, op.y] ]}]
});
that.setConnection( pt, pn,c );
///???
@@ -336,8 +387,7 @@
function editorConnectionPointMouseMove( event )
{
- var c = getCoordinate( event );
- event.data.con.lastMove( [c.x, c.y] );
+ event.data.con.lastMove( getCoordinate( event ) );
}
function editorConnectionPointMouseUp( event )
@@ -366,7 +416,7 @@
var c = getCoordinate( event );
var distance = function( pos )
{
- return (c.x-pos[0])*(c.x-pos[0]) + (c.y-pos[1])*(c.y-pos[1]);
+ return (c.x-pos.x)*(c.x-pos.x) + (c.y-pos.y)*(c.y-pos.y);
}
if( connectionLookingForInPort )
{
@@ -374,7 +424,7 @@
var smallestDistancePort = -1;
for( var i = 0; i < inPorts.length; i++ )
{
- var dist = distance( that.inPortPos(i) );
+ var dist = distance( that.inPortPos(i)[0] );
if( dist < smallestDistance )
{
smallestDistance = dist;
Modified: PyWireGate/trunk/logic_editor/gle/gle.connection.js
===================================================================
--- PyWireGate/trunk/logic_editor/gle/gle.connection.js 2011-01-16 15:39:18 UTC (rev 258)
+++ PyWireGate/trunk/logic_editor/gle/gle.connection.js 2011-01-16 21:08:47 UTC (rev 259)
@@ -133,7 +133,7 @@
//console.log('cDMM', ed );
if( ed.extend )
{
- that.lastMove( [ed.origx - ed.startx + event.pageX, ed.origy - ed.starty + event.pageY], false );
+ that.lastMove( {x:ed.origx - ed.startx + event.pageX, y:ed.origy - ed.starty + event.pageY}, false );
} else {
paths[ed.obj[1]].path[ed.obj[2]][0] = ed.origx - ed.startx + event.pageX;
paths[ed.obj[1]].path[ed.obj[2]][1] = ed.origy - ed.starty + event.pageY;
@@ -186,20 +186,20 @@
var op = overPort;
if( !force && op && op.type == 'inPort' )
{
- pos = op.block.inPortPos( op.number );
+ pos = op.block.inPortPos( op.number )[0];
}
if( force || (op && op.type == 'inPort') )
{
paths[branch].target = op;
- if( Math.abs( start[1] - pos[1] ) > 1.0 )
- paths[branch].path.push( [ (pos[0]+start[0])/2, start[1] ] );
- paths[branch].path.push( [ (pos[0]+start[0])/2, pos[1] ] );
+ if( Math.abs( start[1] - pos.y ) > 1.0 )
+ paths[branch].path.push( [ (pos.x+start[0])/2, start[1] ] );
+ paths[branch].path.push( [ (pos.x+start[0])/2, pos.y ] );
} else {
paths[branch].target = undefined;
- if( Math.abs( start[1] - pos[1] ) > 1.0 )
- paths[branch].path.push( [ pos[0], start[1] ] );
+ if( Math.abs( start[1] - pos.y ) > 1.0 )
+ paths[branch].path.push( [ pos.x, start[1] ] );
}
- paths[branch].path.push( pos );
+ paths[branch].path.push( [pos.x, pos.y] );
draw();
}
Modified: PyWireGate/trunk/logic_editor/logicEditor.js
===================================================================
--- PyWireGate/trunk/logic_editor/logicEditor.js 2011-01-16 15:39:18 UTC (rev 258)
+++ PyWireGate/trunk/logic_editor/logicEditor.js 2011-01-16 21:08:47 UTC (rev 259)
@@ -104,6 +104,22 @@
line(-10.0, 0.0).
close()
);
+ marker = svg.marker( defs, 'EmptyInPort', 0.0, 0.0, 10, 10, 'auto', {style:'overflow:visible'} );
+ var path = svg.createPath();
+ svg.path( marker, path.
+ move(-5.0,-5.0).
+ line( 0.0, 0.0).
+ line(-5.0, 5.0).
+ close()
+ );
+ marker = svg.marker( defs, 'EmptyOutPort', 0.0, 0.0, 10, 10, 'auto', {style:'overflow:visible'} );
+ var path = svg.createPath();
+ svg.path( marker, path.
+ move( 0.0,-5.0).
+ line( 5.0, 0.0).
+ line( 0.0, 5.0).
+ close()
+ );
});
function drawLibrary()
@@ -113,11 +129,11 @@
$.each( this, function( element ){
var entry = $('<div class="libEntry"><div class="libEntryName">'+element+'</div></div>');
var obj = this;
- var width = this.width+16;
- var height = this.height+6;
+ var width = this.width+20;
+ var height = this.height+20;
entry.prepend(
$('<div style="width:'+width+'px;height:'+height+'px;" ></div>').
- svg({onLoad:function(svg){drawElement(svg,obj,false);},settings:{width:width,height:height}}).
+ svg({onLoad:function(svg){drawElement(svg,obj,false);},settings:{width:width,height:height,viewBox:'-10 -10 '+width+' '+height}}).
data( 'element', obj ).
draggable({helper: function (e,ui) {
return $(this).clone().appendTo('body').css('zIndex',5).show();
@@ -205,6 +221,15 @@
});
/**
+ * Calculate the current zoom factor
+ * a zoom factor of 10 equals 100%
+ */
+function zoomFactor()
+{
+ return Math.pow( Math.sqrt(2), 10-zoomLevel );
+}
+
+/**
* Zoom the editor canvas.
* level == -1 : zoom out
* level == 0 : NOP
@@ -223,12 +248,12 @@
var svg = $('#editor svg')[0];
var x = Math.max( maxX, editor.innerWidth() );
var y = Math.max( maxY, editor.innerHeight() );
- var factor = Math.pow(Math.sqrt(2),10-zoomLevel);
+ var factor = zoomFactor();
$('#zoomLevel').html( (100*factor).toFixed() + '%' );
- if( zoomLevel < 10 )
+ if( factor > 1 )
{
- svg.width.baseVal.value = x* factor;
- svg.height.baseVal.value = y* factor;
+ svg.width.baseVal.value = x * factor;
+ svg.height.baseVal.value = y * factor;
svg.viewBox.baseVal.width = x;
svg.viewBox.baseVal.height = y;
} else {
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
