@@ -679,6 +679,239 @@ describe('dockviewComponent', () => {
679679 expect ( viewQuery . length ) . toBe ( 1 ) ;
680680 } ) ;
681681
682+ describe ( 'serialization' , ( ) => {
683+ test ( 'reuseExistingPanels true' , ( ) => {
684+ const parts : PanelContentPartTest [ ] = [ ] ;
685+
686+ dockview = new DockviewComponent ( container , {
687+ createComponent ( options ) {
688+ switch ( options . name ) {
689+ case 'default' :
690+ const part = new PanelContentPartTest (
691+ options . id ,
692+ options . name
693+ ) ;
694+ parts . push ( part ) ;
695+ return part ;
696+ default :
697+ throw new Error ( `unsupported` ) ;
698+ }
699+ } ,
700+ } ) ;
701+
702+ dockview . layout ( 1000 , 1000 ) ;
703+
704+ dockview . addPanel ( { id : 'panel1' , component : 'default' } ) ;
705+ dockview . addPanel ( { id : 'panel2' , component : 'default' } ) ;
706+ dockview . addPanel ( { id : 'panel7' , component : 'default' } ) ;
707+
708+ expect ( parts . length ) . toBe ( 3 ) ;
709+
710+ expect ( parts . map ( ( part ) => part . isDisposed ) ) . toEqual ( [
711+ false ,
712+ false ,
713+ false ,
714+ ] ) ;
715+
716+ dockview . fromJSON (
717+ {
718+ activeGroup : 'group-1' ,
719+ grid : {
720+ root : {
721+ type : 'branch' ,
722+ data : [
723+ {
724+ type : 'leaf' ,
725+ data : {
726+ views : [ 'panel1' ] ,
727+ id : 'group-1' ,
728+ activeView : 'panel1' ,
729+ } ,
730+ size : 500 ,
731+ } ,
732+ {
733+ type : 'branch' ,
734+ data : [
735+ {
736+ type : 'leaf' ,
737+ data : {
738+ views : [ 'panel2' , 'panel3' ] ,
739+ id : 'group-2' ,
740+ } ,
741+ size : 500 ,
742+ } ,
743+ {
744+ type : 'leaf' ,
745+ data : {
746+ views : [ 'panel4' ] ,
747+ id : 'group-3' ,
748+ } ,
749+ size : 500 ,
750+ } ,
751+ ] ,
752+ size : 500 ,
753+ } ,
754+ ] ,
755+ size : 1000 ,
756+ } ,
757+ height : 1000 ,
758+ width : 1000 ,
759+ orientation : Orientation . VERTICAL ,
760+ } ,
761+ panels : {
762+ panel1 : {
763+ id : 'panel1' ,
764+ contentComponent : 'default' ,
765+ tabComponent : 'tab-default' ,
766+ title : 'panel1' ,
767+ } ,
768+ panel2 : {
769+ id : 'panel2' ,
770+ contentComponent : 'default' ,
771+ title : 'panel2' ,
772+ } ,
773+ panel3 : {
774+ id : 'panel3' ,
775+ contentComponent : 'default' ,
776+ title : 'panel3' ,
777+ renderer : 'onlyWhenVisible' ,
778+ } ,
779+ panel4 : {
780+ id : 'panel4' ,
781+ contentComponent : 'default' ,
782+ title : 'panel4' ,
783+ renderer : 'always' ,
784+ } ,
785+ } ,
786+ } ,
787+ { reuseExistingPanels : true }
788+ ) ;
789+
790+ expect ( parts . map ( ( part ) => part . isDisposed ) ) . toEqual ( [
791+ false ,
792+ false ,
793+ true ,
794+ false ,
795+ false ,
796+ ] ) ;
797+ } ) ;
798+
799+ test ( 'reuseExistingPanels false' , ( ) => {
800+ const parts : PanelContentPartTest [ ] = [ ] ;
801+
802+ dockview = new DockviewComponent ( container , {
803+ createComponent ( options ) {
804+ switch ( options . name ) {
805+ case 'default' :
806+ const part = new PanelContentPartTest (
807+ options . id ,
808+ options . name
809+ ) ;
810+ parts . push ( part ) ;
811+ return part ;
812+ default :
813+ throw new Error ( `unsupported` ) ;
814+ }
815+ } ,
816+ } ) ;
817+
818+ dockview . layout ( 1000 , 1000 ) ;
819+
820+ dockview . addPanel ( { id : 'panel1' , component : 'default' } ) ;
821+ dockview . addPanel ( { id : 'panel2' , component : 'default' } ) ;
822+ dockview . addPanel ( { id : 'panel7' , component : 'default' } ) ;
823+
824+ expect ( parts . length ) . toBe ( 3 ) ;
825+
826+ expect ( parts . map ( ( part ) => part . isDisposed ) ) . toEqual ( [
827+ false ,
828+ false ,
829+ false ,
830+ ] ) ;
831+
832+ dockview . fromJSON ( {
833+ activeGroup : 'group-1' ,
834+ grid : {
835+ root : {
836+ type : 'branch' ,
837+ data : [
838+ {
839+ type : 'leaf' ,
840+ data : {
841+ views : [ 'panel1' ] ,
842+ id : 'group-1' ,
843+ activeView : 'panel1' ,
844+ } ,
845+ size : 500 ,
846+ } ,
847+ {
848+ type : 'branch' ,
849+ data : [
850+ {
851+ type : 'leaf' ,
852+ data : {
853+ views : [ 'panel2' , 'panel3' ] ,
854+ id : 'group-2' ,
855+ } ,
856+ size : 500 ,
857+ } ,
858+ {
859+ type : 'leaf' ,
860+ data : {
861+ views : [ 'panel4' ] ,
862+ id : 'group-3' ,
863+ } ,
864+ size : 500 ,
865+ } ,
866+ ] ,
867+ size : 500 ,
868+ } ,
869+ ] ,
870+ size : 1000 ,
871+ } ,
872+ height : 1000 ,
873+ width : 1000 ,
874+ orientation : Orientation . VERTICAL ,
875+ } ,
876+ panels : {
877+ panel1 : {
878+ id : 'panel1' ,
879+ contentComponent : 'default' ,
880+ tabComponent : 'tab-default' ,
881+ title : 'panel1' ,
882+ } ,
883+ panel2 : {
884+ id : 'panel2' ,
885+ contentComponent : 'default' ,
886+ title : 'panel2' ,
887+ } ,
888+ panel3 : {
889+ id : 'panel3' ,
890+ contentComponent : 'default' ,
891+ title : 'panel3' ,
892+ renderer : 'onlyWhenVisible' ,
893+ } ,
894+ panel4 : {
895+ id : 'panel4' ,
896+ contentComponent : 'default' ,
897+ title : 'panel4' ,
898+ renderer : 'always' ,
899+ } ,
900+ } ,
901+ } ) ;
902+
903+ expect ( parts . map ( ( part ) => part . isDisposed ) ) . toEqual ( [
904+ true ,
905+ true ,
906+ true ,
907+ false ,
908+ false ,
909+ false ,
910+ false ,
911+ ] ) ;
912+ } ) ;
913+ } ) ;
914+
682915 test ( 'serialization' , ( ) => {
683916 dockview . layout ( 1000 , 1000 ) ;
684917
0 commit comments