diff --git a/src/components/Tree.vue b/src/components/Tree.vue
index 782cba6..0f6ac8e 100644
--- 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)}
}
- return
+ return
{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;
+}
diff --git a/src/plugins/draggable/Draggable.vue b/src/plugins/draggable/Draggable.vue
index 795e7ea..f4d47fe 100644
--- 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
index 13e88fc..e6d7434 100644
--- 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,
})
}
}