2021-03-29 11:58:50 +00:00
|
|
|
import React, { useMemo, useState } from "react";
|
2021-02-14 17:32:55 +00:00
|
|
|
import { dilateBoundingBox, getBoundingBoxSize } from "../bounding-box";
|
2021-02-15 14:56:02 +00:00
|
|
|
import {
|
|
|
|
createSvgSymbolContext,
|
|
|
|
SvgSymbolContent,
|
|
|
|
SvgSymbolData,
|
|
|
|
} from "../svg-symbol";
|
2021-02-15 13:33:33 +00:00
|
|
|
import { SvgVocabulary } from "../svg-vocabulary";
|
2021-02-15 14:56:02 +00:00
|
|
|
import { SvgSymbolContext } from "../svg-symbol";
|
2021-02-17 13:07:04 +00:00
|
|
|
import { SymbolContextWidget } from "../symbol-context-widget";
|
2021-02-27 18:28:44 +00:00
|
|
|
import { HoverDebugHelper } from "../hover-debug-helper";
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
import { Page } from "../page";
|
2021-02-14 17:32:55 +00:00
|
|
|
|
|
|
|
type SvgSymbolProps = {
|
|
|
|
data: SvgSymbolData;
|
|
|
|
scale?: number;
|
|
|
|
} & SvgSymbolContext;
|
|
|
|
|
|
|
|
const px = (value: number) => `${value}px`;
|
|
|
|
|
2021-02-15 13:33:33 +00:00
|
|
|
const BBOX_DILATION = 100;
|
2021-02-14 17:32:55 +00:00
|
|
|
|
|
|
|
const SvgSymbol: React.FC<SvgSymbolProps> = (props) => {
|
|
|
|
const d = props.data;
|
|
|
|
const bbox = dilateBoundingBox(d.bbox, BBOX_DILATION);
|
|
|
|
const scale = props.scale || 1;
|
|
|
|
const [width, height] = getBoundingBoxSize(bbox);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<svg
|
|
|
|
viewBox={`${bbox.x.min} ${bbox.y.min} ${width} ${height}`}
|
|
|
|
width={px(width * scale)}
|
|
|
|
height={px(height * scale)}
|
|
|
|
>
|
2021-02-15 14:56:02 +00:00
|
|
|
<SvgSymbolContent {...props} />
|
2021-02-14 17:32:55 +00:00
|
|
|
</svg>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export const VocabularyPage: React.FC<{}> = () => {
|
2021-02-17 13:07:04 +00:00
|
|
|
const [ctx, setCtx] = useState(createSvgSymbolContext());
|
2021-03-29 11:58:50 +00:00
|
|
|
const [filter, setFilter] = useState("");
|
|
|
|
const finalFilter = filter.toLowerCase().replace(/ /g, "_");
|
|
|
|
const items = useMemo(
|
|
|
|
() =>
|
|
|
|
SvgVocabulary.items.filter((item) =>
|
|
|
|
item.name.toLowerCase().includes(finalFilter)
|
|
|
|
),
|
|
|
|
[finalFilter]
|
|
|
|
);
|
2021-02-14 17:32:55 +00:00
|
|
|
|
|
|
|
return (
|
2021-04-02 23:02:40 +00:00
|
|
|
<Page title="Vocabulary!">
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
<div className="sidebar">
|
|
|
|
<div className="flex-widget">
|
|
|
|
<label htmlFor="filter">Search for symbols: </label>
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
id="filter"
|
|
|
|
value={filter}
|
|
|
|
onChange={(e) => setFilter(e.target.value)}
|
|
|
|
placeholder="🔎"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<SymbolContextWidget ctx={ctx} onChange={setCtx} />
|
2021-03-29 11:58:50 +00:00
|
|
|
</div>
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
<div className="canvas scrollable">
|
|
|
|
<HoverDebugHelper>
|
|
|
|
{items.map((symbolData) => (
|
2021-02-27 18:28:44 +00:00
|
|
|
<div
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
key={symbolData.name}
|
2021-02-27 18:28:44 +00:00
|
|
|
style={{
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
display: "inline-block",
|
|
|
|
border: "1px solid black",
|
|
|
|
margin: "4px",
|
2021-02-27 18:28:44 +00:00
|
|
|
}}
|
|
|
|
>
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
backgroundColor: "black",
|
|
|
|
color: "white",
|
|
|
|
padding: "4px",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{symbolData.name}
|
|
|
|
</div>
|
|
|
|
<div className="checkerboard-bg" style={{ lineHeight: 0 }}>
|
|
|
|
<SvgSymbol data={symbolData} scale={0.25} {...ctx} />
|
|
|
|
</div>
|
2021-02-27 18:28:44 +00:00
|
|
|
</div>
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
))}
|
|
|
|
</HoverDebugHelper>
|
|
|
|
</div>
|
|
|
|
</Page>
|
2021-02-14 17:32:55 +00:00
|
|
|
);
|
|
|
|
};
|