Skip to content

Commit f0eefc0

Browse files
author
yinquan
committed
modify: prop node.style.titleMaxWidth can be assigned with negative
value
1 parent 4c3f334 commit f0eefc0

File tree

11 files changed

+129
-42
lines changed

11 files changed

+129
-42
lines changed

‎CHANGELOG.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
1.4.0
2+
modify: prop node.style.titleMaxWidth can be assigned with a negative value.
3+
14
1.3.1
25
fix: node.style.titleMaxWidth with a percentage value not working properly.
36
add a prop: node.__.titleMaxWidth

‎docs/css/app.bf4449b7.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/css/app.ebe1f172.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>twtree</title><link href=js/about.76155aec.js rel=prefetch><link href=css/app.bf4449b7.css rel=preload as=style><link href=js/app.2918e3a6.js rel=preload as=script><link href=js/chunk-vendors.1b769e65.js rel=preload as=script><link href=css/app.bf4449b7.css rel=stylesheet></head><body><noscript><strong>We're sorry but twtree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.1b769e65.js></script><script src=js/app.2918e3a6.js></script></body></html>
1+
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>twtree</title><link href=js/about.76155aec.js rel=prefetch><link href=css/app.ebe1f172.css rel=preload as=style><link href=js/app.8bf281ce.js rel=preload as=script><link href=js/chunk-vendors.1b769e65.js rel=preload as=script><link href=css/app.ebe1f172.css rel=stylesheet></head><body><noscript><strong>We're sorry but twtree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.1b769e65.js></script><script src=js/app.8bf281ce.js></script></body></html>

‎docs/js/app.2918e3a6.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎docs/js/app.2918e3a6.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/js/app.8bf281ce.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/js/app.8bf281ce.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "twtree",
3-
"version": "1.3.1",
3+
"version": "1.4.0",
44
"description": "A highly customizable tree component for vue, which features checkbox, async loading, drag and drop, context menu and custom appearance.",
55
"main": "lib/twtree.umd.min.js",
66
"keywords": [

‎src/components/TWTree.vue

Lines changed: 64 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
:style="{
88
'--dragImageOffsetX': dragImageOffsetX,
99
'--dragImageOffsetY': dragImageOffsetY,
10-
'--animationDuration': animationDuration
10+
'--animationDuration': animationDuration,
11+
'--treeWidth': treeWidth + 'px'
1112
}">
1213
<transition-group name="node">
1314
<template v-for="item of items">
@@ -22,7 +23,7 @@
2223
'drag-over-self': item.__.dragOverArea === 'self' && item.__.isDroppable
2324
}"
2425
:style="{
25-
'text-indent': item.__.fullIndent,
26+
'--fullIndent': item.__.fullIndent,
2627
'--height': item.style.height,
2728
'--fontSize': item.style.fontSize,
2829
'--hoverBgColor': item.style.hoverBgColor,
@@ -86,20 +87,21 @@
8687
</svg>
8788
</slot>
8889
</span>
89-
<slot name="title" v-bind:node="item">
90-
<span
91-
:class="{title:true, editing:item.__.isEditing}"
92-
:ref="'title-' + item.id"
93-
:contenteditable="item.__.isEditing"
94-
:title="item.__.titleTip"
95-
@keydown="keydownEvent(item, $event)"
96-
@keyup="keyupEvent(item, $event)"
97-
@keypress="keypressEvent(item, $event)"
98-
@input="inputEvent(item, $event)"
99-
@focus="focusEvent(item, $event)"
100-
@blur="blurEvent(item)"
101-
@mouseenter="mouseenterEvent(item)">{{item.title}}</span>
102-
</slot>
90+
<span class="title-wrapper" :ref="'title-' + item.id">
91+
<slot name="title" v-bind:node="item">
92+
<span
93+
:class="{title:true, editing:item.__.isEditing}"
94+
:contenteditable="item.__.isEditing"
95+
:title="item.__.titleTip"
96+
@keydown="keydownEvent(item, $event)"
97+
@keyup="keyupEvent(item, $event)"
98+
@keypress="keypressEvent(item, $event)"
99+
@input="inputEvent(item, $event)"
100+
@focus="focusEvent(item, $event)"
101+
@blur="blurEvent(item)"
102+
@mouseenter="mouseenterEvent(item)">{{item.title}}</span>
103+
</slot>
104+
</span>
103105
</span>
104106
<span class="extra-wrapper">
105107
<slot name="extra" v-bind:node="item">
@@ -219,6 +221,7 @@ export default {
219221
items: this.getItems(),
220222
autoIdCounter: 0,
221223
treeWidth: 0,
224+
treeWidthInterval: null,
222225
spareDefaultAttrs: {
223226
selected: false,
224227
directoryState: 'expanded',
@@ -344,6 +347,20 @@ export default {
344347
fullIndent = 'calc(' + indents.join(' + ') + ')'
345348
}
346349
350+
let titleMaxWidth = this.getAttr(node, 'style', 'titleMaxWidth')
351+
let fullIndentVal = fullIndent.toString()
352+
if (fullIndentVal.substring(0, 3) === 'calc') {
353+
fullIndentVal = fullIndentVal.substring(5, fullIndent.length-1)
354+
}
355+
if (titleMaxWidth[0] === '-') {
356+
if (titleMaxWidth[titleMaxWidth.length - 1] === '%') {
357+
titleMaxWidth = ' - ' + (-1 * parseFloat(titleMaxWidth) / 100.0) + ' * var(--treeWidth)'
358+
}
359+
titleMaxWidth = 'calc(var(--treeWidth) - 1em - var(--switcherMarginRight) - 2px - 1em - var(--iconMarginRight) ' + titleMaxWidth + ' - (' + fullIndentVal + '))'
360+
} else if(titleMaxWidth[titleMaxWidth.length - 1] === '%') {
361+
titleMaxWidth = 'calc(' + (parseFloat(titleMaxWidth) / 100.0) + ' * var(--treeWidth))'
362+
}
363+
347364
this.setAttr(node, 'directoryState', this.getDirectoryState(node))
348365
this.setAttr(node, 'selected', this.getAttr(node, 'selected'))
349366
@@ -378,12 +395,6 @@ export default {
378395
this.setAttr(node, '__', 'mousey', this.getAttr(node, '__', 'mousey'))
379396
this.setAttr(node, '__', 'titleTip', this.getAttr(node, '__', 'titleTip'))
380397
this.setAttr(node, '__', 'fullIndent', fullIndent)
381-
382-
let titleMaxWidth = this.getAttr(node, 'style', 'titleMaxWidth');
383-
if (titleMaxWidth[titleMaxWidth.length - 1] === '%') {
384-
let percent = parseFloat(titleMaxWidth)
385-
titleMaxWidth = Math.floor(this.treeWidth * percent / 100) + 'px'
386-
}
387398
this.setAttr(node, '__', 'titleMaxWidth', titleMaxWidth)
388399
}
389400
@@ -521,7 +532,7 @@ export default {
521532
getTitleElement(node) {
522533
let refId = 'title-' + node.id
523534
if (this.$refs.hasOwnProperty(refId)) {
524-
return this.$refs[refId][0]
535+
return this.$refs[refId][0].childNodes[0]
525536
}
526537
527538
return null
@@ -1191,10 +1202,23 @@ export default {
11911202
} else if (state === 'collapsed') {
11921203
this.expand(node)
11931204
}
1205+
},
1206+
resizeTree() {
1207+
this.treeWidth = this.$refs.tree.offsetWidth
11941208
}
11951209
},
11961210
mounted() {
11971211
this.refresh()
1212+
1213+
this.treeWidthInterval = setInterval(function(){
1214+
let treeWidth = this.$refs.tree.offsetWidth
1215+
if (this.treeWidth !== treeWidth) {
1216+
this.treeWidth = treeWidth
1217+
}
1218+
}.bind(this), 300)
1219+
},
1220+
beforeDestroy() {
1221+
clearInterval(this.treeWidthInterval)
11981222
}
11991223
}
12001224
</script>
@@ -1222,6 +1246,7 @@ export default {
12221246
font-size: var(--fontSize);
12231247
margin-top: var(--marginTop);
12241248
margin-bottom: var(--marginBottom);
1249+
text-indent: var(--fullIndent);
12251250
}
12261251
.node-enter-to, .node-leave {
12271252
height: var(--height);
@@ -1325,35 +1350,39 @@ export default {
13251350
}
13261351
.node .drag-arrow-wrapper {
13271352
height: 0;
1328-
width: 100%;
1353+
width: 0;
13291354
border: 0;
1355+
text-indent: 0;
13301356
position: absolute;
1331-
left: 0;
1357+
left: calc(var(--fullIndent) + 1em);
13321358
display: none;
1333-
overflow: visible;
1334-
z-index: 10;
13351359
flex-direction: row;
1360+
flex-wrap: nowrap;
1361+
justify-content: flex-end;
13361362
align-items: center;
1363+
overflow: hidden;
1364+
z-index: 10;
13371365
}
13381366
.node .drag-arrow-wrapper .arrow {
1339-
position: relative;
1340-
width: 20px;
1341-
height: 20px;
1342-
left: -8px;
1343-
top: -10px;
1367+
width: 1.7em;
1368+
height: 2.6em;
13441369
stroke: #5cb85c;
13451370
fill: #5cb85c;
1371+
overflow: visible;
13461372
}
13471373
.node.drag-over-prev .drag-arrow-wrapper {
1348-
display: block;
1374+
display: flex;
1375+
overflow: visible;
13491376
top: 0;
13501377
}
13511378
.node.drag-over-next .drag-arrow-wrapper {
1352-
display: block;
1379+
display: flex;
1380+
overflow: visible;
13531381
bottom: 0;
13541382
}
13551383
.node.drag-over-self .drag-arrow-wrapper {
1356-
display: block;
1384+
display: flex;
1385+
overflow: visible;
13571386
top: 50%;
13581387
}
13591388
.node.drag-over-self .icon-and-title {

‎src/views/CustomAppearanceExample.vue

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,11 @@
4848
</svg>
4949
<span class="drag-image-title">{{dnd.dragNode.title}}</span>
5050
</template>
51+
<template v-slot:drag-arrow>
52+
<svg viewBox="0 0 32 32" :style="{overflow: 'visible'}" width="1.7em" height="2em" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
53+
<path d="M22 6 L30 16 22 26 M30 16 L2 16" />
54+
</svg>
55+
</template>
5156
</TWTree>
5257
</div>
5358

@@ -107,7 +112,15 @@
107112

108113
<div class="title">limit title width</div>
109114
<div class="panel">
110-
<TWTree :tree="commonTree" class="tree" :defaultAttrs="{style:{titleMaxWidth: '3em', titleOverflow: 'ellipsis'}}">
115+
<TWTree :tree="widthTree" class="tree" :defaultAttrs="{style:{titleMaxWidth: '3em', titleOverflow: 'ellipsis'}}">
116+
</TWTree>
117+
</div>
118+
<div class="panel">
119+
<TWTree :tree="widthTree" class="tree" :defaultAttrs="{style:{titleMaxWidth: '20%', titleOverflow: 'ellipsis'}}">
120+
</TWTree>
121+
</div>
122+
<div class="panel">
123+
<TWTree :tree="widthTree" class="tree" :defaultAttrs="{style:{titleMaxWidth: '-20%', titleOverflow: 'ellipsis'}}">
111124
</TWTree>
112125
</div>
113126

@@ -269,9 +282,51 @@ export default {
269282
}
270283
]
271284
}
285+
],
286+
287+
widthTree: [
288+
{
289+
id: 1,
290+
title: 'ROOT',
291+
hasChild: true,
292+
children: [
293+
{
294+
id: 2,
295+
title: 'hello, world! hello, world! hello, world! hello, world! hello, world!',
296+
},
297+
{
298+
id: 3,
299+
title: 'hello, world! hello, world! hello, world! hello, world! hello, world!',
300+
hasChild: true,
301+
children: [
302+
{
303+
id: 4,
304+
title: 'hello, world! hello, world! hello, world! hello, world! hello, world!'
305+
},
306+
{
307+
id: 5,
308+
title: 'hello, world! hello, world! hello, world! hello, world! hello, world!'
309+
},
310+
{
311+
id: 6,
312+
title: 'hello, world! hello, world! hello, world! hello, world! hello, world!'
313+
}
314+
],
315+
},
316+
{
317+
id: 7,
318+
title: 'hello, world! hello, world! hello, world! hello, world! hello, world!'
319+
},
320+
{
321+
id: 8,
322+
title: 'hello, world! hello, world! hello, world! hello, world! hello, world!'
323+
}
324+
]
325+
}
272326
]
273327
274328
329+
275330
}
276331
}
277332
}

0 commit comments

Comments
 (0)