59 wiersze
1.5 KiB
TypeScript
59 wiersze
1.5 KiB
TypeScript
import React from "react";
|
|
import { SvgSymbolContext } from "./svg-symbol";
|
|
import { float } from "./util";
|
|
|
|
export const SymbolContextWidget: React.FC<{
|
|
ctx: SvgSymbolContext;
|
|
onChange: (value: SvgSymbolContext) => void;
|
|
children?: any;
|
|
}> = ({ ctx, children, onChange }) => {
|
|
const updateCtx = (updates: Partial<SvgSymbolContext>) => {
|
|
onChange({ ...ctx, ...updates });
|
|
};
|
|
|
|
return (
|
|
<p>
|
|
{children}
|
|
<label htmlFor="stroke">Stroke: </label>
|
|
<input
|
|
type="color"
|
|
value={ctx.stroke}
|
|
onChange={(e) => updateCtx({ stroke: e.target.value })}
|
|
id="stroke"
|
|
/>{" "}
|
|
<label htmlFor="fill">Fill: </label>
|
|
<input
|
|
type="color"
|
|
value={ctx.fill}
|
|
onChange={(e) => updateCtx({ fill: e.target.value })}
|
|
id="fill"
|
|
/>{" "}
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={ctx.showSpecs}
|
|
onChange={(e) => updateCtx({ showSpecs: e.target.checked })}
|
|
/>{" "}
|
|
Show specs
|
|
</label>
|
|
{ctx.uniformStrokeWidth !== undefined && (
|
|
<>
|
|
<br />
|
|
<label htmlFor="strokeWidth">Stroke width: </label>
|
|
<input
|
|
type="range"
|
|
min={0}
|
|
max={3}
|
|
step={0.1}
|
|
value={ctx.uniformStrokeWidth}
|
|
onChange={(e) =>
|
|
updateCtx({ uniformStrokeWidth: float(e.target.value) })
|
|
}
|
|
/>{" "}
|
|
{ctx.uniformStrokeWidth}{" "}
|
|
</>
|
|
)}
|
|
</p>
|
|
);
|
|
};
|