diff --git a/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineEditFactoryModal.component.tsx b/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineEditFactoryModal.component.tsx
index 6924c0382e9cadf0ff906da90b5474141f5a0421..61a9137c19ca485348add07ccd8570b8bd52c94e 100644
--- a/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineEditFactoryModal.component.tsx
+++ b/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineEditFactoryModal.component.tsx
@@ -52,7 +52,9 @@ export const LayerLineEditFactoryModal: React.FC = () => {
lineType: layerLine.lineType,
width: layerLine.width,
startArrow: layerLine.startArrow.arrowType,
+ startArrowScale: +(layerLine.startArrow.length / DEFAULT_ARROW_LENGTH).toFixed(2),
endArrow: layerLine.endArrow.arrowType,
+ endArrowScale: +(layerLine.endArrow.length / DEFAULT_ARROW_LENGTH).toFixed(2),
});
const getDataToSend = (): LayerLineFactoryPayload => {
@@ -64,13 +66,13 @@ export const LayerLineEditFactoryModal: React.FC = () => {
arrowType: data.startArrow,
angle: DEFAULT_ARROW_ANGLE,
lineType: DEFAULT_ARROW_LINE_TYPE,
- length: DEFAULT_ARROW_LENGTH,
+ length: DEFAULT_ARROW_LENGTH * data.startArrowScale,
},
endArrow: {
arrowType: data.endArrow,
angle: DEFAULT_ARROW_ANGLE,
lineType: DEFAULT_ARROW_LINE_TYPE,
- length: DEFAULT_ARROW_LENGTH,
+ length: DEFAULT_ARROW_LENGTH * data.endArrowScale,
},
segments: layerLine.segments,
z: layerLine.z,
diff --git a/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineFactory.constants.ts b/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineFactory.constants.ts
index 451a70008369003755c2d67f9a67b1a28b08e640..516d074d200a57519aa4ce937c6948da830eacb0 100644
--- a/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineFactory.constants.ts
+++ b/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineFactory.constants.ts
@@ -2,10 +2,16 @@ export const MAX_LINE_WIDTH = 48;
export const MIN_LINE_WIDTH = 1;
+export const MAX_ARROW_SCALE = 50;
+
+export const MIN_ARROW_SCALE = 0.1;
+
export const DEFAULT_LINE_TYPE = 'SOLID';
export const DEFAULT_ARROW = 'NONE';
+export const DEFAULT_ARROW_SCALE = 1;
+
export const DEFAULT_ARROW_LENGTH = 15;
export const DEFAULT_ARROW_ANGLE = 2.748893571891069;
diff --git a/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineFactory.types.ts b/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineFactory.types.ts
index 1282cbbace98d9e43afa96d67ecad57ef526e08f..c1380f3b1849f12a4f732dad9f6cca1a629cc1a7 100644
--- a/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineFactory.types.ts
+++ b/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineFactory.types.ts
@@ -5,7 +5,9 @@ export type LayerLineFactoryForm = {
lineType: string;
width: number;
startArrow: string;
+ startArrowScale: number;
endArrow: string;
+ endArrowScale: number;
};
export type LayerLineFactoryPayload = {
diff --git a/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineFactoryModal.component.tsx b/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineFactoryModal.component.tsx
index aa68b84675a190c9659fbd54cf2b8c90f6514a0e..3b7e1b43d9130663a29abe08a7e70ec66368c12b 100644
--- a/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineFactoryModal.component.tsx
+++ b/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineFactoryModal.component.tsx
@@ -32,6 +32,7 @@ import {
DEFAULT_ARROW_ANGLE,
DEFAULT_ARROW_LENGTH,
DEFAULT_ARROW_LINE_TYPE,
+ DEFAULT_ARROW_SCALE,
DEFAULT_LINE_TYPE,
MIN_LINE_WIDTH,
} from '@/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineFactory.constants';
@@ -58,7 +59,9 @@ export const LayerLineFactoryModal: React.FC = () => {
lineType: DEFAULT_LINE_TYPE,
width: MIN_LINE_WIDTH,
startArrow: DEFAULT_ARROW,
+ startArrowScale: DEFAULT_ARROW_SCALE,
endArrow: DEFAULT_ARROW,
+ endArrowScale: DEFAULT_ARROW_SCALE,
});
const getDataToSend = (): LayerLineFactoryPayload => {
@@ -70,13 +73,13 @@ export const LayerLineFactoryModal: React.FC = () => {
arrowType: data.startArrow,
angle: DEFAULT_ARROW_ANGLE,
lineType: DEFAULT_ARROW_LINE_TYPE,
- length: DEFAULT_ARROW_LENGTH,
+ length: DEFAULT_ARROW_LENGTH * data.startArrowScale,
},
endArrow: {
arrowType: data.endArrow,
angle: DEFAULT_ARROW_ANGLE,
lineType: DEFAULT_ARROW_LINE_TYPE,
- length: DEFAULT_ARROW_LENGTH,
+ length: DEFAULT_ARROW_LENGTH * data.endArrowScale,
},
segments: layerLineFactoryState || [],
z: maxZIndex + 1,
diff --git a/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineForm.component.tsx b/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineForm.component.tsx
index f77f23c92a1b9091e3d2eed2383870d1e2af919f..d805e58b1bfa6eba15e2d482954858e0e502f2b0 100644
--- a/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineForm.component.tsx
+++ b/src/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineForm.component.tsx
@@ -7,7 +7,9 @@ import { Select } from '@/shared/Select';
import React from 'react';
import { Input } from '@/shared/Input';
import {
+ MAX_ARROW_SCALE,
MAX_LINE_WIDTH,
+ MIN_ARROW_SCALE,
MIN_LINE_WIDTH,
} from '@/components/FunctionalArea/Modal/LayerLineFactoryModal/LayerLineFactory.constants';
@@ -36,6 +38,18 @@ export const LayerLineForm = ({
onChange(resultValue, 'width');
};
+ const onArrowScaleChange = (event: React.ChangeEvent<HTMLInputElement>, key: string): void => {
+ const value = Number(event.target.value);
+ let resultValue = value;
+ if (value < MIN_ARROW_SCALE) {
+ resultValue = MIN_ARROW_SCALE;
+ }
+ if (value > MAX_ARROW_SCALE) {
+ resultValue = MAX_ARROW_SCALE;
+ }
+ onChange(resultValue, key);
+ };
+
return (
<div className="grid grid-cols-3 gap-2">
<div>
@@ -69,26 +83,58 @@ export const LayerLineForm = ({
/>
</div>
- <div>
- <span>Start arrow:</span>
- <Select
- options={arrowTypes}
- selectedId={data.startArrow}
- listClassName="max-h-48"
- testId="font-size-select"
- onChange={value => onChange(value, 'startArrow')}
- />
+ <div className="grid grid-cols-1 gap-2">
+ <div>
+ <span>Start arrow:</span>
+ <Select
+ options={arrowTypes}
+ selectedId={data.startArrow}
+ listClassName="max-h-48"
+ testId="font-size-select"
+ onChange={value => onChange(value, 'startArrow')}
+ />
+ </div>
+ <div>
+ <span>Start arrow scale:</span>
+ <Input
+ type="number"
+ name="line-width"
+ min={MIN_ARROW_SCALE}
+ max={MAX_ARROW_SCALE}
+ id="start-arrow-scale"
+ step={0.1}
+ value={data.startArrowScale}
+ onChange={event => onArrowScaleChange(event, 'startArrowScale')}
+ className="text-sm font-medium text-font-400"
+ />
+ </div>
</div>
- <div>
- <span>End arrow:</span>
- <Select
- options={arrowTypes}
- selectedId={data.endArrow}
- listClassName="max-h-48"
- testId="font-size-select"
- onChange={value => onChange(value, 'endArrow')}
- />
+ <div className="grid grid-cols-1 gap-2">
+ <div>
+ <span>End arrow:</span>
+ <Select
+ options={arrowTypes}
+ selectedId={data.endArrow}
+ listClassName="max-h-48"
+ testId="font-size-select"
+ onChange={value => onChange(value, 'endArrow')}
+ />
+ </div>
+ <div>
+ <span>End arrow scale:</span>
+ <Input
+ type="number"
+ name="line-width"
+ min={MIN_ARROW_SCALE}
+ max={MAX_ARROW_SCALE}
+ id="end-arrow-scale"
+ step={0.1}
+ value={data.endArrowScale}
+ onChange={event => onArrowScaleChange(event, 'endArrowScale')}
+ className="text-sm font-medium text-font-400"
+ />
+ </div>
</div>
</div>
);