Add support for invert_nested (#17).

pull/43/head
Atul Varma 2021-03-05 19:38:25 -05:00
rodzic 911c0ed30b
commit ecf98deedb
7 zmienionych plików z 36 dodań i 10 usunięć

Wyświetl plik

@ -18,6 +18,7 @@ type SimpleCreatureSymbolProps = AttachmentIndices & {
nestInside?: boolean;
children?: AttachmentChildren;
attachTo?: AttachmentPointType;
invert?: boolean;
indices?: number[];
};
@ -129,6 +130,7 @@ function getCreatureSymbol(
data,
attachments: attachments.map(extractAttachedCreatureSymbol),
nests: nests.map(extractNestedCreatureSymbol),
invertColors: props.invert ?? false,
};
return result;
}

Wyświetl plik

@ -9,6 +9,7 @@ import {
SvgSymbolContent,
SvgSymbolContext,
SvgSymbolData,
swapColors,
} from "./svg-symbol";
const DEFAULT_ATTACHMENT_SCALE = 0.5;
@ -76,6 +77,7 @@ export type NestedCreatureSymbol = CreatureSymbol & {
export type CreatureSymbol = {
data: SvgSymbolData;
invertColors: boolean;
attachments: AttachedCreatureSymbol[];
nests: NestedCreatureSymbol[];
};
@ -227,10 +229,14 @@ const NestedCreatureSymbol: React.FC<NestedCreatureSymbolProps> = ({
};
export const CreatureSymbol: React.FC<CreatureSymbolProps> = (props) => {
const ctx = useContext(CreatureContext);
let ctx = useContext(CreatureContext);
const { data, attachments, nests } = props;
const childCtx: CreatureContextType = { ...ctx, parent: data };
if (props.invertColors) {
ctx = swapColors(ctx);
}
// The attachments should be before our symbol in the DOM so they
// appear behind our symbol, while anything nested within our symbol
// should be after our symbol so they appear in front of it.

Wyświetl plik

@ -79,6 +79,7 @@ function getNestingChildren(
attachments: [],
nests: [],
indices,
invertColors: meta?.invert_nested ?? false,
},
];
}
@ -99,6 +100,7 @@ function getSymbolWithAttachments(
data: root,
attachments: [],
nests: getNestingChildren(root, rng, true),
invertColors: false,
};
if (root.specs) {
const attachmentKinds = rng.uniqueChoices(
@ -116,6 +118,7 @@ function getSymbolWithAttachments(
indices,
attachments: [],
nests: getNestingChildren(attachment, rng),
invertColors: false,
});
}
}
@ -160,7 +163,7 @@ const EYE_CREATURE = (
</Hand>
</Crown>
<Leg attachTo="leg" left right />
<Tail attachTo="tail" />
<Tail attachTo="tail" invert />
</Eye>
);

Wyświetl plik

@ -16,12 +16,19 @@ type SvgSymbolMetadataBooleans = {
* be nested inside another symbol's nesting area.
*/
never_be_nested?: boolean;
/**
* If true, this indicates that any symbols nested on this
* symbols nesting area should have their colors inverted.
*/
invert_nested?: boolean;
};
const METADATA_BOOLEANS: Set<keyof SvgSymbolMetadataBooleans> = new Set([
"always_nest",
"always_be_nested",
"never_be_nested",
"invert_nested",
]);
function isSvgSymbolMetadataBoolean(

Wyświetl plik

@ -43,6 +43,14 @@ const DEFAULT_CONTEXT: SvgSymbolContext = {
uniformStrokeWidth: DEFAULT_UNIFORM_STROKE_WIDTH,
};
export function swapColors<T extends SvgSymbolContext>(ctx: T): T {
return {
...ctx,
fill: ctx.stroke,
stroke: ctx.fill,
};
}
export function createSvgSymbolContext(
ctx: Partial<SvgSymbolContext> = {}
): SvgSymbolContext {

Wyświetl plik

@ -1,5 +1,5 @@
import React from "react";
import { SvgSymbolContext } from "./svg-symbol";
import { SvgSymbolContext, swapColors } from "./svg-symbol";
import { float } from "./util";
export const SymbolContextWidget: React.FC<{
@ -10,12 +10,6 @@ export const SymbolContextWidget: React.FC<{
const updateCtx = (updates: Partial<SvgSymbolContext>) => {
onChange({ ...ctx, ...updates });
};
const swapColors = () => {
updateCtx({
fill: ctx.stroke,
stroke: ctx.fill,
});
};
return (
<p>
@ -34,7 +28,9 @@ export const SymbolContextWidget: React.FC<{
onChange={(e) => updateCtx({ fill: e.target.value })}
id="fill"
/>{" "}
<button onClick={swapColors}>Swap stroke/fill</button>{" "}
<button onClick={() => updateCtx(swapColors(ctx))}>
Swap stroke/fill
</button>{" "}
<label>
<input
type="checkbox"

Wyświetl plik

@ -19,3 +19,7 @@ always_be_nested = false
# If true, this indicates that the symbol should never
# be nested inside another symbol's nesting area.
never_be_nested = false
# If true, this indicates that any symbols nested on this
# symbols nesting area should have their colors inverted.
invert_nested = false