Add support for invert_nested (#17).
rodzic
911c0ed30b
commit
ecf98deedb
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
||||
|
|
|
@ -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
|
||||
* symbol’s 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(
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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
|
||||
# symbol’s nesting area should have their colors inverted.
|
||||
invert_nested = false
|
||||
|
|
Ładowanie…
Reference in New Issue