2021-02-17 13:07:04 +00:00
|
|
|
import React from "react";
|
2021-03-28 11:38:32 +00:00
|
|
|
import { Checkbox } from "./checkbox";
|
2021-03-27 11:14:42 +00:00
|
|
|
import { ColorWidget } from "./color-widget";
|
2021-03-27 11:24:15 +00:00
|
|
|
import { NumericSlider } from "./numeric-slider";
|
2021-03-06 00:38:25 +00:00
|
|
|
import { SvgSymbolContext, swapColors } from "./svg-symbol";
|
2021-02-17 13:07:04 +00:00
|
|
|
|
2021-04-02 20:33:07 +00:00
|
|
|
export type SymbolContextWidgetProps<T extends SvgSymbolContext> = {
|
|
|
|
ctx: T;
|
|
|
|
onChange: (value: T) => void;
|
2021-02-20 16:38:04 +00:00
|
|
|
children?: any;
|
2021-04-02 20:33:07 +00:00
|
|
|
extraButtons?: JSX.Element;
|
|
|
|
};
|
|
|
|
|
|
|
|
export function SymbolContextWidget<T extends SvgSymbolContext>({
|
|
|
|
ctx,
|
|
|
|
children,
|
|
|
|
onChange,
|
|
|
|
extraButtons,
|
|
|
|
}: SymbolContextWidgetProps<T>): JSX.Element {
|
2021-02-17 13:07:04 +00:00
|
|
|
const updateCtx = (updates: Partial<SvgSymbolContext>) => {
|
|
|
|
onChange({ ...ctx, ...updates });
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
2021-03-27 12:34:22 +00:00
|
|
|
<div className="thingy">
|
2021-02-20 16:38:04 +00:00
|
|
|
{children}
|
2021-03-27 11:14:42 +00:00
|
|
|
<ColorWidget
|
|
|
|
label="Stroke"
|
|
|
|
value={ctx.stroke}
|
|
|
|
onChange={(stroke) => updateCtx({ stroke })}
|
2021-02-17 13:07:04 +00:00
|
|
|
/>{" "}
|
2021-03-27 11:14:42 +00:00
|
|
|
<ColorWidget
|
|
|
|
label="Fill"
|
|
|
|
value={ctx.fill}
|
|
|
|
onChange={(fill) => updateCtx({ fill })}
|
2021-02-17 13:07:04 +00:00
|
|
|
/>{" "}
|
2021-03-06 00:38:25 +00:00
|
|
|
<button onClick={() => updateCtx(swapColors(ctx))}>
|
|
|
|
Swap stroke/fill
|
|
|
|
</button>{" "}
|
2021-04-02 20:33:07 +00:00
|
|
|
{extraButtons}
|
2021-03-28 11:38:32 +00:00
|
|
|
<Checkbox
|
|
|
|
label="Show specs"
|
|
|
|
value={ctx.showSpecs}
|
|
|
|
onChange={(showSpecs) => updateCtx({ showSpecs })}
|
|
|
|
/>
|
2021-02-19 03:13:01 +00:00
|
|
|
{ctx.uniformStrokeWidth !== undefined && (
|
2021-03-29 17:03:54 +00:00
|
|
|
<div className="thingy">
|
2021-03-27 11:24:15 +00:00
|
|
|
<NumericSlider
|
|
|
|
label="Stroke width"
|
2021-02-20 16:41:41 +00:00
|
|
|
min={0}
|
2021-02-19 03:13:01 +00:00
|
|
|
max={3}
|
|
|
|
step={0.1}
|
|
|
|
value={ctx.uniformStrokeWidth}
|
2021-03-27 11:24:15 +00:00
|
|
|
onChange={(uniformStrokeWidth) => updateCtx({ uniformStrokeWidth })}
|
2021-03-29 17:03:54 +00:00
|
|
|
/>
|
|
|
|
</div>
|
2021-02-19 03:13:01 +00:00
|
|
|
)}
|
2021-03-27 12:34:22 +00:00
|
|
|
</div>
|
2021-02-17 13:07:04 +00:00
|
|
|
);
|
2021-04-02 20:33:07 +00:00
|
|
|
}
|