diff --git a/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants.ts b/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants.ts
index 31cae9f134bb5f8d1f4a3d9df4570604782aaa4f..4ac8a6fba4c447bd30577b4f93b767592da3ab7b 100644
--- a/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants.ts
@@ -1,22 +1,16 @@
-import {
- ColorObject,
- EllipseCenter,
- EllipseRadius,
- ShapeCurvePoint,
- ShapePoint,
-} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
+import { Color, ShapeRelAbs, ShapeRelAbsBezierPoint } from '@/types/models';
-export const WHITE_COLOR: ColorObject = {
+export const WHITE_COLOR: Color = {
alpha: 255,
rgb: 16777215,
};
-export const BLACK_COLOR: ColorObject = {
+export const BLACK_COLOR: Color = {
alpha: 255,
rgb: -16777216,
};
-export const COMPARTMENT_SQUARE_POINTS: Array<ShapePoint | ShapeCurvePoint> = [
+export const COMPARTMENT_SQUARE_POINTS: Array<ShapeRelAbs | ShapeRelAbsBezierPoint> = [
{
type: 'REL_ABS_POINT',
absoluteX: 10.0,
@@ -148,7 +142,7 @@ export const COMPARTMENT_SQUARE_POINTS: Array<ShapePoint | ShapeCurvePoint> = [
},
];
-export const COMPARTMENT_CIRCLE_CENTER: EllipseCenter = {
+export const COMPARTMENT_CIRCLE_CENTER: ShapeRelAbs = {
type: 'REL_ABS_POINT',
absoluteX: 0.0,
absoluteY: 0.0,
@@ -158,10 +152,12 @@ export const COMPARTMENT_CIRCLE_CENTER: EllipseCenter = {
relativeWidthForY: null,
};
-export const COMPARTMENT_CIRCLE_RADIUS: EllipseRadius = {
+export const COMPARTMENT_CIRCLE_RADIUS: ShapeRelAbs = {
type: 'REL_ABS_RADIUS',
absoluteX: 0.0,
absoluteY: 0.0,
relativeX: 50.0,
relativeY: 50.0,
+ relativeHeightForX: null,
+ relativeWidthForY: null,
};
diff --git a/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.types.ts b/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.types.ts
index 4c5ee626be061e6f81432f40e596f75e4a1d0c4c..a896f4be019afda0cdea7b9ff858bae65e0e6045 100644
--- a/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.types.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.types.ts
@@ -8,58 +8,3 @@ export type MapConfig = {
export type VerticalAlign = 'TOP' | 'MIDDLE' | 'BOTTOM';
export type HorizontalAlign = 'LEFT' | 'RIGHT' | 'CENTER' | 'END' | 'START';
-
-export type ColorObject = {
- alpha: number;
- rgb: number;
-};
-
-export type ShapePoint = {
- type: string;
- absoluteX: number;
- absoluteY: number;
- relativeX: number;
- relativeY: number;
- relativeHeightForX: number | null;
- relativeWidthForY: number | null;
-};
-
-export type ShapeCurvePoint = {
- type: string;
- absoluteX1: number;
- absoluteY1: number;
- relativeX1: number;
- relativeY1: number;
- relativeHeightForX1: number | null;
- relativeWidthForY1: number | null;
- absoluteX2: number;
- absoluteY2: number;
- relativeX2: number;
- relativeY2: number;
- relativeHeightForX2: number | null;
- relativeWidthForY2: number | null;
- absoluteX3: number;
- absoluteY3: number;
- relativeX3: number;
- relativeY3: number;
- relativeHeightForX3: number | null;
- relativeWidthForY3: number | null;
-};
-
-export type EllipseCenter = {
- type: string;
- absoluteX: number;
- absoluteY: number;
- relativeX: number;
- relativeY: number;
- relativeHeightForX: number | null;
- relativeWidthForY: number | null;
-};
-
-export type EllipseRadius = {
- type: string;
- absoluteX: number;
- absoluteY: number;
- relativeX: number;
- relativeY: number;
-};
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCurveCoords.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCurveCoords.test.ts
index d212e9eaa9e2a867253336ad0a1a97aadeede98f..adf5685f81d9437470d9ef4bda1b912013d02833 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCurveCoords.test.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCurveCoords.test.ts
@@ -2,7 +2,7 @@
import getCoordsX from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCoordsX';
import getCoordsY from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCoordsY';
import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
-import { ShapeCurvePoint } from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
+import { ShapeRelAbsBezierPoint } from '@/types/models';
import getCurveCoords from './getCurveCoords';
jest.mock('./getCoordsX');
@@ -21,8 +21,8 @@ describe('getCurveCoords', () => {
const height = 100;
const width = 200;
- const point: ShapeCurvePoint = {
- type: 'REL_ABS_POINT',
+ const point: ShapeRelAbsBezierPoint = {
+ type: 'REL_ABS_BEZIER_POINT',
absoluteX1: 10,
relativeX1: 5,
relativeHeightForX1: 2,
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCurveCoords.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCurveCoords.ts
index ebfed6b651b1ce599cc7a0d053acebcf93771a91..8cd0f0ec0ea71065e977d5920b473871f1a1c3fe 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCurveCoords.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCurveCoords.ts
@@ -2,7 +2,7 @@ import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
import { Coordinate } from 'ol/coordinate';
import getCoordsX from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCoordsX';
import getCoordsY from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCoordsY';
-import { ShapeCurvePoint } from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
+import { ShapeRelAbsBezierPoint } from '@/types/models';
export default function getCurveCoords({
x,
@@ -14,7 +14,7 @@ export default function getCurveCoords({
}: {
x: number;
y: number;
- point: ShapeCurvePoint;
+ point: ShapeRelAbsBezierPoint;
height: number;
width: number;
pointToProjection: UsePointToProjectionResult;
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getEllipseCoords.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getEllipseCoords.test.ts
index 4a0d514a3829c004d7af79ad435d619821b92ebb..515eabf45fb9d4b66ebdece53029f287541dabb0 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getEllipseCoords.test.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getEllipseCoords.test.ts
@@ -2,6 +2,7 @@
import getCoordsX from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCoordsX';
import getCoordsY from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCoordsY';
import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
+import { ShapeRelAbs } from '@/types/models';
import getEllipseCoords from './getEllipseCoords';
jest.mock('./getCoordsX');
@@ -20,21 +21,23 @@ describe('getEllipseCoords', () => {
const height = 100;
const width = 200;
const center = {
- type: 'center',
+ type: 'REL_ABS_POINT',
absoluteX: 15,
absoluteY: 25,
relativeX: 5,
relativeY: 10,
relativeHeightForX: null,
relativeWidthForY: null,
- };
+ } as ShapeRelAbs;
const radius = {
- type: 'radius',
+ type: 'REL_ABS_POINT',
absoluteX: 30,
absoluteY: 40,
relativeX: 10,
relativeY: 15,
- };
+ relativeHeightForX: null,
+ relativeWidthForY: null,
+ } as ShapeRelAbs;
const points = 4;
(getCoordsX as jest.Mock).mockReturnValue(35);
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getEllipseCoords.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getEllipseCoords.ts
index 45a7df697933f76806fabd13bbea2b790e2e2855..aca8a8927849ca830af1a0eb77dbf674346a1f10 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getEllipseCoords.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getEllipseCoords.ts
@@ -3,10 +3,7 @@ import getCoordsX from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/
import getCoordsY from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCoordsY';
import { Coordinate } from 'ol/coordinate';
import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
-import {
- EllipseCenter,
- EllipseRadius,
-} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
+import { ShapeRelAbs } from '@/types/models';
export default function getEllipseCoords({
x,
@@ -20,8 +17,8 @@ export default function getEllipseCoords({
}: {
x: number;
y: number;
- center?: EllipseCenter;
- radius?: EllipseRadius;
+ center?: ShapeRelAbs;
+ radius?: ShapeRelAbs;
height: number;
width: number;
pointToProjection: UsePointToProjectionResult;
@@ -50,8 +47,14 @@ export default function getEllipseCoords({
);
}
if (radius) {
- radiusX = radius.absoluteX + (radius.relativeX * width) / 100;
- radiusY = radius.absoluteY + (radius.relativeY * height) / 100;
+ radiusX =
+ radius.absoluteX +
+ (radius.relativeX * width) / 100 +
+ (height * (radius.relativeHeightForX || 0)) / 100;
+ radiusY =
+ radius.absoluteY +
+ (radius.relativeY * height) / 100 +
+ (width * (radius.relativeWidthForY || 0)) / 100;
}
let angle;
let coordsX;
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getPolygonCoords.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getPolygonCoords.test.ts
index d88a2c0406337584ebac191f2c3da05cc2566b6d..ed84c661f154d568fcc950792f9497e098c60220 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getPolygonCoords.test.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getPolygonCoords.test.ts
@@ -3,10 +3,7 @@ import getCoordsX from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/
import getCoordsY from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCoordsY';
import getCurveCoords from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCurveCoords';
import getBezierCurve from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getBezierCurve';
-import {
- ShapePoint,
- ShapeCurvePoint,
-} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
+import { ShapeRelAbs, ShapeRelAbsBezierPoint } from '@/types/models';
import getPolygonCoords from './getPolygonCoords';
jest.mock('./getCoordsX');
@@ -27,7 +24,7 @@ describe('getPolygonCoords', () => {
const height = 100;
const width = 200;
- const points: Array<ShapePoint | ShapeCurvePoint> = [
+ const points: Array<ShapeRelAbs | ShapeRelAbsBezierPoint> = [
{
type: 'REL_ABS_POINT',
absoluteX: 0,
@@ -75,7 +72,7 @@ describe('getPolygonCoords', () => {
const height = 100;
const width = 200;
- const points: Array<ShapePoint | ShapeCurvePoint> = [
+ const points: Array<ShapeRelAbs | ShapeRelAbsBezierPoint> = [
{
type: 'REL_ABS_POINT',
absoluteX: 0,
@@ -86,7 +83,7 @@ describe('getPolygonCoords', () => {
relativeWidthForY: null,
},
{
- type: 'REL_ABS_POINT',
+ type: 'REL_ABS_BEZIER_POINT',
absoluteX1: 50,
absoluteY1: 50,
relativeX1: 10,
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getPolygonCoords.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getPolygonCoords.ts
index dac21118d14a9bf5d51b109f0a401fbbf0af8fc0..f0fd77ba6547e50c07f7b51184919409902e5310 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getPolygonCoords.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getPolygonCoords.ts
@@ -5,10 +5,7 @@ import getBezierCurve from '@/components/Map/MapViewer/MapViewerVector/utils/sha
import getCoordsX from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCoordsX';
import getCoordsY from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCoordsY';
import getCurveCoords from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCurveCoords';
-import {
- ShapeCurvePoint,
- ShapePoint,
-} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
+import { ShapeRelAbs, ShapeRelAbsBezierPoint } from '@/types/models';
export default function getPolygonCoords({
points,
@@ -18,7 +15,7 @@ export default function getPolygonCoords({
width,
pointToProjection,
}: {
- points: Array<ShapePoint | ShapeCurvePoint>;
+ points: Array<ShapeRelAbs | ShapeRelAbsBezierPoint>;
x: number;
y: number;
height: number;
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
index 30ece3e99fcd17b3c7c15715b7a590b8b6368870..ef477137f87a54fa0a010c24eb3769624f22f6e8 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
@@ -5,7 +5,6 @@ import Feature, { FeatureLike } from 'ol/Feature';
import { MultiPolygon } from 'ol/geom';
import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
import {
- ColorObject,
HorizontalAlign,
VerticalAlign,
} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
@@ -13,6 +12,7 @@ import { MapInstance } from '@/types/map';
import getTextStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextStyle';
import { rgbToHex } from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/rgbToHex';
import getTextCoords from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextCoords';
+import { Color } from '@/types/models';
export interface BaseMapElementProps {
x: number;
@@ -26,11 +26,11 @@ export interface BaseMapElementProps {
nameY: number;
nameWidth: number;
nameHeight: number;
- fontColor: ColorObject;
+ fontColor: Color;
nameVerticalAlign: VerticalAlign;
nameHorizontalAlign: HorizontalAlign;
- fillColor: ColorObject;
- borderColor: ColorObject;
+ fillColor: Color;
+ borderColor: Color;
pointToProjection: UsePointToProjectionResult;
}
@@ -57,15 +57,15 @@ export default abstract class BaseMultiPolygon {
nameHeight: number;
- fontColor: ColorObject;
+ fontColor: Color;
nameVerticalAlign: VerticalAlign;
nameHorizontalAlign: HorizontalAlign;
- fillColor: ColorObject;
+ fillColor: Color;
- borderColor: ColorObject;
+ borderColor: Color;
polygons: Array<Polygon> = [];
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Compartment.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Compartment.ts
index 786f8c1e29588a6f2a0879495b2f6d0012b4c673..bdf6026934bf9f8b697885cdd0feb391fcd1f5ad 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Compartment.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Compartment.ts
@@ -1,7 +1,6 @@
/* eslint-disable no-magic-numbers */
import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
import {
- ColorObject,
HorizontalAlign,
VerticalAlign,
} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
@@ -13,6 +12,7 @@ import getFill from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/sty
import { rgbToHex } from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/rgbToHex';
import getStroke from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getStroke';
import { MapInstance } from '@/types/map';
+import { Color } from '@/types/models';
export interface CompartmentProps {
x: number;
@@ -29,11 +29,11 @@ export interface CompartmentProps {
nameY: number;
nameWidth: number;
nameHeight: number;
- fontColor: ColorObject;
+ fontColor: Color;
nameVerticalAlign: VerticalAlign;
nameHorizontalAlign: HorizontalAlign;
- fillColor: ColorObject;
- borderColor: ColorObject;
+ fillColor: Color;
+ borderColor: Color;
pointToProjection: UsePointToProjectionResult;
mapInstance: MapInstance;
}
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.ts
index 5665fc2925d96517ac0b9a133fe1da982562c26d..f4c7cf16d09203ddd6c4202d22e38ec9d4a910d8 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.ts
@@ -2,7 +2,6 @@
import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
import { MapInstance } from '@/types/map';
import {
- ColorObject,
HorizontalAlign,
VerticalAlign,
} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
@@ -14,6 +13,7 @@ import {
} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants';
import getEllipseCoords from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getEllipseCoords';
import Compartment from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Compartment';
+import { Color } from '@/types/models';
export type CompartmentCircleProps = {
x: number;
@@ -21,9 +21,9 @@ export type CompartmentCircleProps = {
width: number;
height: number;
zIndex: number;
- fillColor?: ColorObject;
- borderColor?: ColorObject;
- fontColor?: ColorObject;
+ fillColor?: Color;
+ borderColor?: Color;
+ fontColor?: Color;
innerWidth?: number;
outerWidth?: number;
thickness?: number;
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare.ts
index d868bc11c118535e1b51057a32da6a45f336a6d1..1ff35d7f1d6b2ad6bd40cd4e677e045dc1b4eb1b 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare.ts
@@ -2,7 +2,6 @@
import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
import { MapInstance } from '@/types/map';
import {
- ColorObject,
HorizontalAlign,
VerticalAlign,
} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
@@ -13,6 +12,7 @@ import {
} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants';
import getPolygonCoords from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getPolygonCoords';
import Compartment from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Compartment';
+import { Color } from '@/types/models';
export type CompartmentSquareProps = {
x: number;
@@ -20,9 +20,9 @@ export type CompartmentSquareProps = {
width: number;
height: number;
zIndex: number;
- fillColor?: ColorObject;
- borderColor?: ColorObject;
- fontColor?: ColorObject;
+ fillColor?: Color;
+ borderColor?: Color;
+ fontColor?: Color;
innerWidth?: number;
outerWidth?: number;
thickness?: number;
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.ts
index 9812f899054b7cb17f075db28b10290f0bf797d6..90c8d06bb600c0590617d7fe996877179e55c276 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.ts
@@ -6,10 +6,9 @@ import getFill from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/sty
import Polygon from 'ol/geom/Polygon';
import getMultiPolygon from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getMultiPolygon';
import { rgbToHex } from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/rgbToHex';
-import { BioShape, LineType, Modification, Shape } from '@/types/models';
+import { BioShape, Color, LineType, Modification, Shape } from '@/types/models';
import { MapInstance } from '@/types/map';
import {
- ColorObject,
HorizontalAlign,
VerticalAlign,
} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
@@ -27,9 +26,9 @@ export type MapElementProps = {
width: number;
height: number;
zIndex: number;
- fillColor?: ColorObject;
- borderColor?: ColorObject;
- fontColor?: ColorObject;
+ fillColor?: Color;
+ borderColor?: Color;
+ fontColor?: Color;
lineWidth?: number;
lineType?: string;
text?: string;
@@ -129,7 +128,6 @@ export default class MapElement extends BaseMultiPolygon {
}
protected createPolygons(): void {
- let multiPolygonModifications: Array<Polygon> = [];
this.modifications.forEach(modification => {
if (modification.state === null) {
return;
@@ -139,41 +137,7 @@ export default class MapElement extends BaseMultiPolygon {
if (!shape) {
return;
}
- multiPolygonModifications = getMultiPolygon({
- x: modification.x,
- y: modification.y,
- width: modification.width,
- height: modification.height,
- shapes: shape.shapes,
- pointToProjection: this.pointToProjection,
- mirror: modification.direction && modification.direction === 'RIGHT',
- });
- this.polygons.push(...multiPolygonModifications);
- multiPolygonModifications.forEach(polygon => {
- const modificationStyle = new Style({
- geometry: polygon,
- stroke: getStroke({ color: rgbToHex(modification.borderColor) }),
- fill: getFill({ color: rgbToHex(modification.fillColor) }),
- zIndex: modification.z,
- });
- const modificationText = modification.stateAbbreviation
- ? modification.stateAbbreviation
- : modification.name;
- if (modificationText) {
- modificationStyle.setText(
- new Text({
- text: modificationText,
- font: `${modification.fontSize}pt Arial`,
- textAlign: 'center',
- textBaseline: 'middle',
- fill: getFill({ color: '#000' }),
- overflow: true,
- }),
- );
- this.polygonsTexts.push(modificationText);
- }
- this.styles.push(modificationStyle);
- });
+ this.drawModification(modification, shape.shapes);
});
if (this.lineType) {
@@ -193,6 +157,44 @@ export default class MapElement extends BaseMultiPolygon {
}
}
+ drawModification(modification: Modification, shapes: Array<Shape>): void {
+ const multiPolygonModification = getMultiPolygon({
+ x: modification.x,
+ y: modification.y,
+ width: modification.width,
+ height: modification.height,
+ shapes,
+ pointToProjection: this.pointToProjection,
+ mirror: modification.direction && modification.direction === 'RIGHT',
+ });
+ this.polygons.push(...multiPolygonModification);
+ multiPolygonModification.forEach((polygon: Polygon) => {
+ const modificationStyle = new Style({
+ geometry: polygon,
+ stroke: getStroke({ color: rgbToHex(modification.borderColor) }),
+ fill: getFill({ color: rgbToHex(modification.fillColor) }),
+ zIndex: modification.z,
+ });
+ const modificationText = modification.stateAbbreviation
+ ? modification.stateAbbreviation
+ : modification.name;
+ if (modificationText) {
+ modificationStyle.setText(
+ new Text({
+ text: modificationText,
+ font: `${modification.fontSize}pt Arial`,
+ textAlign: 'center',
+ textBaseline: 'middle',
+ fill: getFill({ color: '#000' }),
+ overflow: true,
+ }),
+ );
+ this.polygonsTexts.push(modificationText);
+ }
+ this.styles.push(modificationStyle);
+ });
+ }
+
drawActiveBorder(homodimerShift: number, homodimerOffset: number): void {
const activityBorderElement = getMultiPolygon({
x: this.x + homodimerShift - 5,
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getMultiPolygon.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getMultiPolygon.test.ts
index dbe051bd31e7812e40e29baf8487387202fe57ff..b4d697f3bfa5d3888af75c238ca1d2231716c803 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getMultiPolygon.test.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getMultiPolygon.test.ts
@@ -115,6 +115,8 @@ describe('getMultiPolygon', () => {
absoluteY: -7.0,
relativeX: 50.0,
relativeY: 50.0,
+ relativeHeightForX: null,
+ relativeWidthForY: null,
},
},
];
@@ -171,6 +173,8 @@ describe('getMultiPolygon', () => {
absoluteY: -7.0,
relativeX: 50.0,
relativeY: 50.0,
+ relativeHeightForX: null,
+ relativeWidthForY: null,
},
},
{
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getStyle.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getStyle.ts
index 62f1615786437795cdaa34e9e920d629fe67d53a..6c98bf802207863a86679b0f3a9e43c95f80d0f3 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getStyle.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getStyle.ts
@@ -7,8 +7,8 @@ import {
BLACK_COLOR,
WHITE_COLOR,
} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants';
-import { ColorObject } from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
import getFill from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getFill';
+import { Color } from '@/types/models';
export default function getStyle({
geometry,
@@ -19,8 +19,8 @@ export default function getStyle({
zIndex = 1,
}: {
geometry?: Geometry;
- borderColor?: ColorObject;
- fillColor?: ColorObject;
+ borderColor?: Color;
+ fillColor?: Color;
lineWidth?: number;
lineDash?: Array<number>;
zIndex?: number;
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/rgbToHex.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/rgbToHex.test.ts
index 7c92f413ac1c369b46681b30ca37fd40e0749260..a7112899e8ff70907be03db382f29f4bdbdbf73c 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/rgbToHex.test.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/rgbToHex.test.ts
@@ -1,9 +1,9 @@
-import { ColorObject } from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
+import { Color } from '@/types/models';
import { rgbToHex } from './rgbToHex';
describe('rgbToHex', () => {
it('should correctly convert RGB and alpha values to hex', () => {
- const color: ColorObject = {
+ const color: Color = {
rgb: -16222216,
alpha: 255,
};
@@ -14,7 +14,7 @@ describe('rgbToHex', () => {
});
it('should correctly handle alpha values less than 255', () => {
- const color: ColorObject = {
+ const color: Color = {
rgb: -16777216,
alpha: 128,
};
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/rgbToHex.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/rgbToHex.ts
index 1fe9df8418b92bcd0a942a13b23155d299c76fdc..eb3f28e86ddcef58913c7e47f88e4296811e0dab 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/rgbToHex.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/rgbToHex.ts
@@ -1,7 +1,8 @@
/* eslint-disable no-magic-numbers */
-import { ColorObject } from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
-export function rgbToHex(color: ColorObject): string {
+import { Color } from '@/types/models';
+
+export function rgbToHex(color: Color): string {
const positiveRgb = color.rgb < 0 ? color.rgb + 0x100000000 : color.rgb;
const hexRgb = positiveRgb.toString(16).slice(-6).padStart(6, '0').toUpperCase();
const hexAlpha = color.alpha.toString(16).padStart(2, '0').toUpperCase();
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/text/Text.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/text/Text.ts
index 687cf2fc76e8607c47b4159b0e3f18a6d3202b47..d1ca669968c33476a1c1e2e43490fbf41f89e88a 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/text/Text.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/text/Text.ts
@@ -1,6 +1,5 @@
/* eslint-disable no-magic-numbers */
import {
- ColorObject,
HorizontalAlign,
VerticalAlign,
} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
@@ -13,6 +12,7 @@ import { FeatureLike } from 'ol/Feature';
import { MapInstance } from '@/types/map';
import getTextCoords from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextCoords';
import getTextStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextStyle';
+import { Color } from '@/types/models';
export interface TextProps {
x: number;
@@ -22,7 +22,7 @@ export interface TextProps {
zIndex: number;
text: string;
fontSize: number;
- fontColor: ColorObject;
+ fontColor: Color;
verticalAlign: VerticalAlign;
horizontalAlign: HorizontalAlign;
pointToProjection: UsePointToProjectionResult;
diff --git a/src/models/shapeEllipseSchema.ts b/src/models/shapeEllipseSchema.ts
index 36059a6abde49caf9cba39518a9a6821ca9ec306..920940192e207b79b9619ac8d461a07da5bc5bc7 100644
--- a/src/models/shapeEllipseSchema.ts
+++ b/src/models/shapeEllipseSchema.ts
@@ -1,9 +1,8 @@
import { z } from 'zod';
-import { shapeRelAbsPointSchema } from '@/models/shapeRelAbsPointSchema';
-import { shapeRelAbsRadiusSchema } from '@/models/shapeRelAbsRadiusSchema';
+import { shapeRelAbsSchema } from '@/models/shapeRelAbsSchema';
export const shapeEllipseSchema = z.object({
type: z.literal('ELLIPSE'),
- center: shapeRelAbsPointSchema,
- radius: shapeRelAbsRadiusSchema,
+ center: shapeRelAbsSchema,
+ radius: shapeRelAbsSchema,
});
diff --git a/src/models/shapePolygonSchema.ts b/src/models/shapePolygonSchema.ts
index ef39a4ee9319b9affb7deae4f7ade6767860fa15..d7e2c59d8a2dc7d559c34d3ff6f8c4ce24df6dec 100644
--- a/src/models/shapePolygonSchema.ts
+++ b/src/models/shapePolygonSchema.ts
@@ -1,8 +1,8 @@
import { z } from 'zod';
import { shapeRelAbsBezierPointSchema } from '@/models/shapeRelAbsBezierPointSchema';
-import { shapeRelAbsPointSchema } from '@/models/shapeRelAbsPointSchema';
+import { shapeRelAbsSchema } from '@/models/shapeRelAbsSchema';
export const shapePolygonSchema = z.object({
type: z.literal('POLYGON'),
- points: z.array(z.union([shapeRelAbsPointSchema, shapeRelAbsBezierPointSchema])),
+ points: z.array(z.union([shapeRelAbsSchema, shapeRelAbsBezierPointSchema])),
});
diff --git a/src/models/shapeRelAbsRadiusSchema.ts b/src/models/shapeRelAbsRadiusSchema.ts
deleted file mode 100644
index 6050859d0756ce6941822e74be36baa56e602f32..0000000000000000000000000000000000000000
--- a/src/models/shapeRelAbsRadiusSchema.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { z } from 'zod';
-
-export const shapeRelAbsRadiusSchema = z.object({
- type: z.literal('REL_ABS_RADIUS'),
- absoluteX: z.number(),
- absoluteY: z.number(),
- relativeX: z.number(),
- relativeY: z.number(),
-});
diff --git a/src/models/shapeRelAbsPointSchema.ts b/src/models/shapeRelAbsSchema.ts
similarity index 69%
rename from src/models/shapeRelAbsPointSchema.ts
rename to src/models/shapeRelAbsSchema.ts
index 26bc59a9361bf676be30ce70d18b4752b4837363..18d5ad044aceed4b91790b07939830881262b28f 100644
--- a/src/models/shapeRelAbsPointSchema.ts
+++ b/src/models/shapeRelAbsSchema.ts
@@ -1,7 +1,7 @@
import { z } from 'zod';
-export const shapeRelAbsPointSchema = z.object({
- type: z.literal('REL_ABS_POINT'),
+export const shapeRelAbsSchema = z.object({
+ type: z.enum(['REL_ABS_POINT', 'REL_ABS_RADIUS']),
absoluteX: z.number(),
absoluteY: z.number(),
relativeX: z.number(),
diff --git a/src/types/models.ts b/src/types/models.ts
index 13dd6e2892a7b1d5f4c7b7790b56284d73172e74..e06cbbfb37ca0ef89973fb8e58786ab31e2cc645 100644
--- a/src/types/models.ts
+++ b/src/types/models.ts
@@ -78,6 +78,8 @@ import { layerOvalSchema } from '@/models/layerOvalSchema';
import { layerLineSchema } from '@/models/layerLineSchema';
import { arrowTypeSchema } from '@/models/arrowTypeSchema';
import { arrowSchema } from '@/models/arrowSchema';
+import { shapeRelAbsSchema } from '@/models/shapeRelAbsSchema';
+import { shapeRelAbsBezierPointSchema } from '@/models/shapeRelAbsBezierPointSchema';
export type Project = z.infer<typeof projectSchema>;
export type OverviewImageView = z.infer<typeof overviewImageView>;
@@ -100,6 +102,8 @@ const modelElementsSchema = pageableSchema(modelElementSchema);
export type ModelElements = z.infer<typeof modelElementsSchema>;
export type ModelElement = z.infer<typeof modelElementSchema>;
export type Shape = z.infer<typeof shapeSchema>;
+export type ShapeRelAbs = z.infer<typeof shapeRelAbsSchema>;
+export type ShapeRelAbsBezierPoint = z.infer<typeof shapeRelAbsBezierPointSchema>;
export type Modification = z.infer<typeof modelElementModificationSchema>;
export type MapOverlay = z.infer<typeof mapOverlay>;
export type MapBackground = z.infer<typeof mapBackground>;