v0.1.13

lerna.json

@@ -6,5 +6,5 @@
     "packages/core",
     "packages/idraw"
   ],
-  "version": "0.1.12"
+  "version": "0.1.13"
 }

packages/board/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/board",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -23,10 +23,10 @@
   "author": "chenshenhai",
   "license": "MIT",
   "devDependencies": {
-    "@idraw/types": "^0.1.12"
+    "@idraw/types": "^0.1.13"
   },
   "dependencies": {
-    "@idraw/util": "^0.1.12"
+    "@idraw/util": "^0.1.13"
   },
   "publishConfig": {
     "access": "public"

packages/board/src/lib/event.ts

@@ -3,6 +3,7 @@ import { TypePoint } from '@idraw/types';
 export interface TypeBoardEventArgMap {
   'doubleClick': TypePoint;
   'hover': TypePoint;
+  'leave': void;
   'point': TypePoint;
   'move': TypePoint;
   'moveStart': TypePoint;

packages/board/src/lib/watcher.ts

@@ -34,6 +34,7 @@ export class Watcher {
     canvas.addEventListener('mousemove', this._listenMove.bind(this), true);
     canvas.addEventListener('mouseup', this._listenMoveEnd.bind(this), true);
     canvas.addEventListener('mouseleave', this._listenMoveEnd.bind(this), true);
+    canvas.addEventListener('mouseleave', this._listenLeave.bind(this), true);
     canvas.addEventListener('click', this._listenClick.bind(this), true);
     canvas.addEventListener('wheel', this._listenWheel.bind(this), true);
 
@@ -53,6 +54,13 @@ export class Watcher {
     this._isMoving = true;
   }
 
+  _listenLeave(e: MouseEvent|TouchEvent): void {
+    e.preventDefault();
+    if (this._event.has('leave')) {
+      this._event.trigger('leave', undefined);
+    }
+  }
+
   _listenMoveStart(e: MouseEvent|TouchEvent): void {
     e.preventDefault();
     const p = this._getPosition(e);

packages/core/__tests__/lib/core-element.test.ts

@@ -0,0 +1,33 @@
+// import { TypeData } from '@idraw/types';
+import Core from '../../src';
+import { getData } from '../data';
+
+describe("@idraw/core: Element API", () => {
+  document.body.innerHTML = `
+    <div id="mount"></div>
+  `;
+  const opts = {
+    width: 600,
+    height: 400,
+    contextWidth: 600,
+    contextHeight: 400,
+    devicePixelRatio: 4
+  }
+  const mount = document.querySelector('#mount') as HTMLDivElement;
+  const core = new Core(mount, opts);
+  const data = getData();
+  core.setData(data);
+  const _data = core.getData();
+
+  test('getSelectedElements', async () => {  
+    core.selectElement(_data.elements[1].uuid || '');
+    const elems = core.getSelectedElements();
+    expect(elems).toStrictEqual([_data.elements[1]]);
+  });
+
+
+});
+
+
+
+

packages/core/examples/test/api.html

@@ -91,6 +91,12 @@
       <div class="box" id="idraw-api-clearOperation">
         <div class="title">idraw.clearOperation</div>
       </div>
+      <div class="box" id="idraw-api-insertElementBefore">
+        <div class="title">idraw.insertElementBefore</div>
+      </div>
+      <div class="box" id="idraw-api-insertElementAfter">
+        <div class="title">idraw.insertElementAfter</div>
+      </div>
     </div>
 
     <script src="./../../dist/index.global.js"></script>
@@ -530,6 +536,44 @@
       })();
     </script>
 
+    <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();
+        const core = new Core(mount, opts, config);
+        core.setData(data);
+
+        const _data = core.getData();
+        const elem = _data.elements[0];
+        elem.x += 20;
+        elem.y += 20;
+        core.insertElementBefore(elem, _data.elements[1].uuid);
+        core.clearOperation();
+      })();
+    </script>
+
+
+    <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();
+        const core = new Core(mount, opts, config);
+        core.setData(data);
+
+        const _data = core.getData();
+        const elem = _data.elements[0];
+        elem.x += 20;
+        elem.y += 20;
+        core.insertElementAfter(elem, _data.elements[1].uuid);
+      })();
+    </script>
+
 
   </body>
 </html>

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/core",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -23,11 +23,11 @@
   "author": "chenshenhai",
   "license": "MIT",
   "devDependencies": {
-    "@idraw/types": "^0.1.12"
+    "@idraw/types": "^0.1.13"
   },
   "dependencies": {
-    "@idraw/board": "^0.1.12",
-    "@idraw/util": "^0.1.12"
+    "@idraw/board": "^0.1.13",
+    "@idraw/util": "^0.1.13"
   },
   "publishConfig": {
     "access": "public"

packages/core/src/index.ts

@@ -17,15 +17,14 @@ import check, { TypeCheck } from './lib/check';
 import { TempData } from './lib/temp';
 import {
   _board, _data, _opts, _config, _renderer, _element, _helper, _hasInited,
-  _mode, _tempData, _prevPoint, _draw,
-  _selectedDotDirection, _coreEvent, _mapper, _initEvent,
-  _handlePoint, _handleClick, _handleDoubleClick,
-  _handleMoveStart, _handleMove, _handleMoveEnd, _handleHover, _dragElements,
-  _transfromElement, _emitChangeScreen, _emitChangeData, _onlyRender, _cursorStatus,
+  _mode, _tempData, _prevPoint, _draw, _selectedDotDirection, _coreEvent, _mapper, _initEvent,
+  _handlePoint, _handleClick, _handleDoubleClick, _handleMoveStart, _handleMove, 
+  _handleMoveEnd, _handleHover, _handleLeave, _dragElements, _transfromElement, 
+  _emitChangeScreen, _emitChangeData, _onlyRender, _cursorStatus,
 } from './names';
 import { Mode, CursorStatus } from './constant/static';
-import { diffElementResourceChangeList, diffElementResourceChange } from './lib/diff';
-
+import { diffElementResourceChangeList } from './lib/diff';
+import { getSelectedElements, updateElement } from './mixins/element';
 const { time } = util;
 const { deepClone } = util.data;
 const { createUUID } = util.uuid;
@@ -197,22 +196,7 @@ class Core {
   }
 
   updateElement(elem: TypeElement<keyof TypeElemDesc>) {
-    // if (this[_onlyRender] === true) return;
-    const _elem  = deepClone(elem) as TypeElement<keyof TypeElemDesc>;
-    const data = this[_data];
-    const resourceChangeUUIDs: string[] = [];
-    for (let i = 0; i < data.elements.length; i++) {
-      if (_elem.uuid === data.elements[i]?.uuid) {
-        const result = diffElementResourceChange(data.elements[i], _elem);
-        if (typeof result === 'string') {
-          resourceChangeUUIDs.push(result);
-        }
-        data.elements[i] = _elem;
-        break;
-      }
-    }
-    this[_emitChangeData]();
-    this[_draw]({ resourceChangeUUIDs });
+    return updateElement(this, elem);
   }
 
   addElement(elem: TypeElementBase<keyof TypeElemDesc>): string | null {
@@ -235,6 +219,44 @@ class Core {
     }
   }
 
+  insertElementBefore(elem: TypeElementBase<keyof TypeElemDesc>, beforeUUID: string) {
+    const index = this[_helper].getElementIndexByUUID(beforeUUID);
+    if (index !== null) {
+      this.insertElementBeforeIndex(elem, index);
+    }
+  }
+
+  insertElementBeforeIndex(elem: TypeElementBase<keyof TypeElemDesc>, index: number) {
+    const _elem = deepClone(elem);
+    _elem.uuid = createUUID();
+    if (index >= 0) {
+      this[_data].elements.splice(index, 0, _elem);
+      this[_emitChangeData]();
+      this[_draw]();
+    }
+  }
+
+  getSelectedElements() {
+    return getSelectedElements(this);
+  }
+
+  insertElementAfter(elem: TypeElementBase<keyof TypeElemDesc>, beforeUUID: string) {
+    const index = this[_helper].getElementIndexByUUID(beforeUUID);
+    if (index !== null) {
+      this.insertElementAfterIndex(elem, index);
+    }
+  }
+
+  insertElementAfterIndex(elem: TypeElementBase<keyof TypeElemDesc>, index: number) {
+    const _elem = deepClone(elem);
+    _elem.uuid = createUUID();
+    if (index >= 0) {
+      this[_data].elements.splice(index + 1, 0, _elem);
+      this[_emitChangeData]();
+      this[_draw]();
+    }
+  }
+
   clearOperation() {
     this[_tempData].clear();
     this[_draw]();
@@ -274,6 +296,7 @@ class Core {
     }
 
     this[_board].on('hover', time.throttle(this[_handleHover].bind(this), 32));
+    this[_board].on('leave', time.throttle(this[_handleLeave].bind(this), 32));
     this[_board].on('point', time.throttle(this[_handleClick].bind(this), 16));
     this[_board].on('doubleClick', this[_handleDoubleClick].bind(this));
     if (this[_onlyRender] === true) {
@@ -472,6 +495,11 @@ class Core {
       if (index !== null) this[_coreEvent].trigger('mouseLeaveElement', { uuid, index, element: this[_data].elements[index] })
       this[_tempData].set('hoverUUID', null); 
     }
+    if (this[_coreEvent].has('mouseOverScreen')) this[_coreEvent].trigger('mouseOverScreen', point);
+  }
+
+  private [_handleLeave](): void {
+    if (this[_coreEvent].has('mouseLeaveScreen')) this[_coreEvent].trigger('mouseLeaveScreen', undefined);
   }
 
   private [_dragElements](uuids: string[], point: TypePoint, prevPoint: TypePoint|null): void {

packages/core/src/lib/core-event.ts

@@ -13,6 +13,8 @@ export type TypeCoreEventSelectBaseArg = {
 
 export type TypeCoreEventArgMap  = {
   'error': any;
+  'mouseOverScreen': TypePoint,
+  'mouseLeaveScreen': void,
   'mouseOverElement': TypeCoreEventSelectBaseArg & { element: TypeElement<keyof TypeElemDesc> }
   'mouseLeaveElement': TypeCoreEventSelectBaseArg & { element: TypeElement<keyof TypeElemDesc> }
   'screenClickElement': TypeCoreEventSelectBaseArg & { element: TypeElement<keyof TypeElemDesc> }

packages/core/src/mixins/element.ts

@@ -0,0 +1,53 @@
+import {
+  TypeElement, TypeElemDesc,
+}  from '@idraw/types';
+import util from '@idraw/util';
+import {
+  _board, _data, _opts, _config, _renderer, _element, _helper, _hasInited,
+  _mode, _tempData, _prevPoint, _draw, _selectedDotDirection, _coreEvent, _mapper, _initEvent,
+  _handlePoint, _handleClick, _handleDoubleClick, _handleMoveStart, _handleMove, 
+  _handleMoveEnd, _handleHover, _handleLeave, _dragElements, _transfromElement, 
+  _emitChangeScreen, _emitChangeData, _onlyRender, _cursorStatus,
+} from './../names';
+import { diffElementResourceChange } from './../lib/diff';
+import Core from './../index';
+
+// const { time } = util;
+const { deepClone } = util.data;
+
+export function getSelectedElements(core: Core): TypeElement<keyof TypeElemDesc>[] {
+  const elems: TypeElement<keyof TypeElemDesc>[] = [];
+  let list: string[] = [];
+  const uuid = core[_tempData].get('selectedUUID');
+  if (typeof uuid === 'string' && uuid) {
+    list.push(uuid);
+  } else {
+    list = core[_tempData].get('selectedUUIDList');
+  }
+  list.forEach((uuid) => {
+    const index = core[_helper].getElementIndexByUUID(uuid);
+    if (index !== null && index >= 0) {
+      const elem = core[_data]?.elements[index];
+      if (elem) elems.push(elem);
+    }
+  });
+  return elems;
+}
+
+export function updateElement(core: Core, elem: TypeElement<keyof TypeElemDesc>) {
+  const _elem  = deepClone(elem) as TypeElement<keyof TypeElemDesc>;
+  const data = core[_data];
+  const resourceChangeUUIDs: string[] = [];
+  for (let i = 0; i < data.elements.length; i++) {
+    if (_elem.uuid === data.elements[i]?.uuid) {
+      const result = diffElementResourceChange(data.elements[i], _elem);
+      if (typeof result === 'string') {
+        resourceChangeUUIDs.push(result);
+      }
+      data.elements[i] = _elem;
+      break;
+    }
+  }
+  core[_emitChangeData]();
+  core[_draw]({ resourceChangeUUIDs });
+}

packages/core/src/names.ts

@@ -21,6 +21,7 @@ const _handleMoveStart = Symbol('_handleMoveStart');
 const _handleMove = Symbol('_handleMove');
 const _handleMoveEnd = Symbol('_handleMoveEnd');
 const _handleHover = Symbol('_handleHover');
+const _handleLeave = Symbol('_handleLeave');
 const _dragElements = Symbol('_dragElements');
 const _transfromElement = Symbol('_transfromElement');
 const _emitChangeScreen = Symbol('_emitChangeScreen');
@@ -30,9 +31,8 @@ const _cursorStatus = Symbol('_cursorStatus');
 
 export {
   _board, _data, _opts, _config, _renderer, _element, _helper, _hasInited,
-  _mode, _tempData, _prevPoint, _draw,
-  _selectedDotDirection, _coreEvent, _mapper, _initEvent,
-  _handlePoint, _handleClick, _handleDoubleClick,
-  _handleMoveStart, _handleMove, _handleMoveEnd, _handleHover, _dragElements,
-  _transfromElement, _emitChangeScreen, _emitChangeData, _onlyRender, _cursorStatus,
+  _mode, _tempData, _prevPoint, _draw, _selectedDotDirection, _coreEvent, _mapper, _initEvent,
+  _handlePoint, _handleClick, _handleDoubleClick, _handleMoveStart, _handleMove, 
+  _handleMoveEnd, _handleHover, _handleLeave, _dragElements, _transfromElement, 
+  _emitChangeScreen, _emitChangeData, _onlyRender, _cursorStatus,
 };