@fmsim/fmsim 0.0.98 → 0.0.99

package/dist-app/helps/board-modeller/modeller.zh.md

@@ -0,0 +1,241 @@
+# 建模器
+
+## 建模器布局
+
+说明建模器的布局。
+![建模器-布局][layout]
+
+1. 控制工具栏：聚集了控制还原、复制、排序、反转等组件的功能的工具栏。
+
+1. 组件工具栏：聚集了可以被用在建模器的组件的工具栏。
+
+1. 属性窗口：聚集了组件的属性的窗口。
+
+
+[layout]: ./images/modeler-layout-01.png
+
+## 控制工具栏
+
+列出当前正在建模的场景的功能并简化建模所需的功能的工具栏。  
+<span style="font-size: 13px; line-height:30px;">  （如果OS是Mac，请使用<kbd>Ctrl</kbd>键为<kbd class="dark">⌘</kbd>。）</span>
+![控制工具栏][control-toolbar]
+
+1. 撤销![撤销][撤销](<kbd>Ctrl</kbd> + <kbd>Z</kbd>) :  
+  可以恢复用户最终编辑的内容的功能。
+
+1. 重做![重做][重做](<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd>) :  
+  重新执行通过撤销而取消的操作。
+
+1. 剪切![剪切][剪切](<kbd>Ctrl</kbd> + <kbd>X</kbd>) :  
+  将所选组件复制到剪贴板时，删除当前组件。
+
+1. 复制![复制][复制](<kbd>Ctrl</kbd> + <kbd>C</kbd>) :  
+  将所选组件复制到剪贴板。
+
+1. 粘贴![粘贴][粘贴](<kbd>Ctrl</kbd> + <kbd>V</kbd>) :  
+  将已复制的组件粘贴到剪贴板。
+
+1. 删除![删除][删除](<kbd>Delete</kbd> or <kbd>Backspace</kbd>) :  
+  删除所选组件。
+
+1. 左对齐![左对齐][左对齐](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>) :  
+  以位于所选组件的最左边的组件为标准，向左对齐组件。
+
+1. 居中对齐![居中对齐][居中对齐](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>) :  
+  以所选组件的中心坐标为标准，居中对齐组件的X坐标。
+
+1. 右对齐![右对齐][右对齐](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd>) :  
+  以位于所选组件的最右边的组件为标准，向右对齐组件。
+
+1. 上对齐![上对齐][上对齐](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>T</kbd>) :  
+  以位于所选组件的最上方的组件为标准，向上对齐组件。
+
+1. 居中对齐![居中对齐][居中对齐](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd>) :  
+  以所选组件的中心坐标为标准，居中对齐组件的Y坐标。
+
+1. 下对齐![下对齐][下对齐](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd>) :  
+  以位于所选组件的最下方的组件为标准，向下对齐组件。
+
+1. 水平均布![水平均布][水平均布](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd>) :  
+  根据所选组件在水平方向两端的组件，将每个组件之间调整为相同的宽度。
+
+1. 垂直均布![垂直均布][垂直均布](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd>) :  
+  根据所选组件在垂直方向两端的组件，将每个组件之间调整为相同的高度。
+
+1. 置为顶层![置为顶层][置为顶层](<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd>) :  
+  将所选组件的顺序推到最顶层。
+
+1. 置为底层![置为底层][置为底层](<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd>) :  
+  将所选组件的顺序推到最底层。
+
+1. 前移一层![前移一层][前移一层](<kbd>Ctrl</kbd> + <kbd>F</kbd>) :  
+  将所选组件的顺序向前推动一层。
+
+1. 后移一层![后移一层][后移一层](<kbd>Ctrl</kbd> + <kbd>B</kbd>) :  
+  将所选组件的顺序向后推动一层。
+
+1. 水平翻转![水平翻转][水平翻转](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd>) :  
+  水平翻转所选组件。
+
+1. 垂直翻转![垂直翻转][垂直翻转](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Y</kbd>) :  
+  垂直翻转所选组件。
+
+1. 顺时针旋转![顺时针旋转][顺时针旋转](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd>) :  
+  将所选组件顺时针旋转90度。
+
+1. 逆时针旋转![逆时针旋转][逆时针旋转](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>W</kbd>) :  
+  将所选组件逆时针旋转90度。
+
+1. 打组![打组][打组](<kbd>Ctrl</kbd> + <kbd>G</kbd>) :  
+  打组所选组件。
+
+1. 解组![解组][解组](<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>G</kbd>) :  
+  取消所选组。
+
+1. 增加文本大小![增加文本大小][增加文本大小](<kbd>Shift</kbd> + <kbd>WheelUp</kbd>) :  
+  增加所选组件的文本大小。
+
+1. 减少文本大小![减少文本大小][减少文本大小](<kbd>Shift</kbd> + <kbd>WheelDown</kbd>) :  
+  减少所选组件的文本大小。
+
+1. 调整画布大小![调整画布大小][调整画布大小](<kbd>Ctrl</kbd> + <kbd>D</kbd>) :  
+  将画布大小调整到画面。
+
+1. 预览![预览][预览](<kbd>Ctrl</kbd> + <kbd>P</kbd>) :  
+  在正在编辑的建模画面上，预览3D组件、动画和其他效果。    
+
+1. 全屏![全屏][全屏](<kbd>F11</kbd>) :  
+  隐藏所有工具栏和属性窗口，将建模画面转换为全屏。
+
+1. 隐藏属性窗口![隐藏属性窗口][隐藏属性窗口](<kbd>Ctrl</kbd> + <kbd>H</kbd>) :  
+  隐藏或显示属性窗口。
+
+
+
+[control-toolbar]: ./images/control-toolbar.png
+
+[撤销]: ./images/control-toolbar-02.png
+
+[重做]: ./images/control-toolbar-03.png
+
+[剪切]: ./images/control-toolbar-04.png
+
+[复制]: ./images/control-toolbar-05.png
+
+[粘贴]: ./images/control-toolbar-06.png
+
+[删除]: ./images/control-toolbar-07.png
+
+[左对齐]: ./images/control-toolbar-09.png
+
+[居中对齐]: ./images/control-toolbar-10.png
+
+[右对齐]: ./images/control-toolbar-11.png
+
+[上对齐]: ./images/control-toolbar-12.png
+
+[居中对齐]: ./images/control-toolbar-13.png
+
+[下对齐]: ./images/control-toolbar-14.png
+
+[水平均布]: ./images/control-toolbar-15.png
+
+[垂直均布]: ./images/control-toolbar-16.png
+
+[置为顶层]: ./images/control-toolbar-17.png
+
+[置为底层]: ./images/control-toolbar-18.png
+
+[前移一层]: ./images/control-toolbar-19.png
+
+[后移一层]: ./images/control-toolbar-20.png
+
+[水平翻转]: ./images/control-toolbar-21.png
+
+[垂直翻转]: ./images/control-toolbar-22.png
+
+[顺时针旋转]: ./images/control-toolbar-23.png
+
+[逆时针旋转]: ./images/control-toolbar-24.png
+
+[打组]: ./images/control-toolbar-25.png
+
+[解组]: ./images/control-toolbar-26.png
+
+[增加文本大小]: ./images/control-toolbar-27.png
+
+[减少文本大小]: ./images/control-toolbar-28.png
+
+[调整画布大小]: ./images/control-toolbar-29.png
+
+[预览]: ./images/control-toolbar-32.png
+
+[全屏]: ./images/control-toolbar-30.png
+
+[隐藏属性窗口]: ./images/control-toolbar-31.png
+
+
+## 组件工具栏
+
+聚集了可以被用于建模器的组件的工具栏。如果在组件工具栏中，点击所需的组件，就会在建模器添加相关组件。  
+
+- ![箭头][component-arrow] : 变更选择模式和移动模式。当按住<kbd>Space</kbd>时，将会动作为移动模式。
+
+- ![线][component-line] : 聚集线组件。
+
+- ![形状][component-shape] : 聚集形状组件。
+
+- ![文本媒体][component-text-media] : 聚集文本媒体组件。
+
+- ![图表仪表][component-chart-gauge] : 聚集图表仪表组件。
+
+- ![表格][component-table] : 聚集表格组件。
+
+- ![集装箱][component-container] : 聚集集装箱组件。
+
+- ![数据源][component-datasource] : 聚集数据源组件。
+
+- ![IOT][component-iot] : 聚集IOT组件。
+
+- ![3D][component-3D] : 聚集3D组件。
+
+- ![仓库][component-warehouse] : 聚集仓库组件。
+
+- ![表单][component-form] : 聚集表单组件。
+
+- ![其他][component-etc] : 聚集其他组件。
+
+[component-toolbar]: ./images/component-toolbar.png
+[component-arrow]: ./images/component-arrow.png
+[component-line]: ./images/component-line.png
+[component-shape]: ./images/component-shape.png
+[component-text-media]: ./images/component-text-media.png
+[component-chart-gauge]: ./images/component-chart-gauge.png
+[component-table]: ./images/component-table.png
+[component-container]: ./images/component-container.png
+[component-datasource]: ./images/component-datasource.png
+[component-iot]: ./images/component-iot.png
+[component-3D]: ./images/component-3D.png
+[component-warehouse]: ./images/component-warehouse.png
+[component-form]: ./images/component-form.png
+[component-etc]: ./images/component-etc.png
+
+## 属性窗口
+说明属性窗口的功能。  
+
+1. ![形状属性页面][shape-property-tab]: 相关组件形状的属性。可以赋予ID、Class或指定宽度、高度。
+
+1. ![样式属性页面][style-property-tab]: 相关组件样式的属性。可以指定颜色、字体等。
+
+1. ![效果属性页面][effect-property-tab]: 相关组件的效果的属性。可以指定阴影、动画、点击时的事件。
+
+1. ![特定属性页面][specific-property-tab]: 组件的固有属性。
+
+1. ![数据属性页面][variable-property-tab]: 相关Scene的数据的属性。
+
+[property-window]: ./images/property-window.png
+[shape-property-tab]: ./images/shape-property.png
+[style-property-tab]: ./images/style-property.png
+[effect-property-tab]: ./images/effect-property.png
+[specific-property-tab]: ./images/specific-property.png
+[variable-property-tab]: ./images/variable-property.png

package/dist-app/helps/board-modeller/shapes/3dish.ko.md

@@ -0,0 +1,17 @@
+# 3D
+
+## Concept
+
+3D 속성을 가질 수 있는 컴포넌트인 경우에 2차원 Dimension 속성 이외에,
+체적을 표현할 수 있는 몇가지 속성을 추가적으로 가질 수 있다.
+
+- Z좌표 : Z축 좌표상의 위치
+- 깊이 : 2차원 좌표상의 넓이 x 높이 외에 Z축상의 깊이 속성을 가질 수 있다
+- X축 회전 : X축상의 회전 각도 - PITCH
+- Y축 회전 : Y축상의 회전 각도 - ROLL
+- Z축 회전 : Z축상의 회전 각도 (2차원 평면상의 회전각도와 동일한 의미) - YAW
+
+## 활용
+
+3D 속성은 각 컴포넌트가 3D 컨테이너안에 포함되었을 때 활용된다.
+대표적인 3D 컨테이너는 Visualizer 이다.

package/dist-app/helps/board-modeller/shapes/3dish.md

@@ -0,0 +1,17 @@
+# 3D
+
+## Concept
+
+In the case of a component that can have 3D properties, in addition to the 2D Dimension property,
+It can have several additional properties that can express the volume.
+
+- Z-coordinate: Position on the Z-axis coordinate
+- Depth: In addition to the width x height on the two-dimensional coordinates, it can have the depth property on the Z-axis.
+- X-axis rotation: rotation angle on the X-axis - PITCH
+- Y-axis rotation: rotation angle on the Y-axis - ROLL
+- Z-axis rotation: Rotation angle on the Z-axis (same meaning as rotation angle on a two-dimensional plane) - YAW
+
+## uses
+
+3D properties are utilized when each component is contained in a 3D container.
+A representative 3D container is Visualizer.

package/dist-app/helps/board-modeller/shapes/3dish.zh.md

@@ -0,0 +1,17 @@
+# 3D
+
+## 概念
+
+对于可以具有 3D 属性的组件，除了 2D Dimension 属性之外，
+它可以有几个可以表示体积的附加属性。
+
+- Z 坐标：Z 轴坐标上的位置
+- 深度：除了二维坐标上的宽 x 高外，还可以有 Z 轴上的深度属性。
+- X 轴旋转：X 轴上的旋转角度 - PITCH
+- Y 轴旋转：Y 轴上的旋转角度 - ROLL
+- Z 轴旋转：Z 轴上的旋转角度（与二维平面上的旋转角度相同） - YAW
+
+## 使用
+
+当每个组件都包含在 3D 容器中时，就会使用 3D 属性。
+具有代表性的 3D 容器是 Visualizer。

package/dist-app/helps/board-modeller/shapes/print-option.ko.md

@@ -0,0 +1,26 @@
+# 라벨 출력
+
+Board 서비스는 렌더링된 보드 이미지를 바코드라벨 프린터에 출력하기 위한 라벨프린터용 커맨드를 동적으로 생성하는 기능을 제공한다.
+라벨프린트 커맨드를 생성할 때 라벨프린팅 출력 방향을 고려해서 엔코딩해야한다.
+
+'라벨 회전' 속성은 출력방향을 설정하기 위한 속성이다.
+
+## 라벨 출력 기능
+
+- ZPL II의 커맨드를 제공한다. 따라서, 라벨프린터 출력 커맨들 사용하기 위해서는 ZPL II 를 지원하는 라벨프린터를 사용해야 한다.
+- 라벨 커맨드를 얻기 위해서는 브라우저에 다음과 같은 방식으로 URL을 조합하여 입력한다.
+  - https://{서버:포트}/domain/{도메인이름}/label-command/{보드 아이디}
+
+```
+[예시]
+https://vis.hatiolab.com/domain/wellstek/label-command/c7149950-f3ce-489d-b88d-d82b67e43122
+```
+
+## 라벨 출력 크기 계산
+
+[보드 크기 설정](./size.md) 참고
+
+- 보드 크기는 출력 픽셀을 의미하므로, 라벨프린터의 해상도에 따라서 폭과 높이를 설정하도록 한다.
+- 폭 10센티미터는 각 해상도(dpi)에 따라 다음과 같이 계산된다.
+  - 203 dpi : 203 dpi x 10 cm / 2.54 ~= 800
+  - 300 dpi : 300 dpi x 10 cm / 2.54 ~= 1181

package/dist-app/helps/board-modeller/shapes/print-option.md

@@ -0,0 +1,26 @@
+# Label Print
+
+Board service provides a function to dynamically generate commands for label printers to output rendered board images to barcode label printers.
+When creating a label print command, it must be encoded in consideration of the label printing output direction.
+
+The 'label rotation' property is a property to set the output direction.
+
+## Label printing function
+
+- Provides ZPL II commands. Therefore, in order to use the label printer output commands, a label printer supporting ZPL II must be used.
+- To get the label command, enter the URL in the browser in the following way.
+  - https://{server:port}/domain/{domain name}/label-command/{board ID}
+
+```
+[example]
+https://vis.hatiolab.com/domain/wellstek/label-command/c7149950-f3ce-489d-b88d-d82b67e43122
+```
+
+## Calculate label print size
+
+See [Set board size](./size.md)
+
+- Since the board size means output pixels, set the width and height according to the resolution of the label printer.
+- The width of 10 centimeters is calculated as follows according to each resolution (dpi).
+  - 203 dpi : 203 dpi x 10 cm / 2.54 ~= 800
+  - 300 dpi : 300 dpi x 10 cm / 2.54 ~= 1181

package/dist-app/helps/board-modeller/shapes/print-option.zh.md

@@ -0,0 +1,26 @@
+# 打印标签
+
+Board 服务提供了一种功能，可以为标签打印机动态生成命令，以将渲染的电路板图像输出到条形码标签打印机。
+创建标签打印命令时，必须考虑标签打印输出方向对其进行编码。
+
+“标签旋转”属性是设置输出方向的属性。
+
+##标签打印功能
+
+- 提供 ZPL II 命令。因此，为了使用标签打印机输出命令，必须使用支持 ZPL II 的标签打印机。
+- 要获取标签命令，请按以下方式在浏览器中输入 URL。
+  - https://{server:port}/domain/{域名}/label-command/{board ID}
+
+```
+[例子]
+https://vis.hatiolab.com/domain/wellstek/label-command/c7149950-f3ce-489d-b88d-d82b67e43122
+```
+
+## 计算标签输出大小
+
+请参阅[设置板尺寸](./size.md)
+
+- 由于电路板尺寸是指输出像素，因此请根据标签打印机的分辨率设置宽度和高度。
+- 10 厘米的宽度根据每个分辨率 (dpi) 计算如下。
+  - 203 dpi：203 dpi x 10 cm / 2.54 ~= 800
+  - 300 dpi：300 dpi x 10 cm / 2.54 ~= 1181

package/dist-app/helps/board-modeller/shapes/shapes.ko.md

@@ -0,0 +1,19 @@
+# shapes
+
+1. ID : 컴포넌트의 ID를 설정한다.
+1. 클래스 : 컴포넌트의 클래스를 설정한다.
+1. 텍스트 : 컴포넌트의 텍스트를 설정한다. 해당 컴포넌트를 더블클릭해도 입력이 가능하다.
+1. 텍스트 형식 : 텍스트의 형식을 설정한다.
+
+- \# : 숫자형식 (값 또는 소수점 이하의 값이 0이면 표시하지 않는다.)
+- 0 : 숫자형식
+- , : 자리수 표현
+- . : 소수점 표현
+
+1. 숨김 : 컴포넌트를 숨긴다.
+1. 위치고정 : 컴포넌트의 위치를 고정시킨다.
+1. 크기
+
+- 너비 : 컴포넌트의 너비를 설정한다.
+- 높이 : 컴포넌트의 높이를 설정한다.
+- 회전 : 컴포넌트를 회전시킨다. (양수는 시계방향으로, 음수는 시계 반대방향으로 회전한다.)

package/dist-app/helps/board-modeller/shapes/shapes.md

@@ -0,0 +1,21 @@
+# shapes
+
+It describes the property about text and area.
+
+1. ID: Set component ID.
+1. Class: Set the class of component.
+1. Text: Specify the text of component. It can be entered even if double click the corresponding component.
+1. Text format: Set the format of text.
+
+- \# : Numeric format (If the value or the value of the decimal is 0, it will not be displayed.)
+- 0 : Numeric format.
+- , : The expression of digit number.
+- . : The expression of decimal.
+
+1. Hide: Hide the component.
+1. Position Fixing: Fix the position of the component.
+1. Size
+
+- Width: Set the width of component.
+- Height: Set the height of component.
+- Rotation: Rotate the component. (If a positive number, it will rotate in a clockwise direction, and if a negative number, it will rotate in a counterclockwise direction.)

package/dist-app/helps/board-modeller/shapes/shapes.zh.md

@@ -0,0 +1,19 @@
+# 共同属性
+
+1. ID: 设置组件的 ID。
+1. 类：设置组件的类。
+1. 文本：指定组件的文本。即使双击相关组件，也可以进行输入。
+1. 文本格式：设置文本的格式。
+
+- \# : 数字格式（如果值或小数点以下的值是 0，就不进行显示。）
+- 0 : 数字格式
+- , : 位数的表达
+- . : 小数点的表达
+
+1. 隐藏：隐藏组件。
+1. 位置固定：固定组件的位置。
+1. 大小
+
+- 宽度：设置组件的宽度。
+- 高度：设置组件的高度。
+- 旋转：旋转组件。（如果是正数，就按顺时针方向旋转，而如果是负数，则按逆时针方向旋转。）

package/dist-app/helps/board-modeller/shapes/size.ko.md

@@ -0,0 +1,8 @@
+# 크기
+
+보드 크기의 단위는 디스플레이 픽셀이다.
+따라서, 보드가 디스플레이되거나 프린트될 대상 디바이스의 크기에 맞추는 것이 가장 효율적이다.
+
+1. 넓이 : Board넓이
+2. 높이 : Board높이
+3. Rotate: 컴포넌트 회전 각도

package/dist-app/helps/board-modeller/shapes/size.md

@@ -0,0 +1,8 @@
+# Size
+
+The unit of board size is the display pixel.
+Therefore, it is most efficient to fit the size of the target device on which the board is to be displayed or printed.
+
+1. Width : Board Width
+2. Height : Board Height
+3. Rotate : component rotation angle

package/dist-app/helps/board-modeller/shapes/size.zh.md

@@ -0,0 +1,8 @@
+# 大小
+
+电路板尺寸的单位是显示像素。
+因此，最有效的方法是适合要在其上显示或打印电路板的目标设备的尺寸。
+
+1. 宽度 : 看板宽度
+2. 高度 : 看板高度
+3. Rotate : 组件旋转角度

package/dist-app/helps/board-modeller/shapes/text-box.ko.md

@@ -0,0 +1,16 @@
+# 텍스트 상자
+
+- 가로정렬 : 가로정렬을 설정한다. (좌측부터 순서대로 왼쪽정렬, 가운데정렬, 우측정렬, 양쪽정렬)
+  ![align-horizontal]
+
+- 수직정렬 : 세로정렬을 설정한다. (좌측부터 순서대로 위쪽정렬, 중간정렬, 아래쪽정렬)  
+  ![align-vertical]
+
+- 텍스트개행 : 텍스트가 컴포넌트의 영역을 벗어날 경우 개행여부를 선택한다.
+
+- 여백 : 텍스트의 상하좌우 여백을 설정한다.
+  ![text-margin]
+
+[align-horizontal]: ../images/common-property-text-align-horizontal.png
+[align-vertical]: ../images/common-property-text-align-vertical.png
+[text-margin]: ../images/common-property-text-margin.png

package/dist-app/helps/board-modeller/shapes/text-box.md

@@ -0,0 +1,16 @@
+# Text Box
+
+- Horizontal alignment : Set the horizontal alignment. (It is align left, center, align right, justify in order from left.)
+  ![align-horizontal]
+
+- Vertical alignment : Set the vertical alignment. (It is align top, center, align bottom in order from left.)
+  ![align-vertical]
+
+- Text Wrap: Allow long words to be able to break and wrap onto the next line:
+
+- Margin : Set the top, bottom, left and right margins of text.
+  ![text-margin]
+
+[align-horizontal]: ../images/common-property-text-align-horizontal.png
+[align-vertical]: ../images/common-property-text-align-vertical.png
+[text-margin]: ../images/common-property-text-margin.png

package/dist-app/helps/board-modeller/shapes/text-box.zh.md

@@ -0,0 +1,16 @@
+# 文本
+
+- 水平对齐 : 设置水平对齐。（从左侧开始，按顺序是左对齐、 居中对齐、右对齐、两端对齐。）
+  ![align-horizontal]
+
+- 垂直对齐 : 设置垂直对齐。（从左侧开始，按顺序是上对齐、居中对齐、下对齐。）
+  ![align-vertical]
+
+- 文本换行 : 当文本超出组件的区域时，选择是否换行。
+
+- 边距 : 设置文本的上下左右边距。
+  ![text-margin]
+
+[align-horizontal]: ../images/common-property-text-align-horizontal.png
+[align-vertical]: ../images/common-property-text-align-vertical.png
+[text-margin]: ../images/common-property-text-margin.png

package/dist-app/helps/board-modeller/shapes/viewer-option.ko.md

@@ -0,0 +1,9 @@
+# 뷰어 설정
+
+## 맞춤
+
+- none : 맞출 설정 없음, 원본 화면 유지 (수직, 수평 스크롤바 보일 수 있음)
+- ratio : 화면 넓이 혹은 높이의 ratio가 작은 속성을 이용하여 맞춤 설정 (스크롤바 보일 수 없음)
+- both : 화면을 늘리거나 축소하여 화면의 크기에 맞춤 처리 (스크롤바 보일 수 없음)
+- width : 화면의 넓이만 맞추어서 화면의 크기에 맞추어 위측에서 부터 화면 표현 (수직 스크롤바 보일 수 있음)
+- height : 화면의 높이만 맞추어서 화면의 크기에 맞춤 처리하여 좌측에서 부터 화면 표현 (수평 스크롤바 보일 수 있음)

package/dist-app/helps/board-modeller/shapes/viewer-option.md

@@ -0,0 +1,9 @@
+# Viewer Option
+
+## Fit
+
+- none : No settings to fit, keep original screen (Vertical and horizontal scrollbars may be visible)
+- ratio : using the property of a smaller ratio of screen width or height (Scrollbar not visible)
+- both : Increase or decrease the screen to fit the size of the screen (Scrollbar not visible)
+- width : Display the screen from the top according to the size of the screen by fitting only the width of the screen (Vertical scrollbar may be visible)
+- height : Display the screen from the left by matching only the height of the screen to the size of the screen (Horizontal scrollbar may be visible)

package/dist-app/helps/board-modeller/shapes/viewer-option.zh.md

@@ -0,0 +1,9 @@
+# Viewer 配置
+
+## 匹配
+
+- none : 没有匹配设置，保持原始屏幕(垂直和水平滚动条可能可见)
+- ratio : 通过使用小屏幕宽度或高度比例的属性进行匹配(滚动条不可见)
+- both : 放大或缩小屏幕以适合屏幕尺寸(滚动条不可见)
+- width : 通过仅使用屏幕宽度，根据屏幕从顶部显示界面(垂直滚动条可能可见)
+- height : 通过仅使屏幕高度适合屏幕尺寸，从左侧显示屏幕(水平滚动条可能可见)

package/dist-app/helps/board-modeller/styles/fill-style.ko.md

@@ -0,0 +1,18 @@
+# 채우기 스타일
+
+- 비우기 : 배경을 투명하게 한다.
+- 단색 : 배경을 단색으로 채운다.
+- 그라디언트 : 배경에 그라디언트를 적용한다.
+  - 타입 : 선형 그라데이션 (선을 따라 한 색상에서 다른 색상으로 음영처리), 방사형 그라데이션 (원형 패턴을 따라 내부의 한 색상과 외부의 다른 색상이 음영처리).
+  - 회전 : 그라디언트를 적용한 배경을 설정한 각도만큼 회전시킨다.
+  - 방향 : 드롭다운 리스트 중에서 원하는 각도(45도 기준으로 증감)의 배경을 선택할 수 있다.
+  - 컬러스탑 : 그라디언트 슬라이더의 양쪽에서 색상을 지정해 주는 색상자이다.
+- 패턴 : 이미지를 패턴으로 삽입한다.
+  - 이미지 : 파일 저장소에 있는 이미지를 선택한다.
+  - 정렬 : 왼쪽 상단, 상단, 오른쪽 상단, 왼쪽, 가운데, 오른쪽, 왼쪽 하단, 하단, 오른쪽 하단 맞춤
+  - Offset X : 전체 배경을 시작점으로부터 특정 값만큼 수평으로 이동한다.
+  - Offset Y : 전체 배경을 시작점으로부터 특정 값만큼 수직으로 이동한다.
+  - 넓이 : 패턴 이미지가 배경으로써 보여질 폭을 설정한다.
+  - 높이 : 패턴 이미지가 배경으로써 보여질 높이를 설정한다.
+  - 맞춤 : 패턴 이미지를 해당 컴포넌트의 크기에 맞춰서 배경으로 보여지도록 한다.
+  - 반복없음 : 패턴 이미지가 배경에서 연속적으로 그려지지않고 한번만 그려지도록 한다.

package/dist-app/helps/board-modeller/styles/fill-style.md

@@ -0,0 +1,18 @@
+# Fill Style
+
+- No Fill: Clear the background.
+- Solid: Fill the background with a solid color.
+- Gradient: Apply the gradient to background.
+  - Type: Linear Gradient (Shade from one color to another along a line), Radial Gradient (Shade one interior color and the other exterior color along a circular pattern)
+  - Rotation: Rotate the background by the set angle.
+  - Direction: Can select a background of a desired angle (increase/decrease by 45 degrees) from the dropdown list.
+  - Color stop: It is a color wheel that specifies the color on both sides of the gradient slider.
+- Pattern: Insert the image as pattern.
+  - Image: Select the image in the file store.
+  - Align: Align Left Top, Top, Right Top, Left, Center, Right, Left Bottom, Bottom, Right Bottom.
+  - Offset X: Move the entire background horizontally by a certain value from the starting point.
+  - Offset Y: Move the entire background vertically by a certain value from the starting point.
+  - Width: Sets the width of the pattern image to be displayed as a background.
+  - Height: Sets the height at which the pattern image will be displayed as the background.
+  - Fit: The pattern image is displayed as a background according to the size of the component.
+  - No Repeat : Make sure that the pattern image is drawn only once rather than continuously in the background.

package/dist-app/helps/board-modeller/styles/fill-style.zh.md

@@ -0,0 +1,18 @@
+# 填充样式
+
+- 清空：清空背景。
+- 纯色：用纯色填充背景。
+- 渐变：在背景中，适用渐变。
+  - 类型：线型渐变（沿着一条线，遮蔽一种颜色到另一种颜色），径向渐变（沿着圆形图案，遮蔽内部的一种颜色和外部的另一种颜色）。
+  - 旋转：旋转设定角度。
+  - 方向：可以从下拉列表中选择所需角度（基于 45 度而增减）的背景。
+  - 起止颜色：它是一个颜色轮，指定渐变滑块两边的颜色。
+- 模式：将图片插入为图案。
+  - 图像：选择在文件存储器的图像。
+  - 排序：左上角，上，右上角，左，中，右，左下角，下，右下角对齐。
+  - 偏移 X：将整个背景从起始点水平移动一定距离。
+  - 偏移 Y：将整个背景从起始点垂直移动一定距离。
+  - 宽度：设置作为背景显示的图案图像的宽度。
+  - 高度：设置图案图像作为背景显示的高度。
+  - 适用：图案图像根据组件的大小显示为背景。
+  - [zh] No Repeat : 确保图案图像只绘制一次，而不是在背景中连续绘制。

package/dist-app/helps/board-modeller/styles/line-style.ko.md

@@ -0,0 +1,19 @@
+# 라인 스타일
+
+  - 두께 : 선의 두께를 설정한다.
+  - 색상 : 선의 색상을 설정한다.
+  - 선 스타일 : 선 스타일을 설정한다. (직선, 점선 등)
+  - 선끝 스타일 : 선 끝의 스타일을 설정한다. (square : 각진 선끝, round : 둥근 선끝)
+  - 연결 스타일 : 선과 선이 연결되는 점의 스타일을 설정한다.  
+    (miter : ![miter][miter], round : ![round][round], bevel : ![bevel][bevel])
+  - 시작 모양 : 선의 시작 모양을 설정한다.
+  - 시작 크기 : 선의 시작 크기를 설정한다.
+  - 끝 모양 : 선의 끝 모양을 설정한다.
+  - 끝 크기 : 선의 끝 크기를 설정한다.
+
+
+[miter]: ../images/join-type-miter.png
+
+[round]: ../images/join-type-round.png
+
+[bevel]: ../images/join-type-bevel.png

package/dist-app/helps/board-modeller/styles/line-style.md

@@ -0,0 +1,23 @@
+# Line Style
+
+  - Thickness: Set the thickness of line.
+  - Color: Set the color of line.
+  - Line style: Set the line style. (Straight line, dotted line)
+  - Line end style: Set the line end style. (Square, round)
+  - Lined style: Set the style of point where lines are connected.  
+    (miter : ![miter][miter], round : ![round][round], bevel : ![bevel][bevel])
+  - Start shape: Set the start shape of line.
+  - Start size: Set the start size of line.
+  - End shape: Set the end shape of line.
+  - End size: Set the end size of line.
+
+
+
+[miter]: ../images/join-type-miter.png
+
+
+[round]: ../images/join-type-round.png
+
+
+[bevel]: ../images/join-type-bevel.png
+