Add a 'mono' button. (#229)
This adds another color-modifying button, "Mono", which makes the fill and stroke colors a minor variation of the background. This makes the composition as a whole monochromatic, hence the name. In practice, this is just tinting the background by black (stroke) and white (fill) a tiny bit. The color transformation could be used, for instance, to turn a cluster (even a simple one that is essentially just a single symbol) into a background for another cluster. (Note that there's not currently an easy way to actually compose multiple compositions like this, though I'd like there to be!)pull/233/head
rodzic
1bfd8d1bba
commit
05d1dac1dd
|
@ -1,4 +1,5 @@
|
|||
import React from "react";
|
||||
import { mixColor } from "./color-util";
|
||||
import { ColorWidget } from "./color-widget";
|
||||
import { DEFAULT_BG_COLOR } from "./colors";
|
||||
import { createSvgSymbolContext, SvgSymbolContext } from "./svg-symbol";
|
||||
|
@ -38,6 +39,13 @@ export function CompositionContextWidget<T extends SvgCompositionContext>({
|
|||
const { background, stroke, fill } = DEFAULT_CONTEXT;
|
||||
onChange({ ...ctx, background, stroke, fill });
|
||||
};
|
||||
const monochromatizeColors = () => {
|
||||
onChange({
|
||||
...ctx,
|
||||
stroke: mixColor(ctx.background, DEFAULT_CONTEXT.stroke, 0.1),
|
||||
fill: mixColor(ctx.background, DEFAULT_CONTEXT.fill, 0.1),
|
||||
});
|
||||
};
|
||||
const extraButtons = (
|
||||
<>
|
||||
<button
|
||||
|
@ -46,6 +54,12 @@ export function CompositionContextWidget<T extends SvgCompositionContext>({
|
|||
>
|
||||
B&W
|
||||
</button>{" "}
|
||||
<button
|
||||
onClick={monochromatizeColors}
|
||||
title="Make stroke and fill a variation of the background"
|
||||
>
|
||||
Mono
|
||||
</button>{" "}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
|
|
Ładowanie…
Reference in New Issue