fix: 修改 movable 接口和逻辑

feat: 让 movable 支持 svg

Author: Zhicheng WANG

src/lib/directives/movable-transform.directive.spec.ts

@@ -0,0 +1,8 @@
+import { MovableTransformDirective } from './movable-transform.directive';
+
+describe('MovableTransformDirective', () => {
+  it('should create an instance', () => {
+    const directive = new MovableTransformDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/lib/directives/movable-transform.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, HostBinding } from '@angular/core';
+import { MovableDirective } from '@ui-model/angular/src/lib/directives/movable.directive';
+
+@Directive({
+  selector: '[uiMovableTransform]',
+})
+export class MovableTransformDirective {
+
+  constructor(private movable: MovableDirective) {
+  }
+
+  @HostBinding('style.transform')
+  get transform(): string {
+    return `translate(${this.movable.offset.x}px,${this.movable.offset.y}px)`;
+  }
+}

src/lib/directives/movable.directive.ts

@@ -1,29 +1,29 @@
-import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
+import { Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core';
+import { PositionMapper } from '@ui-model/angular/src/lib/services/position-mapper.service';
 import { Distance, Point } from '@ui-model/core';
 
-// TODO: 处理 svg 坐标系映射
-
 @Directive({
   selector: '[uiMovable]',
   exportAs: 'uiMovable',
 })
 export class MovableDirective {
-  @Output('uiMoveStart') start = new EventEmitter<MouseEvent>();
-  @Output('uiMoving') move = new EventEmitter<MouseEvent>();
-  @Output('uiMoveStop') stop = new EventEmitter<MouseEvent>();
+  constructor(private elementRef: ElementRef<Element>, private mapper: PositionMapper) {
+  }
 
-  moving = false;
+  @Output('uiMoveStart') start = new EventEmitter<Distance>();
+  @Output('uiMoving') move = new EventEmitter<Distance>();
+  @Output('uiMoveStop') stop = new EventEmitter<Distance>();
+  offset = new Distance();
+  private previousPoint = new Point();
 
-  startPos = new Point();
-  latestPos = new Point();
-  pos = new Point();
+  private _moving = false;
 
-  get offset(): Distance {
-    return this.pos.getDistanceTo(this.startPos);
+  get moving(): boolean {
+    return this._moving;
   }
 
-  get delta(): Distance {
-    return this.pos.getDistanceTo(this.latestPos);
+  get element(): Element {
+    return this.elementRef.nativeElement;
   }
 
   @HostListener('click', ['$event'])
@@ -38,25 +38,23 @@ export class MovableDirective {
     }
 
     const target = event.target as Element;
-    target.setPointerCapture(1);
+    target.setPointerCapture(event.which);
     event.stopPropagation();
-    this.moving = true;
-    this.startPos = new Point(event.screenX, event.screenY);
-    this.pos = new Point(event.screenX, event.screenY);
-    this.start.emit(event);
+    this._moving = true;
+    this.previousPoint = this.svgPos(event.clientX, event.clientY);
+    this.start.emit(this.offset);
   }
 
   @HostListener('mouseup', ['$event'])
   mouseUp(event: MouseEvent): void {
     if (!isMajorButton(event)) {
       return;
     }
-    (event.target as Element).releasePointerCapture(1);
+    const target = event.target as Element;
+    target.releasePointerCapture(event.which);
     event.stopPropagation();
-    this.moving = false;
-    this.stop.emit(event);
-    this.startPos = new Point(event.screenX, event.screenY);
-    this.pos = new Point(event.screenX, event.screenY);
+    this._moving = false;
+    this.stop.emit(this.offset);
   }
 
   @HostListener('mousemove', ['$event'])
@@ -65,12 +63,18 @@ export class MovableDirective {
       return;
     }
     event.stopPropagation();
-    if (this.moving) {
-      this.latestPos = this.pos;
-      this.pos = new Point(event.screenX, event.screenY);
-      this.move.emit(event);
+    if (this._moving) {
+      const currentPoint = this.svgPos(event.clientX, event.clientY);
+      this.offset.x += currentPoint.x - this.previousPoint.x;
+      this.offset.y += currentPoint.y - this.previousPoint.y;
+      this.previousPoint = currentPoint;
+      this.move.emit(this.offset);
     }
   }
+
+  svgPos(x: number, y: number): Point {
+    return this.mapper.mapToLocal(this.element, new Point(x, y));
+  }
 }
 
 function isMajorButton(event: MouseEvent): boolean {

src/lib/services/position-mapper.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PositionMapper } from './position-mapper.service';
+
+describe('PositionMapper', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: PositionMapper = TestBed.get(PositionMapper);
+    expect(service).toBeTruthy();
+  });
+});

src/lib/services/position-mapper.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { findParent } from '@ui-model/angular/src/lib/utils/find-parent';
+import { screenToSvg } from '@ui-model/angular/src/lib/utils/screen-to-svg';
+import { svgToScreen } from '@ui-model/angular/src/lib/utils/svg-to-screen';
+import { Point } from '@ui-model/core/src/lib/utils/point';
+
+// SVG 内部的坐标系和外部的坐标系不同，这个映射器用来在两者之间映射，必要时可以覆盖它，以实现自己的映射逻辑
+@Injectable({
+  providedIn: 'root',
+})
+export class PositionMapper {
+  mapToLocal(element: Element, pos: Point): Point {
+    if (element instanceof SVGSVGElement) {
+      return screenToSvg(element, pos);
+    } else if (element instanceof SVGGraphicsElement) {
+      return this.mapToLocal(findParent(element, SVGSVGElement), pos);
+    }
+    return pos;
+  }
+
+  mapToScreen(element: Element, pos: Point): Point {
+    if (element instanceof SVGSVGElement) {
+      return svgToScreen(element, pos);
+    } else if (element instanceof SVGGraphicsElement) {
+      return this.mapToScreen(findParent(element, SVGSVGElement), pos);
+    }
+    return pos;
+  }
+}
+

src/lib/ui-model.module.ts

@@ -14,6 +14,7 @@ import { FormFieldDirective } from './directives/form-field.directive';
 import { FormGroupExporterDirective } from './directives/form-group-exporter.directive';
 import { ImgSrcFileDirective } from './directives/img-src-file.directive';
 import { MeasureDirective } from './directives/measure.directive';
+import { MovableTransformDirective } from './directives/movable-transform.directive';
 import { MovableDirective } from './directives/movable.directive';
 import { MultiBindingDirective } from './directives/multi-binding.directive';
 import { MultiSelectDirective } from './directives/multi-select.directive';
@@ -98,6 +99,7 @@ import { TypeNamePipe } from './pipes/type-name.pipe';
     DynamicComponentInputsDirective,
     WindowMeasureDirective,
     FormFieldDirective,
+    MovableTransformDirective,
   ],
   exports: [
     SelectDirective,
@@ -145,6 +147,7 @@ import { TypeNamePipe } from './pipes/type-name.pipe';
     IsInvalidDatePipe,
     WindowMeasureDirective,
     FormFieldDirective,
+    MovableTransformDirective,
   ],
 })
 export class UiModelModule {

src/lib/utils/find-parent.ts

@@ -0,0 +1,11 @@
+import { Type } from '@angular/core';
+
+export function findParent<T extends Element>(element: Element, type: Type<T>): T {
+  if (!element) {
+    return undefined;
+  } else if (element instanceof SVGSVGElement) {
+    return element as any;
+  } else {
+    return findParent(element.parentElement, type);
+  }
+}

src/lib/utils/screen-to-svg.ts

@@ -0,0 +1,9 @@
+import { Point } from '@ui-model/core';
+
+export function screenToSvg(svg: SVGSVGElement, point: Point): Point {
+  const p = svg.createSVGPoint();
+  p.x = point.x;
+  p.y = point.y;
+  const innerPoint = p.matrixTransform(svg.getScreenCTM().inverse());
+  return new Point(innerPoint.x, innerPoint.y);
+}

src/lib/utils/svg-to-screen.ts

@@ -0,0 +1,9 @@
+import { Point } from '@ui-model/core';
+
+export function svgToScreen(svg: SVGSVGElement, point: Point): Point {
+  const p = svg.createSVGPoint();
+  p.x = point.x;
+  p.y = point.y;
+  const innerPoint = p.matrixTransform(svg.getScreenCTM());
+  return new Point(innerPoint.x, innerPoint.y);
+}