Introduced pixijs, implemented first version of zooming and panning

Signed-off-by: Jan Bicker <jan.bicker@typefox.io>
eclipse-cdt-cloud · Nov 7, 2018 · b0b8caf · b0b8caf
1 parent f73fc8a
commit b0b8caf
Show file tree

Hide file tree

Showing 113 changed files with 634 additions and 35,731 deletions.
diff --git a/example/index.html b/example/index.html
@@ -7,14 +7,24 @@
         #main {
             border: 1px solid;
             margin: 10px;
-            width: 760px;
-            overflow: auto;
+            width: 500px;
+            overflow: hidden;
         }
     </style>
 </head>
 
 <body>
 	<div id='main'></div>
+    <pre id='test0'></pre>
+    <pre id='test1'></pre>
+    <pre id='test2'></pre>
+    <pre id='test3'></pre>
+    <pre id='test4'></pre>
+    <pre id='test5'></pre>
+    <pre id='test6'></pre>
+    <pre id='test7'></pre>
+    <pre id='test8'></pre>
+    <pre id='test9'></pre>
     <script type="text/javascript" src="./bundle.js" charset="utf-8"></script>
 </body>
 

diff --git a/package.json b/package.json
@@ -8,13 +8,16 @@
     "start": "./node_modules/.bin/webpack-dev-server --host 0.0.0.0"
   },
   "devDependencies": {
+    "@types/node": "^8.0.26",
+    "@types/pixi.js": "^4.8.2",
     "source-map-loader": "^0.2.4",
     "ts-loader": "^5.2.2",
     "typescript": "^3.1.3",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.10"
   },
   "dependencies": {
-    "webpack": "^4.22.0"
+    "webpack": "^4.22.0",
+    "pixi.js": "^4.8.2"
   }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -1,94 +1,112 @@
-import { TimeGraph, TimeGraphEntry } from "./time-graph";
+import { TimeGraph, TimeGraphModel } from "./time-graph";
+// import { TimeAxis } from "./time-axis";
 
-const timeGraphEntry: TimeGraphEntry = {
-    id: 'testEntry',
-    name: 'EntryTest',
+// const timeGraphSimple: TimeGraphModel = {
+//     id: 'test1',
+//     name: 'graph-test1',
+//     range: {
+//         start: 0,
+//         end: 1000
+//     },
+//     rows: [
+//         {
+//             states: [
+//                 {
+//                     label: 'state1',
+//                     range: {
+//                         start: 0,
+//                         end: 100
+//                     }
+//                 },
+//                 {
+//                     label: 'state2',
+//                     range: {
+//                         start: 300,
+//                         end: 400
+//                     }
+//                 },
+//                 {
+//                     label: 'state3',
+//                     range: {
+//                         start: 600,
+//                         end: 700
+//                     }
+//                 },
+//                 {
+//                     label: 'state4',
+//                     range: {
+//                         start: 900,
+//                         end: 1000
+//                     }
+//                 }
+//             ]
+//         }
+//     ]
+// }
+const timeGraph: TimeGraphModel = {
+    id: 'test1',
+    name: 'graph-test1',
     range: {
-        startTime: 0,
-        endTime: 760
+        start: 0,
+        end: 6000
     },
     rows: [
         {
             states: [
                 {
                     label: 'state1',
                     range: {
-                        startTime: 450,
-                        endTime: 550
+                        start: 0,
+                        end: 50
                     }
                 },
                 {
                     label: 'state2',
                     range: {
-                        startTime: 650,
-                        endTime: 1550
+                        start: 150,
+                        end: 155
                     }
                 },
                 {
                     label: 'state3',
                     range: {
-                        startTime: 2650,
-                        endTime: 4550
-                    }
-                }
-            ]
-        },
-        {
-            states: [
-                {
-                    label: 'state2.1',
-                    range: {
-                        startTime: 1450,
-                        endTime: 2550
+                        start: 265,
+                        end: 455
                     }
                 },
                 {
-                    label: 'state2.2',
+                    label: 'state4',
                     range: {
-                        startTime: 2650,
-                        endTime: 2750
+                        start: 565,
+                        end: 655
                     }
                 },
                 {
-                    label: 'state2.3',
+                    label: 'state5',
                     range: {
-                        startTime: 4650,
-                        endTime: 5550
+                        start: 765,
+                        end: 1455
                     }
-                }
-            ]
-        }
-    ]
-}
-const timeGraphEntry2: TimeGraphEntry = {
-    id: 'testEntry2',
-    name: 'EntryTest2',
-    range: {
-        startTime: 0,
-        endTime: 760
-    },
-    rows: [
-        {
-            states: [
+                },
                 {
-                    label: 'state1',
+                    label: 'state6',
                     range: {
-                        startTime: 0,
-                        endTime: 50
+                        start: 2265,
+                        end: 2455
                     }
                 },
                 {
-                    label: 'state2',
+                    label: 'state7',
                     range: {
-                        startTime: 150,
-                        endTime: 155
+                        start: 3265,
+                        end: 3455
                     }
                 },
                 {
-                    label: 'state3',
+                    label: 'state8',
                     range: {
-                        startTime: 265,
-                        endTime: 455
+                        start: 4265,
+                        end: 4455
                     }
                 }
             ]
@@ -98,30 +116,61 @@ const timeGraphEntry2: TimeGraphEntry = {
                 {
                     label: 'state2.1',
                     range: {
-                        startTime: 145,
-                        endTime: 255
+                        start: 145,
+                        end: 255
                     }
                 },
                 {
                     label: 'state2.2',
                     range: {
-                        startTime: 265,
-                        endTime: 275
+                        start: 265,
+                        end: 275
                     }
                 },
                 {
                     label: 'state2.3',
                     range: {
-                        startTime: 365,
-                        endTime: 555
+                        start: 365,
+                        end: 555
                     }
                 }
             ]
         }
     ]
 }
 
-const chart = new TimeGraph('main');
-chart.setEntry(timeGraphEntry);
-chart.setEntry(timeGraphEntry2);
-chart.render();
+
+
+// const tg = new TimeGraph('main');
+
+// const timeAxis = new TimeAxis({
+//     id: 'timeAxis',
+//     height: 30,
+//     width: 6000
+// });
+// tg.setTimeAxis(timeAxis)
+
+// r1 = new TimeGraphRow(row-config)
+// r2 = new TimeGraphRow(row-config)
+
+// tg.addRows([r1, r2])
+// tg.removeRows([r2])
+
+// s1 = new TimeGraphState(state-config)
+// s2 = new TimeGraphState(state-config)
+
+// r = tg.findRow(row-id)
+// r.addStates([s1])
+// r1.addStates([s2])
+
+const chart = new TimeGraph('main', timeGraph);
+chart.render();
+
+
+export type TestFieldId = 'test0' | 'test1' | 'test2' | 'test3' | 'test4' | 'test5' | 'test6' | 'test7' | 'test8' | 'test9';
+export function tgTest(id: TestFieldId, val:string){
+    const f = document.getElementById(id);
+    if(f){
+        f.innerHTML = val;
+    }
+}
diff --git a/src/speedscope/gl/canvas-context.ts b/src/speedscope/gl/canvas-context.ts