# 图元

> 图元组件的参考：一幅由实时点位驱动的可动工业 SVG，以及它的输入、连线和朝向。

**图元**把一幅工业 SVG 图形放到画面上，比如一台泵、一个阀门、一个罐，并且用实时点位驱动它所声明的那些输入，于是这幅图形跟着现场动起来。它是唯一一种在放置之前就先选定身份的组件：面板上的那一项打开图元库（内置的系统图元包，加上操作员自己导入的图元），你挑中的那一个就是落到画布上的那一个。引用解析不到的组件画出一个中性的占位图形，而不是随便一台设备，理由在它的提示里。

一个图元*做得到*什么，也就是哪些子元素会动、每个输入接受什么、它的连接点在哪里，是在图元自身里写定的，不在这块面板里。文件格式和它的词汇写在[可移植 SVG 图元](ganter-symbols)。

## 内容 {#content}

面板一开头就说明这个实例是什么：一张预览图、图元的名称和它的出处（`<library> · <category>`）。**更换图元…**打开图元库来替换这幅图形；只有图形会变，位置、大小、朝向，以及新图元仍然声明的每一条连线和每一个绑定，都保持原样。一个不声明任何动态输入的图元，会在这里说明这一点。

## 数据：图元的各个输入 {#data-the-symbols-inputs}

图元声明的每一个输入各占一个字段，字段的说明写着它接受什么，也就是值类别，以及在声明限定了范围时的那个范围，例如 `小数 · 0 到 100`、`布尔值`、`颜色`、`文本`。同一个类别也过滤地址建议，所以字段说的和字段给的不可能互相打架。

每一个输入都带着一个明确的来源选择，于是任何时候只有两者之一生效，来源是操作员的决定，绝不是靠猜哪个字段恰好装着文字：

| 来源 | 字段接受什么 |
|---|---|
| 地址 | 一个所声明类别的带根 Logic 地址。指名之后，点位当前的读数显示在字段下面；颜色到来时已经画好了，就在它的十六进制值旁边，因为那串字面值说不出它所代表的那种涂色。 |
| 固定值 | 一个常量，按声明自己的方式键入：一个带着所声明边界的数值字段、一个真假开关、一个颜色挑选器（一个十六进制值、一个 CSS 颜色名，或者一个 `var(--color-…)` 记号），或者朴素的文本。 |

输入所拒绝的固定值，比如超出所声明范围的数、被消毒器拒绝的涂色，会连同理由一起留在屏幕上，而不是悄悄弹回去；在这一次输入变成图元接受的东西之前，什么也不保存。空的输入是一个还没设定值的来源：这个输入保持中性，和一个空地址完全一样。绑定点位上的质量不可用读起来是一个不可用的采样点：这个输入什么也不施加，那个元素保留它被写定的状态，而不是照着一个谁也没测到的值动起来。

## 连线 {#connections}

只有声明了连接点的图元才显示。这个分区列出：

- **类型配置**：图元在若干个连接点之间共用同一种连线类型时（比如某种工艺流体），每份配置是一个下拉框，从它允许的那些类型里选，而这个选择由使用它的每一个连接点共用。改选之后，连线会跟着一起变：仍是该连接点原来类型的连线锚点改为新类型，被设成其他类型的连线锚点保留自己的类型。
- **连接点**：图元各个连接点的一份只读名册，写着锚点、角色（输入、输出、双向）和解析出来的类型。不必离开面板就能回答“这个图元可以接到什么上面”；空闲还是被占用的状态留在画布的标记上，接线的手势就在那里。

## 朝向 {#orientation}

图形朝哪一边，是图元独有、别的类型都没有的那一项外观。它画多大不在这里问：那是外观分区里共用的内容缩放。

| 属性 | 作用 | 取值 | 默认 |
|---|---|---|---|
| 旋转角度 | 图形顺时针旋转，按四分之一圈计。 | 0° · 90° · 180° · 270° | 0° |
| 水平翻转 | 让图形绕它的竖轴镜像。 | 开 / 关 | 关 |
| 垂直翻转 | 让图形绕它的横轴镜像。 | 开 / 关 | 关 |