After posing my initial inquiry, I have devised a resizing function that allows for the expansion of a div's width. When pulling the right edge of the div to resize its width from left to right, is it possible to adjust the direction or how to resize it from right to left?
See an example of drag resizable image
drag-resizable-container.component.html
<div id="resizer-container">
<!-- [style.width.px]="width" [style.height.px]="height" [style.transform]="'translate3d(' + left + 'px,' + top + 'px,' + '0px)'" -->
<div id="content-container" [style.width.px]="width" [style.height.px]="height" [style.transform]="getTranslate3D()">
<ng-content></ng-content>
</div>
<div #graberWidth id="grabber-width" [ngStyle]="getGrabberDirection()" (pointerdown)="onMouseDown($event)" (pointerup)="onMouseUp($event)"></div>
</div>
drag-resizable-container.component.scss
div#resizer-container {
display: flex;
flex-flow: row nowrap;
div#grabber-width {
width: 8px;
height: 100%;
position: absolute;
cursor: col-resize;
}
}
drag-resizable-container.component.ts
import { AfterViewInit, Component, ElementRef, HostListener, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-drag-resizable-container',
templateUrl: './drag-resizable-container.component.html',
styleUrls: ['./drag-resizable-container.component.scss'],
})
export class DragResizableContainerComponent implements OnInit, AfterViewInit {
@Input() public width: number;
@Input() public height: number;
@Input() public resizeWidth = true;
@Input() public resizeHeight = false;
@Input() public left = 0;
@Input() public top = 0;
@Input() public expandDirection: 'LEFT' | 'RIGHT';
@Input() public boxSpec = { left: 0, top: 0 };
@Input() public willSetParent = false;
@Input() public willSetParentofParent = false;
public isResizing = false;
private mouse = { x: 0, y: 0 };
private reqireInitWidht = false;
private reqireInitHeight = false;
constructor(
private elementRef: ElementRef
) { }
ngOnInit() {
if (!this.width) {
this.width = 300;
this.reqireInitWidht = true;
}
if (!this.height) {
this.height = 300;
this.reqireInitHeight = true;
}
}
ngAfterViewInit() {
const elem = this.elementRef.nativeElement as HTMLDivElement;
setTimeout(() => {
if (this.reqireInitWidht) {
if (this.willSetParentofParent) {
this.width = elem.parentElement.parentElement.clientWidth;
}
else {
this.width = elem.parentElement.clientWidth;
}
}
if (this.reqireInitHeight) {
if (this.willSetParentofParent) {
this.height = elem.parentElement.parentElement.clientHeight;
}
else {
this.height = elem.parentElement.clientHeight;
}
}
}, 500);
}
private updateWidthHeight(element: HTMLDivElement, width: number, height: number) {
// Update width and height based on resizing options
}
@HostListener('window:mousemove', ['$event'])
onMouseMove(event: MouseEvent) {
// Perform resizing calculations during mouse movement
}
onMouseDown(event: MouseEvent | Event) {
this.isResizing = true;
}
onMouseUp(event: MouseEvent | Event) {
this.isResizing = false;
}
getTranslate3D() {
return 'translate3d(' + this.left + 'px,' + this.top + 'px,' + '0px)';
}
getGrabberDirection(){
return this.expandDirection === 'LEFT' ? { right: '0px' } : { left: '0px' };
}
}