feat: update pages

idrawjs · Jun 30, 2024 · efbc8b0 · efbc8b0
2 parents a62f314 + aa18df4
commit efbc8b0
Show file tree

Hide file tree

Showing 147 changed files with 9,597 additions and 248 deletions.
diff --git a/docs/assets/index-lOL8ihAD.js → docs/assets/index-B9_qItwe.js b/docs/assets/index-lOL8ihAD.js → docs/assets/index-B9_qItwe.js
diff --git a/docs/demo/advanced-data/data.js b/docs/demo/advanced-data/data.js
diff --git a/docs/demo/advanced-data/import-map.json b/docs/demo/advanced-data/import-map.json
@@ -0,0 +1,6 @@
+{
+  "imports": {
+    "idraw": "./lib/idraw.esm.js",
+    "./data": "./demo/basic/data.js"
+  }
+}
diff --git a/docs/demo/advanced-data/index.css b/docs/demo/advanced-data/index.css
@@ -0,0 +1,12 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
+#app {
+  margin-top: 20px;
+  text-align: center;
+}
diff --git a/docs/demo/advanced-data/index.html b/docs/demo/advanced-data/index.html
@@ -0,0 +1 @@
+<div id="app"></div>
diff --git a/docs/demo/advanced-data/index.js b/docs/demo/advanced-data/index.js
@@ -0,0 +1,12 @@
+import { iDraw } from 'idraw';
+import data from './data';
+
+const app = document.querySelector('#app');
+const options = {
+  width: 500,
+  height: 600,
+  devicePixelRatio: 2
+};
+const idraw = new iDraw(app, options);
+idraw.setData(data);
+idraw.centerContent();
diff --git a/docs/demo/api-getImageBlobURL/data.js b/docs/demo/api-getImageBlobURL/data.js
@@ -0,0 +1,54 @@
+export default {
+  // background: '#f0f0f0',
+  elements: [
+    {
+      uuid: '98e31597-b745-7d6f-4164-920b8a4e8f36',
+      name: 'rect-001',
+      x: 20,
+      y: 20,
+      w: 100,
+      h: 100,
+      type: 'rect',
+      detail: {
+        background: '#d5f5f9',
+        borderRadius: 20,
+        borderWidth: 10,
+        borderColor: '#3f51b5'
+      }
+    },
+    {
+      uuid: '28774435-b994-1016-1c17-95912f719bab',
+      name: 'rect-002',
+      x: 140,
+      y: 100,
+      w: 200,
+      h: 200,
+      // angle: 30,
+      type: 'rect',
+      detail: {
+        background: '#8bc34a',
+        borderRadius: 20,
+        borderWidth: 10,
+        borderColor: '#009688'
+      }
+    },
+    {
+      uuid: '44dbb2c1-3588-385c-6b46-327c6adb438a',
+      name: 'rect-004',
+      x: 400,
+      y: 250,
+      w: 200,
+      h: 200,
+      type: 'rect',
+      detail: {
+        background: '#ffeb3b',
+        borderRadius: 20,
+        borderWidth: 10,
+        borderColor: '#ff9800'
+      },
+      operations: {
+        lock: true
+      }
+    }
+  ]
+};
diff --git a/docs/demo/api-getImageBlobURL/import-map.json b/docs/demo/api-getImageBlobURL/import-map.json
@@ -0,0 +1,6 @@
+{
+  "imports": {
+    "idraw": "./lib/idraw.esm.js",
+    "./data": "./demo/basic/data.js"
+  }
+}
diff --git a/docs/demo/api-getImageBlobURL/index.css b/docs/demo/api-getImageBlobURL/index.css
@@ -0,0 +1,12 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
+#app {
+  margin-top: 20px;
+  text-align: center;
+}
diff --git a/docs/demo/api-getImageBlobURL/index.html b/docs/demo/api-getImageBlobURL/index.html
@@ -0,0 +1,5 @@
+<div id="app"></div>
+<br />
+<button id="btn-getImageBlobURL">getImageBlobURL</button>
+<br />
+<div id="box-preview"></div>
diff --git a/docs/demo/api-getImageBlobURL/index.js b/docs/demo/api-getImageBlobURL/index.js
@@ -0,0 +1,31 @@
+import { iDraw } from 'idraw';
+import data from './data';
+
+const app = document.querySelector('#app');
+const options = {
+  width: 320,
+  height: 320,
+  devicePixelRatio: 2
+};
+const idraw = new iDraw(app, options);
+idraw.setData(data);
+idraw.setMode('select');
+
+const btn = document.querySelector('#btn-getImageBlobURL');
+const preview = document.querySelector('#box-preview');
+
+btn.addEventListener('click', () => {
+  idraw
+    .getImageBlobURL({ devicePixelRatio: 1 })
+    .then((res) => {
+      const { blobURL, width, height, devicePixelRatio } = res;
+      preview.innerHTML = `
+      <div>${JSON.stringify(res, null, 2)}</div>
+      <img width="320" src="${blobURL}" />
+      `;
+    })
+    .catch((err) => {
+      console.error(err);
+      window.alert(JSON.stringify(err));
+    });
+});
diff --git a/docs/demo/custom-style-info/data.js b/docs/demo/custom-style-info/data.js
@@ -0,0 +1,54 @@
+export default {
+  // background: '#f0f0f0',
+  elements: [
+    {
+      uuid: '98e31597-b745-7d6f-4164-920b8a4e8f36',
+      name: 'rect-001',
+      x: 20,
+      y: 20,
+      w: 100,
+      h: 100,
+      type: 'rect',
+      detail: {
+        background: '#d5f5f9',
+        borderRadius: 20,
+        borderWidth: 10,
+        borderColor: '#3f51b5'
+      }
+    },
+    {
+      uuid: '28774435-b994-1016-1c17-95912f719bab',
+      name: 'rect-002',
+      x: 140,
+      y: 100,
+      w: 200,
+      h: 200,
+      // angle: 30,
+      type: 'rect',
+      detail: {
+        background: '#8bc34a',
+        borderRadius: 20,
+        borderWidth: 10,
+        borderColor: '#009688'
+      }
+    },
+    {
+      uuid: '44dbb2c1-3588-385c-6b46-327c6adb438a',
+      name: 'rect-004',
+      x: 400,
+      y: 250,
+      w: 200,
+      h: 200,
+      type: 'rect',
+      detail: {
+        background: '#ffeb3b',
+        borderRadius: 20,
+        borderWidth: 10,
+        borderColor: '#ff9800'
+      },
+      operations: {
+        lock: true
+      }
+    }
+  ]
+};
diff --git a/docs/demo/custom-style-info/import-map.json b/docs/demo/custom-style-info/import-map.json
@@ -0,0 +1,6 @@
+{
+  "imports": {
+    "idraw": "./lib/idraw.esm.js",
+    "./data": "./demo/basic/data.js"
+  }
+}
diff --git a/docs/demo/custom-style-info/index.css b/docs/demo/custom-style-info/index.css
@@ -0,0 +1,12 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
+#app {
+  margin-top: 20px;
+  text-align: center;
+}
diff --git a/docs/demo/custom-style-info/index.html b/docs/demo/custom-style-info/index.html
@@ -0,0 +1 @@
+<div id="app"></div>
diff --git a/docs/demo/custom-style-info/index.js b/docs/demo/custom-style-info/index.js
@@ -0,0 +1,19 @@
+import { iDraw } from 'idraw';
+import data from './data';
+
+const app = document.querySelector('#app');
+const options = {
+  width: 320,
+  height: 320,
+  devicePixelRatio: 2,
+  styles: {
+    info: {
+      textBackground: '#9c27b0',
+      textColor: '#ffeb3b'
+    }
+  }
+};
+const idraw = new iDraw(app, options);
+idraw.setData(data);
+idraw.centerContent();
+idraw.selectElements([data.elements[1].uuid]);
diff --git a/docs/demo/custom-style-ruler/data.js b/docs/demo/custom-style-ruler/data.js
@@ -0,0 +1,54 @@
+export default {
+  // background: '#f0f0f0',
+  elements: [
+    {
+      uuid: '98e31597-b745-7d6f-4164-920b8a4e8f36',
+      name: 'rect-001',
+      x: 20,
+      y: 20,
+      w: 100,
+      h: 100,
+      type: 'rect',
+      detail: {
+        background: '#d5f5f9',
+        borderRadius: 20,
+        borderWidth: 10,
+        borderColor: '#3f51b5'
+      }
+    },
+    {
+      uuid: '28774435-b994-1016-1c17-95912f719bab',
+      name: 'rect-002',
+      x: 140,
+      y: 100,
+      w: 200,
+      h: 200,
+      // angle: 30,
+      type: 'rect',
+      detail: {
+        background: '#8bc34a',
+        borderRadius: 20,
+        borderWidth: 10,
+        borderColor: '#009688'
+      }
+    },
+    {
+      uuid: '44dbb2c1-3588-385c-6b46-327c6adb438a',
+      name: 'rect-004',
+      x: 400,
+      y: 250,
+      w: 200,
+      h: 200,
+      type: 'rect',
+      detail: {
+        background: '#ffeb3b',
+        borderRadius: 20,
+        borderWidth: 10,
+        borderColor: '#ff9800'
+      },
+      operations: {
+        lock: true
+      }
+    }
+  ]
+};
diff --git a/docs/demo/custom-style-ruler/import-map.json b/docs/demo/custom-style-ruler/import-map.json
@@ -0,0 +1,6 @@
+{
+  "imports": {
+    "idraw": "./lib/idraw.esm.js",
+    "./data": "./demo/basic/data.js"
+  }
+}
diff --git a/docs/demo/custom-style-ruler/index.css b/docs/demo/custom-style-ruler/index.css
@@ -0,0 +1,12 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
+#app {
+  margin-top: 20px;
+  text-align: center;
+}
diff --git a/docs/demo/custom-style-ruler/index.html b/docs/demo/custom-style-ruler/index.html
@@ -0,0 +1 @@
+<div id="app"></div>
diff --git a/docs/demo/custom-style-ruler/index.js b/docs/demo/custom-style-ruler/index.js
@@ -0,0 +1,24 @@
+import { iDraw } from 'idraw';
+import data from './data';
+
+const app = document.querySelector('#app');
+const options = {
+  width: 320,
+  height: 320,
+  devicePixelRatio: 2,
+  styles: {
+    ruler: {
+      background: '#0000FF1A',
+      borderColor: '#0000FF',
+      scaleColor: '#FF0000',
+      textColor: '#000000',
+      gridColor: '#0000FF1C',
+      gridPrimaryColor: '#0000FF6C',
+      selectedAreaColor: '#FF0000CC'
+    }
+  }
+};
+const idraw = new iDraw(app, options);
+idraw.setData(data);
+idraw.centerContent();
+idraw.selectElements([data.elements[1].uuid]);