chore: add examples/test/auto-test.html

2026-05-24 10:08:34 +00:00 · 2021-08-13 18:38:43 +08:00 · 2021-08-13 18:38:43 +08:00 · 079641324a
commit 079641324a
parent 24c594bd08
1 changed files with 94 additions and 0 deletions
--- a/packages/core/examples/test/auto-test.html
+++ b/packages/core/examples/test/auto-test.html
@ -0,0 +1,94 @@
+<html>
+  <head>
+    <style></style>
+    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+    <style>
+      html,body { margin: 0; padding: 0; }
+      #mount canvas {
+        border-right: 1px solid #aaaaaa40;
+        border-bottom: 1px solid #aaaaaa40;
+        background-image:
+        linear-gradient(#aaaaaa40 1px, transparent 0),
+        linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
+        linear-gradient(#aaa 1px, transparent 0),
+        linear-gradient(90deg, #aaa 1px, transparent 0);
+        background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
+      }
+
+      #button {
+        width: 100px;
+        height: 50px;
+        border: 1px solid #999999;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div id="mount"></div>
+
+    <div id="button">Button</div>
+
+
+    <script src="./../../dist/index.global.js"></script>
+    <script type="module">
+      import data from './../features/lib/data/rect.js';
+      const Core = window.iDrawCore;
+      const core = new Core(
+        document.querySelector('#mount'), {
+          width: 600,
+          height: 400,
+          contextWidth: 600,
+          contextHeight: 400,
+          devicePixelRatio: 4
+        });
+      core.setData(data);
+
+
+
+      //--------------------
+      const $btn = document.querySelector('#button');
+      $btn.addEventListener('mousedown', (e) => {
+        console.log('btn mousedown: ', e);
+      })
+      $btn.addEventListener('mouseup', (e) => {
+        console.log('btn mouseup: ', e);
+      })
+
+
+      // const x = 50;
+      // const y = 420;
+
+      const x = 10;
+      const y = 10;
+
+      function mouseDown(x,y){
+        var event = new MouseEvent('mousedown', {
+          screenX: x,
+          screenY: y,
+          clientX: x,
+          clientY: y,
+        });
+        var elem = document.elementFromPoint(x,y);
+        console.log('elem =', elem);
+        elem.dispatchEvent(event);
+      }
+      function mouseUp(x,y){
+        var event = new MouseEvent('mouseup', {
+          screenX: x,
+          screenY: y,
+          clientX: x,
+          clientY: y,
+        });
+        var elem = document.elementFromPoint(x,y);
+        console.log('elem =', elem);
+        elem.dispatchEvent(event);
+      }
+      setTimeout(() => {
+        mouseDown(x, y)
+        setTimeout(() => {
+          mouseUp(x, y)
+        }, 100)
+      }, 1000)
+    </script>
+  </body>
+</html>