Maximize and Minimize Options

src/window/index.vue

@@ -8,6 +8,15 @@
                     </template>
                     <template v-else>{{title}}</template>
                 </div>
+                <template v-if="maximizeButton">
+                    <my-button @click="minimizeWindow">&minus;</my-button>
+                </template>
+                <template v-if="maximizeButton && maximized">
+                    <my-button @click="maximizeWindow">&#128470;</my-button>
+                </template>
+                <template v-if="maximizeButton && !maximized">
+                    <my-button @click="maximizeWindow">&plus;</my-button>
+                </template>
                 <template v-if="closeButton">
                     <my-button @click="closeButtonClick">&times;</my-button>
                 </template>

src/window/script.ts

@@ -25,9 +25,18 @@ export class WindowType extends Vue {
     @Prop({ type: Boolean, default: true })
     isOpen!: boolean
 
+    @Prop({ type: Boolean, default: false })
+    maximized!: boolean
+
+    @Prop({ type: Boolean, default: false })
+    minimized!: boolean
+
     @Prop({ type: String, default: '' })
     title!: string
 
+    @Prop({ type: Boolean, default: true })
+    maximizeButton!: boolean
+
     @Prop({ type: Boolean, default: false })
     closeButton!: boolean
 
@@ -49,6 +58,12 @@ export class WindowType extends Vue {
     @Prop({ type: Number, default: 0 })
     zGroup!: number
 
+    @Prop({ type: Number, default: 0 })
+    maximizeTopOffset!: number
+
+    @Prop({ type: Number, default: 0 })
+    maximizeRightOffset!: number
+
     @Prop({ default: 'visible' })
     overflow!: string
 
@@ -57,16 +72,27 @@ export class WindowType extends Vue {
 
     private zIndex = 'auto'
 
-    draggableHelper?: DraggableHelper
-    resizableHelper?: ResizableHelper
+    private lastRect !:Rect
+
+    draggableHelper!: DraggableHelper
+    resizableHelper!: ResizableHelper
 
     zElement!: ZElement
 
+    resizeDispatch!: number
+
     mounted() {
         instances.push(this)
         this.zElement = new ZElement(this.zGroup, zIndex => this.zIndex = `${zIndex}`)
         this.isOpen && this.onIsOpenChange(true)
         windows.add(this)
+        if(this.maximized){
+            this.maximizeSize()
+        }else if(this.minimized){
+            this.minimizeWindow()
+        }else{
+            this.defaultSize()
+        }
     }
 
     beforeDestroy() {
@@ -94,6 +120,54 @@ export class WindowType extends Vue {
         this.$emit('activate')
     }
 
+    maximizeWindow() {
+        if(this.maximized || this.minimized){
+            this.defaultSize();
+        }else{
+            this.loadLastRect()
+            this.maximizeSize();
+        }
+    }
+
+    minimizeWindow() {
+        if(this.minimized){
+            this.defaultSize();
+        }else{
+            if(!this.maximized){
+                this.loadLastRect()
+            }
+            this.minimizeSize();
+        }
+    }
+
+    maximizeSize(){
+        this.maximized = true;
+        this.minimized = false;
+        let rec = naturalSize(this.titlebarElement())
+        this.setWindowRect({width:window.innerWidth - this.maximizeRightOffset,height:window.innerHeight - rec.height - this.maximizeTopOffset,left:0,top:this.maximizeTopOffset})
+        this.onWindowResize(true)
+        this.onWindowMove(false)
+    }
+
+    defaultSize() {
+        this.maximized = false;
+        this.minimized = false
+        if(this.lastRect){
+            this.setWindowRect(this.lastRect)
+        }else{
+            this.setWindowRect({width:this.width,height:this.height})
+        }
+
+        this.onWindowResize(false)
+        this.onWindowMove(false)
+    }
+
+    minimizeSize() {
+        this.maximized = false;
+        this.minimized = true;
+        this.setWindowRect({width:100,height:0,left:0,top:window.innerHeight - 100})
+    }
+
     get styleWindow() {
         return { ...this.windowStyle.window, zIndex: this.zIndex, overflow: this.overflow }
     }
@@ -245,6 +319,17 @@ export class WindowType extends Vue {
             this.$emit('update:width', cW1)
             this.$emit('update:height', cH1)
         }
+
+        if(this.resizeDispatch != 0){
+            clearTimeout(this.resizeDispatch)
+            this.resizeDispatch = 0
+        }
+
+        this.resizeDispatch = setTimeout(()=>{
+                                window.dispatchEvent(new Event('resize'))
+                                }, 1000);
+
+
     }
 
     private onWindowMove(emitUpdateEvent = true) {
@@ -260,6 +345,18 @@ export class WindowType extends Vue {
         this.$emit('closebuttonclick')
         this.$emit('update:isOpen', false)
     }
+
+    private loadLastRect() {
+        const w = this.windowElement()
+        if(w.style.width != undefined && w.style.height != undefined && w.style.left != undefined && w.style.top != undefined){
+            this.lastRect = {width: parseFloat(w.style.width.substring(0,w.style.width.length - 2)),
+                height: parseFloat(w.style.height.substring(0,w.style.height.length - 2)) - this.titlebarElement().getBoundingClientRect().height,
+                left: parseFloat(w.style.left.substring(0,w.style.left.length - 2)),
+                top: parseFloat(w.style.top.substring(0,w.style.top.length - 2))
+            }
+        }
+
+    }
 }