@ captive 起源/ onepedigre- react
服务器可响应的 SVG pedigree 视图
@captiveorigins/onepedigree-core。 。 。 .
import { layoutPedigree, projectPedigree } from '@captiveorigins/onepedigree-core'
import { PedigreeExplorer, PedigreeView } from '@captiveorigins/onepedigree-react'
import '@captiveorigins/onepedigree-react/styles.css'
// Static (server component, no client JavaScript; nodes are ordinary links):
export async function AnimalPedigree({ document, focalId }) {
const projection = projectPedigree(document, { focalId, view: 'pedigree', ancestorDepth: 4, maxNodes: 500 })
const layout = await layoutPedigree(projection, { orientation: 'vertical' })
return <PedigreeView projection={projection} layout={layout} getIndividualHref={(a) => `/animals/${a.id}`} />
}
// Interactive (client): pan, zoom, fit, selection, highlighting, keyboard, quick view, SVG/print export.
<PedigreeExplorer projection={projection} layout={layout} height="32rem" />
视图
所有13个核心观点: pedigree, (中文(简体) ), fan, (中文(简体) ), ahnentafel, (中文(简体) ), descendants, (中文(简体) ), hourglass, (中文(简体) ),
cohort, (中文(简体) ), relationship, (中文(简体) ), timeline, (中文(简体) ), inbreeding, (中文(简体) ), population, (中文(简体) ), compact, (中文(简体) ), maternal, (中文(简体) ),
paternal。重复的个人遵循投影 merge, (中文(简体) ), separate 或者说 hybrid 模式;
选择一个事件,突出该个人的每一起事件.
通过拖曳重排
在秩序是一种选择(后人、小时镜、群体、人口、关系)的情况下,人们可以拖出节点的侧面,在兄弟姐妹之间重新排列。 祖籍图书保持了父亲/母亲的习俗. 节点只在自己划出的群体(离合器或垃圾架)和父母相同的个人之间移动,因此框和家族界线都真实无误。 数据永远不会改变:顺序是您保留(并可能保存)的布局选项.
const [nodeOrder, setNodeOrder] = useState<string[]>([])
const layout = useMemo(() => layoutSync(projection, { nodeOrder }), [projection, nodeOrder])
<PedigreeExplorer projection={projection} layout={layout} nodeOrder={nodeOrder} onNodeOrderChange={setNodeOrder} />
dropNodeOrder(layout, occurrenceId, delta, current, groupOf) 用于自定义 UI 的导出.
主题和颜色
7个预设,每个预设都带有自己的每景口音(例如温暖的妈妈和酷儿的父亲)
线条,关系和繁衍取景的不同亮点,扇形环阴影:
classic, (中文(简体) ), midnight, (中文(简体) ), forest, (中文(简体) ), ocean, (中文(简体) ), terracotta, (中文(简体) ), high-contrast, (中文(简体) ), print。 。 。 .
<PedigreeView projection={projection} layout={layout} theme="forest" />
<PedigreeExplorer projection={projection} layout={layout} theme="ocean" themeEditor onThemeChange={save} />
themeEditor 添加颜色按钮: 选择预设并用取色器调整任何颜色
或十六进制码, 用于所有视图或仅用于当前视图, 当文本对比度下降时带有警告
位于WCAG AA以下. onThemeChange 接收编辑后的主题( 一个普通对象)以存储; 通过它
恢复为 theme。 。 。 . ThemeEditor 也导出用于您自己的设置页面。 主题是
作为内置自定义属性被渲染出,所以它们在服务器渲染中工作.
品牌家庭
一个Pedigree和一个Taxonomy共享一个骨干(brand/README.md: 同一行图标(Icon, (中文(简体) ), ICON_PATHS),32 px控件,浮动帆布工具栏和Captive Origins橙色焦点环,而每个都保留了自己的视角和性能.
样式
- 默认样式表
styles.css(可选的;留出用于无样式模式). - CSS 自定义属性 :
--op-node-background, (中文(简体) ),--op-node-border, (中文(简体) ),--op-connector, (中文(简体) ),--op-selected-ring, (中文(简体) ),--op-highlight, (中文(简体) ),--op-focal-border, (中文(简体) ),--op-label,, , , , , , , , - 稳定班级(
.op-root, (中文(简体) ),.op-node, (中文(简体) ),.op-individual, (中文(简体) ),.op-connector, (中文(简体) ),.op-junction, (中文(简体) ),.op-cohort, (中文(简体) ),.op-fan-segment)和数据属性(data-individual, (中文(简体) ),data-occurrence, (中文(简体) ),data-repeated, (中文(简体) ),data-generation, (中文(简体) ),data-cohort, (中文(简体) ),data-reproductive-mode, (中文(简体) ),data-sex, (中文(简体) ),data-focal, (中文(简体) ),data-selected, (中文(简体) ),data-highlighted) (中文(简体) ). classNames覆盖并渲染槽renderIndividual, (中文(简体) ),renderCohortMarker, (中文(简体) ),renderQuickView。 。 。 .- 无头:
@captiveorigins/onepedigree-react/headless(吼声)usePedigreeProjection, (中文(简体) ),usePedigreeLayout, (中文(简体) ),usePedigreeSelection, (中文(简体) ),usePedigreeNavigation, (中文(简体) ),useOccurrenceHighlighting,以及describeProjection为了你自己的制造器.
无障碍
语义 SVG 与 <title>编号 :<desc> 摘要,每个节点可访问名称,键盘
导航(节点之间、 输入选择、 逃出清除、 +/−/ 0 缩放、 Shift+ rows)
),可可见的焦点,减动支持,以及非颜色提示:相交形状(圆形=
双亲模式,菱形=单亲家庭模式,正方形=可变;空心=不完整,行
每一个生殖模式的图案,以及一个qq标记加上重复的个体的破折边界.
许可证
非商业形式 1.0.0. 免费用于非商业用途,具有归属性;商业用途需要从Captive Origins获得单独的许可证. 这一变化之前出版的版本仍然属于麻省理工学院.