Ability to detach notes. Generic "window" component since I'm now at 3 windows and it is getting cumbersome duplicating all that code all over the place.
parent
7c3e739f8d
commit
5c2d03272f
@ -0,0 +1,15 @@
|
||||
<ng-container *ngIf="init">
|
||||
<ng-container *ngIf="rect">
|
||||
<div class="target" [style.transform]="transform()" [style.width]="rect.width + 'px'"
|
||||
[style.height]="rect.height + 'px'"
|
||||
[style.background-color]="backgroundColor ? backgroundColor : 'rgba(0, 0, 0, 0.1)'" #targetRef>
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
|
||||
<ngx-moveable #moveable [target]="targetRef" [draggable]="configurable" [resizable]="configurable"
|
||||
(drag)="onDrag($event)" (resize)="onResize($event)" (dragEnd)="onDragEnd($event)"
|
||||
(resizeEnd)="onResizeEnd($event)" [bounds]="bounds" [snappable]="true"
|
||||
[style.visibility]="configurable ? 'visible' : 'hidden'">
|
||||
</ngx-moveable>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
@ -0,0 +1,9 @@
|
||||
:host {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.target {
|
||||
position: absolute;
|
||||
min-width: 50px;
|
||||
min-height: 50px;
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DraggableWindowComponent } from './draggable-window.component';
|
||||
|
||||
describe('DraggableWindowComponent', () => {
|
||||
let component: DraggableWindowComponent;
|
||||
let fixture: ComponentFixture<DraggableWindowComponent>;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [DraggableWindowComponent]
|
||||
});
|
||||
fixture = TestBed.createComponent(DraggableWindowComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,88 @@
|
||||
import { AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Input, NgZone, OnInit, Output, ViewChild } from '@angular/core';
|
||||
import { Rect } from '../_models/generated/Rect';
|
||||
import { NgxMoveableComponent, NgxMoveableModule, OnDrag, OnDragEnd, OnResize, OnResizeEnd } from 'ngx-moveable';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-draggable-window',
|
||||
templateUrl: './draggable-window.component.html',
|
||||
styleUrls: ['./draggable-window.component.scss'],
|
||||
standalone: true,
|
||||
imports: [CommonModule, NgxMoveableModule]
|
||||
|
||||
})
|
||||
export class DraggableWindowComponent implements AfterViewInit {
|
||||
rect?: Rect;
|
||||
bounds: any = { "left": 0, "top": 0, "right": 0, "bottom": 0, "position": "css" };
|
||||
@Input() public backgroundColor: string = "rgba(0, 0, 0, 0.1)";
|
||||
@Input() public configurable: boolean = true;
|
||||
@Input() public initialRect?: Rect;
|
||||
@Output() savedRect: EventEmitter<Rect> = new EventEmitter();
|
||||
@ViewChild("moveable") moveable?: NgxMoveableComponent;
|
||||
init = false;
|
||||
|
||||
|
||||
constructor(private cdr: ChangeDetectorRef, private zone: NgZone) {
|
||||
window.addEventListener("resize", () => {
|
||||
this.zone.run(() => {
|
||||
this.windowInitHandler()
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
windowInitHandler() {
|
||||
if (window.innerWidth > 0) {
|
||||
const cfgRect = this.initialRect || { x: 0, y: 0, width: 0.1, height: 0.1 };
|
||||
|
||||
this.rect = {
|
||||
x: cfgRect.x * window.innerWidth,
|
||||
y: cfgRect.y * window.innerHeight,
|
||||
width: cfgRect.width * window.innerWidth,
|
||||
height: cfgRect.height * window.innerHeight,
|
||||
}
|
||||
|
||||
this.moveable?.updateRect();
|
||||
|
||||
setTimeout(() => this.cdr.detectChanges(), 0);
|
||||
this.init = true;
|
||||
}
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
this.windowInitHandler();
|
||||
}
|
||||
|
||||
transform() {
|
||||
return `translate(${this.rect!.x}px, ${this.rect!.y}px)`;
|
||||
}
|
||||
|
||||
onDrag(e: OnDrag) {
|
||||
this.rect!.x = e.translate[0];
|
||||
this.rect!.y = e.translate[1];
|
||||
}
|
||||
|
||||
onDragEnd(_e: OnDragEnd) {
|
||||
this.saveRect();
|
||||
}
|
||||
|
||||
onResize(e: OnResize) {
|
||||
this.rect!.width = e.width;
|
||||
this.rect!.height = e.height;
|
||||
this.onDrag(e.drag);
|
||||
}
|
||||
|
||||
onResizeEnd(_e: OnResizeEnd) {
|
||||
this.saveRect();
|
||||
}
|
||||
|
||||
saveRect() {
|
||||
if (this.rect) {
|
||||
this.savedRect.emit({
|
||||
x: this.rect.x / window.innerWidth,
|
||||
y: this.rect.y / window.innerHeight,
|
||||
width: this.rect.width / window.innerWidth,
|
||||
height: this.rect.height / window.innerHeight,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue