Added Interactivity sample page to WebMsagl. Added .gitignore to WebMsagl.

2016-08-22 17:36:41 +01:00 · 2016-08-22 17:36:41 +01:00 · ecc198ca06
--- a/GraphLayout/MsaglSharpkit/.gitignore
+++ b/GraphLayout/MsaglSharpkit/.gitignore
@ -0,0 +1,10 @@
+.vs/config
+MsaglDrawingSharpkit/res
+packages
+WebMsagl/**/*.js
+WebMsagl/**/*.map
+!WebMsagl/Scripts/src/jsclr.js
+!WebMsagl/Scripts/Microsoft.Msagl.js
+!WebMsagl/Scripts/sharpkit_post.js
+!WebMsagl/Scripts/sharpkit_pre.js
+!WebMsagl/Scripts/workerBoot.js
--- a/GraphLayout/MsaglSharpkit/WebMsagl/Samples/Interactivity/app.ts
+++ b/GraphLayout/MsaglSharpkit/WebMsagl/Samples/Interactivity/app.ts
@ -0,0 +1,32 @@
+import G = require("../../Scripts/src/ggraph");
+import IDDSVGGraph = require("../../Scripts/src/iddsvggraph");
+
+var graphView = document.getElementById("graphView");
+var graphControl = new IDDSVGGraph(graphView);
+
+var status = document.getElementById("status");
+
+function appendStatus(text) {
+    var p = document.createElement("p");
+    p.appendChild(document.createTextNode(text));
+    status.appendChild(p);
+}
+
+function makeInitialGraph() {
+    graphControl.graph = new G.GGraph();
+    graphControl.onNodeClick = (n => appendStatus("Clicked " + n.id));
+    graphControl.onEdgeClick = (e => appendStatus("Clicked " + e.id));
+    graphControl.graph.settings.aspectRatio = graphView.offsetWidth / graphView.offsetHeight;
+
+    graphControl.graph.addNode(new G.GNode({ id: "node1", label: "Node 1", fill: "white" }));
+    graphControl.graph.addNode(new G.GNode({ id: "node2", label: "Node 2", fill: "white" }));
+    graphControl.graph.addNode(new G.GNode({ id: "node3", label: "Node 3", fill: "white" }));
+
+    graphControl.graph.addEdge(new G.GEdge({ id: "edge13", source: "node1", target: "node3" }));
+    graphControl.graph.addEdge(new G.GEdge({ id: "edge23", source: "node2", target: "node3" }));
+
+    graphControl.graph.createNodeBoundariesForSVGInContainer(graphView);
+    graphControl.graph.beginLayoutGraph(() => { graphControl.drawGraph(); appendStatus("Ready"); });
+}
+
+makeInitialGraph();
--- a/GraphLayout/MsaglSharpkit/WebMsagl/Samples/Interactivity/boot.ts
+++ b/GraphLayout/MsaglSharpkit/WebMsagl/Samples/Interactivity/boot.ts
@ -0,0 +1,5 @@
+/// <reference path="../../Scripts/typings/requirejs/require.d.ts"/>
+require(["../config"], () => {
+    require(["../Samples/Interactivity/app"]), () => {
+    }
+});
--- a/GraphLayout/MsaglSharpkit/WebMsagl/Samples/Interactivity/index.html
+++ b/GraphLayout/MsaglSharpkit/WebMsagl/Samples/Interactivity/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>MSAGL_JS Interactivity Sample</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../samples.css" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js" data-main="/Samples/Interactivity/boot"></script>
+</head>
+<body>
+    <div id="graphContainer"><div id="graphView"></div></div>
+    <div id="status" class="status"></div>
+</body>
+</html>
--- a/GraphLayout/MsaglSharpkit/WebMsagl/Samples/Interactivity/styles.css
+++ b/GraphLayout/MsaglSharpkit/WebMsagl/Samples/Interactivity/styles.css
@ -0,0 +1,12 @@
+body {
+}
+
+#graphContainer {
+    height: 400px;
+    border: 1px solid black;
+}
+
+#graphView {
+    height: 100%;
+    overflow: hidden;
+}
--- a/GraphLayout/MsaglSharpkit/WebMsagl/WebMsagl.csproj
+++ b/GraphLayout/MsaglSharpkit/WebMsagl/WebMsagl.csproj
@ -54,6 +54,8 @@
    <Content Include="Samples\GraphFromJson\styles.css" />
    <Content Include="Samples\HiddenRendering\index.html" />
    <Content Include="Samples\HiddenRendering\styles.css" />
+    <Content Include="Samples\Interactivity\index.html" />
+    <Content Include="Samples\Interactivity\styles.css" />
    <Content Include="Samples\Options\index.html" />
    <Content Include="Samples\Options\styles.css" />
    <Content Include="Samples\samples.css" />
@ -74,6 +76,8 @@
    <TypeScriptCompile Include="Samples\GraphFromJson\boot.ts" />
    <TypeScriptCompile Include="Samples\HiddenRendering\app.ts" />
    <TypeScriptCompile Include="Samples\HiddenRendering\boot.ts" />
+    <TypeScriptCompile Include="Samples\Interactivity\app.ts" />
+    <TypeScriptCompile Include="Samples\Interactivity\boot.ts" />
    <TypeScriptCompile Include="Samples\Options\app.ts" />
    <TypeScriptCompile Include="Samples\Options\boot.ts" />
    <TypeScriptCompile Include="Scripts\src\contextgraph.ts" />