Menu
▾
▴
[Openautomation-svn] SF.net SVN: openautomation:[257] PyWireGate/trunk/logic_editor
|
From: <ma...@us...> - 2011-01-16 15:10:47
|
Revision: 257
http://openautomation.svn.sourceforge.net/openautomation/?rev=257&view=rev
Author: mayerch
Date: 2011-01-16 15:10:41 +0000 (Sun, 16 Jan 2011)
Log Message:
-----------
Initial support for zooming
Modified Paths:
--------------
PyWireGate/trunk/logic_editor/index.html
PyWireGate/trunk/logic_editor/logicEditor.css
PyWireGate/trunk/logic_editor/logicEditor.js
Modified: PyWireGate/trunk/logic_editor/index.html
===================================================================
--- PyWireGate/trunk/logic_editor/index.html 2011-01-16 12:56:51 UTC (rev 256)
+++ PyWireGate/trunk/logic_editor/index.html 2011-01-16 15:10:41 UTC (rev 257)
@@ -20,8 +20,9 @@
</head>
<body>
<div id="header" class="ui-layout-north">
- <h1>Example SVG based Logic Engine Editor</h1>
- Toolbar...
+ <img class="toolbarButton" src="icon/32/zoom-out.png" onClick="zoomEditor(-1)"/>
+ <img class="toolbarButton" src="icon/32/zoom-original.png" onClick="zoomEditor(10)" />
+ <img class="toolbarButton" src="icon/32/zoom-in.png" onClick="zoomEditor(+1)" />
</div>
<div id="structureContainer" class="ui-layout-west">
<h2>Structure area</h2>
Modified: PyWireGate/trunk/logic_editor/logicEditor.css
===================================================================
--- PyWireGate/trunk/logic_editor/logicEditor.css 2011-01-16 12:56:51 UTC (rev 256)
+++ PyWireGate/trunk/logic_editor/logicEditor.css 2011-01-16 15:10:41 UTC (rev 257)
@@ -15,6 +15,25 @@
font-size: 12pt;
}
+.toolbarButton {
+ padding: 4px;
+ margin: 2px;
+ border-width: 1px;
+ border-color: #222;
+ border-radius: 6px;
+ -moz-border-radius: 6px;
+ -webkit-border-radius: 6px;
+}
+
+.toolbarButton:hover {
+ border-style: outset;
+ margin: 1px;
+}
+.toolbarButton:active {
+ border-style: inset;
+ margin: 1px;
+}
+
.libName {
font-size: 11pt;
font-weight: bold;
Modified: PyWireGate/trunk/logic_editor/logicEditor.js
===================================================================
--- PyWireGate/trunk/logic_editor/logicEditor.js 2011-01-16 12:56:51 UTC (rev 256)
+++ PyWireGate/trunk/logic_editor/logicEditor.js 2011-01-16 15:10:41 UTC (rev 257)
@@ -22,6 +22,7 @@
var connectionLookingForInPort = true; // only relevant in connection drawing mode
var maxX = 0; // the biggest x value of the current view
var maxY = 0; // the biggest y value of the current view
+var zoomLevel = 10; // 1 = biggest, +inf = smallest
$(function() {
$('body').layout({
@@ -78,6 +79,9 @@
}
});
+ // prevent the toolbar images to be dragged around
+ $('img.toolbarButton').bind('dragstart', function(event) { event.preventDefault(); });
+
drawLibrary();
$('#editor').svg().
droppable({drop: editorDrop}).
@@ -196,4 +200,36 @@
y: event.pageY - o.top + editor.scrollTop () };
};
})();
-});
\ No newline at end of file
+});
+
+/**
+ * Zoom the editor canvas.
+ * level == -1 : zoom out
+ * level == 0 : NOP
+ * level == +1 : zoom in
+ * level > 1 : zoom to that value, 10 = 100% = 1:1
+ */
+function zoomEditor( level )
+{
+ if( level > 1 )
+ zoomLevel = level;
+ else
+ zoomLevel -= level;
+ var editor = $('#editor'); // quasi static variable
+ 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);// Math.log(-10+zoomLevel) / Math.log( 2 );
+ if( zoomLevel < 10 )
+ {
+ svg.width.baseVal.value = x* factor;
+ svg.height.baseVal.value = y* factor;
+ svg.viewBox.baseVal.width = x;
+ svg.viewBox.baseVal.height = y;
+ } else {
+ svg.width.baseVal.value = x;
+ svg.height.baseVal.value = y;
+ svg.viewBox.baseVal.width = x / factor;
+ svg.viewBox.baseVal.height = y / factor;
+ }
+}
\ No newline at end of file
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
