1- import Vue from "../node_modules/vue/dist/vue.min "
1+ import Vue from "../node_modules/vue/dist/vue"
22import IntrBinnode from "./components/binnode.vue"
33import ExtrBinnode from "./components/extr-binnode.vue"
44import TopBinnode from "./components/top-binnode.vue"
5- import { BinNode } from "./js/BinNode"
5+ import { BinNode , RBColor , TreeUtil } from "./js/BinNode"
66import { BinTree } from "./js/BinTree"
77import { BST } from "./js/BST"
88import { AVL } from "./js/AVL"
99import { Splay } from "./js/Splay"
10+ import { RedBlack } from "./js/RedBlack"
1011
1112var tp = new Vue ( {
1213 el : "#TreePlayground" ,
1314 data : {
14- availTreeTypes : { "BinTree" : true , "BST" : true , "AVL" : true , "Splay" : true , "RedBlack" : false } ,
15+ availTreeTypes : { "BinTree" : true , "BST" : true , "AVL" : true , "Splay" : true , "RedBlack" : true } ,
1516 commonParams : {
1617 curTreeType : "BST" , // Important : Always use as `this.curTreeType`.
1718 treeScale : 100 , // in %
@@ -20,7 +21,7 @@ var tp = new Vue({
2021 messages : {
2122 left : "" , right : ""
2223 } ,
23- treeClassMap : { "BinTree" : BinTree , "BST" : BST , "AVL" : AVL , "Splay" : Splay } ,
24+ treeClassMap : { "BinTree" : BinTree , "BST" : BST , "AVL" : AVL , "Splay" : Splay , "RedBlack" : RedBlack } ,
2425 trees : { "BinTree" : null , "BST" : null , "AVL" : null , "Splay" : null , "RedBlack" : null } ,
2526 structInfo : {
2627 nodes : [ ] ,
@@ -228,13 +229,17 @@ var tp = new Vue({
228229 onRemoveOne ( node ) {
229230 if ( this . isAnyLocked ( ) ) return false ;
230231 this . showMessage ( `Remove ${ node . data } ) ;
231- if ( "Splay" === this . curTreeType ) { // Exception : Deal with Splay
232+ if ( "RedBlack" === this . curTreeType ) { // TODO: No Vigor to write async version anymore using callback
233+ this . tree . remove ( node . data ) ; // Maybe change everything to await promise in the future.
234+ this . update ( ) ;
235+ }
236+ else if ( "Splay" === this . curTreeType ) { // Exception : Deal with Splay
232237 this . alertAsync ( `Step 1: Splay ${ node . data } , - 1 ) ;
233238 node . active = true ;
234239 setTimeout ( ( ) => {
235240 // Splay RM Step 1
236241 this . locks . rotateLock = true ;
237- this . splayAsync ( node , ( rootOrNull ) => {
242+ this . _splayAsync ( node , ( rootOrNull ) => {
238243 if ( rootOrNull === undefined ) return false ;
239244 if ( rootOrNull === null ) throw "Error in RemoveOne" ;
240245 let v = rootOrNull ;
@@ -249,9 +254,9 @@ var tp = new Vue({
249254 node . active = false ; node . deprecated = true ;
250255 this . locks . trvlLock = true ;
251256 this . alertAsync ( `Step 2: Elevate Succ of ${ node . data } , - 1 ) ;
252- this . searchAsync ( v . rc , v . data , ( _ , hot ) => {
257+ this . _searchAsync ( v . rc , v . data , ( _ , hot ) => {
253258 this . locks . rotateLock = true ;
254- this . splayAsync ( hot , ( newRoot ) => {
259+ this . _splayAsync ( hot , ( newRoot ) => {
255260 // Splay RM Step 3
256261 this . alertAsync ( `Step 3: Finally remove ${ node . data } , 2500 ) ;
257262 tree . reAttachAsLC ( newRoot , v . lc ) ;
@@ -282,7 +287,7 @@ var tp = new Vue({
282287 let succ = node . succ ( ) ;
283288 node . deprecated = true ;
284289 this . locks . trvlLock = true ; // TODO : change to srchLock
285- this . searchAsync ( node , succ . data , ( ) => { // assert res === true
290+ this . _searchAsync ( node , succ . data , ( ) => { // assert res === true
286291 // RM Step 2: Swap with Succ
287292 this . alertAsync ( `Step 2: Swap with Succ` , - 1 ) ;
288293 this . update ( ) ;
@@ -325,9 +330,9 @@ var tp = new Vue({
325330 setTimeout ( ( ) => {
326331 let interval = this . commonParams . interval ;
327332 if ( ! AVL . avlBalanced ( node ) )
328- this . tree . rotateAt ( BinNode . tallerChild ( BinNode . tallerChild ( node ) ) ) ;
333+ this . tree . rotateAt ( TreeUtil . tallerChild ( TreeUtil . tallerChild ( node ) ) ) ;
329334 else interval = 0 ;
330- this . tree . update_height ( node ) ;
335+ this . tree . updateHeight ( node ) ;
331336 this . update ( ) ;
332337 node . active = true ;
333338 setTimeout ( ( ) => {
@@ -365,15 +370,15 @@ var tp = new Vue({
365370 this . alertAsync ( `Step 1: Search ${ num } , - 1 ) ;
366371 this . locks . trvlLock = true ;
367372 this . tree . _hot = null ; // Important: reset _hot before search
368- this . searchAsync ( this . tree . root ( ) , num , ( res , nodeOrHot ) => {
373+ this . _searchAsync ( this . tree . root ( ) , num , ( res , nodeOrHot ) => {
369374 let recentNode = null ;
370375 // Exception : Deal with Splay
371376 if ( "Splay" === this . curTreeType ) { // Caution & Important & TODO : May need change
372377 this . alertAsync ( nodeOrHot ? `Step 2: Splay at ${ nodeOrHot . data } : "" , - 1 ) ;
373378 // Wait & Splay & Insert in callback
374379 setTimeout ( ( ) => {
375380 this . locks . rotateLock = true ;
376- this . splayAsync ( nodeOrHot , ( rootOrNull ) => {
381+ this . _splayAsync ( nodeOrHot , ( rootOrNull ) => {
377382 if ( ! res ) {
378383 if ( rootOrNull === undefined ) return false ; // `rotateLock` has been reset.
379384 this . alertAsync ( `Final: ${ num } , 2500 ) ;
@@ -405,7 +410,7 @@ var tp = new Vue({
405410 this . update ( ) ;
406411 if ( this . topSequence . length === 0 ) {
407412 recentNode . active = true ; // Caution: Mark recent active
408- this . locks . trvlLock = false ; return false ;
413+ this . locks . trvlLock = false ; return true ;
409414 } else this . insertSequnceAsync ( ) ;
410415 } , this . commonParams . interval ) ;
411416 /* ----------------------------------------------------------------------------------------------------- */
@@ -420,20 +425,20 @@ var tp = new Vue({
420425 this . messages . left = `Search ${ num } ;
421426
422427 this . tree . _hot = null ; // Important: reset _hot before search
423- this . searchAsync ( this . tree . root ( ) , num , ( res , nodeOrHot ) => {
428+ this . _searchAsync ( this . tree . root ( ) , num , ( res , nodeOrHot ) => {
424429 if ( res ) this . alertAsync ( `${ num } ) ;
425430 else Math . random ( ) < 0.5 ? this . alertAsync ( `${ num } ) : this . alertAsync ( `${ num } ) ;
426431 if ( this . curTreeType === "Splay" ) { // Exception & Important : Splay
427432 this . alertAsync ( nodeOrHot ? `Splay at ${ nodeOrHot . data } : "" , 2000 ) ;
428433 setTimeout ( ( ) => {
429434 this . locks . rotateLock = true ;
430- this . splayAsync ( nodeOrHot ) ;
435+ this . _splayAsync ( nodeOrHot ) ;
431436 } , this . commonParams . interval ) ;
432437 }
433438 } ) ;
434439 } ,
435440 // Search Async & Recur. Callback: (true, target) if found else (false, _hot)
436- searchAsync ( node , num , callback ) { // Important: SET LOCK BEFORE START!
441+ _searchAsync ( node , num , callback ) { // Important: SET LOCK BEFORE START!
437442 if ( ! this . locks . trvlLock || ! node ) {
438443 this . locks . trvlLock = false ;
439444 if ( typeof callback === "function" ) callback ( false , this . tree . _hot ) ;
@@ -452,12 +457,12 @@ var tp = new Vue({
452457 node . visited = true ;
453458 if ( num < node . data ) node = node . lc ;
454459 else node = node . rc ;
455- this . searchAsync ( node , num , callback ) ;
460+ this . _searchAsync ( node , num , callback ) ;
456461 } , this . commonParams . interval ) ;
457462 }
458463 } ,
459464 // Splay Async & Recur. Callback: (null) if !v, (undefined) if locked, (_root) if success
460- splayAsync ( v , callback ) { // Important: SET `rotateLock` BEFORE START!
465+ _splayAsync ( v , callback ) { // Important: SET `rotateLock` BEFORE START!
461466 if ( ! v ) {
462467 this . locks . rotateLock = false ;
463468 if ( typeof callback === "function" ) callback ( null ) ;
@@ -486,7 +491,7 @@ var tp = new Vue({
486491 this . update ( ) ;
487492 v . active = true ;
488493 setTimeout ( ( ) => {
489- this . splayAsync ( v , callback ) ;
494+ this . _splayAsync ( v , callback ) ;
490495 } , this . commonParams . interval ) ;
491496 }
492497 } ,
@@ -503,7 +508,6 @@ var tp = new Vue({
503508 sequence . splice ( last + 1 ) ;
504509 this . topSequence = sequence ;
505510 } ,
506-
507511 /****************************************/
508512 /* Dragger */
509513 /****************************************/
@@ -572,7 +576,7 @@ var tp = new Vue({
572576 } ,
573577 checkNodeOrder ( node , newV ) {
574578 let pred , succ ;
575- let isLC = node . isLC || BinNode . isLC ( node ) ;
579+ let isLC = node . isLC || TreeUtil . isLC ( node ) ;
576580 if ( node . lc === undefined ) { // External nodes
577581 if ( isLC === true && newV > node . parent . data ||
578582 isLC === true && ( pred = node . parent . pred ( ) ) && newV < pred . data ||
@@ -590,6 +594,14 @@ var tp = new Vue({
590594 }
591595 return true ;
592596 } ,
597+
598+ /****************************************/
599+ /* Others */
600+ /****************************************/
601+ nodeColorClass ( color ) {
602+ if ( this . curTreeType === "RedBlack" ) return color == RBColor . Red ? "red-node" : "black-node" ;
603+ return "normal-color-node" ;
604+ } ,
593605 } ,
594606 computed : {
595607 tree : {
@@ -613,17 +625,14 @@ var tp = new Vue({
613625 let scale = this . treeScale / 100 ;
614626 return `transform:scale(${ scale } ;
615627 } ,
616- showExtr ( ) {
617- return true ;
618- } ,
619628 } ,
620629 watch : {
621- tree : {
622- handler ( ) {
623- console . log ( "Detect Change in tree." ) ;
624- } ,
625- deep : true ,
626- } ,
630+ // tree: {
631+ // handler() {
632+ // console.log("Detect Change in tree.");
633+ // },
634+ // deep: true,
635+ // },
627636 commonParams : {
628637 handler ( ) {
629638 localStorage . commonParams = JSON . stringify ( this . commonParams ) ;
0 commit comments