2021-04-04 12:34:29 +00:00
|
|
|
import React, { useRef, useState } from "react";
|
2021-03-26 22:07:01 +00:00
|
|
|
import { AutoSizingSvg } from "../auto-sizing-svg";
|
2021-03-29 11:22:09 +00:00
|
|
|
import { ExportWidget } from "../export-svg";
|
2021-03-26 22:07:01 +00:00
|
|
|
import { HoverDebugHelper } from "../hover-debug-helper";
|
2021-03-27 11:39:21 +00:00
|
|
|
import { NumericSlider } from "../numeric-slider";
|
2021-03-26 22:07:01 +00:00
|
|
|
import {
|
2021-03-29 12:23:53 +00:00
|
|
|
noFillIfShowingSpecs,
|
2021-03-26 22:07:01 +00:00
|
|
|
SvgSymbolContext,
|
2021-03-28 12:27:57 +00:00
|
|
|
swapColors,
|
2021-03-26 22:07:01 +00:00
|
|
|
} from "../svg-symbol";
|
2021-03-27 12:29:42 +00:00
|
|
|
import { VocabularyWidget } from "../vocabulary-widget";
|
2021-04-03 22:47:43 +00:00
|
|
|
import { svgRotate, svgScale, SvgTransform } from "../svg-transform";
|
2021-03-27 12:29:42 +00:00
|
|
|
import { SvgVocabulary } from "../svg-vocabulary";
|
2021-04-04 12:46:09 +00:00
|
|
|
import { isEvenNumber, NumericRange } from "../util";
|
2021-03-27 19:19:36 +00:00
|
|
|
import { Random } from "../random";
|
2021-03-28 12:27:57 +00:00
|
|
|
import { Checkbox } from "../checkbox";
|
2021-04-02 20:33:07 +00:00
|
|
|
import {
|
|
|
|
CompositionContextWidget,
|
|
|
|
createSvgCompositionContext,
|
|
|
|
} from "../svg-composition-context";
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
import { Page } from "../page";
|
2021-04-03 22:47:43 +00:00
|
|
|
import { MandalaCircle, MandalaCircleParams } from "../mandala-circle";
|
2021-04-04 12:34:29 +00:00
|
|
|
import { useAnimationPct } from "../animation";
|
2021-03-26 22:07:01 +00:00
|
|
|
|
2021-03-28 13:14:54 +00:00
|
|
|
type ExtendedMandalaCircleParams = MandalaCircleParams & {
|
|
|
|
scaling: number;
|
|
|
|
rotation: number;
|
2021-03-28 20:22:36 +00:00
|
|
|
symbolScaling: number;
|
|
|
|
symbolRotation: number;
|
2021-04-03 21:01:13 +00:00
|
|
|
animateSymbolRotation: boolean;
|
2021-03-28 13:14:54 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const CIRCLE_1_DEFAULTS: ExtendedMandalaCircleParams = {
|
2021-03-29 10:54:36 +00:00
|
|
|
data: SvgVocabulary.get("eye"),
|
|
|
|
radius: 300,
|
|
|
|
numSymbols: 5,
|
2021-03-28 13:14:54 +00:00
|
|
|
scaling: 1,
|
|
|
|
rotation: 0,
|
2021-03-28 20:22:36 +00:00
|
|
|
symbolScaling: 1,
|
|
|
|
symbolRotation: 0,
|
2021-03-29 19:23:37 +00:00
|
|
|
invertEveryOtherSymbol: false,
|
2021-04-03 21:01:13 +00:00
|
|
|
animateSymbolRotation: false,
|
2021-03-28 12:27:57 +00:00
|
|
|
};
|
|
|
|
|
2021-03-28 13:14:54 +00:00
|
|
|
const CIRCLE_2_DEFAULTS: ExtendedMandalaCircleParams = {
|
2021-03-28 12:27:57 +00:00
|
|
|
data: SvgVocabulary.get("leg"),
|
|
|
|
radius: 0,
|
|
|
|
numSymbols: 3,
|
2021-03-28 13:14:54 +00:00
|
|
|
scaling: 0.5,
|
|
|
|
rotation: 0,
|
2021-03-28 20:22:36 +00:00
|
|
|
symbolScaling: 1,
|
|
|
|
symbolRotation: 0,
|
2021-03-29 19:23:37 +00:00
|
|
|
invertEveryOtherSymbol: false,
|
2021-04-03 21:01:13 +00:00
|
|
|
animateSymbolRotation: false,
|
2021-03-28 12:27:57 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const RADIUS: NumericRange = {
|
2021-03-28 13:14:54 +00:00
|
|
|
min: -500,
|
|
|
|
max: 500,
|
2021-03-28 12:27:57 +00:00
|
|
|
step: 1,
|
|
|
|
};
|
|
|
|
|
|
|
|
const NUM_SYMBOLS: NumericRange = {
|
|
|
|
min: 1,
|
2021-04-02 19:37:58 +00:00
|
|
|
max: 20,
|
2021-03-28 12:27:57 +00:00
|
|
|
step: 1,
|
|
|
|
};
|
|
|
|
|
2021-03-28 13:14:54 +00:00
|
|
|
const SCALING: NumericRange = {
|
2021-03-28 12:27:57 +00:00
|
|
|
min: 0.1,
|
2021-03-28 13:14:54 +00:00
|
|
|
max: 1,
|
|
|
|
step: 0.05,
|
|
|
|
};
|
|
|
|
|
|
|
|
const ROTATION: NumericRange = {
|
|
|
|
min: 0,
|
|
|
|
max: 359,
|
|
|
|
step: 1,
|
2021-03-28 12:27:57 +00:00
|
|
|
};
|
2021-03-28 11:24:16 +00:00
|
|
|
|
2021-04-04 12:34:29 +00:00
|
|
|
const DURATION_SECS: NumericRange = {
|
|
|
|
min: 0.5,
|
|
|
|
max: 10,
|
|
|
|
step: 0.1,
|
|
|
|
};
|
|
|
|
|
|
|
|
const DEFAULT_DURATION_SECS = 3;
|
|
|
|
|
2021-03-28 13:14:54 +00:00
|
|
|
const ExtendedMandalaCircle: React.FC<
|
|
|
|
ExtendedMandalaCircleParams & SvgSymbolContext
|
2021-03-28 20:22:36 +00:00
|
|
|
> = ({ scaling, rotation, symbolScaling, symbolRotation, ...props }) => {
|
|
|
|
props = {
|
|
|
|
...props,
|
|
|
|
symbolTransforms: [svgScale(symbolScaling), svgRotate(symbolRotation)],
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<SvgTransform transform={[svgScale(scaling), svgRotate(rotation)]}>
|
|
|
|
<MandalaCircle {...props} />
|
|
|
|
</SvgTransform>
|
|
|
|
);
|
|
|
|
};
|
2021-03-28 13:14:54 +00:00
|
|
|
|
2021-04-03 21:01:13 +00:00
|
|
|
function animateMandalaCircleParams(
|
|
|
|
value: ExtendedMandalaCircleParams,
|
2021-04-04 12:34:29 +00:00
|
|
|
animPct: number
|
2021-04-03 21:01:13 +00:00
|
|
|
): ExtendedMandalaCircleParams {
|
|
|
|
if (value.animateSymbolRotation) {
|
|
|
|
value = {
|
|
|
|
...value,
|
2021-04-04 12:34:29 +00:00
|
|
|
symbolRotation: animPct * ROTATION.max,
|
2021-04-03 21:01:13 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
return value;
|
|
|
|
}
|
|
|
|
|
|
|
|
function isAnyMandalaCircleAnimated(
|
|
|
|
values: ExtendedMandalaCircleParams[]
|
|
|
|
): boolean {
|
|
|
|
return values.some((value) => value.animateSymbolRotation);
|
|
|
|
}
|
|
|
|
|
2021-03-28 13:14:54 +00:00
|
|
|
const ExtendedMandalaCircleParamsWidget: React.FC<{
|
2021-03-28 12:27:57 +00:00
|
|
|
idPrefix: string;
|
2021-03-28 13:14:54 +00:00
|
|
|
value: ExtendedMandalaCircleParams;
|
|
|
|
onChange: (value: ExtendedMandalaCircleParams) => void;
|
2021-03-28 12:27:57 +00:00
|
|
|
}> = ({ idPrefix, value, onChange }) => {
|
|
|
|
return (
|
|
|
|
<div className="thingy">
|
|
|
|
<VocabularyWidget
|
|
|
|
id={`${idPrefix}symbol`}
|
|
|
|
label="Symbol"
|
|
|
|
value={value.data}
|
|
|
|
onChange={(data) => onChange({ ...value, data })}
|
|
|
|
choices={SvgVocabulary}
|
|
|
|
/>
|
|
|
|
<NumericSlider
|
|
|
|
id={`${idPrefix}radius`}
|
|
|
|
label="Radius"
|
|
|
|
value={value.radius}
|
|
|
|
onChange={(radius) => onChange({ ...value, radius })}
|
|
|
|
{...RADIUS}
|
|
|
|
/>
|
|
|
|
<NumericSlider
|
|
|
|
id={`${idPrefix}numSymbols`}
|
|
|
|
label="Number of symbols"
|
|
|
|
value={value.numSymbols}
|
|
|
|
onChange={(numSymbols) => onChange({ ...value, numSymbols })}
|
|
|
|
{...NUM_SYMBOLS}
|
|
|
|
/>
|
2021-03-28 13:14:54 +00:00
|
|
|
<NumericSlider
|
|
|
|
id={`${idPrefix}scaling`}
|
|
|
|
label="Scaling"
|
|
|
|
value={value.scaling}
|
|
|
|
onChange={(scaling) => onChange({ ...value, scaling })}
|
|
|
|
{...SCALING}
|
|
|
|
/>
|
|
|
|
<NumericSlider
|
|
|
|
id={`${idPrefix}rotation`}
|
|
|
|
label="Rotation"
|
|
|
|
value={value.rotation}
|
|
|
|
onChange={(rotation) => onChange({ ...value, rotation })}
|
|
|
|
{...ROTATION}
|
|
|
|
/>
|
2021-03-28 20:22:36 +00:00
|
|
|
<NumericSlider
|
|
|
|
id={`${idPrefix}symbolScaling`}
|
|
|
|
label="Symbol scaling"
|
|
|
|
value={value.symbolScaling}
|
|
|
|
onChange={(symbolScaling) => onChange({ ...value, symbolScaling })}
|
|
|
|
{...SCALING}
|
|
|
|
/>
|
|
|
|
<NumericSlider
|
|
|
|
id={`${idPrefix}symbolRotation`}
|
|
|
|
label="Symbol rotation"
|
2021-04-03 21:01:13 +00:00
|
|
|
disabled={value.animateSymbolRotation}
|
2021-03-28 20:22:36 +00:00
|
|
|
value={value.symbolRotation}
|
|
|
|
onChange={(symbolRotation) => onChange({ ...value, symbolRotation })}
|
|
|
|
{...ROTATION}
|
|
|
|
/>
|
2021-04-03 21:01:13 +00:00
|
|
|
<Checkbox
|
|
|
|
label="Animate symbol rotation"
|
|
|
|
value={value.animateSymbolRotation}
|
|
|
|
onChange={(animateSymbolRotation) =>
|
|
|
|
onChange({ ...value, animateSymbolRotation })
|
|
|
|
}
|
|
|
|
/>
|
2021-03-29 19:23:37 +00:00
|
|
|
<Checkbox
|
|
|
|
label="Invert every other symbol (applies only to circles with an even number of symbols)"
|
2021-04-04 12:46:09 +00:00
|
|
|
disabled={!isEvenNumber(value.numSymbols)}
|
2021-03-29 19:23:37 +00:00
|
|
|
value={value.invertEveryOtherSymbol}
|
|
|
|
onChange={(invertEveryOtherSymbol) =>
|
|
|
|
onChange({ ...value, invertEveryOtherSymbol })
|
|
|
|
}
|
|
|
|
/>
|
2021-03-28 12:27:57 +00:00
|
|
|
</div>
|
|
|
|
);
|
2021-03-27 19:19:36 +00:00
|
|
|
};
|
|
|
|
|
2021-03-28 12:27:57 +00:00
|
|
|
function getRandomCircleParams(rng: Random): MandalaCircleParams {
|
|
|
|
return {
|
|
|
|
data: rng.choice(SvgVocabulary.items),
|
|
|
|
radius: rng.inRange(RADIUS),
|
|
|
|
numSymbols: rng.inRange(NUM_SYMBOLS),
|
2021-03-29 19:23:37 +00:00
|
|
|
invertEveryOtherSymbol: rng.bool(),
|
2021-03-28 12:27:57 +00:00
|
|
|
};
|
|
|
|
}
|
2021-03-27 19:19:36 +00:00
|
|
|
|
2021-03-26 22:07:01 +00:00
|
|
|
export const MandalaPage: React.FC<{}> = () => {
|
2021-03-27 11:39:21 +00:00
|
|
|
const svgRef = useRef<SVGSVGElement>(null);
|
2021-04-03 21:01:13 +00:00
|
|
|
const canvasRef = useRef<HTMLDivElement>(null);
|
2021-03-28 13:14:54 +00:00
|
|
|
const [circle1, setCircle1] = useState(CIRCLE_1_DEFAULTS);
|
|
|
|
const [circle2, setCircle2] = useState(CIRCLE_2_DEFAULTS);
|
2021-04-04 12:34:29 +00:00
|
|
|
const [durationSecs, setDurationSecs] = useState(DEFAULT_DURATION_SECS);
|
2021-04-02 20:33:07 +00:00
|
|
|
const [baseCompCtx, setBaseCompCtx] = useState(createSvgCompositionContext());
|
2021-03-28 12:27:57 +00:00
|
|
|
const [useTwoCircles, setUseTwoCircles] = useState(false);
|
|
|
|
const [invertCircle2, setInvertCircle2] = useState(true);
|
2021-03-28 20:49:38 +00:00
|
|
|
const [firstBehindSecond, setFirstBehindSecond] = useState(false);
|
2021-03-27 19:19:36 +00:00
|
|
|
const randomize = () => {
|
|
|
|
const rng = new Random(Date.now());
|
2021-03-28 13:14:54 +00:00
|
|
|
setCircle1({ ...circle1, ...getRandomCircleParams(rng) });
|
|
|
|
setCircle2({ ...circle2, ...getRandomCircleParams(rng) });
|
2021-03-27 19:19:36 +00:00
|
|
|
};
|
2021-04-03 21:01:13 +00:00
|
|
|
const isAnimated = isAnyMandalaCircleAnimated([circle1, circle2]);
|
2021-04-04 12:34:29 +00:00
|
|
|
const animPct = useAnimationPct(isAnimated ? durationSecs * 1000 : 0);
|
2021-04-02 20:33:07 +00:00
|
|
|
const symbolCtx = noFillIfShowingSpecs(baseCompCtx);
|
2021-03-29 12:23:53 +00:00
|
|
|
|
2021-03-28 12:27:57 +00:00
|
|
|
const circle2SymbolCtx = invertCircle2 ? swapColors(symbolCtx) : symbolCtx;
|
|
|
|
|
2021-03-28 20:49:38 +00:00
|
|
|
const circles = [
|
2021-04-03 21:01:13 +00:00
|
|
|
<ExtendedMandalaCircle
|
|
|
|
key="first"
|
2021-04-04 12:34:29 +00:00
|
|
|
{...animateMandalaCircleParams(circle1, animPct)}
|
2021-04-03 21:01:13 +00:00
|
|
|
{...symbolCtx}
|
|
|
|
/>,
|
2021-03-28 20:49:38 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
if (useTwoCircles) {
|
|
|
|
circles.push(
|
2021-04-03 21:01:13 +00:00
|
|
|
<ExtendedMandalaCircle
|
|
|
|
key="second"
|
2021-04-04 12:34:29 +00:00
|
|
|
{...animateMandalaCircleParams(circle2, animPct)}
|
2021-04-03 21:01:13 +00:00
|
|
|
{...circle2SymbolCtx}
|
|
|
|
/>
|
2021-03-28 20:49:38 +00:00
|
|
|
);
|
|
|
|
if (firstBehindSecond) {
|
|
|
|
circles.reverse();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-03-26 22:07:01 +00:00
|
|
|
return (
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
<Page title="Mandala!">
|
|
|
|
<div className="sidebar">
|
|
|
|
<CompositionContextWidget ctx={baseCompCtx} onChange={setBaseCompCtx} />
|
|
|
|
<fieldset>
|
|
|
|
<legend>First circle</legend>
|
|
|
|
<ExtendedMandalaCircleParamsWidget
|
|
|
|
idPrefix="c1"
|
|
|
|
value={circle1}
|
|
|
|
onChange={setCircle1}
|
|
|
|
/>
|
|
|
|
</fieldset>
|
|
|
|
<div className="thingy">
|
|
|
|
<Checkbox
|
|
|
|
label="Add a second circle"
|
|
|
|
value={useTwoCircles}
|
|
|
|
onChange={setUseTwoCircles}
|
2021-04-02 20:33:07 +00:00
|
|
|
/>
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
</div>
|
|
|
|
{useTwoCircles && (
|
2021-03-29 17:03:54 +00:00
|
|
|
<fieldset>
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
<legend>Second circle</legend>
|
2021-03-29 17:03:54 +00:00
|
|
|
<ExtendedMandalaCircleParamsWidget
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
idPrefix="c2"
|
|
|
|
value={circle2}
|
|
|
|
onChange={setCircle2}
|
2021-03-29 17:03:54 +00:00
|
|
|
/>
|
|
|
|
<Checkbox
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
label="Invert colors"
|
|
|
|
value={invertCircle2}
|
|
|
|
onChange={setInvertCircle2}
|
|
|
|
/>{" "}
|
|
|
|
<Checkbox
|
|
|
|
label="Place behind first circle"
|
|
|
|
value={firstBehindSecond}
|
|
|
|
onChange={setFirstBehindSecond}
|
2021-03-29 17:03:54 +00:00
|
|
|
/>
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
</fieldset>
|
|
|
|
)}
|
2021-04-04 12:34:29 +00:00
|
|
|
{isAnimated && (
|
|
|
|
<NumericSlider
|
|
|
|
label="Animation loop duration"
|
|
|
|
valueSuffix="s"
|
|
|
|
value={durationSecs}
|
|
|
|
onChange={(duration) => setDurationSecs(duration)}
|
|
|
|
{...DURATION_SECS}
|
|
|
|
/>
|
|
|
|
)}
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
<div className="thingy">
|
|
|
|
<button accessKey="r" onClick={randomize}>
|
|
|
|
<u>R</u>andomize!
|
|
|
|
</button>{" "}
|
|
|
|
<ExportWidget basename="mandala" svgRef={svgRef} />
|
2021-03-29 17:03:54 +00:00
|
|
|
</div>
|
2021-03-27 12:34:22 +00:00
|
|
|
</div>
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
<div
|
|
|
|
className="canvas"
|
|
|
|
style={{ backgroundColor: baseCompCtx.background }}
|
2021-04-03 21:01:13 +00:00
|
|
|
ref={canvasRef}
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
>
|
|
|
|
<HoverDebugHelper>
|
|
|
|
<AutoSizingSvg
|
|
|
|
padding={20}
|
|
|
|
ref={svgRef}
|
|
|
|
bgColor={baseCompCtx.background}
|
2021-04-03 21:01:13 +00:00
|
|
|
sizeToElement={canvasRef}
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
>
|
|
|
|
<SvgTransform transform={svgScale(0.5)}>{circles}</SvgTransform>
|
|
|
|
</AutoSizingSvg>
|
|
|
|
</HoverDebugHelper>
|
|
|
|
</div>
|
|
|
|
</Page>
|
2021-03-26 22:07:01 +00:00
|
|
|
);
|
|
|
|
};
|