diff --git a/examples/x6-example-features/src/pages/edge/custom-marker.tsx b/examples/x6-example-features/src/pages/edge/custom-marker.tsx index 6a5df6edeeb..7c8390c0a83 100644 --- a/examples/x6-example-features/src/pages/edge/custom-marker.tsx +++ b/examples/x6-example-features/src/pages/edge/custom-marker.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Graph, Dom, Path } from '@antv/x6' +import { Graph, Path } from '@antv/x6' import '../index.less' export default class Example extends React.Component { diff --git a/packages/x6/src/addon/common/handle.less b/packages/x6/src/addon/common/handle.less index 117ce105080..53c70a61d9d 100644 --- a/packages/x6/src/addon/common/handle.less +++ b/packages/x6/src/addon/common/handle.less @@ -1,4 +1,4 @@ -@import '../../less/index'; +@import '../../style/index'; @handle-prefix-cls: ~'@{x6-prefix}-widget-handle'; diff --git a/packages/x6/src/addon/selection/index.less b/packages/x6/src/addon/selection/index.less index d8b57eefbe2..86373373eae 100644 --- a/packages/x6/src/addon/selection/index.less +++ b/packages/x6/src/addon/selection/index.less @@ -1,4 +1,4 @@ -@import '../../less/index'; +@import '../../style/index'; @import '../common/handle.less'; @selection-prefix-cls: ~'@{x6-prefix}-widget-selection'; diff --git a/packages/x6/src/addon/snapline/index.less b/packages/x6/src/addon/snapline/index.less index 29814e99021..a77d5ebcdee 100644 --- a/packages/x6/src/addon/snapline/index.less +++ b/packages/x6/src/addon/snapline/index.less @@ -1,4 +1,4 @@ -@import '../../less/index'; +@import '../../style/index'; @snapline-prefix-cls: ~'@{x6-prefix}-widget-snapline'; diff --git a/packages/x6/src/addon/transform/index.less b/packages/x6/src/addon/transform/index.less index c108ebb3cc4..5b7d9a5d275 100644 --- a/packages/x6/src/addon/transform/index.less +++ b/packages/x6/src/addon/transform/index.less @@ -1,4 +1,4 @@ -@import '../../less/index'; +@import '../../style/index'; @transform-prefix-cls: ~'@{x6-prefix}-widget-transform'; @transform-box-padding: 4px; diff --git a/packages/x6/src/common/dictionary.ts b/packages/x6/src/common/dictionary.ts index 7ba1190b007..33f20d3cbd6 100644 --- a/packages/x6/src/common/dictionary.ts +++ b/packages/x6/src/common/dictionary.ts @@ -1,4 +1,4 @@ -import { Disposable } from '.' +import { Disposable } from './disposable' export class Dictionary extends Disposable { private map: WeakMap diff --git a/packages/x6/src/common/disablable.ts b/packages/x6/src/common/disablable.ts index c056e207efd..0c722c4b97d 100644 --- a/packages/x6/src/common/disablable.ts +++ b/packages/x6/src/common/disablable.ts @@ -1,4 +1,4 @@ -import { Basecoat } from '../common' +import { Basecoat } from './basecoat' export interface IDisablable { readonly disabled: boolean diff --git a/packages/x6/src/geometry/line.ts b/packages/x6/src/geometry/line.ts index 0ee63bdca61..aab21dbf1df 100644 --- a/packages/x6/src/geometry/line.ts +++ b/packages/x6/src/geometry/line.ts @@ -1,5 +1,4 @@ import { Path } from './path' -import { Angle } from './angle' import { Point } from './point' import { Ellipse } from './ellipse' import { Polyline } from './polyline' @@ -140,25 +139,8 @@ export class Line extends Geometry { * * The function returns 'N' if the two endpoints of the line are coincident. */ - bearing(): Line.Bearing { - const lat1 = Angle.toRad(this.start.y) - const lat2 = Angle.toRad(this.end.y) - const lon1 = this.start.x - const lon2 = this.end.x - const dLon = Angle.toRad(lon2 - lon1) - const y = Math.sin(dLon) * Math.cos(lat2) - const x = - Math.cos(lat1) * Math.sin(lat2) - - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon) - - const brng = Angle.toDeg(Math.atan2(y, x)) - const bearings = ['NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', 'N'] - - let index = brng - 22.5 - if (index < 0) index += 360 - index = index / 45 - - return bearings[index] as Line.Bearing + bearing() { + return this.start.bearing(this.end) } /** @@ -500,7 +482,3 @@ export class Line extends Geometry { return [this.start.serialize(), this.end.serialize()].join(' ') } } - -export namespace Line { - export type Bearing = 'NE' | 'E' | 'SE' | 'S' | 'SW' | 'W' | 'NW' | 'N' -} diff --git a/packages/x6/src/geometry/point.ts b/packages/x6/src/geometry/point.ts index 771cafc8913..6eafc02959e 100644 --- a/packages/x6/src/geometry/point.ts +++ b/packages/x6/src/geometry/point.ts @@ -1,6 +1,5 @@ import * as util from './util' import { Angle } from './angle' -import { Line } from './line' import { Geometry } from './geometry' import { Rectangle } from './rectangle' @@ -81,7 +80,7 @@ export class Point extends Geometry implements Point.PointLike { * If `points` is an empty array, `null` is returned. */ closest(points: (Point | Point.PointLike | Point.PointData)[]) { - const pts = points.map(p => Point.clone(p)) + const pts = points.map((p) => Point.create(p)) if (pts.length === 1) { return pts[0] } @@ -101,17 +100,18 @@ export class Point extends Geometry implements Point.PointLike { } distance(p: Point | Point.PointLike | Point.PointData) { - const ref = Point.clone(p) - return new Line(this, ref).length() + return Math.sqrt(this.squaredDistance(p)) } squaredDistance(p: Point | Point.PointLike | Point.PointData) { - const ref = Point.clone(p) - return new Line(this, ref).squaredLength() + const ref = Point.create(p) + const dx = this.x - ref.x + const dy = this.y - ref.y + return dx * dx + dy * dy } manhattanDistance(p: Point | Point.PointLike | Point.PointData) { - const ref = Point.clone(p) + const ref = Point.create(p) return Math.abs(ref.x - this.x) + Math.abs(ref.y - this.y) } @@ -128,7 +128,7 @@ export class Point extends Geometry implements Point.PointLike { * Returns the angle between vector from me to `p` and the x axis. */ theta(p: Point | Point.PointLike | Point.PointData = new Point()): number { - const ref = Point.clone(p) + const ref = Point.create(p) const y = -(ref.y - this.y) // invert the y-axis. const x = ref.x - this.x let rad = Math.atan2(y, x) @@ -194,11 +194,7 @@ export class Point extends Geometry implements Point.PointLike { ref: Point | Point.PointLike | Point.PointData, ) { // Revert the translation and measure the change in angle around x-axis. - return ( - this.clone() - .translate(-dx, -dy) - .theta(ref) - this.theta(ref) - ) + return this.clone().translate(-dx, -dy).theta(ref) - this.theta(ref) } adhereToRect(rect: Rectangle) { @@ -216,8 +212,25 @@ export class Point extends Geometry implements Point.PointLike { * Returns the bearing between me and the given point. */ bearing(p: Point | Point.PointLike | Point.PointData) { - const ref = Point.clone(p) - return new Line(this, ref).bearing() + const ref = Point.create(p) + const lat1 = Angle.toRad(this.y) + const lat2 = Angle.toRad(ref.y) + const lon1 = this.x + const lon2 = ref.x + const dLon = Angle.toRad(lon2 - lon1) + const y = Math.sin(dLon) * Math.cos(lat2) + const x = + Math.cos(lat1) * Math.sin(lat2) - + Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon) + + const brng = Angle.toDeg(Math.atan2(y, x)) + const bearings = ['NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', 'N'] + + let index = brng - 22.5 + if (index < 0) index += 360 + index = index / 45 + + return bearings[index] as Point.Bearing } /** @@ -231,8 +244,8 @@ export class Point extends Geometry implements Point.PointLike { p2: Point | Point.PointLike | Point.PointData, ) { if (p1 != null && p2 != null) { - const a = Point.clone(p1) - const b = Point.clone(p2) + const a = Point.create(p1) + const b = Point.create(p2) return (b.x - this.x) * (a.y - this.y) - (b.y - this.y) * (a.x - this.x) } @@ -243,7 +256,7 @@ export class Point extends Geometry implements Point.PointLike { * Returns the dot product of this point with given other point. */ dot(p: Point | Point.PointLike | Point.PointData) { - const ref = Point.clone(p) + const ref = Point.create(p) return this.x * ref.x + this.y * ref.y } @@ -257,7 +270,7 @@ export class Point extends Geometry implements Point.PointLike { return new Point(this.x - dx, this.y - dy!) } - const p = Point.clone(dx) + const p = Point.create(dx) return new Point(this.x - p.x, this.y - p.y) } @@ -268,7 +281,7 @@ export class Point extends Geometry implements Point.PointLike { lerp(p: Point | Point.PointLike | Point.PointData, t: number) { const x = this.x const y = this.y - const ref = Point.clone(p) + const ref = Point.create(p) return new Point((1 - t) * x + t * ref.x, (1 - t) * y + t * ref.y) } @@ -278,13 +291,13 @@ export class Point extends Geometry implements Point.PointLike { } move(ref: Point | Point.PointLike | Point.PointData, distance: number) { - const p = Point.clone(ref) + const p = Point.create(ref) const rad = Angle.toRad(p.theta(this)) return this.translate(Math.cos(rad) * distance, -Math.sin(rad) * distance) } reflection(ref: Point | Point.PointLike | Point.PointData) { - const p = Point.clone(ref) + const p = Point.create(ref) return p.move(this, this.distance(p)) } @@ -298,7 +311,7 @@ export class Point extends Geometry implements Point.PointLike { } equals(p: Point | Point.PointLike | Point.PointData) { - const ref = Point.clone(p) + const ref = Point.create(p) return ref != null && ref.x === this.x && ref.y === this.y } @@ -323,6 +336,8 @@ export namespace Point { export type PointData = [number, number] + export type Bearing = 'NE' | 'E' | 'SE' | 'S' | 'SW' | 'W' | 'NW' | 'N' + export function isPointLike(o: any): o is PointLike { return ( o != null && diff --git a/packages/x6/src/index.ts b/packages/x6/src/index.ts index 94979e6091c..3e97b1284fe 100644 --- a/packages/x6/src/index.ts +++ b/packages/x6/src/index.ts @@ -5,6 +5,7 @@ export * from './geometry' export * from './core' export * from './shape' export * from './registry' +export * from './animation' export * from './addon' export * from './version' diff --git a/packages/x6/src/umd.ts b/packages/x6/src/umd.ts index b715a88c1b0..b116953abb2 100644 --- a/packages/x6/src/umd.ts +++ b/packages/x6/src/umd.ts @@ -1,2 +1,2 @@ -import * as mod from './index' -export default mod +import * as X6 from './index' +export default X6 diff --git a/packages/x6/src/util/dom/geom.ts b/packages/x6/src/util/dom/geom.ts index 8396c5e7792..7fffc5b9501 100644 --- a/packages/x6/src/util/dom/geom.ts +++ b/packages/x6/src/util/dom/geom.ts @@ -1,9 +1,13 @@ import { Point, Line, Rectangle, Polyline, Ellipse, Path } from '../../geometry' import { attr } from './attr' -import { getTransformToElement } from './transform' import { sample, toPath, getPointsFromSvgElement } from './path' import { ensureId, isSVGGraphicsElement, createSvgElement } from './elem' -import { createSVGPoint, decomposeMatrix, transformRectangle } from './matrix' +import { + createSVGPoint, + createSVGMatrix, + decomposeMatrix, + transformRectangle, +} from './matrix' /** * Returns the bounding box of the element after transformations are @@ -129,6 +133,23 @@ export function getBBox( } } +/** + * Returns an DOMMatrix that specifies the transformation necessary + * to convert `elem` coordinate system into `target` coordinate system. + */ +export function getTransformToElement(elem: SVGElement, target: SVGElement) { + if (isSVGGraphicsElement(target) && isSVGGraphicsElement(elem)) { + const targetCTM = target.getScreenCTM() + const nodeCTM = elem.getScreenCTM() + if (targetCTM && nodeCTM) { + return targetCTM.inverse().multiply(nodeCTM) + } + } + + // Could not get actual transformation matrix + return createSVGMatrix() +} + /** * Converts a global point with coordinates `x` and `y` into the * coordinate space of the element. diff --git a/packages/x6/src/util/dom/transform.ts b/packages/x6/src/util/dom/transform.ts index 35236eb9df8..998beb3539b 100644 --- a/packages/x6/src/util/dom/transform.ts +++ b/packages/x6/src/util/dom/transform.ts @@ -1,12 +1,10 @@ import { Point } from '../../geometry' import { attr } from './attr' -import { getBBox } from './geom' -import { isSVGGraphicsElement } from './elem' +import { getBBox, getTransformToElement } from './geom' import { Scale, Rotation, Translation, - createSVGMatrix, createSVGTransform, parseTransformString, transformStringToMatrix, @@ -123,23 +121,6 @@ export function scale(elem: Element, sx?: number, sy?: number) { elem.setAttribute('transform', `${transformAttr} ${newScale}`.trim()) } -/** - * Returns an DOMMatrix that specifies the transformation necessary - * to convert `elem` coordinate system into `target` coordinate system. - */ -export function getTransformToElement(elem: SVGElement, target: SVGElement) { - if (isSVGGraphicsElement(target) && isSVGGraphicsElement(elem)) { - const targetCTM = target.getScreenCTM() - const nodeCTM = elem.getScreenCTM() - if (targetCTM && nodeCTM) { - return targetCTM.inverse().multiply(nodeCTM) - } - } - - // Could not get actual transformation matrix - return createSVGMatrix() -} - export function translateAndAutoOrient( elem: SVGElement, position: Point | Point.PointLike | Point.PointData,