refactor: refactor dev mode

packages/core/dev/data.js

@@ -41,7 +41,7 @@ const data = {
       h: 80,
       type: "image",
       desc: {
-        src: './../images/computer.png',
+        src: './images/computer.png',
       },
     },
     {

packages/core/dev/main.js

@@ -1,8 +1,20 @@
 import Core from './../src/index';
-import data from './data';
+import { getData } from './data.js';
 
 console.log('Core =', Core)
 
+var opts = {
+  width: 300,
+  height: 200,
+  contextWidth: 300,
+  contextHeight: 200,
+  devicePixelRatio: 4,
+}
+// var config = {
+//   elementWrapper: {
+//     controllerSize: 4,
+//   }
+// }
 
 const mount = document.querySelector('#mount');
 const data = getData();

packages/core/examples/test/api.html

@@ -100,7 +100,12 @@
     </div>
 
     <script src="./../../dist/index.global.js"></script>
-    <script>
+    <script type="module">
+      import event from './../../../../scripts/browser/event.js';
+      import { getData } from './data.js';
+      window.event = event;
+      window.getData = getData;
+
       var Core = window.iDrawCore;
       var opts = {
         width: 300,
@@ -155,7 +160,6 @@
     </script>
     <script type="module">
       // Options Common
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-opts');
         const core = new Core(mount, opts, config);
@@ -167,7 +171,6 @@
     </script>
     <script type="module">
       // Options onlyRender
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-opts-onlyRender');
         const core = new Core(mount, Object.assign({}, opts, {
@@ -181,7 +184,6 @@
     </script>
     <script type="module">
       // Config
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-config');
         const core = new Core(mount,
@@ -212,8 +214,6 @@
 
     <script type="module">
       // idraw-api-setData
-      import { getData } from './data.js';
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-api-setData');
         const data = getData();
@@ -238,8 +238,6 @@
 
     <script type="module">
       // idraw-api-resetSize
-      import { getData } from './data.js';
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-api-resetSize');
         const data = getData();
@@ -269,8 +267,6 @@
     
     <script type="module">
       // idraw-api-selectElement
-      import { getData } from './data.js';
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-api-selectElement');
         const data = getData();
@@ -293,8 +289,6 @@
 
     <script type="module">
       // idraw-api-selectElementByIndex
-      import { getData } from './data.js';
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-api-selectElementByIndex');
         const data = getData();
@@ -317,8 +311,6 @@
 
     <script type="module">
       // idraw-api-updateElement
-      import { getData } from './data.js';
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-api-updateElement');
         const data = getData();
@@ -344,8 +336,6 @@
 
     <script type="module">
       // idraw-api-addElement
-      import { getData } from './data.js';
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-api-addElement');
         const data = getData();
@@ -380,8 +370,6 @@
 
     <script type="module">
       // idraw-api-deleteElement
-      import { getData } from './data.js';
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-api-deleteElement');
         const data = getData();
@@ -404,8 +392,6 @@
 
     <script type="module">
       // idraw-api-moveUpElementidraw
-      import { getData } from './data.js';
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-api-moveUpElement');
         const data = getData();
@@ -428,8 +414,6 @@
 
     <script type="module">
       // idraw-api-moveDownElement
-      import { getData } from './data.js';
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-api-moveDownElement');
         const data = getData();
@@ -452,8 +436,6 @@
 
     <script type="module">
       // idraw-api-scale
-      import { getData } from './data.js';
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-api-scale');
         const data = getData();
@@ -476,8 +458,6 @@
 
     <script type="module">
       // idraw-api-scrollLeft
-      import { getData } from './data.js';
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-api-scrollLeft');
         const data = getData();
@@ -500,8 +480,6 @@
 
     <script type="module">
       // idraw-api-scrollTop
-      import { getData } from './data.js';
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-api-scrollTop');
         const data = getData();
@@ -524,8 +502,6 @@
 
     <script type="module">
       // idraw-api-clearOperation
-      import { getData } from './data.js';
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-api-clearOperation');
         const data = getData();
@@ -538,8 +514,6 @@
 
     <script type="module">
       // idraw-api-insertElementBefore
-      import { getData } from './data.js';
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-api-insertElementBefore');
         const data = getData();
@@ -558,8 +532,6 @@
 
     <script type="module">
       // idraw-api-insertElementAfter
-      import { getData } from './data.js';
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#idraw-api-insertElementAfter');
         const data = getData();

packages/core/examples/test/elements.html

@@ -73,7 +73,11 @@
     </div>
 
     <script src="./../../dist/index.global.js"></script>
-    <script>
+    <script type="module">
+      import event from './../../../../scripts/browser/event.js';
+      import { getData } from './data.js';
+      window.event = event;
+      window.getData = getData;
       var Core = window.iDrawCore;
       var opts = {
         width: 300,
@@ -384,7 +388,6 @@
     </script>
 
     <script type="module">
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#mount-7');
         const core = new Core(mount, opts, config);
@@ -423,7 +426,6 @@
     </script>
 
     <script type="module">
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#mount-8');
         const core = new Core(mount, opts, config);
@@ -465,7 +467,6 @@
     </script>
 
     <script type="module">
-      import event from './../../../../scripts/browser/event.js';
       (function() {
         const mount = document.querySelector('#mount-9');
         const core = new Core(mount, opts, config);

packages/idraw/dev/data.js

@@ -0,0 +1,63 @@
+const data = {
+  bgColor: "#ffffff",
+  elements: [
+    {
+      name: "rect-001",
+      x: 5,
+      y: 5,
+      w: 100,
+      h: 50,
+      type: "rect",
+      desc: {
+        bgColor: "#ffeb3b",
+        borderRadius: 10,
+        borderWidth: 5,
+        borderColor: "#ffc107",
+      },
+    },
+    {
+      name: "text-002",
+      x: 40,
+      y: 40,
+      w: 100,
+      h: 60,
+      // angle: 30,
+      type: "text",
+      desc: {
+        fontSize: 16,
+        text: "Hello Text",
+        fontWeight: 'bold',
+        color: "#666666",
+        borderRadius: 30,
+        borderWidth: 4,
+        borderColor: "#ff5722",
+      },
+    },
+    {
+      name: "image-003",
+      x: 80,
+      y: 80,
+      w: 160,
+      h: 80,
+      type: "image",
+      desc: {
+        src: './images/computer.png',
+      },
+    },
+    {
+      name: "svg-004",
+      x: 200 - 5,
+      y: 150 - 50,
+      w: 100,
+      h: 100,
+      type: "svg",
+      desc: {
+        svg: '<svg t="1622524892065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9337" width="200" height="200"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z" p-id="9338"></path></svg>',
+      },
+    },
+  ],
+};
+
+export function getData() {
+  return data;
+}

packages/idraw/dev/index.html

@@ -28,8 +28,6 @@
 
     <div id="mount"></div>
 
-     
-
     <script type="module" src="./main.js"></script>
   </body>
 </html>

packages/idraw/dev/main.js

@@ -1,4 +1,31 @@
-import Renderer from './../src/index';
+import iDraw from './../src/index';
+import { getData } from './data.js';
 
-console.log('Renderer =', Renderer)
+var opts = {
+  width: 300,
+  height: 200,
+  contextWidth: 300,
+  contextHeight: 200,
+  devicePixelRatio: 4,
+}
+// var config = {
+//   elementWrapper: {
+//     controllerSize: 4,
+//   }
+// }
 
+const mount = document.querySelector('#mount');
+const data = getData();
+const idraw = new iDraw(
+  mount,
+  Object.assign({}, opts, {
+    contextWidth: 500,
+    contextHeight: 400,
+  }),
+  {
+    scrollWrapper: {
+      use: true,
+    },
+  }
+);
+idraw.setData(data);

scripts/dev-vite.js

@@ -31,7 +31,15 @@ function getViteConfig(pkgName) {
       host: '127.0.0.1',
     },
     plugins: [],
-    esbuild: false,
+    esbuild: {
+      include: [
+        /\.ts$/,
+        /\.js$/,
+      ],
+      exclude: [
+        /\.html$/
+      ]
+    },
   });
   return viteConfig;
 }