Add symbol scaling/rotation options.

pull/63/head
Atul Varma 2021-03-28 16:22:36 -04:00
rodzic 05c44eeb51
commit b70ec50e3a
2 zmienionych plików z 47 dodań i 11 usunięć

Wyświetl plik

@ -32,6 +32,8 @@ import { Checkbox } from "../checkbox";
type ExtendedMandalaCircleParams = MandalaCircleParams & { type ExtendedMandalaCircleParams = MandalaCircleParams & {
scaling: number; scaling: number;
rotation: number; rotation: number;
symbolScaling: number;
symbolRotation: number;
}; };
const CIRCLE_1_DEFAULTS: ExtendedMandalaCircleParams = { const CIRCLE_1_DEFAULTS: ExtendedMandalaCircleParams = {
@ -40,6 +42,8 @@ const CIRCLE_1_DEFAULTS: ExtendedMandalaCircleParams = {
numSymbols: 6, numSymbols: 6,
scaling: 1, scaling: 1,
rotation: 0, rotation: 0,
symbolScaling: 1,
symbolRotation: 0,
}; };
const CIRCLE_2_DEFAULTS: ExtendedMandalaCircleParams = { const CIRCLE_2_DEFAULTS: ExtendedMandalaCircleParams = {
@ -48,6 +52,8 @@ const CIRCLE_2_DEFAULTS: ExtendedMandalaCircleParams = {
numSymbols: 3, numSymbols: 3,
scaling: 0.5, scaling: 0.5,
rotation: 0, rotation: 0,
symbolScaling: 1,
symbolRotation: 0,
}; };
const RADIUS: NumericRange = { const RADIUS: NumericRange = {
@ -93,11 +99,12 @@ type MandalaCircleParams = {
data: SvgSymbolData; data: SvgSymbolData;
radius: number; radius: number;
numSymbols: number; numSymbols: number;
symbolTransforms?: SvgTransform[];
}; };
const MandalaCircle: React.FC<MandalaCircleParams & SvgSymbolContext> = ( type MandalaCircleProps = MandalaCircleParams & SvgSymbolContext;
props
) => { const MandalaCircle: React.FC<MandalaCircleProps> = (props) => {
const degreesPerItem = 360 / props.numSymbols; const degreesPerItem = 360 / props.numSymbols;
const { translation, rotation } = getAttachmentTransforms( const { translation, rotation } = getAttachmentTransforms(
{ {
@ -110,7 +117,17 @@ const MandalaCircle: React.FC<MandalaCircleParams & SvgSymbolContext> = (
const symbol = ( const symbol = (
<SvgTransform <SvgTransform
transform={[ transform={[
// Remember that transforms are applied in reverse order,
// so read the following from the end first!
// Finally, move the symbol out along the radius of the circle.
svgTranslate({ x: 0, y: -props.radius }), svgTranslate({ x: 0, y: -props.radius }),
// Then apply any individual symbol transformations.
...(props.symbolTransforms || []),
// First, re-orient the symbol so its anchor point is at
// the origin and facing the proper direction.
svgRotate(rotation), svgRotate(rotation),
svgTranslate(translation), svgTranslate(translation),
]} ]}
@ -134,13 +151,18 @@ const MandalaCircle: React.FC<MandalaCircleParams & SvgSymbolContext> = (
const ExtendedMandalaCircle: React.FC< const ExtendedMandalaCircle: React.FC<
ExtendedMandalaCircleParams & SvgSymbolContext ExtendedMandalaCircleParams & SvgSymbolContext
> = (props) => ( > = ({ scaling, rotation, symbolScaling, symbolRotation, ...props }) => {
<SvgTransform props = {
transform={[svgScale(props.scaling), svgRotate(props.rotation)]} ...props,
> symbolTransforms: [svgScale(symbolScaling), svgRotate(symbolRotation)],
<MandalaCircle {...props} /> };
</SvgTransform>
); return (
<SvgTransform transform={[svgScale(scaling), svgRotate(rotation)]}>
<MandalaCircle {...props} />
</SvgTransform>
);
};
const ExtendedMandalaCircleParamsWidget: React.FC<{ const ExtendedMandalaCircleParamsWidget: React.FC<{
idPrefix: string; idPrefix: string;
@ -184,6 +206,20 @@ const ExtendedMandalaCircleParamsWidget: React.FC<{
onChange={(rotation) => onChange({ ...value, rotation })} onChange={(rotation) => onChange({ ...value, rotation })}
{...ROTATION} {...ROTATION}
/> />
<NumericSlider
id={`${idPrefix}symbolScaling`}
label="Symbol scaling"
value={value.symbolScaling}
onChange={(symbolScaling) => onChange({ ...value, symbolScaling })}
{...SCALING}
/>
<NumericSlider
id={`${idPrefix}symbolRotation`}
label="Symbol rotation"
value={value.symbolRotation}
onChange={(symbolRotation) => onChange({ ...value, symbolRotation })}
{...ROTATION}
/>
</div> </div>
); );
}; };

Wyświetl plik

@ -2,7 +2,7 @@ import React from "react";
import { Point } from "../vendor/bezier-js"; import { Point } from "../vendor/bezier-js";
import { reversePoint } from "./point"; import { reversePoint } from "./point";
type SvgTransform = export type SvgTransform =
| { | {
kind: "translate"; kind: "translate";
amount: Point; amount: Point;