2021-05-28 14:17:45 +00:00
|
|
|
import React, { useCallback, useMemo, useRef, useState } from "react";
|
Always permalink to Mandalas. (#99)
This addresses #61 by making mandalas permalinked.
The URL to a mandala will change whenever the user stops fiddling with it for 250 ms. This means that the user can always reload the page to get a reasonably recent version of what they were creating, and they can use the browser's "back" and "next" buttons to effectively undo/redo recent changes. They can also copy the URL to share it with others.
## About the serialization format
Originally, I stored the state of the user's mandala in the URL using JSON. This had a number of drawbacks, though:
* **It was really long.** A mandala serialization was almost 1k characters, which was a very big URL, and one that some sharing platforms might even reject.
* **It wasn't type-checked in any way.** Unless I added some kind of JSON schema validation (which I didn't), the serialization was simply deserialized and assumed to be in the proper format. This could result in confusing exceptions during render time, rather than decisively exploding at deserialization time.
To resolve these limitations, and because I thought it would be fun, I decided to store the mandala state using a serialization format called [Apache Avro][]. I first read about this in Kleppmann's [Designing Data-Intensive Applications][kleppmann] and was intrigued by both its compactness (a serialized mandala is around 80-120 characters) and schema evolution properties.
It might be going a bit overboard, but again, I thought it would be fun and I wanted to play around with Avro. Also, I tried architecting things in such a way that all the Avro code is in its own file, and can easily be removed (or swapped out for another serialization format) if we decide it's dumb.
[Apache Avro]: http://avro.apache.org/
[kleppmann]: https://dataintensive.net/
## Other changes
This PR also makes a few other changes:
* Tests can now import files with JSX in them (I don't think this was required for the final state of this PR, but I figured I'd leave it in there for its almost inevitable use in the future).
* The value labels for number sliders now have a fixed width, which eliminates a weird "jitter" effect that sometimes occurred when using them.
2021-04-24 12:46:32 +00:00
|
|
|
import { AutoSizingSvg } from "../../auto-sizing-svg";
|
|
|
|
import { AnimationRenderer, ExportWidget } from "../../export-svg";
|
|
|
|
import { HoverDebugHelper } from "../../hover-debug-helper";
|
|
|
|
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,
|
Always permalink to Mandalas. (#99)
This addresses #61 by making mandalas permalinked.
The URL to a mandala will change whenever the user stops fiddling with it for 250 ms. This means that the user can always reload the page to get a reasonably recent version of what they were creating, and they can use the browser's "back" and "next" buttons to effectively undo/redo recent changes. They can also copy the URL to share it with others.
## About the serialization format
Originally, I stored the state of the user's mandala in the URL using JSON. This had a number of drawbacks, though:
* **It was really long.** A mandala serialization was almost 1k characters, which was a very big URL, and one that some sharing platforms might even reject.
* **It wasn't type-checked in any way.** Unless I added some kind of JSON schema validation (which I didn't), the serialization was simply deserialized and assumed to be in the proper format. This could result in confusing exceptions during render time, rather than decisively exploding at deserialization time.
To resolve these limitations, and because I thought it would be fun, I decided to store the mandala state using a serialization format called [Apache Avro][]. I first read about this in Kleppmann's [Designing Data-Intensive Applications][kleppmann] and was intrigued by both its compactness (a serialized mandala is around 80-120 characters) and schema evolution properties.
It might be going a bit overboard, but again, I thought it would be fun and I wanted to play around with Avro. Also, I tried architecting things in such a way that all the Avro code is in its own file, and can easily be removed (or swapped out for another serialization format) if we decide it's dumb.
[Apache Avro]: http://avro.apache.org/
[kleppmann]: https://dataintensive.net/
## Other changes
This PR also makes a few other changes:
* Tests can now import files with JSX in them (I don't think this was required for the final state of this PR, but I figured I'd leave it in there for its almost inevitable use in the future).
* The value labels for number sliders now have a fixed width, which eliminates a weird "jitter" effect that sometimes occurred when using them.
2021-04-24 12:46:32 +00:00
|
|
|
} from "../../svg-symbol";
|
|
|
|
import { VocabularyWidget } from "../../vocabulary-widget";
|
|
|
|
import { svgRotate, svgScale, SvgTransform } from "../../svg-transform";
|
|
|
|
import { SvgVocabulary } from "../../svg-vocabulary";
|
|
|
|
import { isEvenNumber, NumericRange, secsToMsecs } from "../../util";
|
|
|
|
import { Random } from "../../random";
|
|
|
|
import { Checkbox } from "../../checkbox";
|
2021-04-02 20:33:07 +00:00
|
|
|
import {
|
|
|
|
CompositionContextWidget,
|
|
|
|
createSvgCompositionContext,
|
Always permalink to Mandalas. (#99)
This addresses #61 by making mandalas permalinked.
The URL to a mandala will change whenever the user stops fiddling with it for 250 ms. This means that the user can always reload the page to get a reasonably recent version of what they were creating, and they can use the browser's "back" and "next" buttons to effectively undo/redo recent changes. They can also copy the URL to share it with others.
## About the serialization format
Originally, I stored the state of the user's mandala in the URL using JSON. This had a number of drawbacks, though:
* **It was really long.** A mandala serialization was almost 1k characters, which was a very big URL, and one that some sharing platforms might even reject.
* **It wasn't type-checked in any way.** Unless I added some kind of JSON schema validation (which I didn't), the serialization was simply deserialized and assumed to be in the proper format. This could result in confusing exceptions during render time, rather than decisively exploding at deserialization time.
To resolve these limitations, and because I thought it would be fun, I decided to store the mandala state using a serialization format called [Apache Avro][]. I first read about this in Kleppmann's [Designing Data-Intensive Applications][kleppmann] and was intrigued by both its compactness (a serialized mandala is around 80-120 characters) and schema evolution properties.
It might be going a bit overboard, but again, I thought it would be fun and I wanted to play around with Avro. Also, I tried architecting things in such a way that all the Avro code is in its own file, and can easily be removed (or swapped out for another serialization format) if we decide it's dumb.
[Apache Avro]: http://avro.apache.org/
[kleppmann]: https://dataintensive.net/
## Other changes
This PR also makes a few other changes:
* Tests can now import files with JSX in them (I don't think this was required for the final state of this PR, but I figured I'd leave it in there for its almost inevitable use in the future).
* The value labels for number sliders now have a fixed width, which eliminates a weird "jitter" effect that sometimes occurred when using them.
2021-04-24 12:46:32 +00:00
|
|
|
} from "../../svg-composition-context";
|
|
|
|
import { Page } from "../../page";
|
|
|
|
import { MandalaCircle, MandalaCircleParams } from "../../mandala-circle";
|
|
|
|
import { useAnimationPct } from "../../animation";
|
|
|
|
import { RandomizerWidget } from "../../randomizer-widget";
|
|
|
|
import { useDebouncedEffect } from "../../use-debounced-effect";
|
2021-03-26 22:07:01 +00:00
|
|
|
|
Always permalink to Mandalas. (#99)
This addresses #61 by making mandalas permalinked.
The URL to a mandala will change whenever the user stops fiddling with it for 250 ms. This means that the user can always reload the page to get a reasonably recent version of what they were creating, and they can use the browser's "back" and "next" buttons to effectively undo/redo recent changes. They can also copy the URL to share it with others.
## About the serialization format
Originally, I stored the state of the user's mandala in the URL using JSON. This had a number of drawbacks, though:
* **It was really long.** A mandala serialization was almost 1k characters, which was a very big URL, and one that some sharing platforms might even reject.
* **It wasn't type-checked in any way.** Unless I added some kind of JSON schema validation (which I didn't), the serialization was simply deserialized and assumed to be in the proper format. This could result in confusing exceptions during render time, rather than decisively exploding at deserialization time.
To resolve these limitations, and because I thought it would be fun, I decided to store the mandala state using a serialization format called [Apache Avro][]. I first read about this in Kleppmann's [Designing Data-Intensive Applications][kleppmann] and was intrigued by both its compactness (a serialized mandala is around 80-120 characters) and schema evolution properties.
It might be going a bit overboard, but again, I thought it would be fun and I wanted to play around with Avro. Also, I tried architecting things in such a way that all the Avro code is in its own file, and can easily be removed (or swapped out for another serialization format) if we decide it's dumb.
[Apache Avro]: http://avro.apache.org/
[kleppmann]: https://dataintensive.net/
## Other changes
This PR also makes a few other changes:
* Tests can now import files with JSX in them (I don't think this was required for the final state of this PR, but I figured I'd leave it in there for its almost inevitable use in the future).
* The value labels for number sliders now have a fixed width, which eliminates a weird "jitter" effect that sometimes occurred when using them.
2021-04-24 12:46:32 +00:00
|
|
|
export type ExtendedMandalaCircleParams = MandalaCircleParams & {
|
2021-03-28 13:14:54 +00:00
|
|
|
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,
|
|
|
|
};
|
|
|
|
|
2021-04-17 18:33:09 +00:00
|
|
|
const RADIUS_RANDOM: NumericRange = {
|
|
|
|
min: 100,
|
|
|
|
max: RADIUS.max,
|
|
|
|
step: 1,
|
|
|
|
};
|
|
|
|
|
2021-03-28 12:27:57 +00:00
|
|
|
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
|
Always permalink to Mandalas. (#99)
This addresses #61 by making mandalas permalinked.
The URL to a mandala will change whenever the user stops fiddling with it for 250 ms. This means that the user can always reload the page to get a reasonably recent version of what they were creating, and they can use the browser's "back" and "next" buttons to effectively undo/redo recent changes. They can also copy the URL to share it with others.
## About the serialization format
Originally, I stored the state of the user's mandala in the URL using JSON. This had a number of drawbacks, though:
* **It was really long.** A mandala serialization was almost 1k characters, which was a very big URL, and one that some sharing platforms might even reject.
* **It wasn't type-checked in any way.** Unless I added some kind of JSON schema validation (which I didn't), the serialization was simply deserialized and assumed to be in the proper format. This could result in confusing exceptions during render time, rather than decisively exploding at deserialization time.
To resolve these limitations, and because I thought it would be fun, I decided to store the mandala state using a serialization format called [Apache Avro][]. I first read about this in Kleppmann's [Designing Data-Intensive Applications][kleppmann] and was intrigued by both its compactness (a serialized mandala is around 80-120 characters) and schema evolution properties.
It might be going a bit overboard, but again, I thought it would be fun and I wanted to play around with Avro. Also, I tried architecting things in such a way that all the Avro code is in its own file, and can easily be removed (or swapped out for another serialization format) if we decide it's dumb.
[Apache Avro]: http://avro.apache.org/
[kleppmann]: https://dataintensive.net/
## Other changes
This PR also makes a few other changes:
* Tests can now import files with JSX in them (I don't think this was required for the final state of this PR, but I figured I'd leave it in there for its almost inevitable use in the future).
* The value labels for number sliders now have a fixed width, which eliminates a weird "jitter" effect that sometimes occurred when using them.
2021-04-24 12:46:32 +00:00
|
|
|
> = ({ scaling, rotation, symbolScaling, symbolRotation, ...props }) => {
|
2021-03-28 20:22:36 +00:00
|
|
|
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) {
|
2021-04-23 00:53:18 +00:00
|
|
|
const direction = value.data.meta?.rotate_clockwise ? 1 : -1;
|
2021-04-03 21:01:13 +00:00
|
|
|
value = {
|
|
|
|
...value,
|
2021-04-23 00:53:18 +00:00
|
|
|
symbolRotation: direction * animPct * ROTATION.max,
|
2021-04-03 21:01:13 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
return value;
|
|
|
|
}
|
|
|
|
|
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),
|
2021-04-17 18:33:09 +00:00
|
|
|
radius: rng.inRange(RADIUS_RANDOM),
|
2021-03-28 12:27:57 +00:00
|
|
|
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
|
|
|
|
Always permalink to Mandalas. (#99)
This addresses #61 by making mandalas permalinked.
The URL to a mandala will change whenever the user stops fiddling with it for 250 ms. This means that the user can always reload the page to get a reasonably recent version of what they were creating, and they can use the browser's "back" and "next" buttons to effectively undo/redo recent changes. They can also copy the URL to share it with others.
## About the serialization format
Originally, I stored the state of the user's mandala in the URL using JSON. This had a number of drawbacks, though:
* **It was really long.** A mandala serialization was almost 1k characters, which was a very big URL, and one that some sharing platforms might even reject.
* **It wasn't type-checked in any way.** Unless I added some kind of JSON schema validation (which I didn't), the serialization was simply deserialized and assumed to be in the proper format. This could result in confusing exceptions during render time, rather than decisively exploding at deserialization time.
To resolve these limitations, and because I thought it would be fun, I decided to store the mandala state using a serialization format called [Apache Avro][]. I first read about this in Kleppmann's [Designing Data-Intensive Applications][kleppmann] and was intrigued by both its compactness (a serialized mandala is around 80-120 characters) and schema evolution properties.
It might be going a bit overboard, but again, I thought it would be fun and I wanted to play around with Avro. Also, I tried architecting things in such a way that all the Avro code is in its own file, and can easily be removed (or swapped out for another serialization format) if we decide it's dumb.
[Apache Avro]: http://avro.apache.org/
[kleppmann]: https://dataintensive.net/
## Other changes
This PR also makes a few other changes:
* Tests can now import files with JSX in them (I don't think this was required for the final state of this PR, but I figured I'd leave it in there for its almost inevitable use in the future).
* The value labels for number sliders now have a fixed width, which eliminates a weird "jitter" effect that sometimes occurred when using them.
2021-04-24 12:46:32 +00:00
|
|
|
export const MANDALA_DESIGN_DEFAULTS = {
|
|
|
|
circle1: CIRCLE_1_DEFAULTS,
|
|
|
|
circle2: CIRCLE_2_DEFAULTS,
|
|
|
|
durationSecs: DEFAULT_DURATION_SECS,
|
|
|
|
baseCompCtx: createSvgCompositionContext(),
|
|
|
|
useTwoCircles: false,
|
|
|
|
invertCircle2: true,
|
|
|
|
firstBehind: false,
|
|
|
|
};
|
|
|
|
|
|
|
|
export type MandalaDesign = typeof MANDALA_DESIGN_DEFAULTS;
|
2021-03-29 12:23:53 +00:00
|
|
|
|
2021-04-25 19:56:28 +00:00
|
|
|
function isDesignAnimated(design: MandalaDesign): boolean {
|
|
|
|
return getCirclesFromDesign(design).some((c) => c.animateSymbolRotation);
|
Always permalink to Mandalas. (#99)
This addresses #61 by making mandalas permalinked.
The URL to a mandala will change whenever the user stops fiddling with it for 250 ms. This means that the user can always reload the page to get a reasonably recent version of what they were creating, and they can use the browser's "back" and "next" buttons to effectively undo/redo recent changes. They can also copy the URL to share it with others.
## About the serialization format
Originally, I stored the state of the user's mandala in the URL using JSON. This had a number of drawbacks, though:
* **It was really long.** A mandala serialization was almost 1k characters, which was a very big URL, and one that some sharing platforms might even reject.
* **It wasn't type-checked in any way.** Unless I added some kind of JSON schema validation (which I didn't), the serialization was simply deserialized and assumed to be in the proper format. This could result in confusing exceptions during render time, rather than decisively exploding at deserialization time.
To resolve these limitations, and because I thought it would be fun, I decided to store the mandala state using a serialization format called [Apache Avro][]. I first read about this in Kleppmann's [Designing Data-Intensive Applications][kleppmann] and was intrigued by both its compactness (a serialized mandala is around 80-120 characters) and schema evolution properties.
It might be going a bit overboard, but again, I thought it would be fun and I wanted to play around with Avro. Also, I tried architecting things in such a way that all the Avro code is in its own file, and can easily be removed (or swapped out for another serialization format) if we decide it's dumb.
[Apache Avro]: http://avro.apache.org/
[kleppmann]: https://dataintensive.net/
## Other changes
This PR also makes a few other changes:
* Tests can now import files with JSX in them (I don't think this was required for the final state of this PR, but I figured I'd leave it in there for its almost inevitable use in the future).
* The value labels for number sliders now have a fixed width, which eliminates a weird "jitter" effect that sometimes occurred when using them.
2021-04-24 12:46:32 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function createAnimationRenderer({
|
|
|
|
baseCompCtx,
|
|
|
|
invertCircle2,
|
|
|
|
circle1,
|
|
|
|
circle2,
|
|
|
|
useTwoCircles,
|
|
|
|
firstBehind,
|
|
|
|
}: MandalaDesign): AnimationRenderer {
|
|
|
|
const symbolCtx = noFillIfShowingSpecs(baseCompCtx);
|
2021-03-28 12:27:57 +00:00
|
|
|
const circle2SymbolCtx = invertCircle2 ? swapColors(symbolCtx) : symbolCtx;
|
|
|
|
|
Always permalink to Mandalas. (#99)
This addresses #61 by making mandalas permalinked.
The URL to a mandala will change whenever the user stops fiddling with it for 250 ms. This means that the user can always reload the page to get a reasonably recent version of what they were creating, and they can use the browser's "back" and "next" buttons to effectively undo/redo recent changes. They can also copy the URL to share it with others.
## About the serialization format
Originally, I stored the state of the user's mandala in the URL using JSON. This had a number of drawbacks, though:
* **It was really long.** A mandala serialization was almost 1k characters, which was a very big URL, and one that some sharing platforms might even reject.
* **It wasn't type-checked in any way.** Unless I added some kind of JSON schema validation (which I didn't), the serialization was simply deserialized and assumed to be in the proper format. This could result in confusing exceptions during render time, rather than decisively exploding at deserialization time.
To resolve these limitations, and because I thought it would be fun, I decided to store the mandala state using a serialization format called [Apache Avro][]. I first read about this in Kleppmann's [Designing Data-Intensive Applications][kleppmann] and was intrigued by both its compactness (a serialized mandala is around 80-120 characters) and schema evolution properties.
It might be going a bit overboard, but again, I thought it would be fun and I wanted to play around with Avro. Also, I tried architecting things in such a way that all the Avro code is in its own file, and can easily be removed (or swapped out for another serialization format) if we decide it's dumb.
[Apache Avro]: http://avro.apache.org/
[kleppmann]: https://dataintensive.net/
## Other changes
This PR also makes a few other changes:
* Tests can now import files with JSX in them (I don't think this was required for the final state of this PR, but I figured I'd leave it in there for its almost inevitable use in the future).
* The value labels for number sliders now have a fixed width, which eliminates a weird "jitter" effect that sometimes occurred when using them.
2021-04-24 12:46:32 +00:00
|
|
|
return (animPct) => {
|
2021-04-10 21:11:12 +00:00
|
|
|
const circles = [
|
2021-04-03 21:01:13 +00:00
|
|
|
<ExtendedMandalaCircle
|
2021-04-10 21:11:12 +00:00
|
|
|
key="first"
|
|
|
|
{...animateMandalaCircleParams(circle1, animPct)}
|
|
|
|
{...symbolCtx}
|
|
|
|
/>,
|
|
|
|
];
|
|
|
|
|
|
|
|
if (useTwoCircles) {
|
|
|
|
circles.push(
|
|
|
|
<ExtendedMandalaCircle
|
|
|
|
key="second"
|
|
|
|
{...animateMandalaCircleParams(circle2, animPct)}
|
|
|
|
{...circle2SymbolCtx}
|
|
|
|
/>
|
|
|
|
);
|
Always permalink to Mandalas. (#99)
This addresses #61 by making mandalas permalinked.
The URL to a mandala will change whenever the user stops fiddling with it for 250 ms. This means that the user can always reload the page to get a reasonably recent version of what they were creating, and they can use the browser's "back" and "next" buttons to effectively undo/redo recent changes. They can also copy the URL to share it with others.
## About the serialization format
Originally, I stored the state of the user's mandala in the URL using JSON. This had a number of drawbacks, though:
* **It was really long.** A mandala serialization was almost 1k characters, which was a very big URL, and one that some sharing platforms might even reject.
* **It wasn't type-checked in any way.** Unless I added some kind of JSON schema validation (which I didn't), the serialization was simply deserialized and assumed to be in the proper format. This could result in confusing exceptions during render time, rather than decisively exploding at deserialization time.
To resolve these limitations, and because I thought it would be fun, I decided to store the mandala state using a serialization format called [Apache Avro][]. I first read about this in Kleppmann's [Designing Data-Intensive Applications][kleppmann] and was intrigued by both its compactness (a serialized mandala is around 80-120 characters) and schema evolution properties.
It might be going a bit overboard, but again, I thought it would be fun and I wanted to play around with Avro. Also, I tried architecting things in such a way that all the Avro code is in its own file, and can easily be removed (or swapped out for another serialization format) if we decide it's dumb.
[Apache Avro]: http://avro.apache.org/
[kleppmann]: https://dataintensive.net/
## Other changes
This PR also makes a few other changes:
* Tests can now import files with JSX in them (I don't think this was required for the final state of this PR, but I figured I'd leave it in there for its almost inevitable use in the future).
* The value labels for number sliders now have a fixed width, which eliminates a weird "jitter" effect that sometimes occurred when using them.
2021-04-24 12:46:32 +00:00
|
|
|
if (firstBehind) {
|
2021-04-10 21:11:12 +00:00
|
|
|
circles.reverse();
|
|
|
|
}
|
2021-03-28 20:49:38 +00:00
|
|
|
}
|
2021-04-10 21:11:12 +00:00
|
|
|
|
|
|
|
return <SvgTransform transform={svgScale(0.5)}>{circles}</SvgTransform>;
|
|
|
|
};
|
Always permalink to Mandalas. (#99)
This addresses #61 by making mandalas permalinked.
The URL to a mandala will change whenever the user stops fiddling with it for 250 ms. This means that the user can always reload the page to get a reasonably recent version of what they were creating, and they can use the browser's "back" and "next" buttons to effectively undo/redo recent changes. They can also copy the URL to share it with others.
## About the serialization format
Originally, I stored the state of the user's mandala in the URL using JSON. This had a number of drawbacks, though:
* **It was really long.** A mandala serialization was almost 1k characters, which was a very big URL, and one that some sharing platforms might even reject.
* **It wasn't type-checked in any way.** Unless I added some kind of JSON schema validation (which I didn't), the serialization was simply deserialized and assumed to be in the proper format. This could result in confusing exceptions during render time, rather than decisively exploding at deserialization time.
To resolve these limitations, and because I thought it would be fun, I decided to store the mandala state using a serialization format called [Apache Avro][]. I first read about this in Kleppmann's [Designing Data-Intensive Applications][kleppmann] and was intrigued by both its compactness (a serialized mandala is around 80-120 characters) and schema evolution properties.
It might be going a bit overboard, but again, I thought it would be fun and I wanted to play around with Avro. Also, I tried architecting things in such a way that all the Avro code is in its own file, and can easily be removed (or swapped out for another serialization format) if we decide it's dumb.
[Apache Avro]: http://avro.apache.org/
[kleppmann]: https://dataintensive.net/
## Other changes
This PR also makes a few other changes:
* Tests can now import files with JSX in them (I don't think this was required for the final state of this PR, but I figured I'd leave it in there for its almost inevitable use in the future).
* The value labels for number sliders now have a fixed width, which eliminates a weird "jitter" effect that sometimes occurred when using them.
2021-04-24 12:46:32 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const AnimatedMandala: React.FC<{
|
|
|
|
config: MandalaDesign;
|
|
|
|
render: AnimationRenderer;
|
|
|
|
}> = ({ config, render }) => {
|
|
|
|
const animPct = useAnimationPct(
|
|
|
|
isDesignAnimated(config) ? secsToMsecs(config.durationSecs) : 0
|
|
|
|
);
|
|
|
|
|
|
|
|
return <>{render(animPct)}</>;
|
|
|
|
};
|
|
|
|
|
2021-04-25 19:56:28 +00:00
|
|
|
export function getCirclesFromDesign(
|
|
|
|
design: MandalaDesign
|
|
|
|
): ExtendedMandalaCircleParams[] {
|
|
|
|
const circles: ExtendedMandalaCircleParams[] = [design.circle1];
|
|
|
|
|
|
|
|
if (design.useTwoCircles) {
|
|
|
|
circles.push(design.circle2);
|
|
|
|
}
|
|
|
|
|
|
|
|
return circles;
|
|
|
|
}
|
|
|
|
|
|
|
|
function getBasename(design: MandalaDesign): string {
|
|
|
|
return `mandala-${getCirclesFromDesign(design)
|
|
|
|
.map((c) => c.data.name)
|
|
|
|
.join("-")}`;
|
|
|
|
}
|
|
|
|
|
Always permalink to Mandalas. (#99)
This addresses #61 by making mandalas permalinked.
The URL to a mandala will change whenever the user stops fiddling with it for 250 ms. This means that the user can always reload the page to get a reasonably recent version of what they were creating, and they can use the browser's "back" and "next" buttons to effectively undo/redo recent changes. They can also copy the URL to share it with others.
## About the serialization format
Originally, I stored the state of the user's mandala in the URL using JSON. This had a number of drawbacks, though:
* **It was really long.** A mandala serialization was almost 1k characters, which was a very big URL, and one that some sharing platforms might even reject.
* **It wasn't type-checked in any way.** Unless I added some kind of JSON schema validation (which I didn't), the serialization was simply deserialized and assumed to be in the proper format. This could result in confusing exceptions during render time, rather than decisively exploding at deserialization time.
To resolve these limitations, and because I thought it would be fun, I decided to store the mandala state using a serialization format called [Apache Avro][]. I first read about this in Kleppmann's [Designing Data-Intensive Applications][kleppmann] and was intrigued by both its compactness (a serialized mandala is around 80-120 characters) and schema evolution properties.
It might be going a bit overboard, but again, I thought it would be fun and I wanted to play around with Avro. Also, I tried architecting things in such a way that all the Avro code is in its own file, and can easily be removed (or swapped out for another serialization format) if we decide it's dumb.
[Apache Avro]: http://avro.apache.org/
[kleppmann]: https://dataintensive.net/
## Other changes
This PR also makes a few other changes:
* Tests can now import files with JSX in them (I don't think this was required for the final state of this PR, but I figured I'd leave it in there for its almost inevitable use in the future).
* The value labels for number sliders now have a fixed width, which eliminates a weird "jitter" effect that sometimes occurred when using them.
2021-04-24 12:46:32 +00:00
|
|
|
/**
|
|
|
|
* A mandala page that starts with the given default mandala configuration.
|
|
|
|
*
|
|
|
|
* The given handler will be called whenever the user changes the
|
|
|
|
* configuration.
|
|
|
|
*
|
|
|
|
* Note that the default is only used to determine the initial state of
|
|
|
|
* the component at mount. Any changes to the prop once the component has
|
|
|
|
* been mounted are ignored.
|
|
|
|
*/
|
|
|
|
export const MandalaPageWithDefaults: React.FC<{
|
|
|
|
defaults: MandalaDesign;
|
|
|
|
onChange: (defaults: MandalaDesign) => void;
|
|
|
|
}> = ({ defaults, onChange }) => {
|
|
|
|
const svgRef = useRef<SVGSVGElement>(null);
|
|
|
|
const canvasRef = useRef<HTMLDivElement>(null);
|
|
|
|
const [circle1, setCircle1] = useState(defaults.circle1);
|
|
|
|
const [circle2, setCircle2] = useState(defaults.circle2);
|
|
|
|
const [durationSecs, setDurationSecs] = useState(defaults.durationSecs);
|
|
|
|
const [baseCompCtx, setBaseCompCtx] = useState(defaults.baseCompCtx);
|
|
|
|
const [useTwoCircles, setUseTwoCircles] = useState(defaults.useTwoCircles);
|
|
|
|
const [invertCircle2, setInvertCircle2] = useState(defaults.invertCircle2);
|
|
|
|
const [firstBehind, setFirstBehind] = useState(defaults.firstBehind);
|
|
|
|
const design: MandalaDesign = useMemo(
|
|
|
|
() => ({
|
|
|
|
circle1,
|
|
|
|
circle2,
|
|
|
|
durationSecs,
|
|
|
|
baseCompCtx,
|
|
|
|
useTwoCircles,
|
|
|
|
invertCircle2,
|
|
|
|
firstBehind,
|
|
|
|
}),
|
|
|
|
[
|
|
|
|
circle1,
|
|
|
|
circle2,
|
|
|
|
durationSecs,
|
|
|
|
baseCompCtx,
|
|
|
|
useTwoCircles,
|
|
|
|
invertCircle2,
|
|
|
|
firstBehind,
|
|
|
|
]
|
|
|
|
);
|
|
|
|
const isAnimated = isDesignAnimated(design);
|
|
|
|
const render = useMemo(() => createAnimationRenderer(design), [design]);
|
|
|
|
|
2021-05-28 14:17:45 +00:00
|
|
|
useDebouncedEffect(
|
|
|
|
250,
|
|
|
|
useCallback(() => onChange(design), [onChange, design])
|
|
|
|
);
|
2021-03-28 20:49:38 +00:00
|
|
|
|
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"
|
Always permalink to Mandalas. (#99)
This addresses #61 by making mandalas permalinked.
The URL to a mandala will change whenever the user stops fiddling with it for 250 ms. This means that the user can always reload the page to get a reasonably recent version of what they were creating, and they can use the browser's "back" and "next" buttons to effectively undo/redo recent changes. They can also copy the URL to share it with others.
## About the serialization format
Originally, I stored the state of the user's mandala in the URL using JSON. This had a number of drawbacks, though:
* **It was really long.** A mandala serialization was almost 1k characters, which was a very big URL, and one that some sharing platforms might even reject.
* **It wasn't type-checked in any way.** Unless I added some kind of JSON schema validation (which I didn't), the serialization was simply deserialized and assumed to be in the proper format. This could result in confusing exceptions during render time, rather than decisively exploding at deserialization time.
To resolve these limitations, and because I thought it would be fun, I decided to store the mandala state using a serialization format called [Apache Avro][]. I first read about this in Kleppmann's [Designing Data-Intensive Applications][kleppmann] and was intrigued by both its compactness (a serialized mandala is around 80-120 characters) and schema evolution properties.
It might be going a bit overboard, but again, I thought it would be fun and I wanted to play around with Avro. Also, I tried architecting things in such a way that all the Avro code is in its own file, and can easily be removed (or swapped out for another serialization format) if we decide it's dumb.
[Apache Avro]: http://avro.apache.org/
[kleppmann]: https://dataintensive.net/
## Other changes
This PR also makes a few other changes:
* Tests can now import files with JSX in them (I don't think this was required for the final state of this PR, but I figured I'd leave it in there for its almost inevitable use in the future).
* The value labels for number sliders now have a fixed width, which eliminates a weird "jitter" effect that sometimes occurred when using them.
2021-04-24 12:46:32 +00:00
|
|
|
value={firstBehind}
|
|
|
|
onChange={setFirstBehind}
|
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}
|
|
|
|
/>
|
|
|
|
)}
|
2021-04-09 00:13:54 +00:00
|
|
|
<RandomizerWidget
|
|
|
|
onColorsChange={(colors) =>
|
|
|
|
setBaseCompCtx({ ...baseCompCtx, ...colors })
|
|
|
|
}
|
|
|
|
onSymbolsChange={(rng) => {
|
|
|
|
setCircle1({ ...circle1, ...getRandomCircleParams(rng) });
|
|
|
|
setCircle2({ ...circle2, ...getRandomCircleParams(rng) });
|
|
|
|
}}
|
|
|
|
/>
|
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">
|
2021-04-10 21:11:12 +00:00
|
|
|
<ExportWidget
|
2021-04-25 19:56:28 +00:00
|
|
|
basename={getBasename(design)}
|
2021-04-10 21:11:12 +00:00
|
|
|
svgRef={svgRef}
|
|
|
|
animate={
|
Always permalink to Mandalas. (#99)
This addresses #61 by making mandalas permalinked.
The URL to a mandala will change whenever the user stops fiddling with it for 250 ms. This means that the user can always reload the page to get a reasonably recent version of what they were creating, and they can use the browser's "back" and "next" buttons to effectively undo/redo recent changes. They can also copy the URL to share it with others.
## About the serialization format
Originally, I stored the state of the user's mandala in the URL using JSON. This had a number of drawbacks, though:
* **It was really long.** A mandala serialization was almost 1k characters, which was a very big URL, and one that some sharing platforms might even reject.
* **It wasn't type-checked in any way.** Unless I added some kind of JSON schema validation (which I didn't), the serialization was simply deserialized and assumed to be in the proper format. This could result in confusing exceptions during render time, rather than decisively exploding at deserialization time.
To resolve these limitations, and because I thought it would be fun, I decided to store the mandala state using a serialization format called [Apache Avro][]. I first read about this in Kleppmann's [Designing Data-Intensive Applications][kleppmann] and was intrigued by both its compactness (a serialized mandala is around 80-120 characters) and schema evolution properties.
It might be going a bit overboard, but again, I thought it would be fun and I wanted to play around with Avro. Also, I tried architecting things in such a way that all the Avro code is in its own file, and can easily be removed (or swapped out for another serialization format) if we decide it's dumb.
[Apache Avro]: http://avro.apache.org/
[kleppmann]: https://dataintensive.net/
## Other changes
This PR also makes a few other changes:
* Tests can now import files with JSX in them (I don't think this was required for the final state of this PR, but I figured I'd leave it in there for its almost inevitable use in the future).
* The value labels for number sliders now have a fixed width, which eliminates a weird "jitter" effect that sometimes occurred when using them.
2021-04-24 12:46:32 +00:00
|
|
|
isAnimated && { duration: secsToMsecs(durationSecs), render }
|
2021-04-10 21:11:12 +00:00
|
|
|
}
|
|
|
|
/>
|
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
|
|
|
|
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
|
|
|
>
|
Always permalink to Mandalas. (#99)
This addresses #61 by making mandalas permalinked.
The URL to a mandala will change whenever the user stops fiddling with it for 250 ms. This means that the user can always reload the page to get a reasonably recent version of what they were creating, and they can use the browser's "back" and "next" buttons to effectively undo/redo recent changes. They can also copy the URL to share it with others.
## About the serialization format
Originally, I stored the state of the user's mandala in the URL using JSON. This had a number of drawbacks, though:
* **It was really long.** A mandala serialization was almost 1k characters, which was a very big URL, and one that some sharing platforms might even reject.
* **It wasn't type-checked in any way.** Unless I added some kind of JSON schema validation (which I didn't), the serialization was simply deserialized and assumed to be in the proper format. This could result in confusing exceptions during render time, rather than decisively exploding at deserialization time.
To resolve these limitations, and because I thought it would be fun, I decided to store the mandala state using a serialization format called [Apache Avro][]. I first read about this in Kleppmann's [Designing Data-Intensive Applications][kleppmann] and was intrigued by both its compactness (a serialized mandala is around 80-120 characters) and schema evolution properties.
It might be going a bit overboard, but again, I thought it would be fun and I wanted to play around with Avro. Also, I tried architecting things in such a way that all the Avro code is in its own file, and can easily be removed (or swapped out for another serialization format) if we decide it's dumb.
[Apache Avro]: http://avro.apache.org/
[kleppmann]: https://dataintensive.net/
## Other changes
This PR also makes a few other changes:
* Tests can now import files with JSX in them (I don't think this was required for the final state of this PR, but I figured I'd leave it in there for its almost inevitable use in the future).
* The value labels for number sliders now have a fixed width, which eliminates a weird "jitter" effect that sometimes occurred when using them.
2021-04-24 12:46:32 +00:00
|
|
|
<AnimatedMandala config={defaults} render={render} />
|
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
|
|
|
</AutoSizingSvg>
|
|
|
|
</HoverDebugHelper>
|
|
|
|
</div>
|
|
|
|
</Page>
|
2021-03-26 22:07:01 +00:00
|
|
|
);
|
|
|
|
};
|