Skip to content

Commit

Permalink
Enable dragging by touch. Hide Insert&Search btns for BinTree.
Browse files Browse the repository at this point in the history
  • Loading branch information
@hwc0919
hwc0919 committed Mar 4, 2020
1 parent 0285d31 commit ada0d68
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 15 deletions.
7 changes: 4 additions & 3 deletions dist/TreePlayground.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</head>

<body>
<div id="TreePlayground" @mousemove='onTPMouseMove($event)'>
<div id="TreePlayground" @mousemove='onTPMouseMove($event)' @touchmove='onTPMouseMove($event)'>
<!-- Top Toolbar -->
<div class="top-toolbar">
<button class="btn btn-primary top-toolbar-item" type="button" @click="loadSampleTree">Sample</button>
Expand All @@ -38,8 +38,9 @@ <h4>Scale: <label v-text="commonParams.treeScale + '%'"></h4>
</div>
<!-- Tree Visualization Part -->
<div class="tree" ref="tree" :style="adjustScale" style="transform-origin: top;"
@mousedown.self="onTreeMouseDown($event)" @mouseup.self="onTreeMouseLeave($event)">
<!-- Top Fake Node -->
@mousedown.self="onTreeMouseDown($event)" @mouseup.self="onTreeMouseLeave($event)"
@touchstart.self="onTreeMouseDown($event)" @touchend.self="onTreeMouseLeave($event)">
<!-- Top Functional Node -->
<top-binnode id="trvl-sequence" :data="topSequence" @top-build="onTopBuild" @top-insert="onTopInsert"
@top-search="onTopSearch"></top-binnode>
<div class="left-message">{{ messages.left }}</div>
Expand Down
38 changes: 32 additions & 6 deletions dist/bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1726,16 +1726,31 @@ var vm = new _js_vue__WEBPACK_IMPORTED_MODULE_0___default.a({
onTreeMouseDown(event) {
console.log("Start drag")
this.treeXY = [event.target.offsetLeft, event.target.offsetTop];
this.mouseXY = [event.x, event.y];
switch (event.type) {
case "mousedown": this.mouseXY = [event.x, event.y]; break;
case "touchstart":
this.mouseXY = [event.touches[0].clientX, event.touches[0].clientY];
break;
default: return;
}
this.is_moving = true;
},
onTPMouseMove: function (event) {
if (this.is_moving) {
this.$refs.tree.style.left = this.treeXY[0] + event.x - this.mouseXY[0] + "px";
this.$refs.tree.style.top = this.treeXY[1] + event.y - this.mouseXY[1] + "px";
let newXY;
switch (event.type) {
case "mousemove": newXY = [event.x, event.y]; break;
case "touchmove":
newXY = [event.touches[0].clientX, event.touches[0].clientY];
break;
default: return;
}
this.$refs.tree.style.left = this.treeXY[0] + newXY[0] - this.mouseXY[0] + "px";
this.$refs.tree.style.top = this.treeXY[1] + newXY[1] - this.mouseXY[1] + "px";
}
},
onTreeMouseLeave(e) {
console.log("mouse leave")
this.is_moving = false;
},
// Validators
Expand Down Expand Up @@ -14390,10 +14405,10 @@ _js_vue__WEBPACK_IMPORTED_MODULE_0___default.a.component('top-binnode', {
template:
`<div class="binnode top-binnode" @click="divOnClick">
<span v-show="!showInput" style="display: inline-block; width: 100%; height: 100%;">{{ sequence }}</span>
<label class="top-build-btn node-upper-btn" title="由真二叉树层次遍历序列构建, 逗号分隔. 自行保证序列合法性."
<label v-show="showTopBuild" class="top-build-btn node-upper-btn" title="由真二叉树层次遍历序列构建, 逗号分隔. 自行保证序列合法性."
@click.stop="emitTopBuild"><i>B</i></label>
<label class="top-insert-btn node-upper-btn" title="按次序插入" @click.stop="emitTopInsert"><i>I</i></label>
<label class="top-search-btn node-upper-btn" title="查找单个数值" @click.stop="emitTopSearch"><i>S</i></label>
<label v-show="showTopInsert" class="top-insert-btn node-upper-btn" title="按次序插入" @click.stop="emitTopInsert"><i>I</i></label>
<label v-show="showTopSearch" class="top-search-btn node-upper-btn" title="查找单个数值" @click.stop="emitTopSearch"><i>S</i></label>
<binnode-input ref="input" v-show="showInput" v-model="sequence" @blur="showInput=false" @keyup.enter.native="emitTopInsert">
</binnode-input>
</div>`,
Expand Down Expand Up @@ -14430,6 +14445,17 @@ _js_vue__WEBPACK_IMPORTED_MODULE_0___default.a.component('top-binnode', {
this.$emit('top-search', num);
}
},
computed: {
showTopSearch() {
return this.$parent.curTreeType !== "BinTree";
},
showTopInsert() {
return this.$parent.curTreeType !== "BinTree";
},
showTopBuild() {
return true;
}
},
watch: {
data() {
this.sequence = this.data.toString();
Expand Down
21 changes: 18 additions & 3 deletions src/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,16 +255,31 @@ var vm = new Vue({
onTreeMouseDown(event) {
console.log("Start drag")
this.treeXY = [event.target.offsetLeft, event.target.offsetTop];
this.mouseXY = [event.x, event.y];
switch (event.type) {
case "mousedown": this.mouseXY = [event.x, event.y]; break;
case "touchstart":
this.mouseXY = [event.touches[0].clientX, event.touches[0].clientY];
break;
default: return;
}
this.is_moving = true;
},
onTPMouseMove: function (event) {
if (this.is_moving) {
this.$refs.tree.style.left = this.treeXY[0] + event.x - this.mouseXY[0] + "px";
this.$refs.tree.style.top = this.treeXY[1] + event.y - this.mouseXY[1] + "px";
let newXY;
switch (event.type) {
case "mousemove": newXY = [event.x, event.y]; break;
case "touchmove":
newXY = [event.touches[0].clientX, event.touches[0].clientY];
break;
default: return;
}
this.$refs.tree.style.left = this.treeXY[0] + newXY[0] - this.mouseXY[0] + "px";
this.$refs.tree.style.top = this.treeXY[1] + newXY[1] - this.mouseXY[1] + "px";
}
},
onTreeMouseLeave(e) {
console.log("mouse leave")
this.is_moving = false;
},
// Validators
Expand Down
17 changes: 14 additions & 3 deletions src/components/components.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,10 +119,10 @@ Vue.component('top-binnode', {
template:
`<div class="binnode top-binnode" @click="divOnClick">
<span v-show="!showInput" style="display: inline-block; width: 100%; height: 100%;">{{ sequence }}</span>
<label class="top-build-btn node-upper-btn" title="由真二叉树层次遍历序列构建, 逗号分隔. 自行保证序列合法性."
<label v-show="showTopBuild" class="top-build-btn node-upper-btn" title="由真二叉树层次遍历序列构建, 逗号分隔. 自行保证序列合法性."
@click.stop="emitTopBuild"><i>B</i></label>
<label class="top-insert-btn node-upper-btn" title="按次序插入" @click.stop="emitTopInsert"><i>I</i></label>
<label class="top-search-btn node-upper-btn" title="查找单个数值" @click.stop="emitTopSearch"><i>S</i></label>
<label v-show="showTopInsert" class="top-insert-btn node-upper-btn" title="按次序插入" @click.stop="emitTopInsert"><i>I</i></label>
<label v-show="showTopSearch" class="top-search-btn node-upper-btn" title="查找单个数值" @click.stop="emitTopSearch"><i>S</i></label>
<binnode-input ref="input" v-show="showInput" v-model="sequence" @blur="showInput=false" @keyup.enter.native="emitTopInsert">
</binnode-input>
</div>`,
Expand Down Expand Up @@ -159,6 +159,17 @@ Vue.component('top-binnode', {
this.$emit('top-search', num);
}
},
computed: {
showTopSearch() {
return this.$parent.curTreeType !== "BinTree";
},
showTopInsert() {
return this.$parent.curTreeType !== "BinTree";
},
showTopBuild() {
return true;
}
},
watch: {
data() {
this.sequence = this.data.toString();
Expand Down

0 comments on commit ada0d68

Please sign in to comment.