chore: update core/example

docs/features/core.md

@@ -0,0 +1 @@
+- [x]

packages/core/example/index.html

@@ -19,17 +19,19 @@
 
     <div id="mount"></div>
 
-    <div>
-      <span>scale</span>
-      <input id="scale" type="number" value="1"/>
-    </div>
-    <div>
-      <span>scrollX</span>
-      <input id="scrollX" type="number" value="0"/>
-    </div>
-    <div>
-      <span>scrollY</span>
-      <input id="scrollY" type="number" value="0"/>
+    <div id="action">
+      <div>
+        <span>scale</span>
+        <input id="scale" type="number" value="1"/>
+      </div>
+      <div>
+        <span>scrollX</span>
+        <input id="scrollX" type="number" value="0"/>
+      </div>
+      <div>
+        <span>scrollY</span>
+        <input id="scrollY" type="number" value="0"/>
+      </div>
     </div>
 
 

packages/core/example/lib/scale.js

@@ -0,0 +1,27 @@
+const input = document.querySelector('#scale');
+let hasInited = false;
+
+export function doScale(core, scale) {
+  if (hasInited === true)  return;
+  if (scale > 0) {
+    input.value = scale;
+    core.scale(scale);
+    core.draw();
+  }
+  input.addEventListener('change', () => {
+    const val = input.value * 1;
+    if (val > 0) {
+      core.scale(val);
+      core.draw();
+    }
+  });
+  hasInited = true;
+}
+
+export function getScale() {
+  let val = 1;
+  if (input.value * 1 > 0) {
+    val = input.value * 1;
+  }
+  return val;
+}

packages/core/example/lib/scroll.js

@@ -0,0 +1,35 @@
+const inputX = document.querySelector('#scrollX');
+const inputY = document.querySelector('#scrollY');
+let hasInited = false;
+
+export function doScroll(core, conf = {}) {
+  if (hasInited === true)  return;
+  
+  if (conf.scrollX >= 0) {
+    inputX.value = conf.scrollX;
+    core.scrollX(conf.scrollX);
+    core.draw();
+  }
+
+  if (conf.scrollY >= 0) {
+    inputY.value = conf.scrollY;
+    core.scrollY(conf.scrollY);
+    core.draw();
+  }
+
+  inputX.addEventListener('change', () => {
+    const val = inputX.value * 1;
+    if (val >= 0) {
+      core.scrollX(val);
+      core.draw();
+    }
+  });
+  inputY.addEventListener('change', () => {
+    const val = inputY.value * 1;
+    if (val >= 0) {
+      core.scrollY(val);
+      core.draw();
+    }
+  });
+  hasInited = true;
+}

packages/core/example/main.js

@@ -1,12 +1,22 @@
 import { getData } from './lib/data.js';
+import { doScale } from './lib/scale.js';
+import { doScroll } from './lib/scroll.js';
+
 const { Core } = window.iDraw;
 
 const data = getData();
 const mount = document.querySelector('#mount');
+const defaultConf = {
+  scale: 0.5,
+  scrollX: 100,
+  scrollY: 200,
+}
 const core = new Core(mount, {
   width: 600,
   height: 400,
   devicePixelRatio: 4
 });
 core.setData(data);
-core.draw();
+doScale(core, defaultConf.scale);
+doScroll(core, defaultConf);
+

packages/core/src/index.ts

@@ -1,6 +1,7 @@
 import { TypeData } from '@idraw/types';
 import Board from '@idraw/board';
 import Renderer from './lib/renderer';
+import { Element } from './lib/element';
 
 type Options = {
   width: number;
@@ -14,25 +15,56 @@ class Core {
   private _data: TypeData;
   private _opts: Options;
   private _renderer: Renderer;
+  private _element: Element;
+  private _hasInited: boolean = false; 
 
   constructor(mount: HTMLDivElement, opts: Options) {
     this._data = { elements: [] };
     this._opts = opts;
     this._board = new Board(mount, this._opts);
     this._renderer = new Renderer(this._board); 
+    this._element = new Element(this._board.getContext());
+    this._initEvent();
+    this._hasInited = true;
   }
 
   draw() {
     this._renderer.render(this._data);
   }
 
+  selectElement(index: number) {
+    console.log('index');
+  }
+
   getData() {
     return this._data;
   }
 
+  scale(ratio: number) {
+    this._board.scale(ratio);
+  }
+
+  scrollX(x: number) {
+    this._board.scrollX(x);
+  }
+
+  scrollY(y: number) {
+    this._board.scrollY(y);
+  }
+
   setData(data: TypeData) {
     return this._data = data;
   }
+
+  private _initEvent() {
+    if (this._hasInited === true) {
+      return;
+    }
+    this._board.on('point', (p) => {
+      const idx = this._element.isPointInElement(p, this._data);
+      console.log('idx ====', idx);
+    });
+  }
 }
 
 export default Core;

packages/core/src/lib/element.ts

@@ -0,0 +1,28 @@
+import { TypeContext, TypePoint, TypeData } from '@idraw/types';
+
+export class Element {
+  private _ctx: TypeContext;
+
+  constructor(ctx: TypeContext) {
+    this._ctx = ctx;
+  }
+
+  isPointInElement(p: TypePoint, data: TypeData) {
+    const ctx = this._ctx;
+    let idx = -1;
+    for (let i = data.elements.length - 1; i >= 0; i--) {
+      const ele = data.elements[i];
+      ctx.beginPath();
+      ctx.lineTo(ele.x, ele.y);
+      ctx.lineTo(ele.x + ele.w, ele.y);
+      ctx.lineTo(ele.x + ele.w, ele.y + ele.h);
+      ctx.lineTo(ele.x, ele.y + ele.h);
+      ctx.closePath();
+      if (ctx.isPointInPath(p.x, p.y)) {
+        idx = i;
+        break;
+      }
+    }
+    return idx;
+  }
+}