260719_9
This commit is contained in:
@@ -1,15 +1,20 @@
|
||||
import {Arc, type Box, Line, Point, type Segment} from '@flatten-js/core';
|
||||
import {uniqWith} from 'es-toolkit';
|
||||
import {type Shape, type SnapPoint, SnapPointType, type StartAndEndpointEntity} from '../App.types';
|
||||
import type {DrawController} from '../drawControllers/DrawController.ts';
|
||||
import {getExportColor} from '../helpers/get-export-color';
|
||||
import {isPointEqual} from '../helpers/is-point-equal';
|
||||
import {mirrorPointOverAxis} from '../helpers/mirror-point-over-axis.ts';
|
||||
import {scalePoint} from '../helpers/scale-point';
|
||||
import {sortPointsOnArc} from '../helpers/sort-points-on-arc';
|
||||
import {getActiveLayerId, isEntityHighlighted, isEntitySelected} from '../state.ts';
|
||||
import {type Entity, EntityName, type JsonEntity} from './Entity';
|
||||
import type {LineEntity} from './LineEntity.ts';
|
||||
import { Arc, type Box, Line, Point, type Segment } from '@flatten-js/core';
|
||||
import { uniqWith } from 'es-toolkit';
|
||||
import {
|
||||
type Shape,
|
||||
type SnapPoint,
|
||||
SnapPointType,
|
||||
type StartAndEndpointEntity,
|
||||
} from '../App.types';
|
||||
import type { DrawController } from '../drawControllers/DrawController.ts';
|
||||
import { getExportColor } from '../helpers/get-export-color';
|
||||
import { isPointEqual } from '../helpers/is-point-equal';
|
||||
import { mirrorPointOverAxis } from '../helpers/mirror-point-over-axis.ts';
|
||||
import { scalePoint } from '../helpers/scale-point';
|
||||
import { sortPointsOnArc } from '../helpers/sort-points-on-arc';
|
||||
import { getActiveLayerId, isEntityHighlighted, isEntitySelected } from '../state.ts';
|
||||
import { type Entity, EntityName, type JsonEntity } from './Entity';
|
||||
import type { LineEntity } from './LineEntity.ts';
|
||||
|
||||
export class ArcEntity implements Entity, StartAndEndpointEntity {
|
||||
public id: string = crypto.randomUUID();
|
||||
@@ -211,6 +216,7 @@ export class ArcEntity implements Entity, StartAndEndpointEntity {
|
||||
type: EntityName.Arc,
|
||||
lineColor: this.lineColor,
|
||||
lineWidth: this.lineWidth,
|
||||
lineDash: this.lineDash,
|
||||
layerId: this.layerId,
|
||||
shapeData: {
|
||||
center: { x: this.arc.center.x, y: this.arc.center.y },
|
||||
@@ -248,6 +254,7 @@ export class ArcEntity implements Entity, StartAndEndpointEntity {
|
||||
arcEntity.id = jsonEntity.id;
|
||||
arcEntity.lineColor = jsonEntity.lineColor;
|
||||
arcEntity.lineWidth = jsonEntity.lineWidth;
|
||||
arcEntity.lineDash = jsonEntity.lineDash;
|
||||
return arcEntity;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import {Box, Point, Segment} from '@flatten-js/core';
|
||||
import {max, min} from 'es-toolkit/compat';
|
||||
import type {Shape, SnapPoint} from '../App.types';
|
||||
import type {DrawController} from '../drawControllers/DrawController';
|
||||
import {mirrorPointOverAxis} from '../helpers/mirror-point-over-axis.ts';
|
||||
import {scalePoint} from '../helpers/scale-point';
|
||||
import {getActiveLayerId} from '../state.ts';
|
||||
import {type Entity, EntityName, type JsonEntity} from './Entity';
|
||||
import type {LineEntity} from './LineEntity.ts';
|
||||
import { Box, Point, Segment } from '@flatten-js/core';
|
||||
import { max, min } from 'es-toolkit/compat';
|
||||
import type { Shape, SnapPoint } from '../App.types';
|
||||
import type { DrawController } from '../drawControllers/DrawController';
|
||||
import { mirrorPointOverAxis } from '../helpers/mirror-point-over-axis.ts';
|
||||
import { scalePoint } from '../helpers/scale-point';
|
||||
import { getActiveLayerId } from '../state.ts';
|
||||
import { type Entity, EntityName, type JsonEntity } from './Entity';
|
||||
import type { LineEntity } from './LineEntity.ts';
|
||||
|
||||
export class ArrowHeadEntity implements Entity {
|
||||
public id: string = crypto.randomUUID();
|
||||
@@ -138,6 +138,7 @@ export class ArrowHeadEntity implements Entity {
|
||||
type: EntityName.ArrowHead,
|
||||
lineColor: this.lineColor,
|
||||
lineWidth: this.lineWidth,
|
||||
lineDash: this.lineDash,
|
||||
layerId: this.layerId,
|
||||
shapeData: {
|
||||
p1: { x: this.p1.x, y: this.p1.y },
|
||||
@@ -160,6 +161,7 @@ export class ArrowHeadEntity implements Entity {
|
||||
lineEntity.id = jsonEntity.id;
|
||||
lineEntity.lineColor = jsonEntity.lineColor;
|
||||
lineEntity.lineWidth = jsonEntity.lineWidth;
|
||||
lineEntity.lineDash = jsonEntity.lineDash ?? [];
|
||||
return lineEntity;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import {type Box, Circle, Point, type Segment} from '@flatten-js/core';
|
||||
import {type Shape, type SnapPoint, SnapPointType} from '../App.types';
|
||||
import type {DrawController} from '../drawControllers/DrawController';
|
||||
import {getExportColor} from '../helpers/get-export-color';
|
||||
import {mirrorPointOverAxis} from '../helpers/mirror-point-over-axis.ts';
|
||||
import {scalePoint} from '../helpers/scale-point';
|
||||
import {getActiveLayerId, isEntityHighlighted, isEntitySelected} from '../state.ts';
|
||||
import {type Entity, EntityName, type JsonEntity} from './Entity';
|
||||
import type {LineEntity} from './LineEntity.ts';
|
||||
import { type Box, Circle, Point, type Segment } from '@flatten-js/core';
|
||||
import { type Shape, type SnapPoint, SnapPointType } from '../App.types';
|
||||
import type { DrawController } from '../drawControllers/DrawController';
|
||||
import { getExportColor } from '../helpers/get-export-color';
|
||||
import { mirrorPointOverAxis } from '../helpers/mirror-point-over-axis.ts';
|
||||
import { scalePoint } from '../helpers/scale-point';
|
||||
import { getActiveLayerId, isEntityHighlighted, isEntitySelected } from '../state.ts';
|
||||
import { type Entity, EntityName, type JsonEntity } from './Entity';
|
||||
import type { LineEntity } from './LineEntity.ts';
|
||||
|
||||
export class CircleEntity implements Entity {
|
||||
public id: string = crypto.randomUUID();
|
||||
@@ -168,6 +168,7 @@ export class CircleEntity implements Entity {
|
||||
type: EntityName.Circle,
|
||||
lineColor: this.lineColor,
|
||||
lineWidth: this.lineWidth,
|
||||
lineDash: this.lineDash,
|
||||
layerId: this.layerId,
|
||||
shapeData: {
|
||||
center: { x: this.circle.center.x, y: this.circle.center.y },
|
||||
@@ -186,6 +187,7 @@ export class CircleEntity implements Entity {
|
||||
circleEntity.id = jsonEntity.id;
|
||||
circleEntity.lineColor = jsonEntity.lineColor;
|
||||
circleEntity.lineWidth = jsonEntity.lineWidth;
|
||||
circleEntity.lineDash = jsonEntity.lineDash;
|
||||
return circleEntity;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import type {Box, Point, Segment} from '@flatten-js/core';
|
||||
import type {Shape, SnapPoint} from '../App.types';
|
||||
import type {DrawController} from '../drawControllers/DrawController.ts';
|
||||
import type {ArcJsonData} from './ArcEntity';
|
||||
import type {ArrowHeadJsonData} from './ArrowHeadEntity.ts';
|
||||
import type {CircleJsonData} from './CircleEntity';
|
||||
import type {ImageJsonData} from './ImageEntity';
|
||||
import type {LineEntity, LineJsonData} from './LineEntity';
|
||||
import type {PointJsonData} from './PointEntity';
|
||||
import type {RectangleJsonData} from './RectangleEntity';
|
||||
import type {TextJsonData} from './TextEntity.ts';
|
||||
import type { Box, Point, Segment } from '@flatten-js/core';
|
||||
import type { Shape, SnapPoint } from '../App.types';
|
||||
import type { DrawController } from '../drawControllers/DrawController.ts';
|
||||
import type { ArcJsonData } from './ArcEntity';
|
||||
import type { ArrowHeadJsonData } from './ArrowHeadEntity.ts';
|
||||
import type { CircleJsonData } from './CircleEntity';
|
||||
import type { ImageJsonData } from './ImageEntity';
|
||||
import type { LineEntity, LineJsonData } from './LineEntity';
|
||||
import type { PointJsonData } from './PointEntity';
|
||||
import type { RectangleJsonData } from './RectangleEntity';
|
||||
import type { TextJsonData } from './TextEntity.ts';
|
||||
|
||||
export interface Entity {
|
||||
// Random uuid generated when the Entity is created
|
||||
@@ -74,6 +74,7 @@ export interface JsonEntity<TShapeJsonData = ShapeJsonData> {
|
||||
type: EntityName;
|
||||
lineColor: string;
|
||||
lineWidth: number;
|
||||
lineDash?: number[];
|
||||
layerId: string;
|
||||
shapeData: TShapeJsonData | null;
|
||||
children?: JsonEntity<ShapeJsonData>[];
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import type * as Flatten from '@flatten-js/core';
|
||||
import {type Box, Point, Polygon, Relations, type Segment, Vector} from '@flatten-js/core';
|
||||
import {type Shape, type SnapPoint, SnapPointType} from '../App.types';
|
||||
import type {DrawController} from '../drawControllers/DrawController.ts';
|
||||
import {twoPointBoxToPolygon} from '../helpers/box-to-polygon';
|
||||
import {getExportColor} from '../helpers/get-export-color';
|
||||
import {mirrorAngleOverAxis} from '../helpers/mirror-angle-over-axis.ts';
|
||||
import {mirrorPointOverAxis} from '../helpers/mirror-point-over-axis.ts';
|
||||
import {polygonToSegments} from '../helpers/polygon-to-segments';
|
||||
import {scalePoint} from '../helpers/scale-point';
|
||||
import {getActiveLayerId, isEntityHighlighted, isEntitySelected} from '../state.ts';
|
||||
import {type Entity, EntityName, type JsonEntity} from './Entity';
|
||||
import type {LineEntity} from './LineEntity.ts';
|
||||
import { type Box, Point, Polygon, Relations, type Segment, Vector } from '@flatten-js/core';
|
||||
import { type Shape, type SnapPoint, SnapPointType } from '../App.types';
|
||||
import type { DrawController } from '../drawControllers/DrawController.ts';
|
||||
import { twoPointBoxToPolygon } from '../helpers/box-to-polygon';
|
||||
import { getExportColor } from '../helpers/get-export-color';
|
||||
import { mirrorAngleOverAxis } from '../helpers/mirror-angle-over-axis.ts';
|
||||
import { mirrorPointOverAxis } from '../helpers/mirror-point-over-axis.ts';
|
||||
import { polygonToSegments } from '../helpers/polygon-to-segments';
|
||||
import { scalePoint } from '../helpers/scale-point';
|
||||
import { getActiveLayerId, isEntityHighlighted, isEntitySelected } from '../state.ts';
|
||||
import { type Entity, EntityName, type JsonEntity } from './Entity';
|
||||
import type { LineEntity } from './LineEntity.ts';
|
||||
|
||||
export class ImageEntity implements Entity {
|
||||
public id: string = crypto.randomUUID();
|
||||
@@ -213,6 +213,7 @@ export class ImageEntity implements Entity {
|
||||
type: EntityName.Image,
|
||||
lineColor: this.lineColor,
|
||||
lineWidth: this.lineWidth,
|
||||
lineDash: this.lineDash,
|
||||
layerId: this.layerId,
|
||||
shapeData: {
|
||||
points: this.polygon.vertices.map((vertex) => ({
|
||||
@@ -241,6 +242,7 @@ export class ImageEntity implements Entity {
|
||||
rectangleEntity.id = jsonEntity.id;
|
||||
rectangleEntity.lineColor = jsonEntity.lineColor;
|
||||
rectangleEntity.lineWidth = jsonEntity.lineWidth;
|
||||
rectangleEntity.lineDash = jsonEntity.lineDash;
|
||||
return rectangleEntity;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
import {type Box, Point, Segment} from '@flatten-js/core';
|
||||
import {sortBy, uniqWith} from 'es-toolkit';
|
||||
import {type Shape, type SnapPoint, SnapPointType, type StartAndEndpointEntity} from '../App.types';
|
||||
import type {DrawController} from '../drawControllers/DrawController';
|
||||
import {pointDistance} from '../helpers/distance-between-points';
|
||||
import {getAngleWithXAxis} from '../helpers/get-angle-with-x-axis.ts';
|
||||
import {getExportColor} from '../helpers/get-export-color';
|
||||
import {isPointEqual} from '../helpers/is-point-equal';
|
||||
import {mirrorPointOverAxis} from '../helpers/mirror-point-over-axis.ts';
|
||||
import {scalePoint} from '../helpers/scale-point';
|
||||
import {getActiveLayerId, isEntityHighlighted, isEntitySelected} from '../state.ts';
|
||||
import {type Entity, EntityName, type JsonEntity} from './Entity';
|
||||
import { type Box, Point, Segment } from '@flatten-js/core';
|
||||
import { sortBy, uniqWith } from 'es-toolkit';
|
||||
import {
|
||||
type Shape,
|
||||
type SnapPoint,
|
||||
SnapPointType,
|
||||
type StartAndEndpointEntity,
|
||||
} from '../App.types';
|
||||
import type { DrawController } from '../drawControllers/DrawController';
|
||||
import { pointDistance } from '../helpers/distance-between-points';
|
||||
import { getAngleWithXAxis } from '../helpers/get-angle-with-x-axis.ts';
|
||||
import { getExportColor } from '../helpers/get-export-color';
|
||||
import { isPointEqual } from '../helpers/is-point-equal';
|
||||
import { mirrorPointOverAxis } from '../helpers/mirror-point-over-axis.ts';
|
||||
import { scalePoint } from '../helpers/scale-point';
|
||||
import { getActiveLayerId, isEntityHighlighted, isEntitySelected } from '../state.ts';
|
||||
import { type Entity, EntityName, type JsonEntity } from './Entity';
|
||||
|
||||
export class LineEntity implements Entity, StartAndEndpointEntity {
|
||||
public id: string = crypto.randomUUID();
|
||||
@@ -174,6 +179,7 @@ export class LineEntity implements Entity, StartAndEndpointEntity {
|
||||
type: EntityName.Line,
|
||||
lineColor: this.lineColor,
|
||||
lineWidth: this.lineWidth,
|
||||
lineDash: this.lineDash,
|
||||
layerId: this.layerId,
|
||||
shapeData: {
|
||||
startPoint: {
|
||||
@@ -202,6 +208,7 @@ export class LineEntity implements Entity, StartAndEndpointEntity {
|
||||
lineEntity.id = jsonEntity.id;
|
||||
lineEntity.lineColor = jsonEntity.lineColor;
|
||||
lineEntity.lineWidth = jsonEntity.lineWidth;
|
||||
lineEntity.lineDash = jsonEntity.lineDash;
|
||||
return lineEntity;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import {Box, Line, Point, Segment, Vector} from '@flatten-js/core';
|
||||
import {minBy, round} from 'es-toolkit';
|
||||
import {max, min} from 'es-toolkit/compat';
|
||||
import { Box, Line, Point, Segment, Vector } from '@flatten-js/core';
|
||||
import { minBy, round } from 'es-toolkit';
|
||||
import { max, min } from 'es-toolkit/compat';
|
||||
import {
|
||||
ARROW_HEAD_LENGTH,
|
||||
ARROW_HEAD_WIDTH,
|
||||
@@ -12,15 +12,32 @@ import {
|
||||
MEASUREMENT_ORIGIN_MARGIN,
|
||||
TO_RADIANS,
|
||||
} from '../App.consts';
|
||||
import type {Shape, SnapPoint} from '../App.types';
|
||||
import type {DrawController} from '../drawControllers/DrawController';
|
||||
import {pointDistance} from '../helpers/distance-between-points';
|
||||
import {isPointEqual} from '../helpers/is-point-equal';
|
||||
import {mirrorPointOverAxis} from '../helpers/mirror-point-over-axis.ts';
|
||||
import {scalePoint} from '../helpers/scale-point';
|
||||
import {getActiveLayerId, isEntityHighlighted, isEntitySelected} from '../state.ts';
|
||||
import {type Entity, EntityName, type JsonEntity} from './Entity';
|
||||
import type {LineEntity} from './LineEntity.ts';
|
||||
import type { Shape, SnapPoint } from '../App.types';
|
||||
import type { DrawController } from '../drawControllers/DrawController';
|
||||
import { pointDistance } from '../helpers/distance-between-points';
|
||||
import { isPointEqual } from '../helpers/is-point-equal';
|
||||
import { mirrorPointOverAxis } from '../helpers/mirror-point-over-axis.ts';
|
||||
import { scalePoint } from '../helpers/scale-point';
|
||||
import {
|
||||
getActiveLayerId,
|
||||
getScreenCanvasDrawController,
|
||||
isEntityHighlighted,
|
||||
isEntitySelected,
|
||||
} from '../state.ts';
|
||||
import { type Entity, EntityName, type JsonEntity } from './Entity';
|
||||
import type { LineEntity } from './LineEntity.ts';
|
||||
|
||||
/**
|
||||
* 치수 상수는 화면 픽셀 기준이므로 현재 줌 배율(px/world)로 나눠 세계좌표 길이로 바꾼다.
|
||||
* 컨트롤러가 아직 없는 환경(단위 테스트 등)에서는 1을 반환해 상수를 그대로 쓴다.
|
||||
*/
|
||||
function annotationWorldFactor(): number {
|
||||
try {
|
||||
return getScreenCanvasDrawController().getScreenScale() || 1;
|
||||
} catch {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
|
||||
export class MeasurementEntity implements Entity {
|
||||
public id: string = crypto.randomUUID();
|
||||
@@ -77,30 +94,41 @@ export class MeasurementEntity implements Entity {
|
||||
.clone()
|
||||
.translate(vectorPerpendicularFromLineTowardsOffsetPoint);
|
||||
|
||||
// Screen-pixel constants are converted to world units so annotation size stays zoom-independent
|
||||
const worldFactor = annotationWorldFactor();
|
||||
|
||||
// Start of the perpendicular lines
|
||||
const offsetStartPointMargin = this.startPoint
|
||||
.clone()
|
||||
.translate(
|
||||
vectorPerpendicularFromLineTowardsOffsetPointUnit.multiply(MEASUREMENT_ORIGIN_MARGIN)
|
||||
vectorPerpendicularFromLineTowardsOffsetPointUnit.multiply(
|
||||
MEASUREMENT_ORIGIN_MARGIN / worldFactor
|
||||
)
|
||||
);
|
||||
|
||||
const offsetEndPointMargin = this.endPoint
|
||||
.clone()
|
||||
.translate(
|
||||
vectorPerpendicularFromLineTowardsOffsetPointUnit.multiply(MEASUREMENT_ORIGIN_MARGIN)
|
||||
vectorPerpendicularFromLineTowardsOffsetPointUnit.multiply(
|
||||
MEASUREMENT_ORIGIN_MARGIN / worldFactor
|
||||
)
|
||||
);
|
||||
|
||||
// End of the perpendicular lines
|
||||
const offsetStartPointExtend = offsetStartPoint
|
||||
.clone()
|
||||
.translate(
|
||||
vectorPerpendicularFromLineTowardsOffsetPointUnit.multiply(MEASUREMENT_EXTENSION_LENGTH)
|
||||
vectorPerpendicularFromLineTowardsOffsetPointUnit.multiply(
|
||||
MEASUREMENT_EXTENSION_LENGTH / worldFactor
|
||||
)
|
||||
);
|
||||
|
||||
const offsetEndPointExtend = offsetEndPoint
|
||||
.clone()
|
||||
.translate(
|
||||
vectorPerpendicularFromLineTowardsOffsetPointUnit.multiply(MEASUREMENT_EXTENSION_LENGTH)
|
||||
vectorPerpendicularFromLineTowardsOffsetPointUnit.multiply(
|
||||
MEASUREMENT_EXTENSION_LENGTH / worldFactor
|
||||
)
|
||||
);
|
||||
|
||||
// Location for label
|
||||
@@ -108,8 +136,8 @@ export class MeasurementEntity implements Entity {
|
||||
(offsetStartPoint.x + offsetEndPoint.x) / 2,
|
||||
(offsetStartPoint.y + offsetEndPoint.y) / 2
|
||||
);
|
||||
const textHeight = MEASUREMENT_FONT_SIZE;
|
||||
const totalOffset = MEASUREMENT_LABEL_OFFSET + textHeight / 2;
|
||||
const textHeight = MEASUREMENT_FONT_SIZE / worldFactor;
|
||||
const totalOffset = MEASUREMENT_LABEL_OFFSET / worldFactor + textHeight / 2;
|
||||
const midpointMeasurementLineOffset = midpointMeasurementLine
|
||||
.clone()
|
||||
.translate(vectorPerpendicularFromLineTowardsOffsetPointUnit.multiply(totalOffset));
|
||||
@@ -163,20 +191,21 @@ export class MeasurementEntity implements Entity {
|
||||
isHighlighted: boolean,
|
||||
isSelected: boolean
|
||||
): void => {
|
||||
const screenScale = drawController.getScreenScale();
|
||||
// Arrow heads keep a constant on-screen size: divide pixel constants by zoom (px/world)
|
||||
const worldFactor = drawController.getScreenScale() || 1;
|
||||
const vectorFromEndToStart = new Vector(endPoint, startPoint);
|
||||
const vectorFromEndToStartUnit = vectorFromEndToStart.normalize();
|
||||
const baseOfArrow = endPoint
|
||||
.clone()
|
||||
.translate(vectorFromEndToStartUnit.multiply(ARROW_HEAD_LENGTH * screenScale));
|
||||
.translate(vectorFromEndToStartUnit.multiply(ARROW_HEAD_LENGTH / worldFactor));
|
||||
const perpendicularVector1 = vectorFromEndToStartUnit.rotate(90 * TO_RADIANS);
|
||||
const perpendicularVector2 = vectorFromEndToStartUnit.rotate(-90 * TO_RADIANS);
|
||||
const leftCornerOfArrow = baseOfArrow
|
||||
.clone()
|
||||
.translate(perpendicularVector1.multiply(ARROW_HEAD_WIDTH * screenScale));
|
||||
.translate(perpendicularVector1.multiply(ARROW_HEAD_WIDTH / worldFactor));
|
||||
const rightCornerOfArrow = baseOfArrow
|
||||
.clone()
|
||||
.translate(perpendicularVector2.multiply(ARROW_HEAD_WIDTH * screenScale));
|
||||
.translate(perpendicularVector2.multiply(ARROW_HEAD_WIDTH / worldFactor));
|
||||
|
||||
drawController.setLineStyles(
|
||||
isHighlighted,
|
||||
@@ -268,7 +297,7 @@ export class MeasurementEntity implements Entity {
|
||||
drawController.drawText(distance, midpointMeasurementLineOffset, {
|
||||
textAlign: 'center',
|
||||
textDirection: finalTextDirection,
|
||||
fontSize: MEASUREMENT_FONT_SIZE,
|
||||
fontSize: MEASUREMENT_FONT_SIZE / (drawController.getScreenScale() || 1),
|
||||
textColor: this.lineColor,
|
||||
});
|
||||
}
|
||||
@@ -374,9 +403,10 @@ export class MeasurementEntity implements Entity {
|
||||
const distance = String(
|
||||
round(pointDistance(this.startPoint, this.endPoint), MEASUREMENT_DECIMAL_PLACES)
|
||||
);
|
||||
const textHeight = MEASUREMENT_FONT_SIZE;
|
||||
const worldFactor = annotationWorldFactor();
|
||||
const textHeight = MEASUREMENT_FONT_SIZE / worldFactor;
|
||||
// Estimate width: textString.length * fontSize * aspectRatioFactor
|
||||
const textWidth = distance.length * MEASUREMENT_FONT_SIZE * 0.6;
|
||||
const textWidth = (distance.length * MEASUREMENT_FONT_SIZE * 0.6) / worldFactor;
|
||||
|
||||
const { midpointMeasurementLineOffset, normalUnit } = drawPoints;
|
||||
|
||||
@@ -532,6 +562,7 @@ export class MeasurementEntity implements Entity {
|
||||
type: EntityName.Measurement,
|
||||
lineColor: this.lineColor,
|
||||
lineWidth: this.lineWidth,
|
||||
lineDash: this.lineDash,
|
||||
layerId: this.layerId,
|
||||
shapeData: {
|
||||
startPoint: { x: this.startPoint.x, y: this.startPoint.y },
|
||||
@@ -565,6 +596,7 @@ export class MeasurementEntity implements Entity {
|
||||
measurementEntity.id = jsonEntity.id;
|
||||
measurementEntity.lineColor = jsonEntity.lineColor;
|
||||
measurementEntity.lineWidth = jsonEntity.lineWidth;
|
||||
measurementEntity.lineDash = jsonEntity.lineDash;
|
||||
return measurementEntity;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import type * as Flatten from '@flatten-js/core';
|
||||
import {Box, Point, type Segment} from '@flatten-js/core';
|
||||
import {type Shape, type SnapPoint, SnapPointType} from '../App.types';
|
||||
import type {DrawController} from '../drawControllers/DrawController';
|
||||
import {getExportColor} from '../helpers/get-export-color';
|
||||
import {mirrorPointOverAxis} from '../helpers/mirror-point-over-axis.ts';
|
||||
import {scalePoint} from '../helpers/scale-point';
|
||||
import {getActiveLayerId, isEntityHighlighted, isEntitySelected} from '../state.ts';
|
||||
import {type Entity, EntityName, type JsonEntity} from './Entity';
|
||||
import type {LineEntity} from './LineEntity.ts';
|
||||
import { Box, Point, type Segment } from '@flatten-js/core';
|
||||
import { type Shape, type SnapPoint, SnapPointType } from '../App.types';
|
||||
import type { DrawController } from '../drawControllers/DrawController';
|
||||
import { getExportColor } from '../helpers/get-export-color';
|
||||
import { mirrorPointOverAxis } from '../helpers/mirror-point-over-axis.ts';
|
||||
import { scalePoint } from '../helpers/scale-point';
|
||||
import { getActiveLayerId, isEntityHighlighted, isEntitySelected } from '../state.ts';
|
||||
import { type Entity, EntityName, type JsonEntity } from './Entity';
|
||||
import type { LineEntity } from './LineEntity.ts';
|
||||
|
||||
export class PointEntity implements Entity {
|
||||
public id: string = crypto.randomUUID();
|
||||
@@ -124,6 +124,7 @@ export class PointEntity implements Entity {
|
||||
type: EntityName.Point,
|
||||
lineColor: this.lineColor,
|
||||
lineWidth: this.lineWidth,
|
||||
lineDash: this.lineDash,
|
||||
layerId: this.layerId,
|
||||
shapeData: {
|
||||
point: {
|
||||
@@ -143,6 +144,7 @@ export class PointEntity implements Entity {
|
||||
lineEntity.id = jsonEntity.id;
|
||||
lineEntity.lineColor = jsonEntity.lineColor;
|
||||
lineEntity.lineWidth = jsonEntity.lineWidth;
|
||||
lineEntity.lineDash = jsonEntity.lineDash;
|
||||
return lineEntity;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import type * as Flatten from '@flatten-js/core';
|
||||
import {Box, type Point, type Segment} from '@flatten-js/core';
|
||||
import {mapLimit} from 'blend-promise-utils';
|
||||
import {compact, maxBy} from 'es-toolkit';
|
||||
import {minBy} from 'es-toolkit/compat';
|
||||
import type {Shape, SnapPoint} from '../App.types';
|
||||
import type {DrawController} from '../drawControllers/DrawController';
|
||||
import {getActiveLayerId, isEntityHighlighted, isEntitySelected} from '../state.ts';
|
||||
import {ArcEntity, type ArcJsonData} from './ArcEntity.ts';
|
||||
import {type Entity, EntityName, type JsonEntity} from './Entity';
|
||||
import {LineEntity, type LineJsonData} from './LineEntity.ts';
|
||||
import { Box, type Point, type Segment } from '@flatten-js/core';
|
||||
import { mapLimit } from 'blend-promise-utils';
|
||||
import { compact, maxBy } from 'es-toolkit';
|
||||
import { minBy } from 'es-toolkit/compat';
|
||||
import type { Shape, SnapPoint } from '../App.types';
|
||||
import type { DrawController } from '../drawControllers/DrawController';
|
||||
import { getActiveLayerId, isEntityHighlighted, isEntitySelected } from '../state.ts';
|
||||
import { ArcEntity, type ArcJsonData } from './ArcEntity.ts';
|
||||
import { type Entity, EntityName, type JsonEntity } from './Entity';
|
||||
import { LineEntity, type LineJsonData } from './LineEntity.ts';
|
||||
|
||||
export class PolyLineEntity implements Entity {
|
||||
public id: string = crypto.randomUUID();
|
||||
@@ -133,6 +133,7 @@ export class PolyLineEntity implements Entity {
|
||||
type: EntityName.PolyLine,
|
||||
lineColor: this.lineColor,
|
||||
lineWidth: this.lineWidth,
|
||||
lineDash: this.lineDash,
|
||||
layerId: this.layerId,
|
||||
shapeData: null,
|
||||
children: compact(await mapLimit(this.entities, 20, (entity) => entity.toJson())),
|
||||
@@ -178,6 +179,7 @@ export class PolyLineEntity implements Entity {
|
||||
polyLineEntity.id = jsonEntity.id;
|
||||
polyLineEntity.lineColor = jsonEntity.lineColor;
|
||||
polyLineEntity.lineWidth = jsonEntity.lineWidth;
|
||||
polyLineEntity.lineDash = jsonEntity.lineDash;
|
||||
return polyLineEntity;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import type * as Flatten from '@flatten-js/core';
|
||||
import {type Box, Point, Polygon, Relations, type Segment, Vector} from '@flatten-js/core';
|
||||
import {type Shape, type SnapPoint, SnapPointType} from '../App.types';
|
||||
import type {DrawController} from '../drawControllers/DrawController';
|
||||
import {twoPointBoxToPolygon} from '../helpers/box-to-polygon';
|
||||
import {getExportColor} from '../helpers/get-export-color';
|
||||
import {mirrorPointOverAxis} from '../helpers/mirror-point-over-axis.ts';
|
||||
import {polygonToSegments} from '../helpers/polygon-to-segments';
|
||||
import {scalePoint} from '../helpers/scale-point';
|
||||
import {getActiveLayerId, isEntityHighlighted, isEntitySelected} from '../state.ts';
|
||||
import {type Entity, EntityName, type JsonEntity} from './Entity';
|
||||
import type {LineEntity} from './LineEntity.ts';
|
||||
import { type Box, Point, Polygon, Relations, type Segment, Vector } from '@flatten-js/core';
|
||||
import { type Shape, type SnapPoint, SnapPointType } from '../App.types';
|
||||
import type { DrawController } from '../drawControllers/DrawController';
|
||||
import { twoPointBoxToPolygon } from '../helpers/box-to-polygon';
|
||||
import { getExportColor } from '../helpers/get-export-color';
|
||||
import { mirrorPointOverAxis } from '../helpers/mirror-point-over-axis.ts';
|
||||
import { polygonToSegments } from '../helpers/polygon-to-segments';
|
||||
import { scalePoint } from '../helpers/scale-point';
|
||||
import { getActiveLayerId, isEntityHighlighted, isEntitySelected } from '../state.ts';
|
||||
import { type Entity, EntityName, type JsonEntity } from './Entity';
|
||||
import type { LineEntity } from './LineEntity.ts';
|
||||
|
||||
export class RectangleEntity implements Entity {
|
||||
public id: string = crypto.randomUUID();
|
||||
@@ -176,6 +176,7 @@ export class RectangleEntity implements Entity {
|
||||
type: EntityName.Rectangle,
|
||||
lineColor: this.lineColor,
|
||||
lineWidth: this.lineWidth,
|
||||
lineDash: this.lineDash,
|
||||
layerId: this.layerId,
|
||||
shapeData: {
|
||||
points: this.polygon.vertices.map((vertex) => ({
|
||||
@@ -202,6 +203,7 @@ export class RectangleEntity implements Entity {
|
||||
rectangleEntity.id = jsonEntity.id;
|
||||
rectangleEntity.lineColor = jsonEntity.lineColor;
|
||||
rectangleEntity.lineWidth = jsonEntity.lineWidth;
|
||||
rectangleEntity.lineDash = jsonEntity.lineDash;
|
||||
return rectangleEntity;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import {Box, Point, type Segment, Vector} from '@flatten-js/core';
|
||||
import {cloneDeep} from 'es-toolkit/compat';
|
||||
import type {Shape, SnapPoint} from '../App.types';
|
||||
import {DEFAULT_TEXT_OPTIONS, type DrawController} from '../drawControllers/DrawController';
|
||||
import {mirrorPointOverAxis} from '../helpers/mirror-point-over-axis.ts';
|
||||
import {scalePoint} from '../helpers/scale-point.ts';
|
||||
import {getActiveLayerId, isEntityHighlighted, isEntitySelected} from '../state.ts';
|
||||
import {type Entity, EntityName, type JsonEntity} from './Entity';
|
||||
import type {LineEntity} from './LineEntity.ts';
|
||||
import { Box, Point, type Segment, Vector } from '@flatten-js/core';
|
||||
import { cloneDeep } from 'es-toolkit/compat';
|
||||
import type { Shape, SnapPoint } from '../App.types';
|
||||
import { DEFAULT_TEXT_OPTIONS, type DrawController } from '../drawControllers/DrawController';
|
||||
import { mirrorPointOverAxis } from '../helpers/mirror-point-over-axis.ts';
|
||||
import { scalePoint } from '../helpers/scale-point.ts';
|
||||
import { getActiveLayerId, isEntityHighlighted, isEntitySelected } from '../state.ts';
|
||||
import { type Entity, EntityName, type JsonEntity } from './Entity';
|
||||
import type { LineEntity } from './LineEntity.ts';
|
||||
|
||||
export interface TextOptions {
|
||||
textDirection: Vector;
|
||||
@@ -101,6 +101,14 @@ export class TextEntity implements Entity {
|
||||
);
|
||||
}
|
||||
|
||||
public getTextOptions(): TextOptions {
|
||||
return this.options;
|
||||
}
|
||||
|
||||
public setTextOptions(newOptions: Partial<Omit<TextOptions, 'textDirection'>>): void {
|
||||
Object.assign(this.options, newOptions);
|
||||
}
|
||||
|
||||
public getShape(): Shape | null {
|
||||
return null; // TODO see why we need to get the shape out of an entity
|
||||
}
|
||||
@@ -141,6 +149,7 @@ export class TextEntity implements Entity {
|
||||
type: EntityName.Text,
|
||||
lineColor: this.lineColor,
|
||||
lineWidth: this.lineWidth,
|
||||
lineDash: this.lineDash,
|
||||
layerId: this.layerId,
|
||||
shapeData: {
|
||||
label: this.label,
|
||||
@@ -181,6 +190,7 @@ export class TextEntity implements Entity {
|
||||
textEntity.id = jsonEntity.id;
|
||||
textEntity.lineColor = jsonEntity.lineColor;
|
||||
textEntity.lineWidth = jsonEntity.lineWidth;
|
||||
textEntity.lineDash = jsonEntity.lineDash ?? [];
|
||||
return textEntity;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user