Merge pull request #75 from valerybugakov/freelife2010/bug/selection-for-multiline

Freelife2010/bug/selection for multiline

Author: valerybugakov

src/CreateSelectable.tsx

@@ -24,7 +24,7 @@ const createSelectable = (WrappedComponent: ComponentType<any>) =>
 
     node: HTMLElement | null = null
 
-    bounds: TComputedBounds | null = null
+    bounds: TComputedBounds[] | null = null
 
     componentDidMount() {
       this.registerSelectable()

src/Selectable.types.ts

@@ -24,7 +24,7 @@ export type TSelectableItem = Component & {
   state: TSelectableItemState
   deselected: boolean
   node: Maybe<HTMLDivElement>
-  bounds: Maybe<TComputedBounds>
+  bounds: Maybe<TComputedBounds[]>
 }
 
 export type TSelectableItemProps = TSelectableItemState & {

src/SelectableGroup.tsx

@@ -343,7 +343,7 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
       return
     }
 
-    const selectboxBounds = getBoundsForNode(selectboxNode)
+    const [selectboxBounds] = getBoundsForNode(selectboxNode)
 
     this.selectItems({
       ...selectboxBounds,
@@ -377,7 +377,8 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
       return null
     }
 
-    const isCollided = doObjectsCollide(selectboxBounds, item.bounds!, tolerance, this.props.delta)
+    const { delta } = this.props
+    const isCollided = doObjectsCollide(selectboxBounds, item.bounds!, tolerance, delta)
     const { isSelecting, isSelected } = item.state
 
     if (isFromClick && isCollided) {
@@ -504,7 +505,7 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
     const evt = castTouchToMouseEvent(e)
 
     if (!this.props.globalMouse && !isNodeInRoot(evt.target as any, this.selectableGroup!)) {
-      const offsetData = getBoundsForNode(this.selectableGroup!)
+      const [offsetData] = getBoundsForNode(this.selectableGroup!)
       const collides = doObjectsCollide(
         {
           top: offsetData.top,

src/utils/doObjectsCollide.ts

@@ -30,18 +30,30 @@ const areBoundsCollide = (
   )
 }
 
+function toArray(value: any) {
+  if (Array.isArray(value)) {
+    return value
+  }
+
+  return [value]
+}
+
 /**
  * Given two objects containing "top", "left", "offsetWidth" and "offsetHeight"
  * properties, determine if they collide.
  */
 export function doObjectsCollide(
-  a: HTMLElement | TComputedBounds,
-  b: HTMLElement | TComputedBounds,
+  a: HTMLElement | TComputedBounds | TComputedBounds[],
+  b: HTMLElement | TComputedBounds | TComputedBounds[],
   tolerance = 0,
   delta = 1
 ) {
-  const aObj = a instanceof HTMLElement ? getBoundsForNode(a) : a
-  const bObj = b instanceof HTMLElement ? getBoundsForNode(b) : b
+  const aBounds = a instanceof HTMLElement ? getBoundsForNode(a) : toArray(a)
+  const bBounds = b instanceof HTMLElement ? getBoundsForNode(b) : toArray(b)
 
-  return areBoundsCollide(aObj, bObj, { tolerance, useOffsetSize: delta === 1 })
+  for (let i = 0; i < aBounds.length; i++) {
+    for (let j = 0; j < bBounds.length; j++) {
+      return areBoundsCollide(aBounds[i], bBounds[j], { tolerance, useOffsetSize: delta === 1 })
+    }
+  }
 }

src/utils/getBoundsForNode.ts

@@ -34,18 +34,16 @@ export function getDocumentScroll() {
 export function getBoundsForNode(
   node: HTMLElement,
   containerScroll: TGetBoundsForNodeArgs = { scrollTop: 0, scrollLeft: 0 }
-) {
+): TComputedBounds[] {
   const { scrollTop, scrollLeft } = containerScroll
   const { documentScrollTop, documentScrollLeft } = getDocumentScroll()
 
-  const rect = node.getBoundingClientRect()
-
-  return {
+  return Array.from(node.getClientRects()).map(rect => ({
     top: rect.top + documentScrollTop + scrollTop,
     left: rect.left + documentScrollLeft + scrollLeft,
     offsetWidth: node.offsetWidth,
     offsetHeight: node.offsetHeight,
     width: rect.width,
     height: rect.height
-  }
+  }))
 }