Factor out AttachmentTransform component.
rodzic
95800b880c
commit
b2c073fa7c
|
@ -9,6 +9,7 @@ import {
|
|||
import { AttachmentPointType, PointWithNormal } from "../specs";
|
||||
import { getAttachmentTransforms } from "../attach";
|
||||
import { scalePointXY } from "../point";
|
||||
import { Point } from "../../vendor/bezier-js";
|
||||
|
||||
const SYMBOL_MAP = new Map(
|
||||
SvgVocabulary.map((symbol) => [symbol.name, symbol])
|
||||
|
@ -124,19 +125,36 @@ const CreatureSymbol: React.FC<CreatureSymbolProps> = (props) => {
|
|||
});
|
||||
|
||||
return (
|
||||
<g transform={`translate(${t.translation.x} ${t.translation.y})`}>
|
||||
<g
|
||||
transform-origin={`${ourAp.point.x} ${ourAp.point.y}`}
|
||||
transform={`scale(${xFlip * ctx.attachmentScale} ${
|
||||
ctx.attachmentScale
|
||||
}) rotate(${xFlip * t.rotation + extraRot})`}
|
||||
<AttachmentTransform
|
||||
transformOrigin={ourAp.point}
|
||||
translate={t.translation}
|
||||
scale={{ x: ctx.attachmentScale * xFlip, y: ctx.attachmentScale }}
|
||||
rotate={xFlip * t.rotation + extraRot}
|
||||
>
|
||||
{ourSymbol}
|
||||
</g>
|
||||
</g>
|
||||
</AttachmentTransform>
|
||||
);
|
||||
};
|
||||
|
||||
type AttachmentTransformProps = {
|
||||
transformOrigin: Point;
|
||||
translate: Point;
|
||||
scale: Point;
|
||||
rotate: number;
|
||||
children: JSX.Element;
|
||||
};
|
||||
|
||||
const AttachmentTransform: React.FC<AttachmentTransformProps> = (props) => (
|
||||
<g transform={`translate(${props.translate.x} ${props.translate.y})`}>
|
||||
<g
|
||||
transform-origin={`${props.transformOrigin.x} ${props.transformOrigin.y}`}
|
||||
transform={`scale(${props.scale.x} ${props.scale.y}) rotate(${props.rotate})`}
|
||||
>
|
||||
{props.children}
|
||||
</g>
|
||||
</g>
|
||||
);
|
||||
|
||||
function createCreatureSymbol(
|
||||
name: string
|
||||
): React.FC<Omit<CreatureSymbolProps, "data">> {
|
||||
|
|
Ładowanie…
Reference in New Issue