feat(base tree, draggable plugin): RTL support

fix #17
phphe · Jun 11, 2020 · bbdcba4 · bbdcba4
1 parent dc8a52d
commit bbdcba4
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/src/components/Tree.vue b/src/components/Tree.vue
@@ -8,7 +8,7 @@ const template = function (h) {
   const noUndefined = (str) => str ? str : ''
   // tree tpl, to render recursively
   const childrenListTpl = (nodes, parent, parentPath) => {
-    const indentStyle = {paddingLeft: parentPath.length * this.indent + 'px'}
+    const indentStyle = {[!this.rtl ? 'paddingLeft' : 'paddingRight']: parentPath.length * this.indent + 'px'}
     const branchTpl = (node, index) => {
       const path = [...parentPath, index]
       const transitionComponent = this.foldingTransition || 'transition'
@@ -52,7 +52,7 @@ const template = function (h) {
       {nodes.map(branchTpl)}
     </div>
   }
-  return <div class={`he-tree ${this.treeClass}`} data-tree-id={this.treeId}>
+  return <div class={`he-tree ${this.treeClass} ${noUndefined(this.rtl && 'he-tree--rtl')}`} data-tree-id={this.treeId}>
     {this.blockHeader && this.blockHeader()}
     {childrenListTpl(this.rootNode.children, this.rootNode, [])}
     {this.blockFooter && this.blockFooter()}
@@ -71,6 +71,7 @@ const Tree = {
   ],
   props: {
     indent: {type: Number, default: 20},
+    rtl: {type: Boolean},
     rootNode: {default: is => ({})},
   },
   // components: {},
@@ -169,4 +170,7 @@ export default Tree
 .he-tree--hidden{
   display: none;
 }
+.he-tree--rtl{
+  direction: rtl;
+}
 </style>
diff --git a/src/plugins/draggable/Draggable.vue b/src/plugins/draggable/Draggable.vue
@@ -126,6 +126,7 @@ export default {
       unfoldWhenDragoverDelay: this.unfoldWhenDragoverDelay,
       draggingNodePositionMode: this.draggingNodePositionMode,
       cloneWhenDrag: this.cloneWhenDrag,
+      rtl: this.rtl,
       treeClass: 'he-tree',
       rootClass: 'tree-root',
       childrenClass: 'tree-children',
@@ -303,7 +304,8 @@ export default {
     'unfoldWhenDragover', 
     'unfoldWhenDragoverDelay', 
     'draggingNodePositionMode', 
-    'cloneWhenDrag', ].forEach(name => {
+    'rtl'
+    ].forEach(name => {
       this.$watch(name, (value) => {
         _makeTreeDraggable_obj.options[name] = value
         _makeTreeDraggable_obj.optionsUpdated()

diff --git a/src/plugins/draggable/draggable.js b/src/plugins/draggable/draggable.js
@@ -24,6 +24,7 @@ export default function makeTreeDraggable(treeEl, options = {}) {
     // placeholderId
     // unfoldTargetNodeByEl
     // getPathByBranchEl
+    // rtl: false
     ...options,
     treeEl,
   }
@@ -32,6 +33,7 @@ export default function makeTreeDraggable(treeEl, options = {}) {
     triggerBySelf: options.triggerBySelf,
     draggingClassName: options.draggingClass,
     clone: options.cloneWhenDrag,
+    rtl: options.rtl,
     updateMovedElementStyleManually: true,
     getMovedOrClonedElement: (directTriggerElement, store) => {
       // find closest branch from parents
@@ -92,12 +94,18 @@ export default function makeTreeDraggable(treeEl, options = {}) {
       // find closest branch and hovering tree
       let tree
       const movingNode = movingEl.querySelector(`.${options.nodeClass}`)
+      // movingNodeOf and movingNodeRect are not always real. when RTL, there 'x' is top right. when draggingNodePositionMode is mouse, there x and y are mouse position. So don't calc them with their width or height.
+      // movingNodeOf 和 movingNodeRect并非一直如字面意义是movingNode真实坐标. RTL时, x坐标是右上角. draggingNodePositionMode是mouse时, x和y是鼠标坐标.
       let movingNodeOf = hp.getOffset(movingNode)
       let movingNodeRect = hp.getBoundingClientRect(movingNode)
       if (options.draggingNodePositionMode === 'mouse') {
         // use mouse position as dragging node position
+        const {moveEvent} = store
         movingNodeOf = {x: moveEvent.pageX, y: moveEvent.pageY}
         movingNodeRect = {x: moveEvent.clientX, y: moveEvent.clientY} 
+      } else if (options.rtl) {
+        movingNodeOf.x += movingNode.offsetWidth
+        movingNodeRect.x += movingNode.offsetWidth
       }
       // find tree with elementsFromPoint
       let found
@@ -217,8 +225,14 @@ export default function makeTreeDraggable(treeEl, options = {}) {
           //
           while (cur) {
             const curNode = cur.querySelector(`.${options.nodeClass}`)
-            if (hp.getOffset(curNode).x <= movingNodeOf.x) {
-              break
+            if (!options.rtl) {
+              if (hp.getOffset(curNode).x <= movingNodeOf.x) {
+                break
+              }
+            } else {
+              if (hp.getOffset(curNode).x + curNode.offsetWidth >= movingNodeOf.x) {
+                break
+              }
             }
             let hasNextBranch
             let t = cur.nextSibling
@@ -261,6 +275,13 @@ export default function makeTreeDraggable(treeEl, options = {}) {
           }
         },
       }
+      // fix for rtl
+      if (options.rtl) {
+        Object.assign(conditions, {
+          'at closest indent right': () => movingNodeOf.x < info.closestNodeOffset.x + info.closestNode.offsetWidth - options.indent, // at indent left
+          'at closest left': () => movingNodeOf.x > info.closestNodeOffset.x + info.closestNode.offsetWidth, // at right
+        })
+      }
       // convert conditions result to Boolean
       Object.keys(conditions).forEach(key => {
         const old = conditions[key]
@@ -476,6 +497,7 @@ export default function makeTreeDraggable(treeEl, options = {}) {
       triggerBySelf: options.triggerBySelf,
       draggingClassName: options.draggingClass,
       clone: options.cloneWhenDrag,
+      rtl: options.rtl,
     })
   }
 }