modify: prop node.style.titleMaxWidth can be assigned with negative

value
TinyWisp · Jun 21, 2020 · f0eefc0 · f0eefc0
1 parent 4c3f334
commit f0eefc0
Show file tree

Hide file tree

Showing 11 changed files with 129 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+1.4.0
+    modify: prop node.style.titleMaxWidth can be assigned with a negative value.
+
 1.3.1
     fix: node.style.titleMaxWidth with a percentage value not working properly.
     add a prop: node.__.titleMaxWidth

diff --git a/docs/css/app.bf4449b7.css b/docs/css/app.bf4449b7.css
diff --git a/docs/css/app.ebe1f172.css b/docs/css/app.ebe1f172.css
diff --git a/docs/index.html b/docs/index.html
@@ -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>
+<!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>
diff --git a/docs/js/app.2918e3a6.js b/docs/js/app.2918e3a6.js
diff --git a/docs/js/app.2918e3a6.js.map b/docs/js/app.2918e3a6.js.map
diff --git a/docs/js/app.8bf281ce.js b/docs/js/app.8bf281ce.js
diff --git a/docs/js/app.8bf281ce.js.map b/docs/js/app.8bf281ce.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "twtree",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "A highly customizable tree component for vue, which features checkbox, async loading, drag and drop, context menu and custom appearance.",
   "main": "lib/twtree.umd.min.js",
   "keywords": [

diff --git a/src/components/TWTree.vue b/src/components/TWTree.vue
@@ -7,7 +7,8 @@
       :style="{
         '--dragImageOffsetX': dragImageOffsetX,
         '--dragImageOffsetY': dragImageOffsetY,
-        '--animationDuration': animationDuration
+        '--animationDuration': animationDuration,
+        '--treeWidth': treeWidth + 'px'
       }">
       <transition-group name="node">
         <template v-for="item of items">
@@ -22,7 +23,7 @@
               'drag-over-self': item.__.dragOverArea === 'self' && item.__.isDroppable
             }"
             :style="{
-              'text-indent': item.__.fullIndent,
+              '--fullIndent': item.__.fullIndent,
               '--height': item.style.height,
               '--fontSize': item.style.fontSize,
               '--hoverBgColor': item.style.hoverBgColor,
@@ -86,20 +87,21 @@
                   </svg>
                 </slot>
               </span>
-              <slot name="title" v-bind:node="item">
-                <span 
-                  :class="{title:true, editing:item.__.isEditing}" 
-                  :ref="'title-' + item.id" 
-                  :contenteditable="item.__.isEditing"
-                  :title="item.__.titleTip"
-                  @keydown="keydownEvent(item, $event)"
-                  @keyup="keyupEvent(item, $event)"
-                  @keypress="keypressEvent(item, $event)"
-                  @input="inputEvent(item, $event)"
-                  @focus="focusEvent(item, $event)"
-                  @blur="blurEvent(item)"
-                  @mouseenter="mouseenterEvent(item)">{{item.title}}</span>
-              </slot>
+              <span class="title-wrapper" :ref="'title-' + item.id">
+                <slot name="title" v-bind:node="item">
+                  <span 
+                    :class="{title:true, editing:item.__.isEditing}" 
+                    :contenteditable="item.__.isEditing"
+                    :title="item.__.titleTip"
+                    @keydown="keydownEvent(item, $event)"
+                    @keyup="keyupEvent(item, $event)"
+                    @keypress="keypressEvent(item, $event)"
+                    @input="inputEvent(item, $event)"
+                    @focus="focusEvent(item, $event)"
+                    @blur="blurEvent(item)"
+                    @mouseenter="mouseenterEvent(item)">{{item.title}}</span>
+                </slot>
+              </span>
             </span>
             <span class="extra-wrapper">
               <slot name="extra" v-bind:node="item">
@@ -219,6 +221,7 @@ export default {
       items: this.getItems(),
       autoIdCounter: 0,
       treeWidth: 0,
+      treeWidthInterval: null,
       spareDefaultAttrs: {
         selected: false,
         directoryState: 'expanded',
@@ -344,6 +347,20 @@ export default {
           fullIndent = 'calc(' + indents.join(' + ') + ')'
         }
 
+        let titleMaxWidth = this.getAttr(node, 'style', 'titleMaxWidth')
+        let fullIndentVal = fullIndent.toString()
+        if (fullIndentVal.substring(0, 3) === 'calc') {
+          fullIndentVal = fullIndentVal.substring(5, fullIndent.length-1)
+        }
+        if (titleMaxWidth[0] === '-') {
+          if (titleMaxWidth[titleMaxWidth.length - 1] === '%') {
+            titleMaxWidth = ' - ' + (-1 * parseFloat(titleMaxWidth) / 100.0) + ' * var(--treeWidth)'
+          }
+          titleMaxWidth = 'calc(var(--treeWidth) - 1em - var(--switcherMarginRight) - 2px - 1em - var(--iconMarginRight) ' + titleMaxWidth + ' - (' + fullIndentVal + '))'
+        } else if(titleMaxWidth[titleMaxWidth.length - 1] === '%') {
+          titleMaxWidth = 'calc(' + (parseFloat(titleMaxWidth) / 100.0) + ' * var(--treeWidth))'
+        }
+
         this.setAttr(node, 'directoryState',  this.getDirectoryState(node))
         this.setAttr(node, 'selected',        this.getAttr(node, 'selected'))
 
@@ -378,12 +395,6 @@ export default {
         this.setAttr(node, '__', 'mousey',         this.getAttr(node, '__', 'mousey'))
         this.setAttr(node, '__', 'titleTip',       this.getAttr(node, '__', 'titleTip'))
         this.setAttr(node, '__', 'fullIndent',     fullIndent)
-
-        let titleMaxWidth = this.getAttr(node, 'style', 'titleMaxWidth');
-        if (titleMaxWidth[titleMaxWidth.length - 1] === '%') {
-          let percent = parseFloat(titleMaxWidth)
-          titleMaxWidth = Math.floor(this.treeWidth * percent / 100) + 'px'
-        }
         this.setAttr(node, '__', 'titleMaxWidth',  titleMaxWidth)
       }
 
@@ -521,7 +532,7 @@ export default {
     getTitleElement(node) {
       let refId = 'title-' + node.id
       if (this.$refs.hasOwnProperty(refId)) {
-        return this.$refs[refId][0]
+        return this.$refs[refId][0].childNodes[0]
       }
 
       return null
@@ -1191,10 +1202,23 @@ export default {
         } else if (state === 'collapsed') {
           this.expand(node)
         }
+    },
+    resizeTree() {
+      this.treeWidth = this.$refs.tree.offsetWidth
     }
   },
   mounted() {
     this.refresh()
+
+    this.treeWidthInterval = setInterval(function(){
+      let treeWidth = this.$refs.tree.offsetWidth
+      if (this.treeWidth !== treeWidth) {
+        this.treeWidth = treeWidth
+      }
+    }.bind(this), 300)
+  },
+  beforeDestroy() {
+    clearInterval(this.treeWidthInterval)
   }
 }
 </script>
@@ -1222,6 +1246,7 @@ export default {
   font-size: var(--fontSize);
   margin-top: var(--marginTop);
   margin-bottom: var(--marginBottom);
+  text-indent: var(--fullIndent);
  }
 .node-enter-to, .node-leave {
   height: var(--height);
@@ -1325,35 +1350,39 @@ export default {
 }
 .node .drag-arrow-wrapper {
   height: 0;
-  width: 100%;
+  width: 0;
   border: 0;
+  text-indent: 0;
   position: absolute;
-  left: 0;
+  left: calc(var(--fullIndent) + 1em);
   display: none;
-  overflow: visible;
-  z-index: 10;
   flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
   align-items: center;
+  overflow: hidden;
+  z-index: 10;
 }
 .node .drag-arrow-wrapper .arrow {
-  position: relative;
-  width: 20px;
-  height: 20px;
-  left: -8px;
-  top: -10px;
+  width: 1.7em;
+  height: 2.6em;
   stroke: #5cb85c;
   fill: #5cb85c;
+  overflow: visible;
 }
 .node.drag-over-prev .drag-arrow-wrapper {
-  display: block;
+  display: flex;
+  overflow: visible;
   top: 0;
 }
 .node.drag-over-next .drag-arrow-wrapper {
-  display: block;
+  display: flex;
+  overflow: visible;
   bottom: 0;
 }
 .node.drag-over-self .drag-arrow-wrapper {
-  display: block;
+  display: flex;
+  overflow: visible;
   top: 50%;
 }
 .node.drag-over-self .icon-and-title {

diff --git a/src/views/CustomAppearanceExample.vue b/src/views/CustomAppearanceExample.vue
@@ -48,6 +48,11 @@
           </svg> 
           <span class="drag-image-title">{{dnd.dragNode.title}}</span>
         </template>
+        <template v-slot:drag-arrow>
+          <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">
+              <path d="M22 6 L30 16 22 26 M30 16 L2 16" />
+          </svg>
+        </template>
       </TWTree>
     </div>
 
@@ -107,7 +112,15 @@
 
     <div class="title">limit title width</div>
     <div class="panel">
-      <TWTree :tree="commonTree" class="tree" :defaultAttrs="{style:{titleMaxWidth: '3em', titleOverflow: 'ellipsis'}}">
+      <TWTree :tree="widthTree" class="tree" :defaultAttrs="{style:{titleMaxWidth: '3em', titleOverflow: 'ellipsis'}}">
+      </TWTree>
+    </div>
+    <div class="panel">
+      <TWTree :tree="widthTree" class="tree" :defaultAttrs="{style:{titleMaxWidth: '20%', titleOverflow: 'ellipsis'}}">
+      </TWTree>
+    </div>
+    <div class="panel">
+      <TWTree :tree="widthTree" class="tree" :defaultAttrs="{style:{titleMaxWidth: '-20%', titleOverflow: 'ellipsis'}}">
       </TWTree>
     </div>
 
@@ -269,9 +282,51 @@ export default {
             }
           ]
         }
+      ],
+
+      widthTree: [
+        {
+          id: 1,
+          title: 'ROOT',
+          hasChild: true,
+          children: [
+            {
+              id: 2,
+              title: 'hello, world! hello, world! hello, world! hello, world! hello, world!',
+            },
+            {
+              id: 3,
+              title: 'hello, world! hello, world! hello, world! hello, world! hello, world!',
+              hasChild: true,
+              children: [
+                {
+                  id: 4,
+                  title: 'hello, world! hello, world! hello, world! hello, world! hello, world!'
+                },
+                {
+                  id: 5,
+                  title: 'hello, world! hello, world! hello, world! hello, world! hello, world!'
+                },
+                {
+                  id: 6,
+                  title: 'hello, world! hello, world! hello, world! hello, world! hello, world!'
+                }
+              ],
+            },
+            {
+              id: 7,
+              title: 'hello, world! hello, world! hello, world! hello, world! hello, world!'
+            },
+            {
+              id: 8,
+              title: 'hello, world! hello, world! hello, world! hello, world! hello, world!'
+            }
+          ]
+        }
       ]
 
 
+
     }
   }
 }
Original file line number	Diff line number	Diff line change
		@@ -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>
		<!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>