Consider both vertical and horizontal into place re-calculation

w

Author: wwayne

src/utils/getPosition.js

@@ -21,54 +21,116 @@ export default function (e, target, node, place, effect, offset) {
   const defaultOffset = getDefaultPosition(effect, target.clientWidth, target.clientHeight, tipWidth, tipHeight)
   const {extraOffset_X, extraOffset_Y} = calculateOffset(offset)
 
-  const widnowWidth = window.innerWidth
+  const windowWidth = window.innerWidth
   const windowHeight = window.innerHeight
 
   // Get the edge offset of the tooltip
   const getTipOffsetLeft = (place) => {
-    const offset_X = defaultOffset[place].x
+    const offset_X = defaultOffset[place].l
+    return mouseX + offset_X + extraOffset_X
+  }
+  const getTipOffsetRight = (place) => {
+    const offset_X = defaultOffset[place].r
     return mouseX + offset_X + extraOffset_X
   }
   const getTipOffsetTop = (place) => {
-    const offset_Y = defaultOffset[place].y
+    const offset_Y = defaultOffset[place].t
+    return mouseY + offset_Y + extraOffset_Y
+  }
+  const getTipOffsetBottom = (place) => {
+    const offset_Y = defaultOffset[place].b
     return mouseY + offset_Y + extraOffset_Y
   }
 
   // Judge if the tooltip has over the window(screen)
+  const outsideVertical = () => {
+     // Check for horazontal tooltip, if their vertical out of screen
+    let result = false
+    let newPlace
+    if (getTipOffsetTop('left') < 0 && getTipOffsetBottom('left') <= windowHeight) {
+      result = true
+      newPlace = 'bottom'
+    } else if (getTipOffsetBottom('left') > windowHeight && getTipOffsetTop('left') >= 0) {
+      result = true
+      newPlace = 'top'
+    }
+    if (result && outsideHorizontal().result) result = false
+    return {result, newPlace}
+  }
   const outsideLeft = () => {
-    // if switch to right will out of screen, return false because switch placement doesn't make sense
-    return getTipOffsetLeft('left') < 0 && getTipOffsetLeft('right') <= widnowWidth
+    // For horizontal tooltip, if vertical out of screen, change the vertical place
+    let {result, newPlace} = outsideVertical()
+    if (!result && getTipOffsetLeft('left') < 0 && getTipOffsetRight('right') <= windowWidth) {
+      result = true
+      newPlace = 'right'
+    }
+    return {result, newPlace}
   }
   const outsideRight = () => {
-    return getTipOffsetLeft('right') > widnowWidth && getTipOffsetLeft('left') >= 0
+    let {result, newPlace} = outsideVertical()
+    if (!result && getTipOffsetRight('right') > windowWidth && getTipOffsetLeft('left') >= 0) {
+      result = true
+      newPlace = 'left'
+    }
+    return {result, newPlace}
+  }
+
+  const outsideHorizontal = () => {
+    let result = false
+    let newPlace
+    if (getTipOffsetLeft('top') < 0 && getTipOffsetRight('top') <= windowWidth) {
+      result = true
+      newPlace = 'right'
+    } else if (getTipOffsetRight('top') > windowWidth && getTipOffsetLeft('top') >= 0) {
+      result = true
+      newPlace = 'left'
+    }
+
+    if (result && outsideVertical().result) result = false
+    return {result, newPlace}
   }
   const outsideTop = () => {
-    return getTipOffsetTop('top') < 0 && getTipOffsetTop('bottom') + tipHeight <= windowHeight
+    let {result, newPlace} = outsideHorizontal()
+    if (!result && getTipOffsetTop('top') < 0 && getTipOffsetBottom('bottom') <= windowHeight) {
+      result = true
+      newPlace = 'bottom'
+    }
+    return {result, newPlace}
   }
   const outsideBottom = () => {
-    return getTipOffsetTop('bottom') + tipHeight > windowHeight && getTipOffsetTop('top') >= 0
+    let {result, newPlace} = outsideHorizontal()
+    if (!result && getTipOffsetBottom('bottom') > windowHeight && getTipOffsetTop('top') >= 0) {
+      result = true
+      newPlace = 'top'
+    }
+    return {result, newPlace}
   }
 
   // Return new state to change the placement to the reverse if possible
-  if (place === 'left' && outsideLeft()) {
+  const outsideLeftResult = outsideLeft()
+  const outsideRightResult = outsideRight()
+  const outsideTopResult = outsideTop()
+  const outsideBottomResult = outsideBottom()
+
+  if (place === 'left' && outsideLeftResult.result) {
     return {
       isNewState: true,
-      newState: {place: 'right'}
+      newState: {place: outsideLeftResult.newPlace}
     }
-  } else if (place === 'right' && outsideRight()) {
+  } else if (place === 'right' && outsideRightResult.result) {
     return {
       isNewState: true,
-      newState: {place: 'left'}
+      newState: {place: outsideRightResult.newPlace}
     }
-  } else if (place === 'top' && outsideTop()) {
+  } else if (place === 'top' && outsideTopResult.result) {
     return {
       isNewState: true,
-      newState: {place: 'bottom'}
+      newState: {place: outsideTopResult.newPlace}
     }
-  } else if (place === 'bottom' && outsideBottom()) {
+  } else if (place === 'bottom' && outsideBottomResult.result) {
     return {
       isNewState: true,
-      newState: {place: 'top'}
+      newState: {place: outsideBottomResult.newPlace}
     }
   }
 
@@ -109,19 +171,59 @@ const getDefaultPosition = (effect, targetWidth, targetHeight, tipWidth, tipHeig
   let right
   let bottom
   let left
-  const disToMouse = 15
-  const triangleHeight = 5
+  const disToMouse = 8
+  const triangleHeight = 2
 
   if (effect === 'float') {
-    top = {x: -(tipWidth / 2), y: -(tipHeight + disToMouse - triangleHeight)}
-    bottom = {x: -(tipWidth / 2), y: disToMouse}
-    left = {x: -(tipWidth + disToMouse - triangleHeight), y: -(tipHeight / 2)}
-    right = {x: disToMouse, y: -(tipHeight / 2)}
+    top = {
+      l: -(tipWidth / 2),
+      r: tipWidth / 2,
+      t: -(tipHeight + disToMouse + triangleHeight),
+      b: -disToMouse
+    }
+    bottom = {
+      l: -(tipWidth / 2),
+      r: tipWidth / 2,
+      t: disToMouse,
+      b: tipHeight + disToMouse + triangleHeight
+    }
+    left = {
+      l: -(tipWidth + disToMouse + triangleHeight),
+      r: -disToMouse,
+      t: -(tipHeight / 2),
+      b: tipHeight / 2
+    }
+    right = {
+      l: disToMouse,
+      r: tipWidth + disToMouse + triangleHeight,
+      t: -(tipHeight / 2),
+      b: tipHeight / 2
+    }
   } else if (effect === 'solid') {
-    top = {x: -(tipWidth / 2), y: -(targetHeight / 2 + tipHeight)}
-    bottom = {x: -(tipWidth / 2), y: targetHeight / 2}
-    left = {x: -(tipWidth + targetWidth / 2), y: -(tipHeight / 2)}
-    right = {x: targetWidth / 2, y: -(tipHeight / 2)}
+    top = {
+      l: -(tipWidth / 2),
+      r: tipWidth / 2,
+      t: -(targetHeight / 2 + tipHeight + triangleHeight),
+      b: -(targetHeight / 2)
+    }
+    bottom = {
+      l: -(tipWidth / 2),
+      r: tipWidth / 2,
+      t: targetHeight / 2,
+      b: targetHeight / 2 + tipHeight + triangleHeight
+    }
+    left = {
+      l: -(tipWidth + targetWidth / 2 + triangleHeight),
+      r: -(targetWidth / 2),
+      t: -(tipHeight / 2),
+      b: tipHeight / 2
+    }
+    right = {
+      l: targetWidth / 2,
+      r: tipWidth + targetWidth / 2 + triangleHeight,
+      t: -(tipHeight / 2),
+      b: tipHeight / 2
+    }
   }
 
   return {top, bottom, left, right}