SVG 拖放 - 声明式函数式编程 [已关闭]

SVG drag and drop - declarative, functional programming [closed]

提问人:John Lester 提问时间:11/16/2023 更新时间:11/16/2023 访问量:25

问:


想改进这个问题吗?通过编辑这篇文章添加详细信息并澄清问题。

4天前关闭。

有人可以查看此代码并提供建议吗?我不喜欢命令式代码块,并希望建议如何采用更具声明性的风格。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();
  }
}
JavaScript Angular Typescript SVG RXJS

评论


答: 暂无答案