@fmsim/board 1.0.38 → 1.0.39

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 (6) hide show
  1. package/custom-elements.json +708 -700
  2. package/dist/src/ox-board-component-info.d.ts +1 -0
  3. package/dist/src/ox-board-component-info.js +19 -1
  4. package/dist/src/ox-board-component-info.js.map +1 -1
  5. package/dist/tsconfig.tsbuildinfo +1 -1
  6. package/package.json +3 -3
package/dist/src/ox-board-component-info.d.ts CHANGED
@@ -8,6 +8,7 @@ export declare class BoardComponentInfo extends LitElement {
8
8
  component?: any;
9
9
  detailInfo?: any;
10
10
  collapsed: boolean;
11
+ loading: boolean;
11
12
  private dragStart?;
12
13
  private dragEndHandler;
13
14
  private dragMoveHandler;
package/dist/src/ox-board-component-info.js CHANGED
@@ -3,7 +3,7 @@ import '@material/mwc-icon';
3
3
  import '@material/mwc-button';
4
4
  import '@operato/property-editor/ox-properties-dynamic-view.js';
5
5
  import '@operato/markdown';
6
- import { css, html, LitElement } from 'lit';
6
+ import { css, html, LitElement, nothing } from 'lit';
7
7
  import { customElement, property, state } from 'lit/decorators.js';
8
8
  import { ScrollbarStyles } from '@operato/styles';
9
9
  import { i18next } from '@operato/i18n';
@@ -11,6 +11,7 @@ let BoardComponentInfo = class BoardComponentInfo extends LitElement {
11
11
  constructor() {
12
12
  super(...arguments);
13
13
  this.collapsed = false;
14
+ this.loading = false;
14
15
  this.dragEndHandler = this.onDragEnd.bind(this);
15
16
  this.dragMoveHandler = this.onDragMove.bind(this);
16
17
  }
@@ -40,6 +41,11 @@ let BoardComponentInfo = class BoardComponentInfo extends LitElement {
40
41
   Object Information
41
42
  <mwc-icon @click=${(e) => this.dispatchEvent(new CustomEvent('close'))} close>close</mwc-icon>
42
43
  </div>
44
+ ${this.loading
45
+ ? html `<div>
46
+ <mwc-linear-progress indeterminate></mwc-linear-progress>
47
+ </div>`
48
+ : nothing}
43
49
  <div content @wheel=${(e) => this.onWheel(e)}>
44
50
  <table>
45
51
  ${identifiable
@@ -106,11 +112,15 @@ let BoardComponentInfo = class BoardComponentInfo extends LitElement {
106
112
  this.detailInfo = null;
107
113
  if ('detailInfo' in this.component) {
108
114
  try {
115
+ this.loading = true;
109
116
  this.detailInfo = await this.component.detailInfo();
110
117
  }
111
118
  catch (e) {
112
119
  console.error('failed to get detail information');
113
120
  }
121
+ finally {
122
+ this.loading = false;
123
+ }
114
124
  }
115
125
  }
116
126
  if (changes.has('collapsed')) {
@@ -246,6 +256,11 @@ BoardComponentInfo.styles = [
246
256
  align-items: center;
247
257
  justify-content: center;
248
258
  }
259
+
260
+ mwc-linear-progress {
261
+ --mdc-theme-primary: red;
262
+ --mdc-linear-progress-buffer-color: #ed788d;
263
+ }
249
264
  `
250
265
  ];
251
266
  __decorate([
@@ -257,6 +272,9 @@ __decorate([
257
272
  __decorate([
258
273
  state()
259
274
  ], BoardComponentInfo.prototype, "collapsed", void 0);
275
+ __decorate([
276
+ state()
277
+ ], BoardComponentInfo.prototype, "loading", void 0);
260
278
  BoardComponentInfo = __decorate([
261
279
  customElement('ox-board-component-info')
262
280
  ], BoardComponentInfo);
package/dist/src/ox-board-component-info.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-board-component-info.js","sourceRoot":"","sources":["../../src/ox-board-component-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport '@material/mwc-button'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@operato/markdown'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-board-component-info')\nexport class BoardComponentInfo extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n background-color: white;\n font-size: 12px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n border: 2px solid var(--primary-color);\n border-radius: 3px;\n\n --mdc-icon-size: 12px;\n }\n\n [header] {\n background-color: var(--primary-color);\n user-select: none;\n align-items: center;\n color: #eee;\n padding: 0 2px;\n\n display: flex;\n }\n\n mwc-icon {\n --mdc-icon-size: 14px;\n\n color: #555;\n align-self: center;\n padding: 0 2px;\n }\n\n [header] mwc-icon[close] {\n margin-left: auto;\n }\n\n [content] {\n overflow: auto;\n }\n\n table {\n border-collapse: collapse;\n background-color: #fff;\n width: 100%;\n margin: auto;\n }\n\n tr {\n border-bottom: var(--border-dark-color);\n }\n\n td {\n padding: var(--padding-narrow);\n border-right: var(--border-dark-color);\n font-size: 0.8em;\n }\n\n [subTh] {\n text-align: center !important;\n font-weight: bold;\n width: 60px;\n text-transform: capitalize;\n background-color: rgba(0, 0, 0, 0.05);\n }\n\n [split] {\n height: 10px;\n color: #eee;\n background-color: var(--primary-color);\n font-size: 0.8em;\n padding: 0;\n text-align: center;\n }\n\n [location] {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n }\n `\n ]\n\n @property({ type: Object }) component?: any\n\n @state() detailInfo?: any\n @state() collapsed: boolean = false\n\n private dragStart?: { x: number; y: number }\n\n private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.collapsed = sessionStorage.getItem('ox-board-component-info-collapsed') == 'true'\n\n document.addEventListener('mouseup', this.dragEndHandler)\n document.addEventListener('mousemove', this.dragMoveHandler)\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n document.removeEventListener('mouseup', this.dragEndHandler)\n document.removeEventListener('mousemove', this.dragMoveHandler)\n }\n\n render() {\n const { state, data } = this.component || {}\n const { id, type } = state || {}\n const details = this.detailInfo || data\n const infos: [key: string, value: string][] =\n details && Object.entries(details).filter(([key, value]) => key != 'ID')\n const identifiable = this.component?.isIdentifiable() || false\n\n return html`\n <div header @mousedown=${this.onDragStart.bind(this)} draggable=\"false\">\n <mwc-icon @click=${() => (this.collapsed = !this.collapsed)} collapsed\n >${this.collapsed ? 'expand_more' : 'expand_less'}</mwc-icon\n >\n &nbsp;Object Information\n <mwc-icon @click=${(e: MouseEvent) => this.dispatchEvent(new CustomEvent('close'))} close>close</mwc-icon>\n </div>\n <div content @wheel=${(e: WheelEvent) => this.onWheel(e)}>\n <table>\n ${identifiable\n ? html`\n <tr>\n <td subTh>\n <div\n location\n @click=${(e: MouseEvent) => {\n this.component.trigger('reactionreset')\n this.component.trigger('reaction')\n return false\n }}\n >\n ${i18next.t('label.id')}&nbsp;<mwc-icon>location_on</mwc-icon>\n </div>\n </td>\n <td>${id}</td>\n </tr>\n <tr>\n <td subTh>\n ${i18next.t('label.type')}${!identifiable ? html`&nbsp;<mwc-icon>location_on</mwc-icon>` : html``}\n </td>\n <td>${type}</td>\n </tr>\n `\n : html`\n <tr>\n <td subTh>\n <div\n location\n @click=${(e: MouseEvent) => {\n this.component.trigger('reactionreset')\n this.component.trigger('reaction')\n return false\n }}\n >\n ${i18next.t('label.type')}${!identifiable ? html`&nbsp;<mwc-icon>location_on</mwc-icon>` : html``}\n </div>\n </td>\n <td>${type}</td>\n </tr>\n `}\n ${!this.collapsed && infos\n ? html`\n <tr>\n <td split colspan=\"2\">details</td>\n </tr>\n\n ${infos.map(\n ([key, value]) => html`\n <tr>\n <td subTh>${key}</td>\n <td>${value}</td>\n </tr>\n `\n )}\n `\n : html``}\n </table>\n </div>\n `\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('component')) {\n this.detailInfo = null\n\n if ('detailInfo' in this.component) {\n try {\n this.detailInfo = await this.component.detailInfo()\n } catch (e) {\n console.error('failed to get detail information')\n }\n }\n }\n\n if (changes.has('collapsed')) {\n sessionStorage.setItem('ox-board-component-info-collapsed', this.collapsed ? 'true' : 'false')\n }\n }\n\n onWheel(e: WheelEvent) {\n const scrollableDiv = e.currentTarget! as HTMLElement\n const contentDiv = scrollableDiv.querySelector('table')!\n\n // 컨텐츠의 높이와 div의 높이를 비교하여 수평 스크롤을 동작시키거나 수직 스크롤을 동작시킴\n if (contentDiv.offsetHeight > scrollableDiv.offsetHeight) {\n // 수직 스크롤 가능한 경우\n scrollableDiv.scrollTop += e.deltaY\n } else {\n // 수직 스크롤이 없는 경우\n scrollableDiv.scrollLeft += e.deltaY\n }\n }\n\n onDragStart(e: MouseEvent) {\n e.stopPropagation()\n\n if (e.button == 0) {\n this.dragStart = {\n x: e.clientX,\n y: e.clientY\n }\n }\n\n return false\n }\n\n onDragMove(e: Event) {\n if (!this.dragStart) {\n return false\n }\n\n e.stopPropagation()\n e.preventDefault()\n\n var x = (e as MouseEvent).clientX,\n y = (e as MouseEvent).clientY\n\n const dragStart = { x, y }\n\n x -= this.dragStart.x\n y -= this.dragStart.y\n\n this.dragStart = dragStart\n\n this.style.left =\n Math.min(this.parentElement!.offsetWidth - this.offsetWidth, Math.max(0, this.offsetLeft + x)) + 'px'\n this.style.top =\n Math.min(this.parentElement!.offsetHeight - this.offsetHeight, Math.max(0, this.offsetTop + y)) + 'px'\n\n return false\n }\n\n onDragEnd(e: Event) {\n if (this.dragStart) {\n e.stopPropagation()\n e.preventDefault()\n\n delete this.dragStart\n }\n }\n}\n"]}
1
+ {"version":3,"file":"ox-board-component-info.js","sourceRoot":"","sources":["../../src/ox-board-component-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport '@material/mwc-button'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@operato/markdown'\n\nimport { css, html, LitElement, PropertyValues, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-board-component-info')\nexport class BoardComponentInfo extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n background-color: white;\n font-size: 12px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n border: 2px solid var(--primary-color);\n border-radius: 3px;\n\n --mdc-icon-size: 12px;\n }\n\n [header] {\n background-color: var(--primary-color);\n user-select: none;\n align-items: center;\n color: #eee;\n padding: 0 2px;\n\n display: flex;\n }\n\n mwc-icon {\n --mdc-icon-size: 14px;\n\n color: #555;\n align-self: center;\n padding: 0 2px;\n }\n\n [header] mwc-icon[close] {\n margin-left: auto;\n }\n\n [content] {\n overflow: auto;\n }\n\n table {\n border-collapse: collapse;\n background-color: #fff;\n width: 100%;\n margin: auto;\n }\n\n tr {\n border-bottom: var(--border-dark-color);\n }\n\n td {\n padding: var(--padding-narrow);\n border-right: var(--border-dark-color);\n font-size: 0.8em;\n }\n\n [subTh] {\n text-align: center !important;\n font-weight: bold;\n width: 60px;\n text-transform: capitalize;\n background-color: rgba(0, 0, 0, 0.05);\n }\n\n [split] {\n height: 10px;\n color: #eee;\n background-color: var(--primary-color);\n font-size: 0.8em;\n padding: 0;\n text-align: center;\n }\n\n [location] {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n }\n\n mwc-linear-progress {\n --mdc-theme-primary: red;\n --mdc-linear-progress-buffer-color: #ed788d;\n }\n `\n ]\n\n @property({ type: Object }) component?: any\n\n @state() detailInfo?: any\n @state() collapsed: boolean = false\n @state() loading: boolean = false\n\n private dragStart?: { x: number; y: number }\n\n private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.collapsed = sessionStorage.getItem('ox-board-component-info-collapsed') == 'true'\n\n document.addEventListener('mouseup', this.dragEndHandler)\n document.addEventListener('mousemove', this.dragMoveHandler)\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n document.removeEventListener('mouseup', this.dragEndHandler)\n document.removeEventListener('mousemove', this.dragMoveHandler)\n }\n\n render() {\n const { state, data } = this.component || {}\n const { id, type } = state || {}\n const details = this.detailInfo || data\n const infos: [key: string, value: string][] =\n details && Object.entries(details).filter(([key, value]) => key != 'ID')\n const identifiable = this.component?.isIdentifiable() || false\n\n return html`\n <div header @mousedown=${this.onDragStart.bind(this)} draggable=\"false\">\n <mwc-icon @click=${() => (this.collapsed = !this.collapsed)} collapsed\n >${this.collapsed ? 'expand_more' : 'expand_less'}</mwc-icon\n >\n &nbsp;Object Information\n <mwc-icon @click=${(e: MouseEvent) => this.dispatchEvent(new CustomEvent('close'))} close>close</mwc-icon>\n </div>\n ${this.loading\n ? html`<div>\n <mwc-linear-progress indeterminate></mwc-linear-progress>\n </div>`\n : nothing}\n <div content @wheel=${(e: WheelEvent) => this.onWheel(e)}>\n <table>\n ${identifiable\n ? html`\n <tr>\n <td subTh>\n <div\n location\n @click=${(e: MouseEvent) => {\n this.component.trigger('reactionreset')\n this.component.trigger('reaction')\n return false\n }}\n >\n ${i18next.t('label.id')}&nbsp;<mwc-icon>location_on</mwc-icon>\n </div>\n </td>\n <td>${id}</td>\n </tr>\n <tr>\n <td subTh>\n ${i18next.t('label.type')}${!identifiable ? html`&nbsp;<mwc-icon>location_on</mwc-icon>` : html``}\n </td>\n <td>${type}</td>\n </tr>\n `\n : html`\n <tr>\n <td subTh>\n <div\n location\n @click=${(e: MouseEvent) => {\n this.component.trigger('reactionreset')\n this.component.trigger('reaction')\n return false\n }}\n >\n ${i18next.t('label.type')}${!identifiable ? html`&nbsp;<mwc-icon>location_on</mwc-icon>` : html``}\n </div>\n </td>\n <td>${type}</td>\n </tr>\n `}\n ${!this.collapsed && infos\n ? html`\n <tr>\n <td split colspan=\"2\">details</td>\n </tr>\n\n ${infos.map(\n ([key, value]) => html`\n <tr>\n <td subTh>${key}</td>\n <td>${value}</td>\n </tr>\n `\n )}\n `\n : html``}\n </table>\n </div>\n `\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('component')) {\n this.detailInfo = null\n\n if ('detailInfo' in this.component) {\n try {\n this.loading = true\n this.detailInfo = await this.component.detailInfo()\n } catch (e) {\n console.error('failed to get detail information')\n } finally {\n this.loading = false\n }\n }\n }\n\n if (changes.has('collapsed')) {\n sessionStorage.setItem('ox-board-component-info-collapsed', this.collapsed ? 'true' : 'false')\n }\n }\n\n onWheel(e: WheelEvent) {\n const scrollableDiv = e.currentTarget! as HTMLElement\n const contentDiv = scrollableDiv.querySelector('table')!\n\n // 컨텐츠의 높이와 div의 높이를 비교하여 수평 스크롤을 동작시키거나 수직 스크롤을 동작시킴\n if (contentDiv.offsetHeight > scrollableDiv.offsetHeight) {\n // 수직 스크롤 가능한 경우\n scrollableDiv.scrollTop += e.deltaY\n } else {\n // 수직 스크롤이 없는 경우\n scrollableDiv.scrollLeft += e.deltaY\n }\n }\n\n onDragStart(e: MouseEvent) {\n e.stopPropagation()\n\n if (e.button == 0) {\n this.dragStart = {\n x: e.clientX,\n y: e.clientY\n }\n }\n\n return false\n }\n\n onDragMove(e: Event) {\n if (!this.dragStart) {\n return false\n }\n\n e.stopPropagation()\n e.preventDefault()\n\n var x = (e as MouseEvent).clientX,\n y = (e as MouseEvent).clientY\n\n const dragStart = { x, y }\n\n x -= this.dragStart.x\n y -= this.dragStart.y\n\n this.dragStart = dragStart\n\n this.style.left =\n Math.min(this.parentElement!.offsetWidth - this.offsetWidth, Math.max(0, this.offsetLeft + x)) + 'px'\n this.style.top =\n Math.min(this.parentElement!.offsetHeight - this.offsetHeight, Math.max(0, this.offsetTop + y)) + 'px'\n\n return false\n }\n\n onDragEnd(e: Event) {\n if (this.dragStart) {\n e.stopPropagation()\n e.preventDefault()\n\n delete this.dragStart\n }\n }\n}\n"]}