-
scrollY
-
+
diff --git a/packages/core/example/lib/scale.js b/packages/core/example/lib/scale.js
new file mode 100644
index 0000000..a271ef6
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/packages/core/example/lib/scroll.js b/packages/core/example/lib/scroll.js
new file mode 100644
index 0000000..3a1c1a7
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/packages/core/example/main.js b/packages/core/example/main.js
index f0ebb7b..9bc0b45 100644
--- a/packages/core/example/main.js
+++ b/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();
\ No newline at end of file
+doScale(core, defaultConf.scale);
+doScroll(core, defaultConf);
+
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 9654cf8..ddd4971 100644
--- a/packages/core/src/index.ts
+++ b/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;
\ No newline at end of file
diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts
new file mode 100644
index 0000000..9b72ffe
--- /dev/null
+++ b/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;
+ }
+}