Add more sliders, export svg btn to mandala page.
rodzic
fbca3b65ba
commit
249e5df219
|
@ -1,5 +1,6 @@
|
|||
import type { AttachmentPointType } from "./specs";
|
||||
|
||||
export const DEFAULT_BG_COLOR = "#858585";
|
||||
export const STROKE_REPLACEMENT_COLOR = "#000000";
|
||||
export const FILL_REPLACEMENT_COLOR = "#ffffff";
|
||||
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
import React from "react";
|
||||
|
||||
function getSvgMarkup(el: SVGSVGElement): string {
|
||||
return [
|
||||
`<?xml version="1.0" encoding="utf-8"?>`,
|
||||
|
@ -30,3 +32,10 @@ export function exportSvg(
|
|||
anchor.click();
|
||||
document.body.removeChild(anchor);
|
||||
}
|
||||
|
||||
export const ExportSvgButton: React.FC<{
|
||||
svgRef: React.RefObject<SVGSVGElement>;
|
||||
filename: string;
|
||||
}> = ({ svgRef, filename }) => (
|
||||
<button onClick={() => exportSvg(filename, svgRef)}>Export SVG</button>
|
||||
);
|
||||
|
|
|
@ -11,7 +11,7 @@ import { SymbolContextWidget } from "../symbol-context-widget";
|
|||
import { range } from "../util";
|
||||
|
||||
import { AutoSizingSvg } from "../auto-sizing-svg";
|
||||
import { exportSvg } from "../export-svg";
|
||||
import { ExportSvgButton } from "../export-svg";
|
||||
import {
|
||||
CreatureContext,
|
||||
CreatureContextType,
|
||||
|
@ -22,8 +22,7 @@ import { HoverDebugHelper } from "../hover-debug-helper";
|
|||
import { svgScale, SvgTransforms } from "../svg-transform";
|
||||
import { ColorWidget } from "../color-widget";
|
||||
import { NumericSlider } from "../numeric-slider";
|
||||
|
||||
const DEFAULT_BG_COLOR = "#858585";
|
||||
import { DEFAULT_BG_COLOR } from "../colors";
|
||||
|
||||
/** Symbols that can be the "root" (i.e., main body) of a creature. */
|
||||
const ROOT_SYMBOLS = SvgVocabulary.filter(
|
||||
|
@ -195,8 +194,6 @@ export const CreaturePage: React.FC<{}> = () => {
|
|||
rng: new Random(randomSeed),
|
||||
randomlyInvert,
|
||||
});
|
||||
const handleSvgExport = () =>
|
||||
exportSvg(getDownloadFilename(randomSeed), svgRef);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -238,7 +235,10 @@ export const CreaturePage: React.FC<{}> = () => {
|
|||
<u>R</u>andomize!
|
||||
</button>{" "}
|
||||
<button onClick={() => window.location.reload()}>Reset</button>{" "}
|
||||
<button onClick={handleSvgExport}>Export SVG</button>
|
||||
<ExportSvgButton
|
||||
filename={getDownloadFilename(randomSeed)}
|
||||
svgRef={svgRef}
|
||||
/>
|
||||
</p>
|
||||
<CreatureContext.Provider value={ctx}>
|
||||
<HoverDebugHelper>
|
||||
|
|
|
@ -1,7 +1,11 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useRef, useState } from "react";
|
||||
import { AutoSizingSvg } from "../auto-sizing-svg";
|
||||
import { getBoundingBoxCenter } from "../bounding-box";
|
||||
import { ColorWidget } from "../color-widget";
|
||||
import { DEFAULT_BG_COLOR } from "../colors";
|
||||
import { ExportSvgButton } from "../export-svg";
|
||||
import { HoverDebugHelper } from "../hover-debug-helper";
|
||||
import { NumericSlider } from "../numeric-slider";
|
||||
import { reversePoint } from "../point";
|
||||
import {
|
||||
createSvgSymbolContext,
|
||||
|
@ -53,19 +57,53 @@ const MandalaCircle: React.FC<
|
|||
};
|
||||
|
||||
export const MandalaPage: React.FC<{}> = () => {
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
const [bgColor, setBgColor] = useState(DEFAULT_BG_COLOR);
|
||||
const [symbolCtx, setSymbolCtx] = useState(createSvgSymbolContext());
|
||||
const [radius, setRadius] = useState(400);
|
||||
const [numSymbols, setNumSymbols] = useState(6);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Mandala!</h1>
|
||||
<SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx} />
|
||||
<SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx}>
|
||||
<ColorWidget
|
||||
label="Background"
|
||||
id="bgColor"
|
||||
value={bgColor}
|
||||
onChange={setBgColor}
|
||||
/>{" "}
|
||||
</SymbolContextWidget>
|
||||
<p>
|
||||
<NumericSlider
|
||||
id="radius"
|
||||
label="Radius"
|
||||
value={radius}
|
||||
onChange={setRadius}
|
||||
min={0}
|
||||
max={1000}
|
||||
step={1}
|
||||
/>
|
||||
<NumericSlider
|
||||
id="symbols"
|
||||
label="Numer of symbols"
|
||||
value={numSymbols}
|
||||
onChange={setNumSymbols}
|
||||
min={1}
|
||||
max={30}
|
||||
step={1}
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<ExportSvgButton filename="mandala.svg" svgRef={svgRef} />
|
||||
</p>
|
||||
<HoverDebugHelper>
|
||||
<AutoSizingSvg padding={20}>
|
||||
<AutoSizingSvg padding={20} ref={svgRef} bgColor={bgColor}>
|
||||
<SvgTransforms transforms={[svgScale(0.5)]}>
|
||||
<MandalaCircle
|
||||
data={EYE}
|
||||
radius={400}
|
||||
numSymbols={6}
|
||||
radius={radius}
|
||||
numSymbols={numSymbols}
|
||||
{...symbolCtx}
|
||||
/>
|
||||
</SvgTransforms>
|
||||
|
|
Ładowanie…
Reference in New Issue