Adding back plain html examples

aasimkhan30 · aasimkhan30 · commit 7944a796034e · 2025-01-07T23:47:33.000-08:00
diff --git a/build.js b/build.js
@@ -4,19 +4,16 @@ const fs = require("fs");
 const path = require("path");
 
 const config = {
-    entryPoints: ['./src/ts/index.ts', 'src/ts/examples/main.tsx'],
-    outdir: './dist',
-    //outfile: './dist/index.js',
+    entryPoints: ['./src/ts/index.ts'],
+    outfile: './dist/index.js',
     bundle: true,
     format: 'esm',
     target: 'esnext',
     sourcemap: true,
     loader: {
         ".ts": "ts",
-        ".tsx": "tsx",
         ".css": "css",
         ".gif": "dataurl",
-        '.svg': 'dataurl',
     },
     plugins: [{
         name: 'rebuild-notify',
diff --git a/index.html b/index.html
@@ -1,11 +1,13 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Examples</title>
-    <base href="dist/" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./examples/main.js"></script>
-  </body>
-</html>
+    <head>
+        <title>Examples</title>
+    </head>
+    <body>
+        <h1>Examples</h1>
+        <ul>
+            <li><a href="ts-examples/helloWorld.html">Hello World</a> - A simple example that loads mxgraph with 2 cells and a connection between them.</li>
+            <li><a href="ts-examples/schemaDesigner.html">Schema Designer</a> - Creates a schemaDesigner with a test schema</li>
+        </ul>
+    </body>
+</html>
diff --git a/ts-examples/resources/addTable.svg b/ts-examples/resources/addTable.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 6.25C3 4.45507 4.45507 3 6.25 3H17.75C19.5449 3 21 4.45507 21 6.25V12.0218C20.5368 11.7253 20.0335 11.4858 19.5 11.3135V10H15.5V11.3135C14.9665 11.4858 14.4632 11.7253 14 12.0218L14 10H10L10 14H12.0218C11.7253 14.4632 11.4858 14.9665 11.3135 15.5H10V19.5H11.3135C11.4858 20.0335 11.7253 20.5368 12.0218 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25ZM6.25 4.5C5.2835 4.5 4.5 5.2835 4.5 6.25V8.5H8.5V4.5H6.25ZM4.5 10V14H8.5L8.5 10H4.5ZM15.5 8.5H19.5V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5H15.5V8.5ZM14 4.5H10V8.5H14V4.5ZM4.5 15.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H8.5V15.5H4.5ZM23 17.5C23 14.4624 20.5376 12 17.5 12C14.4624 12 12 14.4624 12 17.5C12 20.5376 14.4624 23 17.5 23C20.5376 23 23 20.5376 23 17.5ZM18.0006 18L18.0011 20.5035C18.0011 20.7797 17.7773 21.0035 17.5011 21.0035C17.225 21.0035 17.0011 20.7797 17.0011 20.5035L17.0006 18H14.4961C14.22 18 13.9961 17.7762 13.9961 17.5C13.9961 17.2239 14.22 17 14.4961 17H17.0005L17 14.4993C17 14.2232 17.2239 13.9993 17.5 13.9993C17.7761 13.9993 18 14.2232 18 14.4993L18.0005 17H20.503C20.7792 17 21.003 17.2239 21.003 17.5C21.003 17.7762 20.7792 18 20.503 18H18.0006Z" fill="#fff" />
+</svg>
diff --git a/ts-examples/resources/arrange.svg b/ts-examples/resources/arrange.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048">
+  <path d="M512 1536h512v128H384v-640h128v512zM1536 512h-512V384h640v640h-128V512zM896 896H0V0h896v896zM768 128H128v640h640V128zm1280 1024v896h-896v-896h896zm-128 128h-640v640h640v-640z" fill="white" />
+</svg>
diff --git a/ts-examples/resources/connector.svg b/ts-examples/resources/connector.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path opacity="0.1" d="M13.5 7.5C13.5 8.68669 13.1481 9.84673 12.4888 10.8334C11.8295 11.8201 10.8925 12.5892 9.7961 13.0433C8.69974 13.4974 7.49334 13.6162 6.32946 13.3847C5.16557 13.1532 4.09647 12.5818 3.25736 11.7426C2.41824 10.9035 1.8468 9.83443 1.61529 8.67054C1.38378 7.50666 1.5026 6.30026 1.95672 5.2039C2.41085 4.10754 3.17988 3.17047 4.16658 2.51118C5.15327 1.85189 6.31331 1.5 7.5 1.5C9.0913 1.5 10.6174 2.13214 11.7426 3.25736C12.8679 4.38258 13.5 5.9087 13.5 7.5Z" fill="#006CBE" />
+  <path d="M7.5 1C6.21442 1 4.95771 1.38122 3.88879 2.09545C2.81987 2.80968 1.98675 3.82484 1.49478 5.01256C1.00281 6.20028 0.874091 7.50721 1.12489 8.76809C1.3757 10.029 1.99476 11.1872 2.90381 12.0962C3.81285 13.0052 4.97104 13.6243 6.23191 13.8751C7.49279 14.1259 8.79972 13.9972 9.98744 13.5052C11.1752 13.0132 12.1903 12.1801 12.9046 11.1112C13.6188 10.0423 14 8.78558 14 7.5C13.9979 5.77674 13.3124 4.12467 12.0939 2.90614C10.8753 1.68762 9.22326 1.00212 7.5 1V1ZM7.5 13C6.4122 13 5.34883 12.6774 4.44436 12.0731C3.53989 11.4687 2.83494 10.6098 2.41866 9.60476C2.00238 8.59977 1.89346 7.4939 2.10568 6.427C2.3179 5.36011 2.84172 4.3801 3.61091 3.61091C4.3801 2.84172 5.36011 2.3179 6.427 2.10568C7.4939 1.89346 8.59976 2.00238 9.60476 2.41866C10.6098 2.83494 11.4687 3.53989 12.0731 4.44436C12.6774 5.34883 13 6.4122 13 7.5C12.9984 8.9582 12.4184 10.3562 11.3873 11.3873C10.3562 12.4184 8.9582 12.9984 7.5 13V13Z" fill="#006CBE" />
+  <path d="M7.146 10.146L9.293 8H4V7H9.293L7.146 4.854L7.854 4.146L10.854 7.146V7.854L7.854 10.854L7.146 10.146Z" fill="#006CBE" />
+</svg>
diff --git a/ts-examples/resources/dateTimeDataType.svg b/ts-examples/resources/dateTimeDataType.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.75 3C19.5449 3 21 4.45507 21 6.25V17.75C21 19.5449 19.5449 21 17.75 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H17.75ZM19.5 8.5H4.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H17.75C18.7165 19.5 19.5 18.7165 19.5 17.75V8.5ZM13.9951 10.1953C14.6624 10.1953 15.1914 10.3727 15.582 10.7275C15.9727 11.0824 16.168 11.5625 16.168 12.168C16.168 12.5163 16.0785 12.8263 15.8994 13.0981C15.7204 13.37 15.4762 13.584 15.167 13.7402C15.5381 13.9128 15.8237 14.1488 16.0239 14.4482C16.2241 14.7477 16.3242 15.0863 16.3242 15.4639C16.3242 16.0889 16.1126 16.5845 15.6895 16.9507C15.2663 17.3169 14.7031 17.5 14 17.5C13.2936 17.5 12.728 17.3161 12.3032 16.9482C11.8784 16.5804 11.666 16.0856 11.666 15.4639C11.666 15.083 11.7669 14.7412 11.9688 14.4385C12.1706 14.1357 12.4538 13.903 12.8184 13.7402C12.5124 13.584 12.2707 13.37 12.0933 13.0981C11.9159 12.8263 11.8271 12.5163 11.8271 12.168C11.8271 11.5625 12.0225 11.0824 12.4131 10.7275C12.8037 10.3727 13.3311 10.1953 13.9951 10.1953ZM10.2197 10.2686V17.4023H9.03809V11.6943L7.29492 12.29V11.2891L10.0684 10.2686H10.2197ZM13.9902 14.2285C13.6452 14.2285 13.3693 14.3359 13.1626 14.5508C12.9559 14.7656 12.8525 15.0505 12.8525 15.4053C12.8525 15.7536 12.9543 16.0319 13.1577 16.2402C13.3612 16.4486 13.6419 16.5527 14 16.5527C14.3581 16.5527 14.6372 16.4518 14.8374 16.25C15.0376 16.0482 15.1377 15.7666 15.1377 15.4053C15.1377 15.0537 15.0327 14.7697 14.8228 14.5532C14.6128 14.3368 14.3353 14.2285 13.9902 14.2285ZM13.9951 11.1475C13.6924 11.1475 13.4531 11.2427 13.2773 11.4331C13.1016 11.6235 13.0137 11.8831 13.0137 12.2119C13.0137 12.5374 13.1024 12.7962 13.2798 12.9883C13.4572 13.1803 13.6973 13.2764 14 13.2764C14.3027 13.2764 14.5428 13.1803 14.7202 12.9883C14.8976 12.7962 14.9863 12.5374 14.9863 12.2119C14.9863 11.9027 14.8968 11.648 14.7178 11.4478C14.5387 11.2476 14.2979 11.1475 13.9951 11.1475ZM17.75 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V7H19.5V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5Z" fill="#212121" />
+</svg>
diff --git a/ts-examples/resources/delete.svg b/ts-examples/resources/delete.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 5H14C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5ZM8.5 5C8.5 3.067 10.067 1.5 12 1.5C13.933 1.5 15.5 3.067 15.5 5H21.25C21.6642 5 22 5.33579 22 5.75C22 6.16421 21.6642 6.5 21.25 6.5H19.9309L18.7589 18.6112C18.5729 20.5334 16.9575 22 15.0263 22H8.97369C7.04254 22 5.42715 20.5334 5.24113 18.6112L4.06908 6.5H2.75C2.33579 6.5 2 6.16421 2 5.75C2 5.33579 2.33579 5 2.75 5H8.5ZM10.5 9.75C10.5 9.33579 10.1642 9 9.75 9C9.33579 9 9 9.33579 9 9.75V17.25C9 17.6642 9.33579 18 9.75 18C10.1642 18 10.5 17.6642 10.5 17.25V9.75ZM14.25 9C14.6642 9 15 9.33579 15 9.75V17.25C15 17.6642 14.6642 18 14.25 18C13.8358 18 13.5 17.6642 13.5 17.25V9.75C13.5 9.33579 13.8358 9 14.25 9ZM6.73416 18.4667C6.84577 19.62 7.815 20.5 8.97369 20.5H15.0263C16.185 20.5 17.1542 19.62 17.2658 18.4667L18.4239 6.5H5.57608L6.73416 18.4667Z" fill="white" />
+</svg>
diff --git a/ts-examples/resources/export.svg b/ts-examples/resources/export.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.7071 2.29289C12.3166 1.90237 11.6834 1.90237 11.2929 2.29289L6.29289 7.29289C5.90237 7.68342 5.90237 8.31658 6.29289 8.70711C6.68342 9.09763 7.31658 9.09763 7.70711 8.70711L11 5.41421V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V5.41421L16.2929 8.70711C16.6834 9.09763 17.3166 9.09763 17.7071 8.70711C18.0976 8.31658 18.0976 7.68342 17.7071 7.29289L12.7071 2.29289ZM5.25 20.5C4.83579 20.5 4.5 20.8358 4.5 21.25C4.5 21.6642 4.83579 22 5.25 22H18.75C19.1642 22 19.5 21.6642 19.5 21.25C19.5 20.8358 19.1642 20.5 18.75 20.5H5.25Z" fill="#ffffff" />
+</svg>
diff --git a/ts-examples/resources/numberDataType.svg b/ts-examples/resources/numberDataType.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<svg width="2048" height="2048" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g class="layer">
+  <title>Layer 1</title>
+  <path d="m1191.41,1433.33l-567.7,0l0,-105.47q0,-53.44 20.7,-102.66q16.26,-39.38 48.79,-75.94t73.92,-74.53t81.31,-70.31t75.4,-68.91t56.18,-66.09t22.18,-66.09q0,-36.56 -28.09,-63.28t-66.53,-26.72q-34,0 -59.14,19.69t-34,52.03l-184.8,-36.56q8.87,-46.41 34,-85.78t65.05,-67.5t84.27,-45t94.62,-16.88q59.14,0 110.88,21.09t90.18,57.66t60.61,85.78t22.18,105.47q0,54.84 -16.26,98.44t-45.83,81.56t-65.05,71.72t-75.4,64.69t-75.4,64.69t-69.48,68.91l347.42,0l0,180zm-926.95,-693.28q-42.87,23.91 -100.53,43.59t-107.92,19.69l0,-180q16.26,0 45.83,-8.44t59.14,-21.09t53.22,-29.53t32.52,-30.94l187.76,0l0,900l-170.02,0l0,-693.28zm1364.56,693.28q-62.09,0 -119.75,-19.69t-110.88,-52.03l0,-178.59q29.57,21.09 51.74,36.56t47.31,25.31t50.27,14.06t66.53,4.22q32.52,0 62.09,-5.63t51.74,-21.09t36.96,-39.38t13.31,-59.06q0,-43.59 -35.48,-61.88t-82.79,-25.31t-96.1,-4.22t-78.35,2.81l0,-136.41l85.75,0q45.83,0 85.75,-9.84t66.53,-36.56t26.61,-80.16q0,-59.06 -36.96,-78.75t-94.62,-19.69q-59.14,0 -102.01,25.31t-85.75,60.47l0,-182.81q50.27,-32.34 112.36,-45t121.23,-12.66q53.22,0 103.49,14.06t88.7,40.78t63.57,68.91t23.65,97.03q0,67.5 -28.09,119.53t-91.66,85.78q65.05,21.09 106.44,74.53t41.4,119.53q0,66.09 -29.57,118.13t-76.88,87.19t-110.88,54.84t-125.66,19.69z" id="svg_1"/>
+ </g>
+</svg>
diff --git a/ts-examples/resources/redo.svg b/ts-examples/resources/redo.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M19.2501 2C18.8704 2 18.5566 2.28215 18.507 2.64823L18.5001 2.75V8.44L13.9258 3.88014C11.4838 1.43819 7.56165 1.37863 5.0475 3.70146L4.86162 3.88014C2.35863 6.38313 2.35863 10.4413 4.86162 12.9443L13.7068 21.7835C13.9998 22.0762 14.4745 22.0759 14.7674 21.783C15.0603 21.4901 15.06 21.0151 14.767 20.7223L5.92228 11.8836C4.00507 9.96641 4.00507 6.85801 5.92228 4.9408C7.78139 3.08169 10.7606 3.02535 12.6883 4.77248L12.8659 4.94156L17.4381 9.5L11.7501 9.50018C11.3704 9.50018 11.0566 9.78234 11.007 10.1484L11.0001 10.2502C11.0001 10.6299 11.2823 10.9437 11.6483 10.9933L11.7501 11.0002H19.2501C19.6298 11.0002 19.9436 10.718 19.9933 10.352L20.0001 10.2502V2.75C20.0001 2.33579 19.6643 2 19.2501 2Z" fill="white" />
+</svg>
diff --git a/ts-examples/resources/schemaDesigner.css b/ts-examples/resources/schemaDesigner.css
@@ -0,0 +1,32 @@
+:root {
+    --graph-font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    --color-toolbar-bg: #2c2c2c;
+    --color-toolbar-text: #fff;
+    --color-toolbar-button-hover: #383838;
+    --color-toolbar-divider: #444444;
+    --color-border: #c3c3c3;
+    --color-outline-color: #0c8ce9;
+    --color-graph-gridLines: #c3c3c3;
+    --color-graph-outline-background: #fff;
+    --color-graph-cell-highlight: #0c8ce9;
+    --color-graph-outline-tableCell: #1e272e;
+    --color-graph-outline-columnCell: #bdc3c7;
+    --color-graph-background: #ffffff;
+    --color-graph-table-indicator: #00a2ad;
+    --color-graph-column-indicator: #f0f0f0;
+    --color-graph-node-hover: #f0f0f0;
+  }
+  .background {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+  }
+  #graphContainer {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: calc(100vh - 20px);
+    user-select: none;
+  }
diff --git a/ts-examples/resources/table.svg b/ts-examples/resources/table.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 6.25C3 4.45507 4.45507 3 6.25 3H17.75C19.5449 3 21 4.45507 21 6.25V17.75C21 19.5449 19.5449 21 17.75 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25ZM6.25 4.5C5.2835 4.5 4.5 5.2835 4.5 6.25V8.5H8.5V4.5H6.25ZM4.5 10V14H8.5L8.5 10H4.5ZM10 10L10 14H14L14 10H10ZM15.5 10L15.5 14H19.5V10H15.5ZM14 15.5H10V19.5H14V15.5ZM15.5 19.5H17.75C18.7165 19.5 19.5 18.7165 19.5 17.75V15.5H15.5V19.5ZM15.5 8.5H19.5V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5H15.5V8.5ZM14 4.5H10V8.5H14V4.5ZM4.5 15.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H8.5V15.5H4.5Z" fill="white" />
+</svg>
diff --git a/ts-examples/resources/tableNode.svg b/ts-examples/resources/tableNode.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 2H14V14H1V2ZM2 4H13V3H2V4ZM5 7V5H2V7H5ZM2 8V10H5V8H2ZM5 13V11H2V13H5ZM9 7V5H6V7H9ZM6 8V10H9V8H6ZM9 13V11H6V13H9ZM13 7V5H10V7H13ZM13 10V8H10V10H13ZM13 13V11H10V13H13Z" fill="#323130"/>
+</svg>
diff --git a/ts-examples/resources/text.svg b/ts-examples/resources/text.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<svg width="2048" height="2048" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g class="layer">
+  <title>Layer 1</title>
+  <path d="m157.29,1513.4l-154.29,0l318.06,-916.84l158.35,0l316.7,916.84l-155.64,0l-75.79,-233.59l-334.3,0l-73.09,233.59zm238.2,-781.07q-2.71,14.6 -4.06,29.2t-6.77,29.2l-117.75,364.99l261.21,0l-119.1,-364.99q-4.06,-13.14 -5.41,-27.74t-5.41,-30.66l-2.71,0zm622.58,781.07l-138.05,0l0,-969.4l138.05,0l0,429.22l1.35,0q35.19,-62.78 85.27,-96.36t120.46,-33.58q64.96,0 110.98,26.28t77.15,73t43.31,103.66t13.53,121.18q0,70.08 -14.89,134.31t-48.72,115.34t-83.91,80.3t-124.52,30.66q-116.4,0 -178.65,-109.5l-1.35,0l0,94.9zm-1.35,-274.47q0,35.04 10.83,65.7t29.78,55.48t46.02,36.5t62.26,14.6q47.37,0 78.5,-21.9t50.08,-56.94t27.07,-78.84t8.12,-86.14q0,-37.96 -8.12,-74.46t-25.72,-67.16t-46.02,-46.72t-70.38,-17.52q-39.25,0 -69.03,16.06t-51.43,42.34t-31.13,62.78t-10.83,75.92l0,80.3zm855.37,289.07q-67.67,0 -123.16,-23.36t-94.74,-67.16t-60.9,-103.66t-21.65,-132.85q0,-80.3 23.01,-145.99t64.96,-112.42t102.86,-73t136.7,-26.28q37.9,0 74.44,7.3t71.73,23.36l0,138.69q-29.78,-23.36 -63.61,-36.5t-71.73,-14.6q-47.37,0 -83.91,17.52t-60.9,49.64t-39.25,73t-13.53,90.52q0,96.36 50.08,157.67t142.11,61.32q39.25,0 74.44,-14.6t66.32,-42.34l0,128.47q-39.25,24.82 -83.91,35.04t-89.33,10.22z" id="svg_1"/>
+ </g>
+</svg>
diff --git a/ts-examples/resources/undo.svg b/ts-examples/resources/undo.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.75 2C5.1297 2 5.44349 2.28215 5.49315 2.64823L5.5 2.75V8.44L10.0743 3.88014C12.5163 1.43819 16.4385 1.37863 18.9526 3.70146L19.1385 3.88014C21.6415 6.38313 21.6415 10.4413 19.1385 12.9443L10.2933 21.7835C10.0003 22.0762 9.52558 22.0759 9.23269 21.783C8.93979 21.4901 8.94013 21.0151 9.23315 20.7223L18.0778 11.8836C19.995 9.96641 19.995 6.85801 18.0778 4.9408C16.2187 3.08169 13.2395 3.02535 11.3118 4.77248L11.1342 4.94156L6.562 9.5L12.25 9.50018C12.6297 9.50018 12.9435 9.78234 12.9932 10.1484L13 10.2502C13 10.6299 12.7178 10.9437 12.3518 10.9933L12.25 11.0002H4.75C4.3703 11.0002 4.05651 10.718 4.00685 10.352L4 10.2502V2.75C4 2.33579 4.33579 2 4.75 2Z" fill="white" />
+</svg>
diff --git a/ts-examples/resources/zoomIn.svg b/ts-examples/resources/zoomIn.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048">
+  <path d="M1283 1373q-96 79-211 121t-240 42q-147 0-275-55t-223-150-151-224-55-275q0-97 25-187t71-169 110-142 142-110 168-71 188-25q97 0 187 25t168 71 143 110 110 142 71 169 25 187q0 124-42 239t-121 212l528 528q19 19 19 45t-19 45-45 19q-26 0-45-19l-528-528zm125-541q0-79-20-152t-58-138-91-117-117-90-137-58-153-21q-119 0-224 45T425 425 302 608t-46 224q0 120 45 225t123 183 183 123 225 45q119 0 224-45t183-124 123-183 46-224zm-640 64H512q-26 0-45-19t-19-45q0-26 19-45t45-19h256V512q0-26 19-45t45-19q26 0 45 19t19 45v256h256q26 0 45 19t19 45q0 26-19 45t-45 19H896v256q0 26-19 45t-45 19q-26 0-45-19t-19-45V896z" fill="white" />
+</svg>
diff --git a/ts-examples/resources/zoomOut.svg b/ts-examples/resources/zoomOut.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048">
+  <path d="M1920 1856q0 26-19 45t-45 19q-26 0-45-19l-529-529q-94 79-210 121t-240 43q-97 0-187-25t-168-71-142-110-111-143-71-168-25-187q0-97 25-187t71-168 110-142 143-111 168-71 187-25q97 0 187 25t168 71 142 110 111 143 71 168 25 187q0 123-42 239t-122 211l529 529q19 19 19 45zM1408 832q0-79-20-152t-58-138-91-117-117-90-137-58-153-21q-119 0-224 45T425 425 302 608t-46 224q0 120 45 225t123 183 183 123 225 45q119 0 224-45t183-124 123-183 46-224zm-256-64q26 0 45 19t19 45q0 26-19 45t-45 19H512q-26 0-45-19t-19-45q0-26 19-45t45-19h640z" fill="white" />
+</svg>
diff --git a/ts-examples/schemaDesigner.html b/ts-examples/schemaDesigner.html
