Add symbol scaling/rotation options.
rodzic
05c44eeb51
commit
b70ec50e3a
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Ładowanie…
Reference in New Issue