diff --git a/src/window/index.vue b/src/window/index.vue index f195cda..a79f0a6 100644 --- a/src/window/index.vue +++ b/src/window/index.vue @@ -8,6 +8,15 @@ + + + diff --git a/src/window/script.ts b/src/window/script.ts index 9a9b2c0..6e6e699 100644 --- a/src/window/script.ts +++ b/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)) + } + } + + } }