@flexem/fc-gui 3.0.0-alpha.73 → 3.0.0-alpha.75

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.
Files changed (8) hide show
  1. package/CHANGELOG.md +11 -1
  2. package/bundles/@flexem/fc-gui.umd.js +31 -17
  3. package/bundles/@flexem/fc-gui.umd.js.map +1 -1
  4. package/bundles/@flexem/fc-gui.umd.min.js +1 -1
  5. package/bundles/@flexem/fc-gui.umd.min.js.map +1 -1
  6. package/elements/alarm/alarm-element.js +30 -17
  7. package/elements/video/video-element.js +1 -0
  8. package/package.json +1 -1
package/elements/alarm/alarm-element.js CHANGED
@@ -148,41 +148,41 @@ export class AlarmElement extends ConditionalDisplayElement {
148
148
  text-align: ${this.model.generalSetting.headerFont.textAlign};
149
149
  ${this.model.generalSetting.headerFont.isUnderline ? 'text-decoration: underline' : ''};
150
150
  vertical-align: middle;`;
151
- for (let i = 0; i < 4; i++) {
151
+ for (let row = 0; row < 4; row++) {
152
152
  const th = document.createElement('th');
153
- th.innerHTML = this.model.columLabels[i];
154
- th.style.cssText = `width: ${this.model.widths[i] / this.model.size.width * 100}%;
153
+ th.innerHTML = this.model.columLabels[row];
154
+ th.style.cssText = `width: ${this.model.widths[row] / this.model.size.width * 100}%;
155
155
  border-style: solid;
156
156
  border-color: ${this.model.generalSetting.splitLine};
157
- border-left-width: ${!i || this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;`;
157
+ border-left-width: ${!row || this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;`;
158
158
  tr.appendChild(th);
159
159
  }
160
160
  table.appendChild(tr);
161
161
  const levelColors = ['#3695FF', '#FFE900', '#FFA800', '#E84F4F'];
162
- for (let i = 0; i < this.pageSize; i++) {
162
+ for (let row = 0; row < this.pageSize; row++) {
163
163
  tr = document.createElement('tr');
164
- tr.style.cssText = `height: ${this.model.heights[i + 1]}px;
164
+ tr.style.cssText = `height: ${this.model.heights[row + 1]}px;
165
165
  background: ${this.model.generalSetting.tableFillColor};
166
166
  font: ${this.model.generalSetting.fontStyle};
167
167
  color: ${this.model.generalSetting.fontColor};
168
168
  text-align: ${this.model.generalSetting.textAlign};
169
169
  vertical-align: middle;`;
170
- for (let j = 0; j < 4; j++) {
170
+ for (let col = 0; col < 4; col++) {
171
171
  const td = document.createElement('td');
172
172
  td.style.cssText = `border-style: solid;
173
173
  border-color: ${this.model.generalSetting.splitLine};
174
174
  border-top-width: ${this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;
175
- border-left-width: ${!j || this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;`;
176
- if (this.alarmList[i]) {
177
- if (j !== 2) {
178
- td.innerHTML = this.alarmList[i][j];
175
+ border-left-width: ${!col || this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;`;
176
+ if (this.alarmList[row]) {
177
+ if (col !== 2) {
178
+ td.innerHTML = this.alarmList[row][col];
179
179
  td.style.cssText += `${this.model.generalSetting.isUnderline ? 'text-decoration: underline' : ''};`;
180
180
  }
181
181
  else {
182
182
  const alarmLevel = document.createElement('div');
183
183
  let alarmHeight = parseInt(this.model.generalSetting.fontSize) + 15;
184
- if (alarmHeight > this.model.heights[i + 1])
185
- alarmHeight = this.model.heights[i + 1];
184
+ if (alarmHeight > this.model.heights[row + 1])
185
+ alarmHeight = this.model.heights[row + 1];
186
186
  let margin = '0 15px';
187
187
  if (this.model.generalSetting.textAlign === 'left') {
188
188
  margin = '0 30px 0 0';
@@ -192,19 +192,32 @@ export class AlarmElement extends ConditionalDisplayElement {
192
192
  }
193
193
  alarmLevel.style.cssText = `margin: ${margin};
194
194
  border-radius: 5px;
195
- background: ${levelColors[this.alarmList[i][j]]};
195
+ background: ${levelColors[this.alarmList[row][col]]};
196
196
  color: #ffffff;
197
- width: ${this.model.widths[j] - 30}px;
197
+ width: ${this.model.widths[col] - 30}px;
198
198
  height: ${alarmHeight}px;
199
- max-height: ${this.model.heights[i + 1]}px;
199
+ max-height: ${this.model.heights[row + 1]}px;
200
200
  display: flex;
201
201
  justify-content: center;
202
202
  align-items: center;
203
203
  ${this.model.generalSetting.isUnderline ? 'text-decoration: underline' : ''};`;
204
- alarmLevel.innerHTML = this.model.levelText[this.alarmList[i][j]];
204
+ alarmLevel.innerHTML = this.model.levelText[this.alarmList[row][col]];
205
205
  td.appendChild(alarmLevel);
206
206
  }
207
207
  }
208
+ else if (col === 2) {
209
+ const alarmLevel = document.createElement('div');
210
+ let margin = '0 15px';
211
+ if (this.model.generalSetting.textAlign === 'left') {
212
+ margin = '0 30px 0 0';
213
+ }
214
+ else if (this.model.generalSetting.textAlign === 'right') {
215
+ margin = '0 0 0 30px';
216
+ }
217
+ alarmLevel.style.cssText = `margin: ${margin};
218
+ width: ${this.model.widths[col] - 30}px;`;
219
+ td.appendChild(alarmLevel);
220
+ }
208
221
  tr.appendChild(td);
209
222
  }
210
223
  table.appendChild(tr);
package/elements/video/video-element.js CHANGED
@@ -73,6 +73,7 @@ export class VideoElement extends ConditionalDisplayElement {
73
73
  .attr('src', videoUrl)
74
74
  .style('width', '100%')
75
75
  .style('height', '100%')
76
+ .style('object-fit', 'fill')
76
77
  .attr('playsInline', true)
77
78
  .attr('webkit-playsinline', true);
78
79
  if (this.isMobileMode) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "main": "bundles/fc-gui.umd.js",
3
- "version": "3.0.0-alpha.73",
3
+ "version": "3.0.0-alpha.75",
4
4
  "module": "public_api.js",
5
5
  "typings": "public_api.d.ts",
6
6
  "license": "UNLICENSED",