@things-factory/board-ui 5.0.0-alpha.7 → 5.0.0-y.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/client/board-provider.js +31 -3
- package/client/bootstrap.js +2 -1
- package/client/data-grist/board-renderer.js +6 -5
- package/client/viewparts/board-selector.js +1 -1
- package/helps/board-modeller/data-binding.ko.md +30 -15
- package/helps/board-modeller/data-binding.md +32 -14
- package/helps/board-modeller/data-binding.zh.md +21 -17
- package/helps/board-modeller/effects/retention.ko.md +1 -1
- package/helps/board-modeller/effects/tap-event.ko.md +13 -1
- package/helps/board-modeller/shapes/size.ko.md +1 -1
- package/helps/board-modeller/shapes/text-box.ko.md +9 -12
- package/helps/board-modeller/shapes/text-box.md +6 -8
- package/helps/board-modeller/shapes/text-box.zh.md +9 -11
- package/package.json +10 -10
- package/translations/en.json +5 -3
- package/translations/ko.json +4 -2
- package/translations/ms.json +3 -2
- package/translations/zh.json +3 -1
package/client/board-provider.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import gql from 'graphql-tag'
|
|
2
|
-
|
|
3
|
-
import {
|
|
2
|
+
|
|
3
|
+
import { create, error, ReferenceMap } from '@hatiolab/things-scene'
|
|
4
|
+
import { DataStorage } from '@operato/board'
|
|
5
|
+
import { client, gqlContext, subscribe } from '@operato/graphql'
|
|
4
6
|
|
|
5
7
|
export function createBoardProvider() {
|
|
6
8
|
var _provider = new ReferenceMap(
|
|
@@ -31,7 +33,33 @@ export function createBoardProvider() {
|
|
|
31
33
|
scene = create({
|
|
32
34
|
model,
|
|
33
35
|
mode: 0,
|
|
34
|
-
refProvider: provider
|
|
36
|
+
refProvider: provider,
|
|
37
|
+
dataStorage: new DataStorage(boardId),
|
|
38
|
+
dataSubscriptionProvider: {
|
|
39
|
+
subscribe: async (tag, component) => {
|
|
40
|
+
return await subscribe(
|
|
41
|
+
{
|
|
42
|
+
query: gql`
|
|
43
|
+
subscription {
|
|
44
|
+
data(tag: "${tag}") {
|
|
45
|
+
tag
|
|
46
|
+
data
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
`
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
next: async ({ data }) => {
|
|
53
|
+
if (data) {
|
|
54
|
+
component.data = data.data.data
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
)
|
|
59
|
+
},
|
|
60
|
+
|
|
61
|
+
dispose() {}
|
|
62
|
+
}
|
|
35
63
|
})
|
|
36
64
|
|
|
37
65
|
// s.app.baseUrl = undefined;
|
package/client/bootstrap.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import './board-modeller/editors/board-editor-property'
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
/* should use @things-factory/grist-ui to register both grist (things-factory grist and operato grist) */
|
|
4
4
|
import { registerEditor, registerRenderer } from '@things-factory/grist-ui'
|
|
5
5
|
|
|
6
6
|
import { BoardEditor } from './data-grist/board-editor'
|
|
7
7
|
import { BoardRenderer } from './data-grist/board-renderer'
|
|
8
|
+
import { OxPropertyEditor } from '@operato/property-editor'
|
|
8
9
|
|
|
9
10
|
export default function bootstrap() {
|
|
10
11
|
registerRenderer('board', BoardRenderer)
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import '@material/mwc-icon'
|
|
2
2
|
|
|
3
3
|
import gql from 'graphql-tag'
|
|
4
|
-
import {
|
|
4
|
+
import { css, html, LitElement } from 'lit'
|
|
5
5
|
|
|
6
|
-
import '@
|
|
6
|
+
import { client, gqlContext, navigate } from '@things-factory/shell'
|
|
7
7
|
|
|
8
8
|
const FETCH_BOARD_GQL = id => {
|
|
9
9
|
return gql`
|
|
@@ -41,8 +41,9 @@ class BoardRendererElement extends LitElement {
|
|
|
41
41
|
background-color: var(--board-renderer-name-background-color);
|
|
42
42
|
}
|
|
43
43
|
img {
|
|
44
|
-
|
|
45
|
-
max-
|
|
44
|
+
object-fit: contain;
|
|
45
|
+
max-width: 100%;
|
|
46
|
+
max-height: 100%;
|
|
46
47
|
}
|
|
47
48
|
mwc-icon {
|
|
48
49
|
position: absolute;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 데이타 바인딩
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## 개념
|
|
4
4
|
|
|
5
5
|
- 모든 컴포넌트는 각자 data 속성을 갖는다.
|
|
6
6
|
- 컴포넌트의 data 속성은 다음과 같이 설정될 수 있다.
|
|
@@ -9,6 +9,11 @@
|
|
|
9
9
|
- UI 기반 컴포넌트인 경우 : 사용자의 인터렉션에 의해 변경된 값(value)가 data로 설정한다.
|
|
10
10
|
- 데이타 전파(Data Spread) : 다른 컴포넌트의 Data Binding 설정에 의해서 설정될 수 있다.
|
|
11
11
|
- 컴포넌트 data의 변경(changed)에 반응해서 설정된 데이타 바인딩 모델에 의해서 대상 컴포넌트(들)의 속성을 변경할 수 있다.
|
|
12
|
+
- PUBSUB (Publish-Subscribe)
|
|
13
|
+
- 데이터 퍼블리셔가 여러 데이터 서브스크라이버들에게 이름표(tag)가 달린 데이터를 전송하는 방식을 pubsub 이라고 한다.
|
|
14
|
+
- 보드 서비스를 제공하는 서버가 데이터 퍼블리셔 역할을 하게되며, 보통 시나리오의 publish 태스크를 통해서 데이터 퍼블리시를 할 수 있다.
|
|
15
|
+
- 각 컴포넌트는 자신의 tag 속성을 지정할 수 있으며, 퍼블리셔가 전송하는 데이터 중에서 지정된 tag에 해당하는 데이터를 수신하게 된다.
|
|
16
|
+
- 수신된 메시지는 data에 저장되어 데이터 전파를 일으킨다.
|
|
12
17
|
|
|
13
18
|
## Identifier
|
|
14
19
|
|
|
@@ -16,13 +21,17 @@
|
|
|
16
21
|
|
|
17
22
|
- 컴포넌트의 유일한 명칭
|
|
18
23
|
|
|
19
|
-
### class
|
|
24
|
+
### 클래스 (class)
|
|
20
25
|
|
|
21
26
|
- 컴포넌트의 분류(class)
|
|
22
|
-
- 공백으로 분리된 다수의 분류를 설정할 수
|
|
27
|
+
- 공백으로 분리된 다수의 분류를 설정할 수 있다.
|
|
23
28
|
- 각 분류(class)는 데이타 전파시에 target 으로 지정될 수 있다.
|
|
24
29
|
|
|
25
|
-
###
|
|
30
|
+
### 태그 (tag)
|
|
31
|
+
|
|
32
|
+
- 데이타 퍼블리셔로부터 전송되는 데이타 중에서 수신하고자 하는 데이타의 tag를 지정한다.
|
|
33
|
+
|
|
34
|
+
### 템플릿 접두어 (template prefix)
|
|
26
35
|
|
|
27
36
|
- 컴포넌트를 템플릿으로 지정할 때 설정할 수 있다.
|
|
28
37
|
- 템플릿으로 설정된 컴포넌트는 뷰어에서 표시되지 않는다.
|
|
@@ -38,24 +47,24 @@
|
|
|
38
47
|
- 하지만, intent sensitive 설정이 켜져있는 경우에는 data가 변경되지 않았더라도, 소스 컴포넌트의 데이타가 새로 설정도는 경우에 그 값이 실제적으로 변하지 않았다고 하더라고 데이타 전파가 동작하도록 한다.
|
|
39
48
|
- 이 속성은 소스 컴포넌트의 value 속성의 설정에 따른 동작에도 적용된다.
|
|
40
49
|
|
|
41
|
-
## Initial Data
|
|
50
|
+
## 초기 데이타 (Initial Data)
|
|
42
51
|
|
|
43
52
|
- 컴포넌트의 초기 데이타를 설정한다.
|
|
44
53
|
- 데이타는 문자열, 숫자 또는 JSON 객체 타입 중 한가지 타입으로 설정할 수 있다.
|
|
45
54
|
|
|
46
|
-
## Data Spread
|
|
55
|
+
## 데이타 전파 (Data Spread)
|
|
47
56
|
|
|
48
57
|
- 소스 컴포넌트의 data 값을 기반으로 대상 컴포넌트의 속성을 변경시키는 설정이다.
|
|
49
58
|
- 만일, 소스 컴포넌트가 대상 컴포넌트의 data속성을 변경시키는 경우, 대상 컴포넌트의 Data Spread 기능이 연속적으로 동작하므로, 이 기능을 데이타 전파라고 한다.
|
|
50
59
|
- 여러개의 데이타 전파 설정이 가능하다
|
|
51
60
|
|
|
52
|
-
### accessor
|
|
61
|
+
### 접근자 (accessor)
|
|
53
62
|
|
|
54
63
|
- 소스 컴포넌트의 data 객체 중에서, 일부분만 전파하고자 하는 경우에 설정된다.
|
|
55
64
|
- 데이타 객체의 속성 이름을 지정할 수 있다.
|
|
56
65
|
- 데이타 객체의 속성의 깊이가 깊을 경우 '.'로 구분해서 연속적으로 지정할 수 있다.
|
|
57
66
|
|
|
58
|
-
### target
|
|
67
|
+
### 대상 (target)
|
|
59
68
|
|
|
60
69
|
- 데이타 전파 대상 컴포넌트를 지정한다.
|
|
61
70
|
- id로 지정 : #id
|
|
@@ -64,23 +73,29 @@
|
|
|
64
73
|
- (key) : data 객체의 키값을 id로 하는 컴포넌트들이 대상 컴포넌트가 된다.
|
|
65
74
|
- [property] : data 객체의 property의 값을 id로 하는 컴포넌트들이 대상 컴포넌트가 된다.
|
|
66
75
|
|
|
67
|
-
### property
|
|
76
|
+
### 속성 (property)
|
|
68
77
|
|
|
69
78
|
- 전파될 데이타 값이 적용될 대상 컴포넌트의 속성을 지정한다.
|
|
70
79
|
|
|
71
|
-
### rule
|
|
80
|
+
### 규칙 타입 (rule)
|
|
72
81
|
|
|
73
82
|
전파될 데이타가 대상 컴포넌트 속성에 적용되는 방법을 지정한다.
|
|
74
83
|
|
|
75
|
-
- value
|
|
84
|
+
- 값 (value)
|
|
76
85
|
- 값 자체가 그대로 대상 컴포넌트의 속성에 설정된다.
|
|
77
|
-
- map
|
|
86
|
+
- 매핑 (map)
|
|
78
87
|
- 값을 키로 하는 매핑값이 대상 컴포넌트의 속성에 설정된다.
|
|
79
|
-
- range
|
|
88
|
+
- 범위 (range)
|
|
80
89
|
- 값이 포함된 범위의 매핑값이 대상 컴포넌트의 속성에 설정된다.
|
|
81
|
-
- eval
|
|
90
|
+
- 함수 (eval)
|
|
82
91
|
- eval 코드는 자바스크립트 문법으로 작성할 수 있다.
|
|
83
92
|
- eval 코드의 context (this)는 소스 컴포넌트이다.
|
|
84
93
|
- eval 코드의 parameter 는 value와 targets가 있다.
|
|
85
94
|
- value : 소스 컴포넌트의 data에 accessor가 적용된 값
|
|
86
95
|
- targets : 타겟 컴포넌트 리스트
|
|
96
|
+
|
|
97
|
+
### No Data No Spreading
|
|
98
|
+
|
|
99
|
+
- 규칙 타입에 따른 최종 결과값이 빈 값이 아닌 경우에만 전파한다.
|
|
100
|
+
- 결과값이 undefined, null, NaN, 공백('')인 경우에는 전파하지 않는다.
|
|
101
|
+
- 결과값이 숫자 0인 경우에는 전파한다.
|
|
@@ -4,11 +4,16 @@
|
|
|
4
4
|
|
|
5
5
|
- Every component has its own data attribute.
|
|
6
6
|
- The data property of the component can be set as follows.
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
- Initial Data: Initial data can be set by the modeler during modeling.
|
|
8
|
+
- In case of data source component: Set the result received from the data source as own data.
|
|
9
|
+
- For UI-based components: The value changed by the user's interaction is set as data.
|
|
10
|
+
- Data Spread: It can be set by setting the Data Binding of other components.
|
|
11
11
|
- The properties of the target component(s) can be changed according to the data binding model set in response to changes in component data.
|
|
12
|
+
- PUBSUB (Publish-Subscribe)
|
|
13
|
+
- The method by which a data publisher sends tagged data to multiple data subscribers is called pubsub.
|
|
14
|
+
- The server that provides the board service acts as a data publisher, and users can publish data through the publish task of the scenario.
|
|
15
|
+
- Each component can designate its own tag property, and among the data transmitted by the publisher, data corresponding to the specified tag is received.
|
|
16
|
+
- The received message is immediately stored in data and causes data propagation.
|
|
12
17
|
|
|
13
18
|
## Identifier
|
|
14
19
|
|
|
@@ -22,6 +27,10 @@
|
|
|
22
27
|
- Multiple classifications separated by spaces can be set
|
|
23
28
|
- Each class can be designated as a target when transmitting data.
|
|
24
29
|
|
|
30
|
+
### tag
|
|
31
|
+
|
|
32
|
+
- Designates the tag of the data to be received among the data transmitted from the data publisher.
|
|
33
|
+
|
|
25
34
|
### template prefix
|
|
26
35
|
|
|
27
36
|
- Can be set when designating a component as a template.
|
|
@@ -31,11 +40,13 @@
|
|
|
31
40
|
### no data no show
|
|
32
41
|
|
|
33
42
|
- When operating in board viewer mode, it is a setting that is not displayed when data is not set in the component.
|
|
43
|
+
|
|
34
44
|
### intent sensitive
|
|
35
45
|
|
|
36
46
|
- Data propagation works when the data of the source component is changed. In other words, even if the data is newly set, data propagation does not work unless the value actually changes. This is a method to increase the efficiency of monitoring purposes.
|
|
37
47
|
- However, when the intent sensitive setting is turned on, data propagation works even if the data has not changed, even if the data of the source component is newly set, even if the value has not actually changed.
|
|
38
48
|
- This property is also applied to the operation according to the setting of the value property of the source component.
|
|
49
|
+
|
|
39
50
|
## Initial Data
|
|
40
51
|
|
|
41
52
|
- Set the initial data of the component.
|
|
@@ -59,8 +70,9 @@
|
|
|
59
70
|
- Designated by id: #id
|
|
60
71
|
- Designated as class: .class
|
|
61
72
|
- Target designation based on data
|
|
62
|
-
|
|
63
|
-
|
|
73
|
+
- (key): Components with the key value of the data object as the id become target components.
|
|
74
|
+
- [property]: Components that have the property value of the data object as the id become the target component.
|
|
75
|
+
|
|
64
76
|
### property
|
|
65
77
|
|
|
66
78
|
- Designates the properties of the target component to which the data value to be propagated is applied.
|
|
@@ -70,14 +82,20 @@
|
|
|
70
82
|
Specifies how the data to be propagated is applied to the target component properties.
|
|
71
83
|
|
|
72
84
|
- value
|
|
73
|
-
|
|
85
|
+
- the value itself is set as the target attribute of the component.
|
|
74
86
|
- map
|
|
75
|
-
|
|
87
|
+
- mapping the value of the key value is set in the properties of the target component.
|
|
76
88
|
- range
|
|
77
|
-
|
|
89
|
+
- The mapping value of the range including the value is set in the properties of the target component.
|
|
78
90
|
- eval
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
91
|
+
- The eval code can be written in JavaScript grammar.
|
|
92
|
+
- The context (this) of the eval code is a source component.
|
|
93
|
+
- The parameter of eval code has value and targets.
|
|
94
|
+
- value: The value to which the accessor is applied to the data of the source component
|
|
95
|
+
- targets: list of target components
|
|
96
|
+
|
|
97
|
+
### No Data No Spreading
|
|
98
|
+
|
|
99
|
+
- Data will be spreaded only when the final result value according to the rule type is not an empty value.
|
|
100
|
+
- If the result value is undefined, null, NaN, or blank (''), it will not be spreaded.
|
|
101
|
+
- Otherwise, data will be spreaded, even if the result is the number zero.
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
- 可以如下设置组件的数据属性。
|
|
7
7
|
- 初始数据：建模人员可以在建模过程中设置初始数据。
|
|
8
8
|
- 对于数据源组件：将从数据源接收的结果设置为自己的数据。
|
|
9
|
-
- 对于基于UI的组件：通过用户交互更改的值设置为数据。
|
|
9
|
+
- 对于基于 UI 的组件：通过用户交互更改的值设置为数据。
|
|
10
10
|
- 数据传播：可以通过设置其他组件的数据绑定来设置。
|
|
11
11
|
- 可以根据设置的数据绑定模型来更改目标组件的属性，以响应组件数据的更改。
|
|
12
12
|
|
|
@@ -30,18 +30,18 @@
|
|
|
30
30
|
|
|
31
31
|
### no data no show
|
|
32
32
|
|
|
33
|
-
- 在Viewer模式下操作时，如果在组件中没有数据，则不显示。
|
|
33
|
+
- 在 Viewer 模式下操作时，如果在组件中没有数据，则不显示。
|
|
34
34
|
|
|
35
35
|
### intent sensitive
|
|
36
36
|
|
|
37
37
|
- 更改源组件的数据时，数据传播有效。 换句话说，即使重新设置了数据，除非实际更改该值，否则数据传播将不起作用。 这是一种提高监视目的效率的方法。
|
|
38
|
-
- 但是，当打开intent sensitive设置时，即使数据没有更改，即该值实际上并未更改，也可以进行数据传播。
|
|
39
|
-
- 此属性也对源组件的value属性的配置动作发生作用。
|
|
38
|
+
- 但是，当打开 intent sensitive 设置时，即使数据没有更改，即该值实际上并未更改，也可以进行数据传播。
|
|
39
|
+
- 此属性也对源组件的 value 属性的配置动作发生作用。
|
|
40
40
|
|
|
41
41
|
## Initial Data
|
|
42
42
|
|
|
43
43
|
- 设置组件的初始数据。
|
|
44
|
-
- 数据可以设置为字符串，数字或JSON对象类型之一。
|
|
44
|
+
- 数据可以设置为字符串，数字或 JSON 对象类型之一。
|
|
45
45
|
|
|
46
46
|
## Data Spread
|
|
47
47
|
|
|
@@ -58,11 +58,9 @@
|
|
|
58
58
|
### target
|
|
59
59
|
|
|
60
60
|
- 指定用于数据传播的目标组件。
|
|
61
|
-
- 由ID指定：#id
|
|
61
|
+
- 由 ID 指定：#id
|
|
62
62
|
- 指定为类：.class
|
|
63
|
-
- 基于数据的目标指定
|
|
64
|
-
-（key）：以数据对象的键值为id的组件将成为目标组件。
|
|
65
|
-
-[property]：将数据对象的属性值作为ID的组件将成为目标组件。
|
|
63
|
+
- 基于数据的目标指定 -（key）：以数据对象的键值为 id 的组件将成为目标组件。 -[property]：将数据对象的属性值作为 ID 的组件将成为目标组件。
|
|
66
64
|
|
|
67
65
|
### property
|
|
68
66
|
|
|
@@ -73,14 +71,20 @@
|
|
|
73
71
|
指定如何将要传播的数据应用于目标组件属性。
|
|
74
72
|
|
|
75
73
|
- value
|
|
76
|
-
|
|
74
|
+
- 值本身被设置为组件的目标属性。
|
|
77
75
|
- map
|
|
78
|
-
|
|
76
|
+
- 在目标组件的属性中设置数据属性的值。
|
|
79
77
|
- range
|
|
80
|
-
|
|
78
|
+
- 在目标组件的属性中设置包含该值的范围的映射值。
|
|
81
79
|
- eval
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
80
|
+
- eval 代码可以用 JavaScript 语法编写。
|
|
81
|
+
- eval 代码的 context (this)是源组件。
|
|
82
|
+
- eval 代码的参数具有 value 和 targets。
|
|
83
|
+
- value：源组件的数据中 accessor 对应的值
|
|
84
|
+
- targets：目标组件列表
|
|
85
|
+
|
|
86
|
+
### 无数据不传播(No Data No Spreading)
|
|
87
|
+
|
|
88
|
+
- 只有当根据规则类型的最终结果值不是空值时，才会传播数据。
|
|
89
|
+
- 如果结果值为 undefined、null、NaN 或空白 ('')，则不会展开。
|
|
90
|
+
- 否则，即使结果是数字零，数据也会被传播。
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# tap event
|
|
1
|
+
# 탭이벤트 (tap event)
|
|
2
2
|
|
|
3
3
|
컴포넌트에 마우스 클릭이나 터치 이벤트가 발생했을 때의 동작을 정의한다.
|
|
4
4
|
|
|
@@ -72,3 +72,15 @@
|
|
|
72
72
|
- 파라미터
|
|
73
73
|
- target : value를 변경할 대상 컴포넌트
|
|
74
74
|
- value : 대상 컴포넌트에 설정될 값 (문자열, 숫자 또는 오브젝트 타입을 지정할 수 있다)
|
|
75
|
+
- start the given scenario
|
|
76
|
+
- 설정한 값으로 대상 시나리오를 시작한다.
|
|
77
|
+
- 대상 시나리오를 시작만 시키며, 시나리오의 종료까지 기다리지 않는다. 시나리오가 이미 시작 중인 경우 새로운 인스턴스를 시작시키지는 않는다.
|
|
78
|
+
- 파라미터
|
|
79
|
+
- target : 시작할 시나리오
|
|
80
|
+
- value : 시나리오에 전달될 파라미터
|
|
81
|
+
- run the given scenario
|
|
82
|
+
- 설정한 값으로 대상 시나리오를 실행한다.
|
|
83
|
+
- 대상 시나리오의 새로운 인스턴스를 시작시키고, 종료까지 기다리고 최종 시나리오 결과를 받아서 컴포넌트 데이터 속성에 바로 저장한다. 이로 인한 데이터 변경은 데이타 전파를 일으킨다.
|
|
84
|
+
- 파라미터
|
|
85
|
+
- target : 실행할 시나리오
|
|
86
|
+
- value : 시나리오에 전달될 파라미터
|
|
@@ -1,19 +1,16 @@
|
|
|
1
|
-
# 텍스트 상자
|
|
1
|
+
# 텍스트 상자
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
![align-horizontal]
|
|
5
|
-
|
|
6
|
-
- 수직정렬 : 세로정렬을 설정한다. (좌측부터 순서대로 위쪽정렬, 중간정렬, 아래쪽정렬)
|
|
7
|
-
![align-vertical]
|
|
8
|
-
|
|
9
|
-
- 텍스트개행 : 텍스트가 컴포넌트의 영역을 벗어날 경우 개행여부를 선택한다.
|
|
3
|
+
- 가로정렬 : 가로정렬을 설정한다. (좌측부터 순서대로 왼쪽정렬, 가운데정렬, 우측정렬, 양쪽정렬)
|
|
4
|
+
![align-horizontal]
|
|
10
5
|
|
|
11
|
-
|
|
6
|
+
- 수직정렬 : 세로정렬을 설정한다. (좌측부터 순서대로 위쪽정렬, 중간정렬, 아래쪽정렬)
|
|
12
7
|
![align-vertical]
|
|
13
8
|
|
|
9
|
+
- 텍스트개행 : 텍스트가 컴포넌트의 영역을 벗어날 경우 개행여부를 선택한다.
|
|
14
10
|
|
|
15
|
-
|
|
11
|
+
- 여백 : 텍스트의 상하좌우 여백을 설정한다.
|
|
12
|
+
![text-margin]
|
|
16
13
|
|
|
14
|
+
[align-horizontal]: ../images/common-property-text-align-horizontal.png
|
|
17
15
|
[align-vertical]: ../images/common-property-text-align-vertical.png
|
|
18
|
-
|
|
19
|
-
[text-margin]: ../images/common-property-text-margin.png
|
|
16
|
+
[text-margin]: ../images/common-property-text-margin.png
|
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
# Text Box
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
- Horizontal alignment : Set the horizontal alignment. (It is align left, center, align right, justify in order from left.)
|
|
4
4
|
![align-horizontal]
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
- Vertical alignment : Set the vertical alignment. (It is align top, center, align bottom in order from left.)
|
|
7
7
|
![align-vertical]
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
- Text Wrap: Allow long words to be able to break and wrap onto the next line:
|
|
10
|
+
|
|
11
|
+
- Margin : Set the top, bottom, left and right margins of text.
|
|
12
12
|
![text-margin]
|
|
13
13
|
|
|
14
14
|
[align-horizontal]: ../images/common-property-text-align-horizontal.png
|
|
15
|
-
|
|
16
15
|
[align-vertical]: ../images/common-property-text-align-vertical.png
|
|
17
|
-
|
|
18
|
-
[text-margin]: ../images/common-property-text-margin.png
|
|
16
|
+
[text-margin]: ../images/common-property-text-margin.png
|
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
# 文本
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
![align-horizontal]
|
|
5
|
-
|
|
6
|
-
- 垂直对齐 : 设置垂直对齐。（从左侧开始，按顺序是上对齐、居中对齐、下对齐。）
|
|
7
|
-
![align-vertical]
|
|
8
|
-
|
|
9
|
-
- 文本换行 : 当文本超出组件的区域时，选择是否换行。
|
|
3
|
+
- 水平对齐 : 设置水平对齐。（从左侧开始，按顺序是左对齐、 居中对齐、右对齐、两端对齐。）
|
|
4
|
+
![align-horizontal]
|
|
10
5
|
|
|
11
|
-
|
|
6
|
+
- 垂直对齐 : 设置垂直对齐。（从左侧开始，按顺序是上对齐、居中对齐、下对齐。）
|
|
12
7
|
![align-vertical]
|
|
13
8
|
|
|
14
|
-
|
|
9
|
+
- 文本换行 : 当文本超出组件的区域时，选择是否换行。
|
|
15
10
|
|
|
16
|
-
|
|
11
|
+
- 边距 : 设置文本的上下左右边距。
|
|
12
|
+
![text-margin]
|
|
17
13
|
|
|
18
|
-
[
|
|
14
|
+
[align-horizontal]: ../images/common-property-text-align-horizontal.png
|
|
15
|
+
[align-vertical]: ../images/common-property-text-align-vertical.png
|
|
16
|
+
[text-margin]: ../images/common-property-text-margin.png
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@things-factory/board-ui",
|
|
3
|
-
"version": "5.0.0-
|
|
3
|
+
"version": "5.0.0-y.0",
|
|
4
4
|
"main": "dist-server/index.js",
|
|
5
5
|
"browser": "client/index.js",
|
|
6
6
|
"things-factory": true,
|
|
@@ -26,12 +26,12 @@
|
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@material/mwc-list": "^0.25.3",
|
|
28
28
|
"@material/mwc-select": "^0.25.3",
|
|
29
|
-
"@operato/app": "1.0.0-
|
|
30
|
-
"@operato/board": "1.0.0-
|
|
31
|
-
"@operato/help": "1.0.0-
|
|
32
|
-
"@operato/i18n": "1.0.0-
|
|
33
|
-
"@operato/layout": "1.0.0-
|
|
34
|
-
"@operato/popup": "1.0.0-
|
|
29
|
+
"@operato/app": "^1.0.0-beta.26",
|
|
30
|
+
"@operato/board": "^1.0.0-beta.26",
|
|
31
|
+
"@operato/help": "^1.0.0-beta.26",
|
|
32
|
+
"@operato/i18n": "^1.0.0-beta.26",
|
|
33
|
+
"@operato/layout": "^1.0.0-beta.26",
|
|
34
|
+
"@operato/popup": "^1.0.0-beta.26",
|
|
35
35
|
"@polymer/iron-icon": "^3.0.1",
|
|
36
36
|
"@polymer/iron-icons": "^3.0.1",
|
|
37
37
|
"@polymer/paper-button": "^3.0.1",
|
|
@@ -41,10 +41,10 @@
|
|
|
41
41
|
"@polymer/paper-listbox": "^3.0.1",
|
|
42
42
|
"@polymer/paper-menu-button": "^3.0.1",
|
|
43
43
|
"@polymer/paper-slider": "^3.0.1",
|
|
44
|
-
"@things-factory/barcode-base": "^5.0.0-
|
|
45
|
-
"@things-factory/grist-ui": "^5.0.0-
|
|
44
|
+
"@things-factory/barcode-base": "^5.0.0-y.0",
|
|
45
|
+
"@things-factory/grist-ui": "^5.0.0-y.0",
|
|
46
46
|
"file-saver": "^2.0.2",
|
|
47
47
|
"sortablejs": "^1.10.2"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "2fb8066dae72d864b0fc3a5b439a18579fa39ee6"
|
|
50
50
|
}
|
package/translations/en.json
CHANGED
|
@@ -305,6 +305,7 @@
|
|
|
305
305
|
"label.multiple": "multiple",
|
|
306
306
|
"label.name": "Name",
|
|
307
307
|
"label.ndns": "No Data No Show",
|
|
308
|
+
"label.ndnsp": "No Data No Spreading",
|
|
308
309
|
"label.near": "Near",
|
|
309
310
|
"label.needle-fill-style": "needle fill style",
|
|
310
311
|
"label.needle-fillstyle": "needle fill style",
|
|
@@ -323,8 +324,9 @@
|
|
|
323
324
|
"label.path": "path",
|
|
324
325
|
"label.pattern": "pattern",
|
|
325
326
|
"label.period": "period",
|
|
326
|
-
"label.
|
|
327
|
-
"label.picking-
|
|
327
|
+
"label.persistent-data": "persistent data",
|
|
328
|
+
"label.picking-location": "picking location",
|
|
329
|
+
"label.picking-order": "picking order",
|
|
328
330
|
"label.placeholder": "placeholder",
|
|
329
331
|
"label.play": "play",
|
|
330
332
|
"label.pls-name-font-family": "pls. name font-family",
|
|
@@ -625,4 +627,4 @@
|
|
|
625
627
|
"title.update-user": "Update User",
|
|
626
628
|
"title.update-variable": "Update Variable",
|
|
627
629
|
"title.warn": "Warning"
|
|
628
|
-
}
|
|
630
|
+
}
|
package/translations/ko.json
CHANGED
|
@@ -305,6 +305,7 @@
|
|
|
305
305
|
"label.multiple": "다중",
|
|
306
306
|
"label.name": "이름",
|
|
307
307
|
"label.ndns": "No Data No Show",
|
|
308
|
+
"label.ndnsp": "No Data No Spreading",
|
|
308
309
|
"label.near": "Near",
|
|
309
310
|
"label.needle-fill-style": "바늘 채우기 색상",
|
|
310
311
|
"label.needle-fillstyle": "바늘 채우기 스타일",
|
|
@@ -322,7 +323,8 @@
|
|
|
322
323
|
"label.passcode": "패스코드",
|
|
323
324
|
"label.path": "경로",
|
|
324
325
|
"label.pattern": "패턴",
|
|
325
|
-
"label.period": "
|
|
326
|
+
"label.period": "기간",
|
|
327
|
+
"label.persistent-data": "지속성 데이타",
|
|
326
328
|
"label.picking-location": "피킹 로케이션",
|
|
327
329
|
"label.picking-order": "피킹 오더",
|
|
328
330
|
"label.placeholder": "placeholder",
|
|
@@ -626,4 +628,4 @@
|
|
|
626
628
|
"title.update-user": "사용자 수정",
|
|
627
629
|
"title.update-variable": "변수 수정",
|
|
628
630
|
"title.warn": "경고"
|
|
629
|
-
}
|
|
631
|
+
}
|
package/translations/ms.json
CHANGED
|
@@ -304,7 +304,7 @@
|
|
|
304
304
|
"label.multi-axis": "pelbagai paksi",
|
|
305
305
|
"label.multiple": "pelbagai",
|
|
306
306
|
"label.name": "Nama",
|
|
307
|
-
"label.
|
|
307
|
+
"label.ndnsp": "No Data No Spreading",
|
|
308
308
|
"label.near": "hampir",
|
|
309
309
|
"label.needle-fill-style": "gaya isi needle",
|
|
310
310
|
"label.needle-fillstyle": "gaya isi needle",
|
|
@@ -323,6 +323,7 @@
|
|
|
323
323
|
"label.path": "jalan",
|
|
324
324
|
"label.pattern": "corak",
|
|
325
325
|
"label.period": "tempoh",
|
|
326
|
+
"label.persistent-data": "[ms] persistent data",
|
|
326
327
|
"label.picking-location": "memilih lokasi",
|
|
327
328
|
"label.picking-order": "memilih pesanan",
|
|
328
329
|
"label.placeholder": "ruang letak",
|
|
@@ -625,4 +626,4 @@
|
|
|
625
626
|
"title.update-user": "kemaskini pengguna",
|
|
626
627
|
"title.update-variable": "kemaskini pemboleh ubah",
|
|
627
628
|
"title.warn": "amaran"
|
|
628
|
-
}
|
|
629
|
+
}
|
package/translations/zh.json
CHANGED
|
@@ -306,6 +306,7 @@
|
|
|
306
306
|
"label.multiple": "多个",
|
|
307
307
|
"label.name": "名称",
|
|
308
308
|
"label.ndns": "无数据不显示",
|
|
309
|
+
"label.ndnsp": "无数据不传播",
|
|
309
310
|
"label.near": "NEAR",
|
|
310
311
|
"label.needle-fill-style": "指针填充样式",
|
|
311
312
|
"label.needle-fillstyle": "指针样式",
|
|
@@ -324,6 +325,7 @@
|
|
|
324
325
|
"label.path": "路径",
|
|
325
326
|
"label.pattern": "图案",
|
|
326
327
|
"label.period": "期间",
|
|
328
|
+
"label.persistent-data": "持久数据",
|
|
327
329
|
"label.picking-location": "取出位置",
|
|
328
330
|
"label.picking-order": "拣料单",
|
|
329
331
|
"label.placeholder": "占位符",
|
|
@@ -627,4 +629,4 @@
|
|
|
627
629
|
"title.update-user": "更新用户",
|
|
628
630
|
"title.update-variable": "更新变量",
|
|
629
631
|
"title.warn": "警告"
|
|
630
|
-
}
|
|
632
|
+
}
|