mirror of
https://github.com/Quodatum/graphxq.git
synced 2025-09-13 03:15:51 +01:00
colorpicker
This commit is contained in:
parent
d7cbd357d4
commit
84579b53c7
26 changed files with 16130 additions and 450 deletions
|
|
@ -1,3 +1,4 @@
|
|||
#/bin/sh
|
||||
cp -r src/* /home/andy/usr/basex/webapp/
|
||||
echo copied to /home/andy/usr/basex/webapp/
|
||||
rsync --verbose --progress --stats --compress \
|
||||
--recursive --times --perms --links --delete \
|
||||
src/* /home/andy/usr/basex/webapp/
|
||||
|
|
@ -31,157 +31,150 @@ graphviz options for option,color
|
|||
<option>Mrecord</option>
|
||||
</shapes>
|
||||
<colors>
|
||||
<option>aliceblue</option>
|
||||
<option>antiquewhite</option>
|
||||
<option>aqua</option>
|
||||
<option>aquamarine</option>
|
||||
<option>azure</option>
|
||||
<option>beige</option>
|
||||
<option>bisque</option>
|
||||
<option>black</option>
|
||||
<option>blanchedalmond</option>
|
||||
<option>blue</option>
|
||||
<option>blueviolet</option>
|
||||
<option>brown</option>
|
||||
<option>burlywood</option>
|
||||
<option>cadetblue</option>
|
||||
<option>chartreuse</option>
|
||||
<option>chocolate</option>
|
||||
<option>coral</option>
|
||||
<option>cornflowerblue</option>
|
||||
<option>cornsilk</option>
|
||||
<option>crimson</option>
|
||||
<option>cyan</option>
|
||||
<option>darkblue</option>
|
||||
<option>darkcyan</option>
|
||||
<option>darkgoldenrod</option>
|
||||
<option>darkgray</option>
|
||||
<option>darkgreen</option>
|
||||
<option>darkgrey</option>
|
||||
<option>darkkhaki</option>
|
||||
<option>darkmagenta</option>
|
||||
<option>darkolivegreen</option>
|
||||
<option>darkorange</option>
|
||||
<option>darkorchid</option>
|
||||
<option>darkred</option>
|
||||
<option>darksalmon</option>
|
||||
<option>darkseagreen</option>
|
||||
<option>darkslateblue</option>
|
||||
<option>darkslategray</option>
|
||||
<option>darkslategrey</option>
|
||||
<option>darkturquoise</option>
|
||||
<option>darkviolet</option>
|
||||
<option>deeppink</option>
|
||||
<option>deepskyblue</option>
|
||||
<option>dimgray</option>
|
||||
<option>dimgrey</option>
|
||||
<option>dodgerblue</option>
|
||||
<option>firebrick</option>
|
||||
<option>floralwhite</option>
|
||||
<option>forestgreen</option>
|
||||
<option>fuchsia</option>
|
||||
<option>gainsboro</option>
|
||||
<option>ghostwhite</option>
|
||||
<option>gold</option>
|
||||
<option>goldenrod</option>
|
||||
<option>gray</option>
|
||||
<option>grey</option>
|
||||
<option>green</option>
|
||||
<option>greenyellow</option>
|
||||
<option>honeydew</option>
|
||||
<option>hotpink</option>
|
||||
<option>indianred</option>
|
||||
<option>indigo</option>
|
||||
<option>ivory</option>
|
||||
<option>khaki</option>
|
||||
<option>lavender</option>
|
||||
<option>lavenderblush</option>
|
||||
<option>lawngreen</option>
|
||||
<option>lemonchiffon</option>
|
||||
<option>lightblue</option>
|
||||
<option>lightcoral</option>
|
||||
<option>lightcyan</option>
|
||||
<option>lightgoldenrodyellow</option>
|
||||
<option>lightgray</option>
|
||||
<option>lightgreen</option>
|
||||
<option>lightgrey</option>
|
||||
<option>lightpink</option>
|
||||
<option>lightsalmon</option>
|
||||
<option>lightseagreen</option>
|
||||
<option>lightskyblue</option>
|
||||
<option>lightslategray</option>
|
||||
<option>lightslategrey</option>
|
||||
<option>lightsteelblue</option>
|
||||
<option>lightyellow</option>
|
||||
<option>lime</option>
|
||||
<option>limegreen</option>
|
||||
<option>linen</option>
|
||||
<option>magenta</option>
|
||||
<option>maroon</option>
|
||||
<option>mediumaquamarine</option>
|
||||
<option>mediumblue</option>
|
||||
<option>mediumorchid</option>
|
||||
<option>mediumpurple</option>
|
||||
<option>mediumseagreen</option>
|
||||
<option>mediumslateblue</option>
|
||||
<option>mediumspringgreen</option>
|
||||
<option>mediumturquoise</option>
|
||||
<option>mediumvioletred</option>
|
||||
<option>midnightblue</option>
|
||||
<option>mintcream</option>
|
||||
<option>mistyrose</option>
|
||||
<option>moccasin</option>
|
||||
<option>navajowhite</option>
|
||||
<option>navy</option>
|
||||
<option>oldlace</option>
|
||||
<option>olive</option>
|
||||
<option>olivedrab</option>
|
||||
<option>orange</option>
|
||||
<option>orangered</option>
|
||||
<option>orchid</option>
|
||||
<option>palegoldenrod</option>
|
||||
<option>palegreen</option>
|
||||
<option>paleturquoise</option>
|
||||
<option>palevioletred</option>
|
||||
<option>papayawhip</option>
|
||||
<option>peachpuff</option>
|
||||
<option>peru</option>
|
||||
<option>pink</option>
|
||||
<option>plum</option>
|
||||
<option>powderblue</option>
|
||||
<option>purple</option>
|
||||
<option>red</option>
|
||||
<option>rosybrown</option>
|
||||
<option>royalblue</option>
|
||||
<option>saddlebrown</option>
|
||||
<option>salmon</option>
|
||||
<option>sandybrown</option>
|
||||
<option>seagreen</option>
|
||||
<option>seashell</option>
|
||||
<option>sienna</option>
|
||||
<option>silver</option>
|
||||
<option>skyblue</option>
|
||||
<option>slateblue</option>
|
||||
<option>slategray</option>
|
||||
<option>slategrey</option>
|
||||
<option>snow</option>
|
||||
<option>springgreen</option>
|
||||
<option>steelblue</option>
|
||||
<option>tan</option>
|
||||
<option>teal</option>
|
||||
<option>thistle</option>
|
||||
<option>tomato</option>
|
||||
<option>turquoise</option>
|
||||
<option>violet</option>
|
||||
<option>wheat</option>
|
||||
<option>white</option>
|
||||
<option>whitesmoke</option>
|
||||
<option>yellow</option>
|
||||
<option>yellowgreen</option>
|
||||
<option value="#f0f8ff">aliceblue</option>
|
||||
<option value="#faebd7">antiquewhite</option>
|
||||
<option value="#00ffff">aqua</option>
|
||||
<option value="#7fffd4">aquamarine</option>
|
||||
<option value="#f0ffff">azure</option>
|
||||
<option value="#f5f5dc">beige</option>
|
||||
<option value="#ffe4c4">bisque</option>
|
||||
<option value="#000000">black</option>
|
||||
<option value="#ffebcd">blanchedalmond</option>
|
||||
<option value="#0000ff">blue</option>
|
||||
<option value="#8a2be2">blueviolet</option>
|
||||
<option value="#a52a2a">brown</option>
|
||||
<option value="#deb887">burlywood</option>
|
||||
<option value="#5f9ea0">cadetblue</option>
|
||||
<option value="#7fff00">chartreuse</option>
|
||||
<option value="#d2691e">chocolate</option>
|
||||
<option value="#ff7f50">coral</option>
|
||||
<option value="#6495ed">cornflowerblue</option>
|
||||
<option value="#fff8dc">cornsilk</option>
|
||||
<option value="#dc143c">crimson</option>
|
||||
<option value="#00ffff">cyan</option>
|
||||
<option value="#00008b">darkblue</option>
|
||||
<option value="#008b8b">darkcyan</option>
|
||||
<option value="#b8860b">darkgoldenrod</option>
|
||||
<option value="#a9a9a9">darkgray</option>
|
||||
<option value="#006400">darkgreen</option>
|
||||
<option value="#bdb76b">darkkhaki</option>
|
||||
<option value="#8b008b">darkmagenta</option>
|
||||
<option value="#556b2f">darkolivegreen</option>
|
||||
<option value="#ff8c00">darkorange</option>
|
||||
<option value="#9932cc">darkorchid</option>
|
||||
<option value="#8b0000">darkred</option>
|
||||
<option value="#e9967a">darksalmon</option>
|
||||
<option value="#8fbc8f">darkseagreen</option>
|
||||
<option value="#483d8b">darkslateblue</option>
|
||||
<option value="#2f4f4f">darkslategray</option>
|
||||
<option value="#00ced1">darkturquoise</option>
|
||||
<option value="#9400d3">darkviolet</option>
|
||||
<option value="#ff1493">deeppink</option>
|
||||
<option value="#00bfff">deepskyblue</option>
|
||||
<option value="#696969">dimgray</option>
|
||||
<option value="#1e90ff">dodgerblue</option>
|
||||
<option value="#b22222">firebrick</option>
|
||||
<option value="#fffaf0">floralwhite</option>
|
||||
<option value="#228b22">forestgreen</option>
|
||||
<option value="#ff00ff">fuchsia</option>
|
||||
<option value="#dcdcdc">gainsboro</option>
|
||||
<option value="#f8f8ff">ghostwhite</option>
|
||||
<option value="#ffd700">gold</option>
|
||||
<option value="#daa520">goldenrod</option>
|
||||
<option value="#808080">gray</option>
|
||||
<option value="#008000">green</option>
|
||||
<option value="#adff2f">greenyellow</option>
|
||||
<option value="#f0fff0">honeydew</option>
|
||||
<option value="#ff69b4">hotpink</option>
|
||||
<option value="#cd5c5c">indianred_0020</option>
|
||||
<option value="#4b0082">indigo_0020</option>
|
||||
<option value="#fffff0">ivory</option>
|
||||
<option value="#f0e68c">khaki</option>
|
||||
<option value="#e6e6fa">lavender</option>
|
||||
<option value="#fff0f5">lavenderblush</option>
|
||||
<option value="#7cfc00">lawngreen</option>
|
||||
<option value="#fffacd">lemonchiffon</option>
|
||||
<option value="#add8e6">lightblue</option>
|
||||
<option value="#f08080">lightcoral</option>
|
||||
<option value="#e0ffff">lightcyan</option>
|
||||
<option value="#fafad2">lightgoldenrodyellow</option>
|
||||
<option value="#d3d3d3">lightgrey</option>
|
||||
<option value="#90ee90">lightgreen</option>
|
||||
<option value="#ffb6c1">lightpink</option>
|
||||
<option value="#ffa07a">lightsalmon</option>
|
||||
<option value="#20b2aa">lightseagreen</option>
|
||||
<option value="#87cefa">lightskyblue</option>
|
||||
<option value="#778899">lightslategray</option>
|
||||
<option value="#b0c4de">lightsteelblue</option>
|
||||
<option value="#ffffe0">lightyellow</option>
|
||||
<option value="#00ff00">lime</option>
|
||||
<option value="#32cd32">limegreen</option>
|
||||
<option value="#faf0e6">linen</option>
|
||||
<option value="#ff00ff">magenta</option>
|
||||
<option value="#800000">maroon</option>
|
||||
<option value="#66cdaa">mediumaquamarine</option>
|
||||
<option value="#0000cd">mediumblue</option>
|
||||
<option value="#ba55d3">mediumorchid</option>
|
||||
<option value="#9370d8">mediumpurple</option>
|
||||
<option value="#3cb371">mediumseagreen</option>
|
||||
<option value="#7b68ee">mediumslateblue</option>
|
||||
<option value="#00fa9a">mediumspringgreen</option>
|
||||
<option value="#48d1cc">mediumturquoise</option>
|
||||
<option value="#c71585">mediumvioletred</option>
|
||||
<option value="#191970">midnightblue</option>
|
||||
<option value="#f5fffa">mintcream</option>
|
||||
<option value="#ffe4e1">mistyrose</option>
|
||||
<option value="#ffe4b5">moccasin</option>
|
||||
<option value="#ffdead">navajowhite</option>
|
||||
<option value="#000080">navy</option>
|
||||
<option value="#fdf5e6">oldlace</option>
|
||||
<option value="#808000">olive</option>
|
||||
<option value="#6b8e23">olivedrab</option>
|
||||
<option value="#ffa500">orange</option>
|
||||
<option value="#ff4500">orangered</option>
|
||||
<option value="#da70d6">orchid</option>
|
||||
<option value="#eee8aa">palegoldenrod</option>
|
||||
<option value="#98fb98">palegreen</option>
|
||||
<option value="#afeeee">paleturquoise</option>
|
||||
<option value="#d87093">palevioletred</option>
|
||||
<option value="#ffefd5">papayawhip</option>
|
||||
<option value="#ffdab9">peachpuff</option>
|
||||
<option value="#cd853f">peru</option>
|
||||
<option value="#ffc0cb">pink</option>
|
||||
<option value="#dda0dd">plum</option>
|
||||
<option value="#b0e0e6">powderblue</option>
|
||||
<option value="#800080">purple</option>
|
||||
<option value="#ff0000">red</option>
|
||||
<option value="#bc8f8f">rosybrown</option>
|
||||
<option value="#4169e1">royalblue</option>
|
||||
<option value="#8b4513">saddlebrown</option>
|
||||
<option value="#fa8072">salmon</option>
|
||||
<option value="#f4a460">sandybrown</option>
|
||||
<option value="#2e8b57">seagreen</option>
|
||||
<option value="#fff5ee">seashell</option>
|
||||
<option value="#a0522d">sienna</option>
|
||||
<option value="#c0c0c0">silver</option>
|
||||
<option value="#87ceeb">skyblue</option>
|
||||
<option value="#6a5acd">slateblue</option>
|
||||
<option value="#708090">slategray</option>
|
||||
<option value="#fffafa">snow</option>
|
||||
<option value="#00ff7f">springgreen</option>
|
||||
<option value="#4682b4">steelblue</option>
|
||||
<option value="#d2b48c">tan</option>
|
||||
<option value="#008080">teal</option>
|
||||
<option value="#d8bfd8">thistle</option>
|
||||
<option value="#ff6347">tomato</option>
|
||||
<option value="#40e0d0">turquoise</option>
|
||||
<option value="#ee82ee">violet</option>
|
||||
<option value="#f5deb3">wheat</option>
|
||||
<option value="#ffffff">white</option>
|
||||
<option value="#f5f5f5">whitesmoke</option>
|
||||
<option value="#ffff00">yellow</option>
|
||||
<option value="#9acd32">yellowgreen</option>
|
||||
</colors>
|
||||
<direction>
|
||||
<option value="rankdir=TB;">TB (top -> bottom)</option>
|
||||
<option value="rankdir=LR;">LR (left -> right)</option>
|
||||
<option value="rankdir=TB;">TB (top -> bottom)</option>
|
||||
<option value="rankdir=LR;">LR (left -> right)</option>
|
||||
</direction>
|
||||
<filters>
|
||||
<option value="Bumpy">Bumpy</option>
|
||||
|
|
|
|||
|
|
@ -1,181 +0,0 @@
|
|||
<!--
|
||||
graphviz options for shape,color
|
||||
-->
|
||||
<graphviz>
|
||||
<shapes>
|
||||
<shape>box</shape>
|
||||
<shape>polygon</shape>
|
||||
<shape>ellipse</shape>
|
||||
<shape>circle</shape>
|
||||
<shape>point</shape>
|
||||
<shape>egg</shape>
|
||||
<shape>triangle</shape>
|
||||
<shape>plaintext</shape>
|
||||
<shape>diamond</shape>
|
||||
<shape>trapezium</shape>
|
||||
<shape>parallelogram</shape>
|
||||
<shape>house</shape>
|
||||
<shape>hexagon</shape>
|
||||
<shape>octagon</shape>
|
||||
<shape>doublecircle</shape>
|
||||
<shape>doubleoctagon</shape>
|
||||
<shape>tripleoctagon</shape>
|
||||
<shape>invtriangle</shape>
|
||||
<shape>invtrapezium</shape>
|
||||
<shape>invhouse</shape>
|
||||
<shape>Mdiamond</shape>
|
||||
<shape>Msquare</shape>
|
||||
<shape>Mcircle</shape>
|
||||
<shape>record</shape>
|
||||
<shape>Mrecord</shape>
|
||||
</shapes>
|
||||
<colors>
|
||||
<color>aliceblue</color>
|
||||
<color>antiquewhite</color>
|
||||
<color>aqua</color>
|
||||
<color>aquamarine</color>
|
||||
<color>azure</color>
|
||||
<color>beige</color>
|
||||
<color>bisque</color>
|
||||
<color>black</color>
|
||||
<color>blanchedalmond</color>
|
||||
<color>blue</color>
|
||||
<color>blueviolet</color>
|
||||
<color>brown</color>
|
||||
<color>burlywood</color>
|
||||
<color>cadetblue</color>
|
||||
<color>chartreuse</color>
|
||||
<color>chocolate</color>
|
||||
<color>coral</color>
|
||||
<color>cornflowerblue</color>
|
||||
<color>cornsilk</color>
|
||||
<color>crimson</color>
|
||||
<color>cyan</color>
|
||||
<color>darkblue</color>
|
||||
<color>darkcyan</color>
|
||||
<color>darkgoldenrod</color>
|
||||
<color>darkgray</color>
|
||||
<color>darkgreen</color>
|
||||
<color>darkgrey</color>
|
||||
<color>darkkhaki</color>
|
||||
<color>darkmagenta</color>
|
||||
<color>darkolivegreen</color>
|
||||
<color>darkorange</color>
|
||||
<color>darkorchid</color>
|
||||
<color>darkred</color>
|
||||
<color>darksalmon</color>
|
||||
<color>darkseagreen</color>
|
||||
<color>darkslateblue</color>
|
||||
<color>darkslategray</color>
|
||||
<color>darkslategrey</color>
|
||||
<color>darkturquoise</color>
|
||||
<color>darkviolet</color>
|
||||
<color>deeppink</color>
|
||||
<color>deepskyblue</color>
|
||||
<color>dimgray</color>
|
||||
<color>dimgrey</color>
|
||||
<color>dodgerblue</color>
|
||||
<color>firebrick</color>
|
||||
<color>floralwhite</color>
|
||||
<color>forestgreen</color>
|
||||
<color>fuchsia</color>
|
||||
<color>gainsboro</color>
|
||||
<color>ghostwhite</color>
|
||||
<color>gold</color>
|
||||
<color>goldenrod</color>
|
||||
<color>gray</color>
|
||||
<color>grey</color>
|
||||
<color>green</color>
|
||||
<color>greenyellow</color>
|
||||
<color>honeydew</color>
|
||||
<color>hotpink</color>
|
||||
<color>indianred</color>
|
||||
<color>indigo</color>
|
||||
<color>ivory</color>
|
||||
<color>khaki</color>
|
||||
<color>lavender</color>
|
||||
<color>lavenderblush</color>
|
||||
<color>lawngreen</color>
|
||||
<color>lemonchiffon</color>
|
||||
<color>lightblue</color>
|
||||
<color>lightcoral</color>
|
||||
<color>lightcyan</color>
|
||||
<color>lightgoldenrodyellow</color>
|
||||
<color>lightgray</color>
|
||||
<color>lightgreen</color>
|
||||
<color>lightgrey</color>
|
||||
<color>lightpink</color>
|
||||
<color>lightsalmon</color>
|
||||
<color>lightseagreen</color>
|
||||
<color>lightskyblue</color>
|
||||
<color>lightslategray</color>
|
||||
<color>lightslategrey</color>
|
||||
<color>lightsteelblue</color>
|
||||
<color>lightyellow</color>
|
||||
<color>lime</color>
|
||||
<color>limegreen</color>
|
||||
<color>linen</color>
|
||||
<color>magenta</color>
|
||||
<color>maroon</color>
|
||||
<color>mediumaquamarine</color>
|
||||
<color>mediumblue</color>
|
||||
<color>mediumorchid</color>
|
||||
<color>mediumpurple</color>
|
||||
<color>mediumseagreen</color>
|
||||
<color>mediumslateblue</color>
|
||||
<color>mediumspringgreen</color>
|
||||
<color>mediumturquoise</color>
|
||||
<color>mediumvioletred</color>
|
||||
<color>midnightblue</color>
|
||||
<color>mintcream</color>
|
||||
<color>mistyrose</color>
|
||||
<color>moccasin</color>
|
||||
<color>navajowhite</color>
|
||||
<color>navy</color>
|
||||
<color>oldlace</color>
|
||||
<color>olive</color>
|
||||
<color>olivedrab</color>
|
||||
<color>orange</color>
|
||||
<color>orangered</color>
|
||||
<color>orchid</color>
|
||||
<color>palegoldenrod</color>
|
||||
<color>palegreen</color>
|
||||
<color>paleturquoise</color>
|
||||
<color>palevioletred</color>
|
||||
<color>papayawhip</color>
|
||||
<color>peachpuff</color>
|
||||
<color>peru</color>
|
||||
<color>pink</color>
|
||||
<color>plum</color>
|
||||
<color>powderblue</color>
|
||||
<color>purple</color>
|
||||
<color>red</color>
|
||||
<color>rosybrown</color>
|
||||
<color>royalblue</color>
|
||||
<color>saddlebrown</color>
|
||||
<color>salmon</color>
|
||||
<color>sandybrown</color>
|
||||
<color>seagreen</color>
|
||||
<color>seashell</color>
|
||||
<color>sienna</color>
|
||||
<color>silver</color>
|
||||
<color>skyblue</color>
|
||||
<color>slateblue</color>
|
||||
<color>slategray</color>
|
||||
<color>slategrey</color>
|
||||
<color>snow</color>
|
||||
<color>springgreen</color>
|
||||
<color>steelblue</color>
|
||||
<color>tan</color>
|
||||
<color>teal</color>
|
||||
<color>thistle</color>
|
||||
<color>tomato</color>
|
||||
<color>turquoise</color>
|
||||
<color>violet</color>
|
||||
<color>wheat</color>
|
||||
<color>white</color>
|
||||
<color>whitesmoke</color>
|
||||
<color>yellow</color>
|
||||
<color>yellowgreen</color>
|
||||
</colors>
|
||||
</graphviz>
|
||||
|
|
@ -7,13 +7,13 @@
|
|||
module namespace grxq = 'apb.graphviz.web';
|
||||
declare default function namespace 'apb.graphviz.web';
|
||||
|
||||
import module namespace gr = 'apb.graphviz' at "graphxq/graphviz.xqm";
|
||||
import module namespace dotui = 'apb.graphxq.dotui' at "graphxq/dotui.xqm";
|
||||
import module namespace txq = 'apb.txq' at "graphxq/lib/txq.xqm";
|
||||
import module namespace gr = 'apb.graphviz' at "lib/graphviz.xqm";
|
||||
import module namespace dotui = 'apb.graphxq.dotui' at "dotui.xqm";
|
||||
import module namespace txq = 'apb.txq' at "lib/txq.xqm";
|
||||
import module namespace request = "http://exquery.org/ns/request";
|
||||
declare namespace rest = 'http://exquery.org/ns/restxq';
|
||||
|
||||
declare variable $grxq:layout:=fn:resolve-uri("graphxq/views/layout.xml");
|
||||
declare variable $grxq:layout:=fn:resolve-uri("views/layout.xml");
|
||||
|
||||
declare
|
||||
%rest:GET %rest:path("graphxq")
|
||||
|
|
@ -25,7 +25,7 @@ function graphxq($dot,$url) {
|
|||
let $dot2:=getdot($dot,$url)
|
||||
let $svg:=get-svg($dot)
|
||||
let $map:=map{"dot":=$dot,"url":=$url,"svg":=$svg,"edot":=$edot}
|
||||
let $page:=render("graphxq/views/page1.xml",$map)
|
||||
let $page:=render("views/page1.xml",$map)
|
||||
return $page
|
||||
};
|
||||
|
||||
|
|
@ -41,12 +41,16 @@ declare
|
|||
function graphxq-svg($dot,$url,$dl) {
|
||||
let $dot2:=getdot($dot,$url)
|
||||
let $svg:=get-svg($dot2)
|
||||
let $down:=<rest:response>
|
||||
<http:response>
|
||||
<http:header name="Content-Disposition" value='attachment;filename="graphxq.svg"'/>
|
||||
</http:response>
|
||||
</rest:response>
|
||||
return ($down[$dl],$svg)
|
||||
let $resp:=<rest:response>
|
||||
<http:response>
|
||||
<http:header name="Access-Control-Allow-Origin" value="*"/>
|
||||
{if($dl)
|
||||
then <http:header name="Content-Disposition" value='attachment;filename="graphxq.svg"'/>
|
||||
else ()}
|
||||
</http:response>
|
||||
</rest:response>
|
||||
|
||||
return ($resp,$svg)
|
||||
};
|
||||
|
||||
(:~
|
||||
|
|
@ -59,26 +63,26 @@ declare
|
|||
%rest:form-param("src","{$src}")
|
||||
function dotform($src){
|
||||
let $dot:= getdot("digraph {{a -> b}}",$src)
|
||||
let $svgwidget:=fn:doc("graphxq/views/widget.svg")
|
||||
let $svgwidget:=fn:doc("views/widget.svg")
|
||||
let $map:=map{"list-shapes":=dotui:shapes(""),
|
||||
"list-colors":=dotui:colors(""),
|
||||
"svgwidget":=$svgwidget,
|
||||
"dot":=$dot}
|
||||
return render("graphxq/views/dotform.xml",$map)
|
||||
return render("views/dotform.xml",$map)
|
||||
};
|
||||
|
||||
declare
|
||||
%rest:GET %rest:path("graphxq/dotml")
|
||||
%output:method("html5")
|
||||
function dotmlform(){
|
||||
render("graphxq/views/dotmlform.xml",map{})
|
||||
render("views/dotmlform.xml",map{})
|
||||
};
|
||||
|
||||
declare
|
||||
%rest:GET %rest:path("graphxq/about")
|
||||
%output:method("html5")
|
||||
function about(){
|
||||
render("graphxq/views/about.xml",map{})
|
||||
render("views/about.xml",map{})
|
||||
};
|
||||
|
||||
declare
|
||||
|
|
@ -87,7 +91,15 @@ declare
|
|||
%rest:form-param("q", "{$q}")
|
||||
function search($q ) {
|
||||
let $map:=map{"q":=$q}
|
||||
return render("graphxq/views/search.xml",$map)
|
||||
return render("views/search.xml",$map)
|
||||
};
|
||||
|
||||
declare
|
||||
%rest:GET %rest:path("graphxq/library")
|
||||
%output:method("html5")
|
||||
function library( ) {
|
||||
let $map:=map{ }
|
||||
return render("views/library.xml",$map)
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -110,15 +122,16 @@ declare function render($template,$locals){
|
|||
<a href="/graphxq/viewbox/viewBox.svg">viewbox work</a>
|
||||
<ul>
|
||||
<div>Samples:</div>
|
||||
<li> <a href="dot?src=graphxq/samples/process.gv">process</a></li>
|
||||
<li><a href="/restxq/graphxq/dot?src=graphxq/samples/unix.gv">unix</a></li>
|
||||
<li> <a href="/restxq/graphxq/dot?src=graphxq/samples/root.gv">root (slow)</a></li>
|
||||
<li> <a href="dot?src=samples/dot/process.gv">process</a></li>
|
||||
<li><a href="/restxq/graphxq/dot?src=samples/dot/unix.gv">unix</a></li>
|
||||
<li> <a href="/restxq/graphxq/dot?src=samples/dot/root.gv">root (slow)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
let $default:=map{"sidebar":=$sidebar ,
|
||||
"usermenu":=<div>users</div>,
|
||||
"title":=request:path(),
|
||||
"messages":=()}
|
||||
"messages":=(),
|
||||
"libserver":="//cdnjs.cloudflare.com/ajax/libs"}
|
||||
let $locals:=map:new(($default,$locals))
|
||||
return txq:render(fn:resolve-uri($template),$locals,$grxq:layout)
|
||||
};
|
||||
16
src/graphxq/samples/dot/hier.gv
Normal file
16
src/graphxq/samples/dot/hier.gv
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
digraph hierarchy_of_D {
|
||||
|
||||
node [color=Green,fontcolor=Blue,font=Courier]
|
||||
|
||||
B -> D
|
||||
C -> D
|
||||
|
||||
{rank=same; B C }
|
||||
|
||||
A -> B
|
||||
|
||||
A -> C
|
||||
|
||||
object -> A
|
||||
|
||||
}
|
||||
27
src/graphxq/samples/dot/process.gv
Normal file
27
src/graphxq/samples/dot/process.gv
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
digraph process {
|
||||
|
||||
subgraph cluster_0 {
|
||||
style=filled;
|
||||
color=lightgrey;
|
||||
node [style=filled,color=white];
|
||||
a0 -> a1 -> a2 -> a3;
|
||||
label = "process #1";
|
||||
}
|
||||
|
||||
subgraph cluster_1 {
|
||||
node [style=filled];
|
||||
b0 -> b1 -> b2 -> b3;
|
||||
label = "process #2";
|
||||
color=blue
|
||||
}
|
||||
start -> a0;
|
||||
start -> b0;
|
||||
a1 -> b3;
|
||||
b2 -> a3;
|
||||
a3 -> a0;
|
||||
a3 -> end;
|
||||
b3 -> end;
|
||||
|
||||
start [shape=Mdiamond];
|
||||
end [shape=Msquare];
|
||||
}
|
||||
2143
src/graphxq/samples/dot/root.gv
Normal file
2143
src/graphxq/samples/dot/root.gv
Normal file
File diff suppressed because it is too large
Load diff
55
src/graphxq/samples/dot/unix.gv
Normal file
55
src/graphxq/samples/dot/unix.gv
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
/* courtesy Ian Darwin and Geoff Collyer, Softquad Inc. */
|
||||
digraph unix {
|
||||
size="6,6";
|
||||
node [color=lightblue2, style=filled];
|
||||
"5th Edition" -> "6th Edition";
|
||||
"5th Edition" -> "PWB 1.0";
|
||||
"6th Edition" -> "LSX";
|
||||
"6th Edition" -> "1 BSD";
|
||||
"6th Edition" -> "Mini Unix";
|
||||
"6th Edition" -> "Wollongong";
|
||||
"6th Edition" -> "Interdata";
|
||||
"Interdata" -> "Unix/TS 3.0";
|
||||
"Interdata" -> "PWB 2.0";
|
||||
"Interdata" -> "7th Edition";
|
||||
"7th Edition" -> "8th Edition";
|
||||
"7th Edition" -> "32V";
|
||||
"7th Edition" -> "V7M";
|
||||
"7th Edition" -> "Ultrix-11";
|
||||
"7th Edition" -> "Xenix";
|
||||
"7th Edition" -> "UniPlus+";
|
||||
"V7M" -> "Ultrix-11";
|
||||
"8th Edition" -> "9th Edition";
|
||||
"1 BSD" -> "2 BSD";
|
||||
"2 BSD" -> "2.8 BSD";
|
||||
"2.8 BSD" -> "Ultrix-11";
|
||||
"2.8 BSD" -> "2.9 BSD";
|
||||
"32V" -> "3 BSD";
|
||||
"3 BSD" -> "4 BSD";
|
||||
"4 BSD" -> "4.1 BSD";
|
||||
"4.1 BSD" -> "4.2 BSD";
|
||||
"4.1 BSD" -> "2.8 BSD";
|
||||
"4.1 BSD" -> "8th Edition";
|
||||
"4.2 BSD" -> "4.3 BSD";
|
||||
"4.2 BSD" -> "Ultrix-32";
|
||||
"PWB 1.0" -> "PWB 1.2";
|
||||
"PWB 1.0" -> "USG 1.0";
|
||||
"PWB 1.2" -> "PWB 2.0";
|
||||
"USG 1.0" -> "CB Unix 1";
|
||||
"USG 1.0" -> "USG 2.0";
|
||||
"CB Unix 1" -> "CB Unix 2";
|
||||
"CB Unix 2" -> "CB Unix 3";
|
||||
"CB Unix 3" -> "Unix/TS++";
|
||||
"CB Unix 3" -> "PDP-11 Sys V";
|
||||
"USG 2.0" -> "USG 3.0";
|
||||
"USG 3.0" -> "Unix/TS 3.0";
|
||||
"PWB 2.0" -> "Unix/TS 3.0";
|
||||
"Unix/TS 1.0" -> "Unix/TS 3.0";
|
||||
"Unix/TS 3.0" -> "TS 4.0";
|
||||
"Unix/TS++" -> "TS 4.0";
|
||||
"CB Unix 3" -> "TS 4.0";
|
||||
"TS 4.0" -> "System V.0";
|
||||
"System V.0" -> "System V.2";
|
||||
"System V.2" -> "System V.3";
|
||||
}
|
||||
|
||||
55
src/graphxq/samples/dotml/sample1.xml
Normal file
55
src/graphxq/samples/dotml/sample1.xml
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<graph file-name="graphs/example_xabsl_option1" ranksep="0.3" nodesep="0.2">
|
||||
<cluster id="option" label="option handle-ball-at-left-and-right-border" fontname="Arial" fontcolor="#005A9C" fontsize="11" fillcolor="#F4F4F4" style="filled">
|
||||
<sub-graph rank="same">
|
||||
<node label="go\nto\nball" fontcolor="#005A9C" fontsize="11" style="filled" fillcolor="#FFFFFF" fontname="Arial" id="state_go_to_ball" shape="Mcircle"/>
|
||||
</sub-graph>
|
||||
<sub-graph rank="same">
|
||||
<node label="turn\naround\nball" fontcolor="#005A9C" fontsize="11" style="filled" fillcolor="#FFFFFF" fontname="Arial" id="state_turn_around_ball" shape="circle"/>
|
||||
<node label="do\narm\nkick" fontcolor="#005A9C" fontsize="11" style="filled" fillcolor="#FFFFFF" fontname="Arial" id="state_do_arm_kick" shape="circle"/>
|
||||
<node label="do\nsideward\nkick" fontcolor="#005A9C" fontsize="11" style="filled" fillcolor="#FFFFFF" fontname="Arial" id="state_do_sideward_kick" shape="circle"/>
|
||||
</sub-graph>
|
||||
<edge from="state_go_to_ball" to="state_do_sideward_kick"/>
|
||||
<edge from="state_go_to_ball" to="state_turn_around_ball"/>
|
||||
<edge from="state_go_to_ball" to="state_do_arm_kick"/>
|
||||
<edge from="state_go_to_ball" to="state_go_to_ball"/>
|
||||
<edge from="state_turn_around_ball" to="state_do_sideward_kick"/>
|
||||
<edge from="state_turn_around_ball" to="state_do_arm_kick"/>
|
||||
<edge from="state_turn_around_ball" to="state_turn_around_ball"/>
|
||||
<edge from="state_do_arm_kick" to="state_go_to_ball"/>
|
||||
<edge from="state_do_arm_kick" to="state_do_arm_kick"/>
|
||||
<edge from="state_do_sideward_kick" to="state_go_to_ball"/>
|
||||
<edge from="state_do_sideward_kick" to="state_do_sideward_kick"/>
|
||||
</cluster>
|
||||
<cluster id="option_tree" color="#FFFFFF">
|
||||
<node fontname="Arial" fontcolor="#005A9C" fontsize="11" shape="box" style="filled" fillcolor="#FFFFFF" id="option_approach_close_ball" label="approach\nclose\nball"/>
|
||||
<node fontname="Arial" fontcolor="#005A9C" fontsize="11" shape="box" style="filled" fillcolor="#FFFFFF" id="option_turn_for_ball" label="turn\nfor\nball"/>
|
||||
<node fontname="Arial" fontcolor="#005A9C" fontsize="11" shape="box" style="filled" fillcolor="#FFFFFF" id="option_do_arm_kick" label="do\narm\nkick"/>
|
||||
<node fontname="Arial" fontcolor="#005A9C" fontsize="11" shape="box" style="filled" fillcolor="#FFFFFF" id="option_do_sideward_kick" label="do\nsideward\nkick"/>
|
||||
<sub-graph rank="sink">
|
||||
<node fontname="Arial" fontcolor="#005A9C" fontsize="11" style="filled" fillcolor="#FFFFFF" id="basic_behavior_cont_turn_to_ball" label="cont\nturn\nto\nball"/>
|
||||
<node fontname="Arial" fontcolor="#005A9C" fontsize="11" style="filled" fillcolor="#FFFFFF" id="basic_behavior_stand" label="stand"/>
|
||||
<node fontname="Arial" fontcolor="#005A9C" fontsize="11" style="filled" fillcolor="#FFFFFF" id="basic_behavior_walk" label="walk"/>
|
||||
<node fontname="Arial" fontcolor="#005A9C" fontsize="11" style="filled" fillcolor="#FFFFFF" id="basic_behavior_cont_turn" label="cont\nturn"/>
|
||||
<node fontname="Arial" fontcolor="#005A9C" fontsize="11" style="filled" fillcolor="#FFFFFF" id="basic_behavior_go_to_ball" label="go\nto\nball"/>
|
||||
<node fontname="Arial" fontcolor="#005A9C" fontsize="11" style="filled" fillcolor="#FFFFFF" id="basic_behavior_special_action" label="special\naction"/>
|
||||
</sub-graph>
|
||||
<edge arrowsize="0.8" color="#808080" from="option_approach_close_ball" to="option_turn_for_ball"/>
|
||||
<edge arrowsize="0.8" color="#808080" minlen="3" from="option_approach_close_ball" to="basic_behavior_go_to_ball"/>
|
||||
<edge arrowsize="0.8" color="#808080" minlen="3" from="option_turn_for_ball" to="basic_behavior_cont_turn_to_ball"/>
|
||||
<edge arrowsize="0.8" color="#808080" minlen="3" from="option_turn_for_ball" to="basic_behavior_stand"/>
|
||||
<edge arrowsize="0.8" color="#808080" minlen="3" from="option_turn_for_ball" to="basic_behavior_walk"/>
|
||||
<edge arrowsize="0.8" color="#808080" minlen="3" from="option_turn_for_ball" to="basic_behavior_cont_turn"/>
|
||||
<edge arrowsize="0.8" color="#808080" from="option_do_arm_kick" to="option_approach_close_ball"/>
|
||||
<edge arrowsize="0.8" color="#808080" minlen="3" from="option_do_arm_kick" to="basic_behavior_walk"/>
|
||||
<edge arrowsize="0.8" color="#808080" minlen="3" from="option_do_arm_kick" to="basic_behavior_special_action"/>
|
||||
<edge arrowsize="0.8" color="#808080" minlen="3" from="option_do_arm_kick" to="basic_behavior_stand"/>
|
||||
<edge arrowsize="0.8" color="#808080" from="option_do_sideward_kick" to="option_approach_close_ball"/>
|
||||
<edge arrowsize="0.8" color="#808080" minlen="3" from="option_do_sideward_kick" to="basic_behavior_walk"/>
|
||||
<edge arrowsize="0.8" color="#808080" minlen="3" from="option_do_sideward_kick" to="basic_behavior_special_action"/>
|
||||
<edge arrowsize="0.8" color="#808080" minlen="3" from="option_do_sideward_kick" to="basic_behavior_stand"/>
|
||||
<edge arrowsize="0.8" color="#808080" style="dashed" minlen="3" from="state_turn_around_ball" to="basic_behavior_walk"/>
|
||||
<edge minlen="2" arrowsize="0.8" color="#808080" style="dashed" from="state_go_to_ball" to="option_approach_close_ball"/>
|
||||
<edge minlen="2" arrowsize="0.8" color="#808080" style="dashed" from="state_do_arm_kick" to="option_do_arm_kick"/>
|
||||
<edge minlen="2" arrowsize="0.8" color="#808080" style="dashed" from="state_do_sideward_kick" to="option_do_sideward_kick"/>
|
||||
</cluster>
|
||||
</graph>
|
||||
13188
src/graphxq/samples/root.svg
Normal file
13188
src/graphxq/samples/root.svg
Normal file
File diff suppressed because it is too large
Load diff
|
After Width: | Height: | Size: 737 KiB |
|
|
@ -51,6 +51,17 @@ $(document).ready(function(){
|
|||
$("#bnsvg").on("click",function(){ $("#dotForm").submit()});
|
||||
$("#bndn").on("click",function(){getsvg(true)});
|
||||
$("#dot").on("keyup",getsvg);
|
||||
$('.colorpicker').colorPicker();
|
||||
var resize=function(){
|
||||
var h=$(window).height();
|
||||
$('.extend').each(function(){
|
||||
var j=$(this)
|
||||
var top=j.offset();
|
||||
j.height(h-top.top-10)
|
||||
});
|
||||
};
|
||||
$(window).resize(resize);
|
||||
resize();
|
||||
});
|
||||
|
||||
function getsvg(dl){
|
||||
BIN
src/graphxq/static/arrow.gif
Normal file
BIN
src/graphxq/static/arrow.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 B |
35
src/graphxq/static/colorPicker.css
Normal file
35
src/graphxq/static/colorPicker.css
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
button.colorPicker-picker {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
padding: 0 !important;
|
||||
border: 1px solid #ccc;
|
||||
background: url(arrow.gif) no-repeat top right;
|
||||
cursor: pointer;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
div.colorPicker-palette {
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
border: 1px solid #598FEF;
|
||||
background-color: #EFEFEF;
|
||||
padding: 2px;
|
||||
z-index: 9999;
|
||||
}
|
||||
div.colorPicker_hexWrap {width: 100%; float:left }
|
||||
div.colorPicker_hexWrap label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
|
||||
div.colorPicker_hexWrap input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }
|
||||
|
||||
button.colorPicker-swatch {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border: 2px solid #ccc;
|
||||
margin: 1px;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
line-height: 16px;
|
||||
padding:0px;
|
||||
}
|
||||
button.colorPicker-swatch:focus{
|
||||
border: 2px solid #598FEF;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 880 B After Width: | Height: | Size: 880 B |
|
Before Width: | Height: | Size: 880 B After Width: | Height: | Size: 880 B |
347
src/graphxq/static/jquery.colorPicker.js
Normal file
347
src/graphxq/static/jquery.colorPicker.js
Normal file
|
|
@ -0,0 +1,347 @@
|
|||
/**
|
||||
* Really Simple Color Picker in jQuery
|
||||
*
|
||||
* Licensed under the MIT (MIT-LICENSE.txt) licenses.
|
||||
*
|
||||
* Copyright (c) 2008-2012
|
||||
* Lakshan Perera (www.laktek.com) & Daniel Lacy (daniellacy.com)
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to
|
||||
* deal in the Software without restriction, including without limitation the
|
||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||
* sell copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||
* IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
/**
|
||||
* Create a couple private variables.
|
||||
**/
|
||||
var selectorOwner,
|
||||
activePalette,
|
||||
cItterate = 0,
|
||||
templates = {
|
||||
control : $('<button type="button" class="colorPicker-picker" > </button>'),
|
||||
palette : $('<div id="colorPicker_palette" class="colorPicker-palette" />'),
|
||||
swatch : $('<button type="button" class="colorPicker-swatch"> </button>'),
|
||||
hexLabel: $('<label for="colorPicker_hex">Hex</label>'),
|
||||
hexField: $('<input type="text" id="colorPicker_hex" />')
|
||||
},
|
||||
transparent = "transparent",
|
||||
lastColor;
|
||||
|
||||
/**
|
||||
* Create our colorPicker function
|
||||
**/
|
||||
$.fn.colorPicker = function (options) {
|
||||
|
||||
return this.each(function () {
|
||||
// Setup time. Clone new elements from our templates, set some IDs, make shortcuts, jazzercise.
|
||||
var element = $(this),
|
||||
opts = $.extend({}, $.fn.colorPicker.defaults, options),
|
||||
defaultColor = $.fn.colorPicker.toHex(
|
||||
(element.val().length > 0) ? element.val() : opts.pickerDefault
|
||||
),
|
||||
newControl = templates.control.clone(),
|
||||
newPalette = templates.palette.clone().attr('id', 'colorPicker_palette-' + cItterate),
|
||||
newHexLabel = templates.hexLabel.clone(),
|
||||
newHexField = templates.hexField.clone(),
|
||||
paletteId = newPalette[0].id,
|
||||
swatch;
|
||||
|
||||
|
||||
/**
|
||||
* Build a color palette.
|
||||
**/
|
||||
$.each(opts.colors, function (n,v) {
|
||||
swatch = templates.swatch.clone();
|
||||
|
||||
if (n === transparent) {
|
||||
swatch.addClass(transparent).text('X');
|
||||
$.fn.colorPicker.bindPalette(newHexField, swatch, transparent);
|
||||
} else {
|
||||
swatch.css("background-color", v);
|
||||
swatch.attr("title", n);
|
||||
$.fn.colorPicker.bindPalette(newHexField, swatch);
|
||||
}
|
||||
swatch.appendTo(newPalette);
|
||||
});
|
||||
|
||||
newHexLabel.attr('for', 'colorPicker_hex-' + cItterate);
|
||||
|
||||
newHexField.attr({
|
||||
'id' : 'colorPicker_hex-' + cItterate,
|
||||
'value' : defaultColor
|
||||
});
|
||||
|
||||
newHexField.bind("keydown", function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
var hexColor = $.fn.colorPicker.toHex($(this).val());
|
||||
$.fn.colorPicker.changeColor(hexColor ? hexColor : element.val());
|
||||
}
|
||||
if (event.keyCode === 27) {
|
||||
$.fn.colorPicker.hidePalette();
|
||||
}
|
||||
});
|
||||
|
||||
newHexField.bind("keyup", function (event) {
|
||||
var hexColor = $.fn.colorPicker.toHex($(event.target).val());
|
||||
$.fn.colorPicker.previewColor(hexColor ? hexColor : element.val());
|
||||
});
|
||||
|
||||
$('<div class="colorPicker_hexWrap" />').append(newHexLabel).appendTo(newPalette);
|
||||
|
||||
newPalette.find('.colorPicker_hexWrap').append(newHexField);
|
||||
|
||||
$("body").append(newPalette);
|
||||
|
||||
newPalette.hide();
|
||||
|
||||
|
||||
/**
|
||||
* Build replacement interface for original color input.
|
||||
**/
|
||||
newControl.css("background-color", defaultColor);
|
||||
|
||||
newControl.bind("click", function () {
|
||||
$.fn.colorPicker.togglePalette($('#' + paletteId), $(this));
|
||||
});
|
||||
|
||||
if( options && options.onColorChange ) {
|
||||
newControl.data('onColorChange', options.onColorChange);
|
||||
} else {
|
||||
newControl.data('onColorChange', function() {} );
|
||||
}
|
||||
element.after(newControl);
|
||||
|
||||
element.bind("change", function () {
|
||||
element.next(".colorPicker-picker").css(
|
||||
"background-color", $.fn.colorPicker.toHex($(this).val())
|
||||
);
|
||||
});
|
||||
|
||||
// Hide the original input.
|
||||
element.val(defaultColor).hide();
|
||||
|
||||
cItterate++;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Extend colorPicker with... all our functionality.
|
||||
**/
|
||||
$.extend(true, $.fn.colorPicker, {
|
||||
/**
|
||||
* Return a Hex color, convert an RGB value and return Hex, or return false.
|
||||
*
|
||||
* Inspired by http://code.google.com/p/jquery-color-utils
|
||||
**/
|
||||
toHex : function (color) {
|
||||
// If we have a standard or shorthand Hex color, return that value.
|
||||
if (color.match(/[0-9A-F]{6}|[0-9A-F]{3}$/i)) {
|
||||
return (color.charAt(0) === "#") ? color : ("#" + color);
|
||||
|
||||
// Alternatively, check for RGB color, then convert and return it as Hex.
|
||||
} else if (color.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/)) {
|
||||
var c = ([parseInt(RegExp.$1, 10), parseInt(RegExp.$2, 10), parseInt(RegExp.$3, 10)]),
|
||||
pad = function (str) {
|
||||
if (str.length < 2) {
|
||||
for (var i = 0, len = 2 - str.length; i < len; i++) {
|
||||
str = '0' + str;
|
||||
}
|
||||
}
|
||||
|
||||
return str;
|
||||
};
|
||||
|
||||
if (c.length === 3) {
|
||||
var r = pad(c[0].toString(16)),
|
||||
g = pad(c[1].toString(16)),
|
||||
b = pad(c[2].toString(16));
|
||||
|
||||
return '#' + r + g + b;
|
||||
}
|
||||
|
||||
// Otherwise we wont do anything.
|
||||
} else {
|
||||
return false;
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Check whether user clicked on the selector or owner.
|
||||
**/
|
||||
checkMouse : function (event, paletteId) {
|
||||
var selector = activePalette,
|
||||
selectorParent = $(event.target).parents("#" + selector.attr('id')).length;
|
||||
|
||||
if (event.target === $(selector)[0] || event.target === selectorOwner[0] || selectorParent > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.fn.colorPicker.hidePalette();
|
||||
},
|
||||
|
||||
/**
|
||||
* Hide the color palette modal.
|
||||
**/
|
||||
hidePalette : function () {
|
||||
$(document).unbind("mousedown", $.fn.colorPicker.checkMouse);
|
||||
|
||||
$('.colorPicker-palette').hide();
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the color palette modal.
|
||||
**/
|
||||
showPalette : function (palette) {
|
||||
var hexColor = selectorOwner.prev("input").val();
|
||||
|
||||
palette.css({
|
||||
top: selectorOwner.offset().top + (selectorOwner.outerHeight()),
|
||||
left: selectorOwner.offset().left
|
||||
});
|
||||
|
||||
$("#color_value").val(hexColor);
|
||||
|
||||
palette.show();
|
||||
//palette.focus();
|
||||
$(document).bind("mousedown", $.fn.colorPicker.checkMouse);
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle visibility of the colorPicker palette.
|
||||
**/
|
||||
togglePalette : function (palette, origin) {
|
||||
// selectorOwner is the clicked .colorPicker-picker.
|
||||
if (origin) {
|
||||
selectorOwner = origin;
|
||||
}
|
||||
|
||||
activePalette = palette;
|
||||
|
||||
if (activePalette.is(':visible')) {
|
||||
$.fn.colorPicker.hidePalette();
|
||||
|
||||
} else {
|
||||
$.fn.colorPicker.showPalette(palette);
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the input with a newly selected color.
|
||||
**/
|
||||
changeColor : function (value) {
|
||||
selectorOwner.css("background-color", value);
|
||||
selectorOwner.prev("input").val(value).change();
|
||||
|
||||
$.fn.colorPicker.hidePalette();
|
||||
|
||||
selectorOwner.data('onColorChange').call(selectorOwner, $(selectorOwner).prev("input").attr("id"), value);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Preview the input with a newly selected color.
|
||||
**/
|
||||
previewColor : function (value) {
|
||||
selectorOwner.css("background-color", value);
|
||||
},
|
||||
|
||||
/**
|
||||
* Bind events to the color palette swatches.
|
||||
*/
|
||||
bindPalette : function (paletteInput, element, color) {
|
||||
color = color ? color : $.fn.colorPicker.toHex(element.css("background-color"));
|
||||
|
||||
element.bind({
|
||||
click : function (ev) {
|
||||
lastColor = color;
|
||||
|
||||
$.fn.colorPicker.changeColor(color);
|
||||
},
|
||||
mouseover : function (ev) {
|
||||
lastColor = paletteInput.val();
|
||||
|
||||
$(this).css("border-color", "#598FEF");
|
||||
|
||||
paletteInput.val(color);
|
||||
|
||||
$.fn.colorPicker.previewColor(color);
|
||||
},
|
||||
mouseout : function (ev) {
|
||||
$(this).css("border-color", "#CCC");
|
||||
|
||||
paletteInput.val(selectorOwner.css("background-color"));
|
||||
|
||||
paletteInput.val(lastColor);
|
||||
|
||||
$.fn.colorPicker.previewColor(lastColor);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Default colorPicker options.
|
||||
*
|
||||
* These are publibly available for global modification using a setting such as:
|
||||
*
|
||||
* $.fn.colorPicker.defaults.colors = ['151337', '111111']
|
||||
*
|
||||
* They can also be applied on a per-bound element basis like so:
|
||||
*
|
||||
* $('#element1').colorPicker({pickerDefault: 'efefef', transparency: true});
|
||||
* $('#element2').colorPicker({pickerDefault: '333333', colors: ['333333', '111111']});
|
||||
*
|
||||
**/
|
||||
$.fn.colorPicker.defaults = {
|
||||
// colorPicker default selected color.
|
||||
pickerDefault : "FFFFFF",
|
||||
|
||||
// Default color set.
|
||||
colors : {"aliceblue":"#f0f8ff","antiquewhite":"#faebd7","aqua":"#00ffff",
|
||||
"aquamarine":"#7fffd4","azure":"#f0ffff","beige":"#f5f5dc","bisque":"#ffe4c4",
|
||||
"black":"#000000","blanchedalmond":"#ffebcd","blue":"#0000ff","blueviolet":"#8a2be2","brown":"#a52a2a","burlywood":"#deb887",
|
||||
"cadetblue":"#5f9ea0","chartreuse":"#7fff00","chocolate":"#d2691e","coral":"#ff7f50","cornflowerblue":"#6495ed","cornsilk":"#fff8dc","crimson":"#dc143c","cyan":"#00ffff",
|
||||
"darkblue":"#00008b","darkcyan":"#008b8b","darkgoldenrod":"#b8860b","darkgray":"#a9a9a9","darkgreen":"#006400","darkkhaki":"#bdb76b","darkmagenta":"#8b008b","darkolivegreen":"#556b2f",
|
||||
"darkorange":"#ff8c00","darkorchid":"#9932cc","darkred":"#8b0000","darksalmon":"#e9967a","darkseagreen":"#8fbc8f","darkslateblue":"#483d8b","darkslategray":"#2f4f4f","darkturquoise":"#00ced1",
|
||||
"darkviolet":"#9400d3","deeppink":"#ff1493","deepskyblue":"#00bfff","dimgray":"#696969","dodgerblue":"#1e90ff",
|
||||
"firebrick":"#b22222","floralwhite":"#fffaf0","forestgreen":"#228b22","fuchsia":"#ff00ff",
|
||||
"gainsboro":"#dcdcdc","ghostwhite":"#f8f8ff","gold":"#ffd700","goldenrod":"#daa520","gray":"#808080","green":"#008000","greenyellow":"#adff2f",
|
||||
"honeydew":"#f0fff0","hotpink":"#ff69b4",
|
||||
"indianred ":"#cd5c5c","indigo ":"#4b0082","ivory":"#fffff0","khaki":"#f0e68c",
|
||||
"lavender":"#e6e6fa","lavenderblush":"#fff0f5","lawngreen":"#7cfc00","lemonchiffon":"#fffacd","lightblue":"#add8e6","lightcoral":"#f08080","lightcyan":"#e0ffff","lightgoldenrodyellow":"#fafad2",
|
||||
"lightgrey":"#d3d3d3","lightgreen":"#90ee90","lightpink":"#ffb6c1","lightsalmon":"#ffa07a","lightseagreen":"#20b2aa","lightskyblue":"#87cefa","lightslategray":"#778899","lightsteelblue":"#b0c4de",
|
||||
"lightyellow":"#ffffe0","lime":"#00ff00","limegreen":"#32cd32","linen":"#faf0e6",
|
||||
"magenta":"#ff00ff","maroon":"#800000","mediumaquamarine":"#66cdaa","mediumblue":"#0000cd","mediumorchid":"#ba55d3","mediumpurple":"#9370d8","mediumseagreen":"#3cb371","mediumslateblue":"#7b68ee",
|
||||
"mediumspringgreen":"#00fa9a","mediumturquoise":"#48d1cc","mediumvioletred":"#c71585","midnightblue":"#191970","mintcream":"#f5fffa","mistyrose":"#ffe4e1","moccasin":"#ffe4b5",
|
||||
"navajowhite":"#ffdead","navy":"#000080",
|
||||
"oldlace":"#fdf5e6","olive":"#808000","olivedrab":"#6b8e23","orange":"#ffa500","orangered":"#ff4500","orchid":"#da70d6",
|
||||
"palegoldenrod":"#eee8aa","palegreen":"#98fb98","paleturquoise":"#afeeee","palevioletred":"#d87093","papayawhip":"#ffefd5","peachpuff":"#ffdab9","peru":"#cd853f","pink":"#ffc0cb","plum":"#dda0dd","powderblue":"#b0e0e6","purple":"#800080",
|
||||
"red":"#ff0000","rosybrown":"#bc8f8f","royalblue":"#4169e1",
|
||||
"saddlebrown":"#8b4513","salmon":"#fa8072","sandybrown":"#f4a460","seagreen":"#2e8b57","seashell":"#fff5ee","sienna":"#a0522d","silver":"#c0c0c0","skyblue":"#87ceeb","slateblue":"#6a5acd","slategray":"#708090","snow":"#fffafa","springgreen":"#00ff7f","steelblue":"#4682b4",
|
||||
"tan":"#d2b48c","teal":"#008080","thistle":"#d8bfd8","tomato":"#ff6347","turquoise":"#40e0d0",
|
||||
"violet":"#ee82ee",
|
||||
"wheat":"#f5deb3","white":"#ffffff","whitesmoke":"#f5f5f5",
|
||||
"yellow":"#ffff00","yellowgreen":"#9acd32"},
|
||||
|
||||
// If we want to simply add more colors to the default set, use addColors.
|
||||
addColors : []
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
(:~
|
||||
: A(nother) templating Engine for XQuery (BaseX 7.5+(or -) specific)
|
||||
:
|
||||
: @author andy bunce
|
||||
: @since sept 2012
|
||||
:)
|
||||
|
||||
module namespace txq = 'apb.txq';
|
||||
declare default function namespace 'apb.txq';
|
||||
import module namespace xquery = "http://basex.org/modules/xquery";
|
||||
|
||||
|
||||
(:~
|
||||
: template function
|
||||
: @return updated doc from map
|
||||
:)
|
||||
declare function render($map as map(*),$layout as xs:string,$file as xs:string)
|
||||
{
|
||||
let $content:=render($map,$file)
|
||||
let $map:=map:new(($map,map{"body":=$content}))
|
||||
return render($map,$layout)
|
||||
|
||||
};
|
||||
|
||||
(:~
|
||||
: template function
|
||||
: @return updated doc from map
|
||||
:)
|
||||
declare function render($layout as xs:string,$map as map(*))
|
||||
{
|
||||
let $map:=map:new(($map,map{"partial":=partial(?,?,?,$map,$layout)}))
|
||||
return xquery:invoke($layout,$map)
|
||||
|
||||
};
|
||||
|
||||
(:~
|
||||
: partial template function: evaluate part for each value in sequence
|
||||
: @return updated doc from map
|
||||
:)
|
||||
declare function partial($part as xs:string,$name,$seq,$map,$base)
|
||||
{
|
||||
for $s in $seq
|
||||
let $map:=map:new(($map,map{$name:=$s}))
|
||||
return render($map,fn:resolve-uri($part,$base))
|
||||
};
|
||||
|
||||
|
|
@ -3,18 +3,24 @@
|
|||
<h1>About GraphXQ</h1>
|
||||
<p>
|
||||
This application provides a web interface to <a href="http://www.graphviz.org/">Graphviz</a>.
|
||||
It uses the <a href="http://basex.org" target="_blank">BaseX</a> <a
|
||||
</p>
|
||||
<p>
|
||||
The server side is written entirely in XQuery. It uses the
|
||||
<a href="http://basex.org" target="_blank">BaseX</a> implementation. <a
|
||||
href="http://docs.basex.org/wiki/RESTXQ" target="_blank">RestXQ</a>
|
||||
implementation which allows the use of XQuery annotations to specify
|
||||
web server behavior.
|
||||
is used to map XQuery annotations to web server behavior.
|
||||
</p>
|
||||
<p>The client side targets modern browsers. It was tested against Firefox 15 and Chrome 21.
|
||||
</p>
|
||||
<p>
|
||||
This application includes DOTML developed by Martin Loetzsch
|
||||
(<a href="http://www.martin-loetzsch.de/DOTML">http://www.martin-loetzsch.de/DOTML</a>).
|
||||
(<a href="http://www.martin-loetzsch.de/DOTML" target="_blank">http://www.martin-loetzsch.de/DOTML</a>).
|
||||
DotML is a XML based syntax for the input language of the 'Dot' graph drawing tool from the AT&T GraphViz suite. It can be transformed to the native syntax of the 'Dot' tool using XSLT.
|
||||
</p>
|
||||
<p>Twitter <a href="http://twitter.github.com/bootstrap/index.html"
|
||||
target="_blank">Bootstrap</a> is used for the client side styling.
|
||||
<p>Client libraries are loaded from CDN where possible. In particular
|
||||
<a href="http://cdnjs.com" target="_blank">cdnjs.com</a> is used.
|
||||
Twitter <a href="http://twitter.github.com/bootstrap/index.html"
|
||||
target="_blank">Bootstrap</a> is used for the client side styling.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,16 +5,23 @@
|
|||
<li class="active"><a href="#tab-dot" data-toggle="tab">Dot</a></li>
|
||||
<li><a href="#tab-defaults" data-toggle="tab">Defaults</a></li>
|
||||
<li><a href="#tab-xml" data-toggle="tab">Raw XML</a></li>
|
||||
<li> <div class="btn-group">
|
||||
<button id="bnup" class="btn btn-mini" ><i class="icon-refresh"></i>Redraw</button>
|
||||
<button id="bnsvg" class="btn btn-mini" ><i class="icon-fullscreen"></i>SVG</button>
|
||||
<button id="bndn" class="btn btn-mini"><i class="icon-download-alt"></i>download</button>
|
||||
<input id="color1" type="text" name="color1" value="#333399" class="colorpicker" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="tab-dot">
|
||||
<div class="tab-content extend">
|
||||
<div class="tab-pane active " id="tab-dot" >
|
||||
|
||||
<form id="dotForm" action= "svg" method="post" target="_new" class="well">
|
||||
<form id="dotForm" action= "svg" method="post" target="_new" class="well " >
|
||||
<label>digraph "
|
||||
<input type="text" name="title" placeholder="title" class="input-small" />"
|
||||
</label>
|
||||
<span style="margin-right:-5px;padding-right:2px;">{{</span>
|
||||
<textarea id="dot" name="dot" rows="2" style="width:90%;min-height:20em"
|
||||
<textarea id="dot" name="dot" rows="100" style="width:90%;height:100%;overflow:scroll"
|
||||
>{$dot}</textarea><span style="margin-right:-5px;">}}</span>
|
||||
<label class="checkbox">
|
||||
<input name="dl" type="checkbox"/> Download
|
||||
|
|
@ -55,15 +62,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<div class="btn-group">
|
||||
<button id="bnup" class="btn btn-mini" ><i class="icon-refresh"></i>Redraw</button>
|
||||
<button id="bnsvg" class="btn btn-mini" ><i class="icon-fullscreen"></i>SVG</button>
|
||||
<button id="bndn" class="btn btn-mini"><i class="icon-download-alt"></i>download</button>
|
||||
</div>
|
||||
<div id="svgdiv" style="width:100%;height:30em;border: 1px solid #E3E3E3;min-height:20em;">{$svgwidget}</div>
|
||||
|
||||
<div id="svgdiv" class="extend" style="width:100%;height:30em;border: 1px solid #E3E3E3;min-height:20em;">{$svgwidget}</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){{
|
||||
getsvg(false)
|
||||
|
|
|
|||
|
|
@ -5,21 +5,23 @@
|
|||
<base href="/restxq/graphxq/" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="xquery documentation" />
|
||||
<meta name="description" content="graphviz and svg tools" />
|
||||
<meta name="author" content="andy bunce" />
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.css" rel="stylesheet"
|
||||
<link href="{$libserver}/twitter-bootstrap/2.1.1/css/bootstrap.css" rel="stylesheet"
|
||||
type="text/css" />
|
||||
|
||||
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap-responsive.min.css"
|
||||
<link href="{$libserver}//twitter-bootstrap/2.1.1/css/bootstrap-responsive.min.css"
|
||||
rel="stylesheet" type="text/css" />
|
||||
<link href="/graphxq/app.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/graphxq/static/app.css" rel="stylesheet" type="text/css" />
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="/graphxq/graphxq2.png" />
|
||||
<link rel="shortcut icon" href="/graphxq/static/graphxq2.png" />
|
||||
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="/graphxq/app.js" type="text/javascript"></script>
|
||||
<script src="{$libserver}/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="{$libserver}/twitter-bootstrap/2.1.1/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="/graphxq/static/jquery.colorPicker.js" type="text/javascript"></script>
|
||||
<link href="/graphxq/static/colorPicker.css" rel="stylesheet" type="text/css" />
|
||||
<script src="/graphxq/static/app.js" type="text/javascript"></script>
|
||||
<script type="text/javascript"><![CDATA[
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-34544921-1']);
|
||||
|
|
@ -42,8 +44,8 @@
|
|||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a href="." class="brand" title="Version 0.0.1">
|
||||
<img src="/graphxq/graphxq2.png" />
|
||||
<a href="." class="brand" title="Version 0.0.3">
|
||||
<img src="/graphxq/static/graphxq2.png" />
|
||||
graphXQ
|
||||
</a>
|
||||
|
||||
|
|
@ -51,7 +53,7 @@
|
|||
<ul class="nav">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
Create
|
||||
New
|
||||
<b class="caret"></b>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
|
|
@ -63,7 +65,9 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav">
|
||||
<a href="library">Library</a>
|
||||
</li>
|
||||
<li class="nav">
|
||||
<a href="about">About</a>
|
||||
</li>
|
||||
|
|
|
|||
5
src/graphxq/views/library.xml
Normal file
5
src/graphxq/views/library.xml
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<div>
|
||||
<!-- q,collection, hits -->
|
||||
<h1>No Library yet</h1>
|
||||
|
||||
</div>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
onload="init(evt)" width="100%" height="100%" viewBox="0 0 400 400"
|
||||
version="1.1" preserveAspectRatio="xMidYMid meet">
|
||||
version="1.1" preserveAspectRatio="xMinYMin meet">
|
||||
<script type="text/ecmascript"><![CDATA[
|
||||
var svgns = "http://www.w3.org/2000/svg";
|
||||
var svgRoot;
|
||||
|
|
@ -20,22 +20,24 @@
|
|||
var onMouseDown=function(evt){
|
||||
inPan=true;
|
||||
var p2=getEventPoint(evt,true)
|
||||
stateOrigin.x=pTrans.x-p2.x;
|
||||
stateOrigin.y=pTrans.y-p2.y;
|
||||
stateOrigin.x=pTrans.x-(p2.x/zoomScale);
|
||||
stateOrigin.y=pTrans.y-(p2.y/zoomScale);
|
||||
// console.log("handleMouseDown")
|
||||
};
|
||||
var onMouseLeave=function(evt){
|
||||
inPan=false;
|
||||
//inPan=false;
|
||||
};
|
||||
var onMouseMove=function(evt){
|
||||
show_coords(evt);
|
||||
|
||||
if(inPan){
|
||||
var p2=getEventPoint(evt,true);
|
||||
// console.log("PAN>>",pTrans.x,pTrans.y)
|
||||
pTrans.x=(stateOrigin.x+p2.x);
|
||||
pTrans.y=(stateOrigin.y+p2.y);
|
||||
pTrans.x=stateOrigin.x+(p2.x/zoomScale);
|
||||
pTrans.y=stateOrigin.y+(p2.y/zoomScale);
|
||||
update();
|
||||
}
|
||||
}else{
|
||||
show_coords(evt);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Handle mouse wheel event.
|
||||
|
|
@ -55,14 +57,14 @@
|
|||
svgRoot.addEventListener('mouseup', onMouseUp, false );
|
||||
svgRoot.addEventListener('mousedown', onMouseDown, false );
|
||||
svgRoot.addEventListener('mousemove', onMouseMove,false );
|
||||
svgRoot.addEventListener('mouseleave', onMouseMove,false );
|
||||
if ($.browser.webkit) {
|
||||
svgRoot.addEventListener('mousewheel', onMouseWheel, false); // Chrome/Safari
|
||||
} else if ($.browser.mozilla) {
|
||||
svgRoot.addEventListener('DOMMouseScroll', onMouseWheel, false); // Firefox
|
||||
} else {
|
||||
svgRoot.addEventListener('mousewheel', onMouseWheel, false); // others (Opera, Explorer9)
|
||||
}
|
||||
svgRoot.addEventListener('mouseleave', onMouseMove,false );
|
||||
|
||||
if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0)
|
||||
window.addEventListener('mousewheel', onMouseWheel, false); // Chrome/Safari
|
||||
else
|
||||
window.addEventListener('DOMMouseScroll', onMouseWheel, false); // Others
|
||||
|
||||
|
||||
var cuthere=document.getElementById("cuthere");
|
||||
cuthere.addEventListener ( 'DOMNodeInserted', onNodeInsert, false );
|
||||
};
|
||||
|
|
@ -81,7 +83,7 @@
|
|||
var s=fitScale*zoomScale
|
||||
var k = svgRoot.createSVGMatrix().scale(s).translate(pTrans.x,pTrans.y);
|
||||
setCTM(cuthere,k)
|
||||
// cuthere.setAttribute("transform", "translate("+pTrans.x+","+pTrans.y+") scale("+scale+")");
|
||||
showState();
|
||||
};
|
||||
|
||||
function updateScale(d,evt){
|
||||
|
|
@ -141,7 +143,14 @@
|
|||
};
|
||||
return p1
|
||||
};
|
||||
|
||||
function showState(){
|
||||
var tspans =svgRoot.getElementById("coords").getElementsByTagNameNS(svgns, "tspan");
|
||||
tspans.item(9).firstChild.data = pTrans.x.toFixed(2);
|
||||
tspans.item(11).firstChild.data = pTrans.y.toFixed(2);
|
||||
tspans.item(13).firstChild.data = zoomScale.toFixed(2);
|
||||
tspans.item(15).firstChild.data = fitScale.toFixed(2);
|
||||
};
|
||||
|
||||
function show_coords(e) {
|
||||
var p1 = getEventPoint(e,true);
|
||||
// Show the results
|
||||
|
|
@ -151,11 +160,7 @@
|
|||
tspans.item(3).firstChild.data = e.clientY;
|
||||
tspans.item(5).firstChild.data = p1.x.toFixed(2);
|
||||
tspans.item(7).firstChild.data = p1.y.toFixed(2);
|
||||
tspans.item(9).firstChild.data = pTrans.x.toFixed(2);
|
||||
tspans.item(11).firstChild.data = pTrans.y.toFixed(2);
|
||||
|
||||
tspans.item(13).firstChild.data = zoomScale.toFixed(2);
|
||||
tspans.item(15).firstChild.data = fitScale.toFixed(2);
|
||||
showState();
|
||||
}
|
||||
]]></script>
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="none" stroke-width="1" stroke="none"/>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 7.4 KiB |
Loading…
Add table
Reference in a new issue