@fmsim/board 1.0.7 → 1.0.9

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.
@@ -1007,6 +1007,18 @@
1007
1007
  "kind": "field",
1008
1008
  "name": "clickComponentHandler"
1009
1009
  },
1010
+ {
1011
+ "kind": "field",
1012
+ "name": "fmbShowIconAnimation"
1013
+ },
1014
+ {
1015
+ "kind": "field",
1016
+ "name": "fmbHideIconAnimation"
1017
+ },
1018
+ {
1019
+ "kind": "field",
1020
+ "name": "fmbResetIconAnimation"
1021
+ },
1010
1022
  {
1011
1023
  "kind": "method",
1012
1024
  "name": "initSceneAsync"
@@ -6002,6 +6014,249 @@
6002
6014
  }
6003
6015
  ]
6004
6016
  },
6017
+ {
6018
+ "kind": "javascript-module",
6019
+ "path": "src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts",
6020
+ "declarations": [
6021
+ {
6022
+ "kind": "variable",
6023
+ "name": "BoxPaddingEditorStyles",
6024
+ "default": "css` .box-padding { width: 100%; } .box-padding td { background: var(--url-icon-properties-padding) 50% 0 no-repeat; } .box-padding tr:nth-child(1), .box-padding tr:nth-child(3) { height: 20px; } .box-padding tr td:nth-child(1), .box-padding tr td:nth-child(3) { width: 18px; } .box-padding .slide1 { background-position: 0 0; } .box-padding .slide2 { background-position: 50% -40px; background-color: rgba(69, 46, 41, 0.2); } .box-padding .slide3 { background-position: 100% -440px; } .box-padding .slide4 { background-position: 0 -360px; background-color: rgba(69, 46, 41, 0.2); } .box-padding .slide5 { background: none; text-align: center; } .box-padding .slide6 { background-position: 100% -160px; background-color: rgba(69, 46, 41, 0.2); } .box-padding .slide7 { background-position: 0 100%; } .box-padding .slide8 { background-position: 50% -320px; background-color: rgba(69, 46, 41, 0.2); } .box-padding .slide9 { background-position: 0 0px; } .box-padding input { background-color: transparent; width: 35px; margin: 0px; padding: 0px; clear: both; float: initial; border: 1px solid #fff; border-width: 0 0 1px 0; text-align: right; font-size: 14px; } .slide5 input:nth-child(1), .slide5 input:nth-child(4) { display: block; margin: auto; } .slide5 input:nth-child(2) { float: left; } .slide5 input:nth-child(3) { float: right; margin-top: -25px; } .slide5 input:nth-child(4) { margin-top: -5px; } `"
6025
+ }
6026
+ ],
6027
+ "exports": [
6028
+ {
6029
+ "kind": "js",
6030
+ "name": "BoxPaddingEditorStyles",
6031
+ "declaration": {
6032
+ "name": "BoxPaddingEditorStyles",
6033
+ "module": "src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts"
6034
+ }
6035
+ }
6036
+ ]
6037
+ },
6038
+ {
6039
+ "kind": "javascript-module",
6040
+ "path": "src/modeller/property-sidebar/shapes/shapes.ts",
6041
+ "declarations": [
6042
+ {
6043
+ "kind": "class",
6044
+ "description": "",
6045
+ "name": "PropertyShapes",
6046
+ "members": [
6047
+ {
6048
+ "kind": "field",
6049
+ "name": "value",
6050
+ "type": {
6051
+ "text": "Properties | undefined"
6052
+ },
6053
+ "attribute": "value"
6054
+ },
6055
+ {
6056
+ "kind": "field",
6057
+ "name": "bounds",
6058
+ "type": {
6059
+ "text": "BOUNDS | null"
6060
+ },
6061
+ "default": "null",
6062
+ "attribute": "bounds"
6063
+ },
6064
+ {
6065
+ "kind": "field",
6066
+ "name": "selected",
6067
+ "type": {
6068
+ "text": "Component[]"
6069
+ },
6070
+ "default": "[]",
6071
+ "attribute": "selected"
6072
+ },
6073
+ {
6074
+ "kind": "method",
6075
+ "name": "_onValueChange",
6076
+ "parameters": [
6077
+ {
6078
+ "name": "e",
6079
+ "type": {
6080
+ "text": "Event"
6081
+ }
6082
+ }
6083
+ ],
6084
+ "inheritedFrom": {
6085
+ "name": "AbstractProperty",
6086
+ "module": "src/modeller/property-sidebar/abstract-property.ts"
6087
+ }
6088
+ },
6089
+ {
6090
+ "kind": "method",
6091
+ "name": "_hasTextProperty",
6092
+ "parameters": [
6093
+ {
6094
+ "name": "selected",
6095
+ "type": {
6096
+ "text": "Component[]"
6097
+ }
6098
+ }
6099
+ ]
6100
+ },
6101
+ {
6102
+ "kind": "method",
6103
+ "name": "_hasProperties",
6104
+ "parameters": [
6105
+ {
6106
+ "name": "selected",
6107
+ "type": {
6108
+ "text": "Component[]"
6109
+ }
6110
+ }
6111
+ ]
6112
+ },
6113
+ {
6114
+ "kind": "method",
6115
+ "name": "_isIdentifiable",
6116
+ "parameters": [
6117
+ {
6118
+ "name": "selected",
6119
+ "type": {
6120
+ "text": "Component[]"
6121
+ }
6122
+ }
6123
+ ]
6124
+ },
6125
+ {
6126
+ "kind": "method",
6127
+ "name": "_isClassIdentifiable",
6128
+ "parameters": [
6129
+ {
6130
+ "name": "selected",
6131
+ "type": {
6132
+ "text": "Component[]"
6133
+ }
6134
+ }
6135
+ ]
6136
+ },
6137
+ {
6138
+ "kind": "method",
6139
+ "name": "_isLine",
6140
+ "parameters": [
6141
+ {
6142
+ "name": "selected",
6143
+ "type": {
6144
+ "text": "Component[]"
6145
+ }
6146
+ }
6147
+ ]
6148
+ },
6149
+ {
6150
+ "kind": "method",
6151
+ "name": "_is3dish",
6152
+ "parameters": [
6153
+ {
6154
+ "name": "selected",
6155
+ "type": {
6156
+ "text": "Component[]"
6157
+ }
6158
+ }
6159
+ ]
6160
+ },
6161
+ {
6162
+ "kind": "method",
6163
+ "name": "_getValueFromEventTarget",
6164
+ "parameters": [
6165
+ {
6166
+ "name": "element",
6167
+ "type": {
6168
+ "text": "HTMLElement"
6169
+ }
6170
+ }
6171
+ ],
6172
+ "inheritedFrom": {
6173
+ "name": "AbstractProperty",
6174
+ "module": "src/modeller/property-sidebar/abstract-property.ts"
6175
+ }
6176
+ },
6177
+ {
6178
+ "kind": "method",
6179
+ "name": "_onAfterValueChange",
6180
+ "parameters": [
6181
+ {
6182
+ "name": "key",
6183
+ "type": {
6184
+ "text": "string"
6185
+ }
6186
+ },
6187
+ {
6188
+ "name": "value",
6189
+ "type": {
6190
+ "text": "any"
6191
+ }
6192
+ }
6193
+ ],
6194
+ "inheritedFrom": {
6195
+ "name": "AbstractProperty",
6196
+ "module": "src/modeller/property-sidebar/abstract-property.ts"
6197
+ }
6198
+ }
6199
+ ],
6200
+ "events": [
6201
+ {
6202
+ "name": "bounds-change",
6203
+ "type": {
6204
+ "text": "CustomEvent"
6205
+ }
6206
+ },
6207
+ {
6208
+ "name": "property-change",
6209
+ "type": {
6210
+ "text": "CustomEvent"
6211
+ },
6212
+ "inheritedFrom": {
6213
+ "name": "AbstractProperty",
6214
+ "module": "src/modeller/property-sidebar/abstract-property.ts"
6215
+ }
6216
+ }
6217
+ ],
6218
+ "attributes": [
6219
+ {
6220
+ "name": "value",
6221
+ "type": {
6222
+ "text": "Properties | undefined"
6223
+ },
6224
+ "fieldName": "value"
6225
+ },
6226
+ {
6227
+ "name": "bounds",
6228
+ "type": {
6229
+ "text": "BOUNDS | null"
6230
+ },
6231
+ "default": "null",
6232
+ "fieldName": "bounds"
6233
+ },
6234
+ {
6235
+ "name": "selected",
6236
+ "type": {
6237
+ "text": "Component[]"
6238
+ },
6239
+ "default": "[]",
6240
+ "fieldName": "selected"
6241
+ }
6242
+ ],
6243
+ "superclass": {
6244
+ "name": "AbstractProperty",
6245
+ "module": "/src/modeller/property-sidebar/abstract-property"
6246
+ }
6247
+ }
6248
+ ],
6249
+ "exports": [
6250
+ {
6251
+ "kind": "js",
6252
+ "name": "PropertyShapes",
6253
+ "declaration": {
6254
+ "name": "PropertyShapes",
6255
+ "module": "src/modeller/property-sidebar/shapes/shapes.ts"
6256
+ }
6257
+ }
6258
+ ]
6259
+ },
6005
6260
  {
6006
6261
  "kind": "javascript-module",
6007
6262
  "path": "src/modeller/property-sidebar/specifics/specific-properties-builder.ts",
@@ -6514,249 +6769,6 @@
6514
6769
  }
6515
6770
  }
6516
6771
  ]
6517
- },
6518
- {
6519
- "kind": "javascript-module",
6520
- "path": "src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts",
6521
- "declarations": [
6522
- {
6523
- "kind": "variable",
6524
- "name": "BoxPaddingEditorStyles",
6525
- "default": "css` .box-padding { width: 100%; } .box-padding td { background: var(--url-icon-properties-padding) 50% 0 no-repeat; } .box-padding tr:nth-child(1), .box-padding tr:nth-child(3) { height: 20px; } .box-padding tr td:nth-child(1), .box-padding tr td:nth-child(3) { width: 18px; } .box-padding .slide1 { background-position: 0 0; } .box-padding .slide2 { background-position: 50% -40px; background-color: rgba(69, 46, 41, 0.2); } .box-padding .slide3 { background-position: 100% -440px; } .box-padding .slide4 { background-position: 0 -360px; background-color: rgba(69, 46, 41, 0.2); } .box-padding .slide5 { background: none; text-align: center; } .box-padding .slide6 { background-position: 100% -160px; background-color: rgba(69, 46, 41, 0.2); } .box-padding .slide7 { background-position: 0 100%; } .box-padding .slide8 { background-position: 50% -320px; background-color: rgba(69, 46, 41, 0.2); } .box-padding .slide9 { background-position: 0 0px; } .box-padding input { background-color: transparent; width: 35px; margin: 0px; padding: 0px; clear: both; float: initial; border: 1px solid #fff; border-width: 0 0 1px 0; text-align: right; font-size: 14px; } .slide5 input:nth-child(1), .slide5 input:nth-child(4) { display: block; margin: auto; } .slide5 input:nth-child(2) { float: left; } .slide5 input:nth-child(3) { float: right; margin-top: -25px; } .slide5 input:nth-child(4) { margin-top: -5px; } `"
6526
- }
6527
- ],
6528
- "exports": [
6529
- {
6530
- "kind": "js",
6531
- "name": "BoxPaddingEditorStyles",
6532
- "declaration": {
6533
- "name": "BoxPaddingEditorStyles",
6534
- "module": "src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts"
6535
- }
6536
- }
6537
- ]
6538
- },
6539
- {
6540
- "kind": "javascript-module",
6541
- "path": "src/modeller/property-sidebar/shapes/shapes.ts",
6542
- "declarations": [
6543
- {
6544
- "kind": "class",
6545
- "description": "",
6546
- "name": "PropertyShapes",
6547
- "members": [
6548
- {
6549
- "kind": "field",
6550
- "name": "value",
6551
- "type": {
6552
- "text": "Properties | undefined"
6553
- },
6554
- "attribute": "value"
6555
- },
6556
- {
6557
- "kind": "field",
6558
- "name": "bounds",
6559
- "type": {
6560
- "text": "BOUNDS | null"
6561
- },
6562
- "default": "null",
6563
- "attribute": "bounds"
6564
- },
6565
- {
6566
- "kind": "field",
6567
- "name": "selected",
6568
- "type": {
6569
- "text": "Component[]"
6570
- },
6571
- "default": "[]",
6572
- "attribute": "selected"
6573
- },
6574
- {
6575
- "kind": "method",
6576
- "name": "_onValueChange",
6577
- "parameters": [
6578
- {
6579
- "name": "e",
6580
- "type": {
6581
- "text": "Event"
6582
- }
6583
- }
6584
- ],
6585
- "inheritedFrom": {
6586
- "name": "AbstractProperty",
6587
- "module": "src/modeller/property-sidebar/abstract-property.ts"
6588
- }
6589
- },
6590
- {
6591
- "kind": "method",
6592
- "name": "_hasTextProperty",
6593
- "parameters": [
6594
- {
6595
- "name": "selected",
6596
- "type": {
6597
- "text": "Component[]"
6598
- }
6599
- }
6600
- ]
6601
- },
6602
- {
6603
- "kind": "method",
6604
- "name": "_hasProperties",
6605
- "parameters": [
6606
- {
6607
- "name": "selected",
6608
- "type": {
6609
- "text": "Component[]"
6610
- }
6611
- }
6612
- ]
6613
- },
6614
- {
6615
- "kind": "method",
6616
- "name": "_isIdentifiable",
6617
- "parameters": [
6618
- {
6619
- "name": "selected",
6620
- "type": {
6621
- "text": "Component[]"
6622
- }
6623
- }
6624
- ]
6625
- },
6626
- {
6627
- "kind": "method",
6628
- "name": "_isClassIdentifiable",
6629
- "parameters": [
6630
- {
6631
- "name": "selected",
6632
- "type": {
6633
- "text": "Component[]"
6634
- }
6635
- }
6636
- ]
6637
- },
6638
- {
6639
- "kind": "method",
6640
- "name": "_isLine",
6641
- "parameters": [
6642
- {
6643
- "name": "selected",
6644
- "type": {
6645
- "text": "Component[]"
6646
- }
6647
- }
6648
- ]
6649
- },
6650
- {
6651
- "kind": "method",
6652
- "name": "_is3dish",
6653
- "parameters": [
6654
- {
6655
- "name": "selected",
6656
- "type": {
6657
- "text": "Component[]"
6658
- }
6659
- }
6660
- ]
6661
- },
6662
- {
6663
- "kind": "method",
6664
- "name": "_getValueFromEventTarget",
6665
- "parameters": [
6666
- {
6667
- "name": "element",
6668
- "type": {
6669
- "text": "HTMLElement"
6670
- }
6671
- }
6672
- ],
6673
- "inheritedFrom": {
6674
- "name": "AbstractProperty",
6675
- "module": "src/modeller/property-sidebar/abstract-property.ts"
6676
- }
6677
- },
6678
- {
6679
- "kind": "method",
6680
- "name": "_onAfterValueChange",
6681
- "parameters": [
6682
- {
6683
- "name": "key",
6684
- "type": {
6685
- "text": "string"
6686
- }
6687
- },
6688
- {
6689
- "name": "value",
6690
- "type": {
6691
- "text": "any"
6692
- }
6693
- }
6694
- ],
6695
- "inheritedFrom": {
6696
- "name": "AbstractProperty",
6697
- "module": "src/modeller/property-sidebar/abstract-property.ts"
6698
- }
6699
- }
6700
- ],
6701
- "events": [
6702
- {
6703
- "name": "bounds-change",
6704
- "type": {
6705
- "text": "CustomEvent"
6706
- }
6707
- },
6708
- {
6709
- "name": "property-change",
6710
- "type": {
6711
- "text": "CustomEvent"
6712
- },
6713
- "inheritedFrom": {
6714
- "name": "AbstractProperty",
6715
- "module": "src/modeller/property-sidebar/abstract-property.ts"
6716
- }
6717
- }
6718
- ],
6719
- "attributes": [
6720
- {
6721
- "name": "value",
6722
- "type": {
6723
- "text": "Properties | undefined"
6724
- },
6725
- "fieldName": "value"
6726
- },
6727
- {
6728
- "name": "bounds",
6729
- "type": {
6730
- "text": "BOUNDS | null"
6731
- },
6732
- "default": "null",
6733
- "fieldName": "bounds"
6734
- },
6735
- {
6736
- "name": "selected",
6737
- "type": {
6738
- "text": "Component[]"
6739
- },
6740
- "default": "[]",
6741
- "fieldName": "selected"
6742
- }
6743
- ],
6744
- "superclass": {
6745
- "name": "AbstractProperty",
6746
- "module": "/src/modeller/property-sidebar/abstract-property"
6747
- }
6748
- }
6749
- ],
6750
- "exports": [
6751
- {
6752
- "kind": "js",
6753
- "name": "PropertyShapes",
6754
- "declaration": {
6755
- "name": "PropertyShapes",
6756
- "module": "src/modeller/property-sidebar/shapes/shapes.ts"
6757
- }
6758
- }
6759
- ]
6760
6772
  }
6761
6773
  ]
6762
6774
  }
@@ -79,7 +79,7 @@
79
79
  model: JSON.parse(JSON.stringify(board.model)),
80
80
  mode: 0,
81
81
  refProvider: provider,
82
- handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler', 'animated-icon-handler'],
82
+ handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler', 'animator-handler'],
83
83
  layers: [
84
84
  { type: 'decotag-layer' },
85
85
  { type: 'reaction-layer' },
@@ -79,7 +79,7 @@
79
79
  model: JSON.parse(JSON.stringify(board.model)),
80
80
  mode: 0,
81
81
  refProvider: provider,
82
- handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler', 'animated-icon-handler'],
82
+ handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler', 'animator-handler'],
83
83
  layers: [
84
84
  { type: 'decotag-layer' },
85
85
  { type: 'reaction-layer' },
package/demo/index.html CHANGED
@@ -79,7 +79,7 @@
79
79
  model: JSON.parse(JSON.stringify(board.model)),
80
80
  mode: 0,
81
81
  refProvider: provider,
82
- handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler', 'animated-icon-handler'],
82
+ handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler', 'animator-handler'],
83
83
  layers: [
84
84
  { type: 'decotag-layer' },
85
85
  { type: 'reaction-layer' },
@@ -36,6 +36,9 @@ export declare class BoardViewer extends LitElement {
36
36
  fmbShowMovementHandler: (e: Event) => void;
37
37
  fmbMonitoringInitHandler: (e: Event) => void;
38
38
  clickComponentHandler: (e: Event) => void;
39
+ fmbShowIconAnimation: (e: Event) => void;
40
+ fmbHideIconAnimation: (e: Event) => void;
41
+ fmbResetIconAnimation: () => void;
39
42
  connectedCallback(): void;
40
43
  disconnectedCallback(): void;
41
44
  updated(changes: PropertyValues<this>): void;
@@ -63,6 +63,30 @@ let BoardViewer = class BoardViewer extends LitElement {
63
63
  }
64
64
  this.togglePopup(component);
65
65
  };
66
+ this.fmbShowIconAnimation = (e) => {
67
+ var _a;
68
+ const { target, decorator, animation } = e.detail || {};
69
+ const { id, type } = target || {};
70
+ if (id) {
71
+ const components = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.findAllById(id);
72
+ // TODO filter with type
73
+ components === null || components === void 0 ? void 0 : components.forEach(component => component.trigger('icon', decorator, animation));
74
+ }
75
+ };
76
+ this.fmbHideIconAnimation = (e) => {
77
+ var _a;
78
+ const { target } = e.detail || {};
79
+ const { id, type } = target || {};
80
+ if (id) {
81
+ const components = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.findAllById(id);
82
+ // TODO filter with type
83
+ components === null || components === void 0 ? void 0 : components.forEach(component => component.trigger('iconoff'));
84
+ }
85
+ };
86
+ this.fmbResetIconAnimation = () => {
87
+ var _a;
88
+ (_a = this._scene) === null || _a === void 0 ? void 0 : _a.rootContainer.trigger('iconreset');
89
+ };
66
90
  }
67
91
  render() {
68
92
  var fullscreen = !isIOS() && !this.hideFullscreen
@@ -131,6 +155,10 @@ let BoardViewer = class BoardViewer extends LitElement {
131
155
  window.addEventListener('fmbMonitoringInit', this.fmbMonitoringInitHandler);
132
156
  // BoardComponentInfo popup을 보여준다.
133
157
  window.addEventListener('clickComponent', this.clickComponentHandler);
158
+ // AnimatedIcon 을 추가하거나 제거한다.
159
+ window.addEventListener('fmbShowIconAnimation', this.fmbShowIconAnimation);
160
+ window.addEventListener('fmbHideIconAnimation', this.fmbHideIconAnimation);
161
+ window.addEventListener('fmbResetIconAnimation', this.fmbResetIconAnimation);
134
162
  }
135
163
  disconnectedCallback() {
136
164
  super.disconnectedCallback();
@@ -142,6 +170,10 @@ let BoardViewer = class BoardViewer extends LitElement {
142
170
  window.removeEventListener('fmbMonitoringInit', this.fmbMonitoringInitHandler);
143
171
  // BoardComponentInfo popup을 보여준다.
144
172
  window.removeEventListener('clickComponent', this.clickComponentHandler);
173
+ // AnimatedIcon 을 추가하거나 제거한다.
174
+ window.removeEventListener('fmbShowIconAnimation', this.fmbShowIconAnimation);
175
+ window.removeEventListener('fmbHideIconAnimation', this.fmbHideIconAnimation);
176
+ window.removeEventListener('fmbResetIconAnimation', this.fmbResetIconAnimation);
145
177
  this.closeScene();
146
178
  }
147
179
  updated(changes) {
@@ -180,7 +212,7 @@ let BoardViewer = class BoardViewer extends LitElement {
180
212
  },
181
213
  style: this.board.style,
182
214
  mode: SCENE_MODE.VIEW,
183
- handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler', 'animated-icon-handler'],
215
+ handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler', 'animator-handler'],
184
216
  layers: [
185
217
  { type: 'decotag-layer' },
186
218
  { type: 'reaction-layer' },