mirror/FossFLOW
1
0
Fork 0
mirror of https://github.com/stan-smith/FossFLOW.git synced 2025-12-24 06:58:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: implements connector direction icon

Browse Source
This commit is contained in:
Mark Mankarious
2023-10-31 13:01:20 +00:00
parent 8d98b84213
commit eeaaad93c5
2 changed files with 75 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/SceneLayers/Connectors/Connector.tsx
View File

@@ -1,7 +1,11 @@
import React, { useMemo } from 'react';
import { useTheme, Box } from '@mui/material';
import { UNPROJECTED_TILE_SIZE } from 'src/config';
import { getAnchorTile, CoordsUtils, getColorVariant } from 'src/utils';
import {
getAnchorTile,
getColorVariant,
getConnectorDirectionIcon
} from 'src/utils';
import { Circle } from 'src/components/Circle/Circle';
import { Svg } from 'src/components/Svg/Svg';
import { useIsoProjection } from 'src/hooks/useIsoProjection';
@@ -45,12 +49,19 @@ export const Connector = ({ connector: _connector }: Props) => {
id: anchor.id,
x:
(connector.path.rectangle.from.x - position.x) *
UNPROJECTED_TILE_SIZE,
UNPROJECTED_TILE_SIZE +
drawOffset.x,
y:
(connector.path.rectangle.from.y - position.y) * UNPROJECTED_TILE_SIZE
(connector.path.rectangle.from.y - position.y) *
UNPROJECTED_TILE_SIZE +
drawOffset.y
};
});
}, [currentView, connector.path.rectangle, connector.anchors]);
}, [currentView, connector.path.rectangle, connector.anchors, drawOffset]);
const directionIcon = useMemo(() => {
return getConnectorDirectionIcon(connector.path.tiles);
}, [connector.path.tiles]);
const connectorWidthPx = useMemo(() => {
return (UNPROJECTED_TILE_SIZE / 100) * connector.width;
@@ -103,13 +114,13 @@ export const Connector = ({ connector: _connector }: Props) => {
return (
<g key={anchor.id}>
<Circle
tile={CoordsUtils.add(anchor, drawOffset)}
tile={anchor}
radius={18}
fill={theme.palette.common.white}
fillOpacity={0.7}
/>
<Circle
tile={CoordsUtils.add(anchor, drawOffset)}
tile={anchor}
radius={12}
stroke={theme.palette.common.black}
fill={theme.palette.common.white}
@@ -118,6 +129,19 @@ export const Connector = ({ connector: _connector }: Props) => {
</g>
);
})}
{directionIcon && (
<g transform={`translate(${directionIcon.x}, ${directionIcon.y})`}>
<g transform={`rotate(${directionIcon.rotation})`}>
<polygon
fill="black"
stroke={theme.palette.common.white}
strokeWidth={4}
points="17.58,17.01 0,-17.01 -17.58,17.01"
/>
</g>
</g>
)}
</Svg>
</Box>
);

45
src/utils/renderer.ts
View File

@@ -602,3 +602,48 @@ export const getConnectorsByViewItem = (
});
});
};
export const getConnectorDirectionIcon = (connectorTiles: Coords[]) => {
if (connectorTiles.length < 2) return null;
const iconTile = connectorTiles[connectorTiles.length - 2];
const lastTile = connectorTiles[connectorTiles.length - 1];
let rotation;
if (lastTile.x > iconTile.x) {
if (lastTile.y > iconTile.y) {
rotation = 135;
} else if (lastTile.y < iconTile.y) {
rotation = 45;
} else {
rotation = 90;
}
}
if (lastTile.x < iconTile.x) {
if (lastTile.y > iconTile.y) {
rotation = -135;
} else if (lastTile.y < iconTile.y) {
rotation = -45;
} else {
rotation = -90;
}
}
if (lastTile.x === iconTile.x) {
if (lastTile.y > iconTile.y) {
rotation = 180;
} else if (lastTile.y < iconTile.y) {
rotation = 0;
} else {
rotation = -90;
}
}
return {
x: iconTile.x * UNPROJECTED_TILE_SIZE + UNPROJECTED_TILE_SIZE / 2,
y: iconTile.y * UNPROJECTED_TILE_SIZE + UNPROJECTED_TILE_SIZE / 2,
rotation
};
};