提问人:John Lester 提问时间:11/16/2023 更新时间:11/16/2023 访问量:25
SVG 拖放 - 声明式函数式编程 [已关闭]
SVG drag and drop - declarative, functional programming [closed]
问:
有人可以查看此代码并提供建议吗?我不喜欢命令式代码块,并希望建议如何采用更具声明性的风格。SVG 元素包含在另一个组件中创建的可拖动图像。
export class TestComponent implements AfterViewInit {
@ViewChild("svg") svg: ElementRef<SVGSVGElement>;
selectedElement: HTMLElement;
offsetX: number;
offsetY: number;
constructor() { }
ngAfterViewInit(): void {
const moveMode$ = merge(
fromEvent(this.svg.nativeElement, "pointerdown").pipe(
map((event: Event) => {
if ((event.target as HTMLElement).classList.contains("draggable")) {
this.selectedElement = event.target as HTMLElement;
let targetPositionX = (this.selectedElement.getAttributeNS(null, 'x') as number | null)!;
let targetPositionY = (this.selectedElement.getAttributeNS(null, 'y') as number | null)!;
let mousePositionX = (event as MouseEvent).clientX;
let mousePositionY = (event as MouseEvent).clientY;
let ctm = this.svg.nativeElement.getScreenCTM()!;
mousePositionX -= ctm.e;
mousePositionY -= ctm.f;
this.offsetX = mousePositionX - targetPositionX;
this.offsetY = mousePositionY - targetPositionY;
}
})
),
fromEvent(this.svg.nativeElement, "pointermove").pipe(
map((event: Event) => {
if (this.selectedElement) {
let mousePositionX = event.clientX;
let mousePositionY = event.clientY;
let ctm = this.svg.getScreenCTM();
mousePositionX -= ctm!.e;
mousePositionY -= ctm!.f;
mousePositionX -= this.offsetX;
mousePositionY -= this.offsetY;
this.selectedElement.setAttributeNS(null, 'x', mousePositionX);
this.selectedElement.setAttributeNS(null, 'y', mousePositionY);
}
event.preventDefault();
}
),
fromEvent(this.svg.nativeElement, "pointerup").pipe()
);
const linkMode$ = merge(
fromEvent(this.svg.nativeElement, "pointerdown").pipe(),
fromEvent(this.svg.nativeElement, "pointermove").pipe(),
fromEvent(this.svg.nativeElement, "pointerup").pipe()
);
moveMode$.subscribe();
}
}
答: 暂无答案
评论