From 8d5fe6e073600fa02d9af78218c81babdaacc09f Mon Sep 17 00:00:00 2001 From: daybrush Date: Tue, 23 Jun 2020 21:46:06 +0900 Subject: [PATCH] feat: add rect property --- package-lock.json | 2 +- package.json | 2 +- src/Selecto.tsx | 62 ++++++++++++++++++++++++++--------------------- src/types.ts | 6 +++++ src/utils.ts | 26 +++++++++++++++++++- 5 files changed, 67 insertions(+), 31 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8609f81..fe2a422 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "selecto", - "version": "1.2.0", + "version": "1.3.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index ed91956..00e2d65 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "selecto", - "version": "1.2.0", + "version": "1.3.0", "description": "Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.", "main": "./dist/selecto.cjs.js", "module": "./dist/selecto.esm.js", diff --git a/src/Selecto.tsx b/src/Selecto.tsx index 2d8b116..8142ca7 100644 --- a/src/Selecto.tsx +++ b/src/Selecto.tsx @@ -6,7 +6,7 @@ import { isObject, camelize, IObject, addEvent, removeEvent } from "@daybrush/ut import ChildrenDiffer, { diff, ChildrenDiffResult } from "@egjs/children-differ"; import DragScroll from "@scena/dragscroll"; import KeyController, { getCombi } from "keycon"; -import { createElement, h, getClient, diffValue } from "./utils"; +import { createElement, h, getClient, diffValue, getRect } from "./utils"; import { SelectoOptions, Rect, SelectoProperties, OnDragEvent, SelectoEvents } from "./types"; import { PROPERTIES, injector, CLASS_NAME } from "./consts"; /** @@ -299,7 +299,8 @@ class Selecto extends Component { return added.map(index => list[index]).concat(removed.map(index => prevList[index])); } - private select(selectedTargets: Array, inputEvent: any, isStart?: boolean) { + private select( + selectedTargets: Array, rect: Rect, inputEvent: any, isStart?: boolean) { const { added, removed, @@ -342,6 +343,7 @@ class Selecto extends Component { selected: selectedTargets, added: added.map(index => list[index]), removed: removed.map(index => prevList[index]), + rect, inputEvent, }); } @@ -373,6 +375,7 @@ class Selecto extends Component { selected: selectedTargets, added: added.map(index => list[index]), removed: removed.map(index => prevList[index]), + rect, inputEvent, }); } @@ -380,6 +383,7 @@ class Selecto extends Component { private selectEnd( startSelectedTargets: Array, selectedTargets: Array, + rect: Rect, e: OnDragEvent, ) { const { inputEvent, isDouble } = e; @@ -436,6 +440,7 @@ class Selecto extends Component { afterRemoved: afterRemoved.map(index => afterPrevList[index]), isDragStart, isDouble: !!isDouble, + rect, inputEvent, }); } @@ -452,6 +457,8 @@ class Selecto extends Component { top, right: left + width, bottom: top + height, + width, + height, }; }); datas.selectableTargets = selectableTargets; @@ -459,14 +466,18 @@ class Selecto extends Component { datas.startSelectedTargets = this.selectedTargets; const pointTarget = clickedTarget || document.elementFromPoint(clientX, clientY); - let firstPassedTargets = this.hitTest({ + const hitRect = { left: clientX, top: clientY, right: clientX, bottom: clientY, - }, clientX, clientY, selectableTargets, selectableRects).filter( - target => target === pointTarget || target.contains(pointTarget), - ); + width: 0, + height: 0, + }; + let firstPassedTargets = this.hitTest( + hitRect, clientX, clientY, selectableTargets, selectableRects).filter( + target => target === pointTarget || target.contains(pointTarget), + ); const hasInsideTargets = firstPassedTargets.length > 0; const isPreventSelect = !selectFromInside && hasInsideTargets; @@ -514,11 +525,12 @@ class Selecto extends Component { if (!result) { return false; } - this.select(firstPassedTargets, inputEvent, true); + this.select(firstPassedTargets, hitRect, inputEvent, true); datas.startX = clientX; datas.startY = clientY; datas.selectedTargets = firstPassedTargets; - this.target.style.cssText += `left:${clientX}px;top:${clientY}px`; + this.target.style.cssText + += `left:0px;top:0px;transform: translate(${clientX}px, ${clientY}px)`; if (isPreventSelect && selectByClick) { this.onDragEnd(e); @@ -537,34 +549,27 @@ class Selecto extends Component { } private check(e: any) { const { - distX, - distY, datas, inputEvent, } = e; - const { startX, startY } = datas; - const tx = Math.min(0, distX); - const ty = Math.min(0, distY); - const width = Math.abs(distX); - const height = Math.abs(distY); - + const rect = getRect(e); + const { + top, + left, + width, + height, + } = rect; this.target.style.cssText += `display: block;` - + `left:${startX}px;top:${startY}px;` - + `transform: translate(${tx}px, ${ty}px);` + + `left:0px;top:0px;` + + `transform: translate(${left}px, ${top}px);` + `width:${width}px;height:${height}px;`; - const left = startX + tx; - const top = startY + ty; - const passedTargets = this.hitTest({ - left, - top, - right: left + width, - bottom: top + height, - }, datas.startX, datas.startY, datas.selectableTargets, datas.selectableRects); + const passedTargets = this.hitTest( + rect, datas.startX, datas.startY, datas.selectableTargets, datas.selectableRects); const selectedTargets = this.getSelectedTargets(passedTargets); - this.select(selectedTargets, inputEvent); + this.select(selectedTargets, rect, inputEvent); datas.selectedTargets = selectedTargets; } private onDrag = (e: OnDrag) => { @@ -580,7 +585,8 @@ class Selecto extends Component { const { datas } = e; this.dragScroll.dragEnd(); this.target.style.cssText += "display: none;"; - this.selectEnd(datas.startSelectedTargets, datas.selectedTargets, e); + this.selectEnd( + datas.startSelectedTargets, datas.selectedTargets, getRect(e), e); this.selectedTargets = datas.selectedTargets; } private sameCombiKey(e: any) { diff --git a/src/types.ts b/src/types.ts index ec3899a..2c9c909 100644 --- a/src/types.ts +++ b/src/types.ts @@ -50,6 +50,8 @@ export interface Rect { left: number; bottom: number; right: number; + width: number; + height: number; } /** @@ -58,12 +60,14 @@ export interface Rect { * @property - Selection Element to apply for framework (private) * @property - added * @property - removed + * @property - Rect of Selection Element * @property - inputEvent */ export interface OnSelect { selected: Array; added: Array; removed: Array; + rect: Rect; inputEvent: any; } /** @@ -84,6 +88,8 @@ export interface OnDragEvent { datas: IObject; clientX: number; clientY: number; + distX?: number; + distY?: number; isDouble?: boolean; inputEvent: any; } diff --git a/src/utils.ts b/src/utils.ts index b76a7bb..5d00362 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,4 +1,4 @@ -import { Hypertext } from "./types"; +import { Hypertext, Rect } from "./types"; import { IObject, addClass, hasClass } from "@daybrush/utils"; export function getClient(e: MouseEvent | TouchEvent) { @@ -74,3 +74,27 @@ export function diffValue(prev: T, cur: T, func: (prev: T, cur: T) => void) { func(prev, cur); } } + +export function getRect(e: any): Rect { + const { + distX = 0, + distY = 0, + datas, + } = e; + const { startX, startY } = datas; + const tx = Math.min(0, distX); + const ty = Math.min(0, distY); + const width = Math.abs(distX); + const height = Math.abs(distY); + const left = startX + tx; + const top = startY + ty; + + return { + left, + top, + right: left + width, + bottom: top + height, + width, + height, + }; +}