@operato/process 7.0.0-rc.1 → 7.0.0-rc.11
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/CHANGELOG.md +83 -0
- package/dist/src/modeller/property-sidebar/property-sidebar.js +1 -1
- package/dist/src/modeller/property-sidebar/property-sidebar.js.map +1 -1
- package/dist/src/ox-process-list.js +3 -3
- package/dist/src/ox-process-list.js.map +1 -1
- package/dist/src/ox-process-template-list.js +2 -3
- package/dist/src/ox-process-template-list.js.map +1 -1
- package/dist/src/selector/ox-process-selector.js +1 -0
- package/dist/src/selector/ox-process-selector.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +13 -13
- package/src/modeller/property-sidebar/property-sidebar.ts +1 -1
- package/src/ox-process-list.ts +3 -3
- package/src/ox-process-template-list.ts +2 -3
- package/src/selector/ox-process-selector.ts +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,89 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [7.0.0-rc.11](https://github.com/heartyoh/ioperato/compare/v7.0.0-rc.10...v7.0.0-rc.11) (2024-06-29)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* material design token ([bf70a97](https://github.com/heartyoh/ioperato/commit/bf70a9783aacfd6f58e945515d25120ace1ad1f3))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [7.0.0-rc.10](https://github.com/heartyoh/ioperato/compare/v7.0.0-rc.9...v7.0.0-rc.10) (2024-06-29)
|
|
16
|
+
|
|
17
|
+
**Note:** Version bump only for package @operato/process
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
## [7.0.0-rc.9](https://github.com/heartyoh/ioperato/compare/v7.0.0-rc.8...v7.0.0-rc.9) (2024-06-29)
|
|
24
|
+
|
|
25
|
+
**Note:** Version bump only for package @operato/process
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
## [7.0.0-rc.8](https://github.com/heartyoh/ioperato/compare/v7.0.0-rc.7...v7.0.0-rc.8) (2024-06-28)
|
|
32
|
+
|
|
33
|
+
**Note:** Version bump only for package @operato/process
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
## [7.0.0-rc.7](https://github.com/heartyoh/ioperato/compare/v7.0.0-rc.6...v7.0.0-rc.7) (2024-06-28)
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
### :bug: Bug Fix
|
|
43
|
+
|
|
44
|
+
* tooltip 이 부모의 transform을 반영하지 못하는 문제 ([992d295](https://github.com/heartyoh/ioperato/commit/992d2950a5407a94254b910b4b2d0d6b83d5df59))
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
## [7.0.0-rc.6](https://github.com/heartyoh/ioperato/compare/v7.0.0-rc.5...v7.0.0-rc.6) (2024-06-27)
|
|
49
|
+
|
|
50
|
+
**Note:** Version bump only for package @operato/process
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
## [7.0.0-rc.5](https://github.com/heartyoh/ioperato/compare/v7.0.0-rc.4...v7.0.0-rc.5) (2024-06-24)
|
|
57
|
+
|
|
58
|
+
**Note:** Version bump only for package @operato/process
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
## [7.0.0-rc.4](https://github.com/heartyoh/ioperato/compare/v7.0.0-rc.3...v7.0.0-rc.4) (2024-06-23)
|
|
65
|
+
|
|
66
|
+
**Note:** Version bump only for package @operato/process
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
## [7.0.0-rc.3](https://github.com/heartyoh/ioperato/compare/v7.0.0-rc.2...v7.0.0-rc.3) (2024-06-22)
|
|
73
|
+
|
|
74
|
+
**Note:** Version bump only for package @operato/process
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
## [7.0.0-rc.2](https://github.com/heartyoh/ioperato/compare/v7.0.0-rc.1...v7.0.0-rc.2) (2024-06-22)
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
### :bug: Bug Fix
|
|
84
|
+
|
|
85
|
+
* styles using material-design token ([e6cbe59](https://github.com/heartyoh/ioperato/commit/e6cbe5941fec36048c4da1882bcc98067b0ec5ac))
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
6
89
|
## [7.0.0-rc.1](https://github.com/heartyoh/ioperato/compare/v7.0.0-rc.0...v7.0.0-rc.1) (2024-06-21)
|
|
7
90
|
|
|
8
91
|
**Note:** Version bump only for package @operato/process
|
|
@@ -268,7 +268,7 @@ PropertySidebar.styles = [
|
|
|
268
268
|
background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));
|
|
269
269
|
user-select: none;
|
|
270
270
|
|
|
271
|
-
--input-padding: var(--
|
|
271
|
+
--input-padding: var(--spacing-small);
|
|
272
272
|
--label-font: var(--property-sidebar-fieldset-label);
|
|
273
273
|
}
|
|
274
274
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"property-sidebar.js","sourceRoot":"","sources":["../../../../src/modeller/property-sidebar/property-sidebar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport deepClone from 'lodash-es/cloneDeep'\n\nimport { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { PropertyDataBinding } from './data-binding/data-binding.js'\nimport { PropertyEffects } from './effects/effects.js'\nimport { PropertyShapes } from './shapes/shapes.js'\nimport { PropertySpecific } from './specifics/specifics.js'\nimport { PropertyStyles } from './styles/styles.js'\nimport { SceneInspector } from './inspector/inspector'\n\nexport class PropertySidebar extends ScopedElementsMixin(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n border-left: 1px solid var(--paper-blue-grey-100);\n width: 270px;\n display: flex;\n flex-direction: column;\n background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));\n user-select: none;\n\n --input-padding: var(--padding-narrow);\n --label-font: var(--property-sidebar-fieldset-label);\n }\n\n [tab] {\n display: flex;\n background-color: rgba(0, 0, 0, 0.08);\n opacity: 0.85;\n }\n\n [tab] md-icon {\n flex: 1;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: var(--property-sidebar-tab-icon-color);\n height: 40px;\n }\n\n [tab] [selected] {\n background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));\n border-left: 1px solid rgba(255, 255, 255, 0.5);\n border-right: 1px solid rgba(0, 0, 0, 0.15);\n opacity: 1;\n }\n\n [content] {\n flex: 1;\n\n overflow: hidden;\n overflow-y: auto;\n }\n\n [content] > :not([active]) {\n display: none;\n }\n\n [hidden] {\n display: none !important;\n }\n `\n ]\n\n @property({ type: Object }) scene: Scene | null = null\n @property({ type: Object }) bounds: any = {}\n @property({ type: Object }) model: Model | null = {}\n @property({ type: Array }) selected: Component[] = []\n @property({ type: Array }) specificProps: any\n @property({ type: String }) tabName: string | null = 'specific'\n @property({ type: Boolean }) collapsed: boolean = false\n @property({ type: Array }) fonts: any[] = []\n @property({ type: Array }) propertyEditor: any[] = []\n\n @property({ type: Boolean, attribute: 'hide-data-binding' }) hideDataBinding: boolean = false\n @property({ type: Boolean, attribute: 'hide-effect' }) hideEffect: boolean = false\n @property({ type: Boolean, attribute: 'hide-inspector' }) hideInspector: boolean = false\n @property({ type: Boolean, attribute: 'hide-shape' }) hideShape: boolean = false\n @property({ type: Boolean, attribute: 'hide-style' }) hideStyle: boolean = false\n @property({ type: Boolean, attribute: 'hide-specific' }) hideSpecific: boolean = false\n\n propertyTarget: Component | null = null\n\n firstUpdated() {\n this.renderRoot.addEventListener('property-change', this._onPropertyChanged.bind(this) as EventListener)\n this.renderRoot.addEventListener('bounds-change', this._onBoundsChanged.bind(this) as EventListener)\n }\n\n updated(change: PropertyValues<this>) {\n change.has('scene') && this._onSceneChanged()\n change.has('selected') && this._onSelectedChanged(this.selected)\n change.has('collapsed') && this._onCollapsed(this.collapsed)\n }\n\n static get scopedElements() {\n return {\n 'process-property-shape': PropertyShapes,\n 'process-property-style': PropertyStyles,\n 'process-property-effect': PropertyEffects,\n 'process-property-specific': PropertySpecific,\n 'process-property-data-binding': PropertyDataBinding,\n 'process-scene-inspector': SceneInspector\n }\n }\n\n render() {\n var tabName = this.tabName ? this.tabName : 'specific'\n\n return html`\n <div\n tab\n @click=${(e: MouseEvent) => {\n this.tabName = (e.target as HTMLElement).getAttribute('name')\n }}\n >\n <md-icon name=\"specific\" ?selected=${tabName == 'specific'} ?hidden=${this.hideSpecific}>tune</md-icon>\n <md-icon name=\"shape\" ?selected=${tabName == 'shape'} ?hidden=${this.hideShape}>format_shapes</md-icon>\n <md-icon name=\"style\" ?selected=${tabName == 'style'} ?hidden=${this.hideStyle}>palette</md-icon>\n <md-icon name=\"effect\" ?selected=${tabName == 'effect'} ?hidden=${this.hideEffect}>movie_filter</md-icon>\n <md-icon name=\"data-binding\" ?selected=${tabName == 'data-binding'} ?hidden=${this.hideDataBinding}\n >share</md-icon\n >\n <md-icon name=\"inspector\" ?selected=${tabName == 'inspector'} ?hidden=${this.hideInspector}>visibility</md-icon>\n </div>\n\n <div content>\n ${html`\n ${{\n specific: html`\n <process-property-specific\n .value=${this.model}\n .scene=${this.scene}\n .selected=${this.selected}\n .props=${this.specificProps}\n .propertyEditor=${this.propertyEditor}\n ?active=${tabName == 'specific'}\n >\n </process-property-specific>\n `,\n shape: html`\n <process-property-shape\n .value=${this.model}\n .bounds=${this.bounds}\n .selected=${this.selected}\n ?active=${tabName == 'shape'}\n >\n </process-property-shape>\n `,\n style: html`\n <process-property-style\n .value=${this.model}\n .selected=${this.selected}\n .fonts=${this.fonts}\n ?active=${tabName == 'style'}\n >\n </process-property-style>\n `,\n effect: html`\n <process-property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>\n </process-property-effect>\n `,\n 'data-binding': html`\n <process-property-data-binding\n .scene=${this.scene}\n .value=${this.model}\n ?active=${tabName == 'data-binding'}\n >\n </process-property-data-binding>\n `,\n inspector: html`\n <process-scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></process-scene-inspector>\n `\n }[this.tabName!]}\n `}\n </div>\n `\n }\n\n _onPropertyChanged(e: CustomEvent) {\n var detail = e.detail\n\n if (this.propertyTarget) {\n /* 단일 컴포넌트의 경우에 적용 */\n this.scene && this.scene.undoableChange(() => this.propertyTarget!.set(detail))\n } else {\n /* 여러 컴포넌트의 경우에 적용 */\n this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)))\n }\n }\n\n _onBoundsChanged(e: CustomEvent) {\n var detail = e.detail\n\n if (!this.scene) {\n return\n }\n\n if (this.propertyTarget) {\n /* 단일 컴포넌트의 경우에 적용 */\n this.scene.undoableChange(() => {\n this.propertyTarget!.bounds = {\n ...this.propertyTarget!.bounds,\n ...detail\n }\n })\n } else {\n /* 여러 컴포넌트의 경우에 적용 */\n this.scene.undoableChange(() => {\n this.selected.forEach(component => {\n component.bounds = {\n ...component.bounds,\n ...detail\n }\n })\n })\n }\n }\n\n _onChangedByScene() {\n if (this.propertyTarget) {\n this.model = {\n ...this.propertyTarget.model\n }\n this._setBounds(this.propertyTarget.bounds)\n }\n }\n\n _setPropertyTargetAsDefault() {\n if (!this.scene) {\n this._setPropertyTarget(null)\n this.specificProps = []\n this.model = null\n this.bounds = {}\n } else {\n this.scene.select('model-layer')\n }\n }\n\n _onCollapsed(collapsed: boolean) {\n !collapsed && (this.style.display = '')\n\n this.animate(\n collapsed\n ? [\n { transform: 'translateX(0)', opacity: 1, easing: 'ease-in' },\n { transform: 'translateX(100%)', opacity: 1 }\n ]\n : [\n { transform: 'translateX(100%)', opacity: 1 },\n { transform: 'translateX(0)', opacity: 1, easing: 'ease-out' }\n ],\n {\n duration: 500\n }\n ).onfinish = () => {\n collapsed && (this.style.display = 'none')\n dispatchEvent(new Event('resize'))\n }\n }\n\n async _onSceneChanged() {\n await this.updateComplete\n\n if (this.scene) this.selected = this.scene.select('model-layer')\n }\n\n async _onSelectedChanged(after: Component[]) {\n await this.updateComplete\n\n if (after.length == 1) {\n this._setPropertyTarget(after[0])\n // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.\n // 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.\n this.specificProps = deepClone(this.propertyTarget!.nature.properties)\n this.model = {\n ...this.propertyTarget!.model\n }\n this._setBounds(this.propertyTarget!.bounds)\n } else if (after.length == 0) {\n // 선택이 안된 경우\n\n this._setPropertyTargetAsDefault()\n } else {\n // 다중 선택된 경우\n\n var type = after[0].model.type\n for (let i = 1; i < after.length; i++) {\n if (after[i].model.type != type) {\n type = undefined\n break\n }\n }\n\n this._setPropertyTarget(null)\n\n if (type) this.specificProps = deepClone(after[0].nature.properties)\n else this.specificProps = null\n\n this.model = {\n type: type,\n alpha: 1\n }\n this.bounds = {}\n }\n }\n\n _setPropertyTarget(newTarget: Component | null) {\n var oldTarget = this.propertyTarget\n\n if (oldTarget) {\n oldTarget.off('change', this._onChangedByScene, this)\n }\n if (newTarget) {\n newTarget.on('change', this._onChangedByScene, this)\n }\n\n this.propertyTarget = newTarget\n }\n\n _setBounds(bounds: BOUNDS) {\n this.bounds = {\n left: bounds.left,\n top: bounds.top,\n width: Math.round(bounds.width),\n height: Math.round(bounds.height)\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"property-sidebar.js","sourceRoot":"","sources":["../../../../src/modeller/property-sidebar/property-sidebar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport deepClone from 'lodash-es/cloneDeep'\n\nimport { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { PropertyDataBinding } from './data-binding/data-binding.js'\nimport { PropertyEffects } from './effects/effects.js'\nimport { PropertyShapes } from './shapes/shapes.js'\nimport { PropertySpecific } from './specifics/specifics.js'\nimport { PropertyStyles } from './styles/styles.js'\nimport { SceneInspector } from './inspector/inspector'\n\nexport class PropertySidebar extends ScopedElementsMixin(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n border-left: 1px solid var(--paper-blue-grey-100);\n width: 270px;\n display: flex;\n flex-direction: column;\n background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));\n user-select: none;\n\n --input-padding: var(--spacing-small);\n --label-font: var(--property-sidebar-fieldset-label);\n }\n\n [tab] {\n display: flex;\n background-color: rgba(0, 0, 0, 0.08);\n opacity: 0.85;\n }\n\n [tab] md-icon {\n flex: 1;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: var(--property-sidebar-tab-icon-color);\n height: 40px;\n }\n\n [tab] [selected] {\n background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));\n border-left: 1px solid rgba(255, 255, 255, 0.5);\n border-right: 1px solid rgba(0, 0, 0, 0.15);\n opacity: 1;\n }\n\n [content] {\n flex: 1;\n\n overflow: hidden;\n overflow-y: auto;\n }\n\n [content] > :not([active]) {\n display: none;\n }\n\n [hidden] {\n display: none !important;\n }\n `\n ]\n\n @property({ type: Object }) scene: Scene | null = null\n @property({ type: Object }) bounds: any = {}\n @property({ type: Object }) model: Model | null = {}\n @property({ type: Array }) selected: Component[] = []\n @property({ type: Array }) specificProps: any\n @property({ type: String }) tabName: string | null = 'specific'\n @property({ type: Boolean }) collapsed: boolean = false\n @property({ type: Array }) fonts: any[] = []\n @property({ type: Array }) propertyEditor: any[] = []\n\n @property({ type: Boolean, attribute: 'hide-data-binding' }) hideDataBinding: boolean = false\n @property({ type: Boolean, attribute: 'hide-effect' }) hideEffect: boolean = false\n @property({ type: Boolean, attribute: 'hide-inspector' }) hideInspector: boolean = false\n @property({ type: Boolean, attribute: 'hide-shape' }) hideShape: boolean = false\n @property({ type: Boolean, attribute: 'hide-style' }) hideStyle: boolean = false\n @property({ type: Boolean, attribute: 'hide-specific' }) hideSpecific: boolean = false\n\n propertyTarget: Component | null = null\n\n firstUpdated() {\n this.renderRoot.addEventListener('property-change', this._onPropertyChanged.bind(this) as EventListener)\n this.renderRoot.addEventListener('bounds-change', this._onBoundsChanged.bind(this) as EventListener)\n }\n\n updated(change: PropertyValues<this>) {\n change.has('scene') && this._onSceneChanged()\n change.has('selected') && this._onSelectedChanged(this.selected)\n change.has('collapsed') && this._onCollapsed(this.collapsed)\n }\n\n static get scopedElements() {\n return {\n 'process-property-shape': PropertyShapes,\n 'process-property-style': PropertyStyles,\n 'process-property-effect': PropertyEffects,\n 'process-property-specific': PropertySpecific,\n 'process-property-data-binding': PropertyDataBinding,\n 'process-scene-inspector': SceneInspector\n }\n }\n\n render() {\n var tabName = this.tabName ? this.tabName : 'specific'\n\n return html`\n <div\n tab\n @click=${(e: MouseEvent) => {\n this.tabName = (e.target as HTMLElement).getAttribute('name')\n }}\n >\n <md-icon name=\"specific\" ?selected=${tabName == 'specific'} ?hidden=${this.hideSpecific}>tune</md-icon>\n <md-icon name=\"shape\" ?selected=${tabName == 'shape'} ?hidden=${this.hideShape}>format_shapes</md-icon>\n <md-icon name=\"style\" ?selected=${tabName == 'style'} ?hidden=${this.hideStyle}>palette</md-icon>\n <md-icon name=\"effect\" ?selected=${tabName == 'effect'} ?hidden=${this.hideEffect}>movie_filter</md-icon>\n <md-icon name=\"data-binding\" ?selected=${tabName == 'data-binding'} ?hidden=${this.hideDataBinding}\n >share</md-icon\n >\n <md-icon name=\"inspector\" ?selected=${tabName == 'inspector'} ?hidden=${this.hideInspector}>visibility</md-icon>\n </div>\n\n <div content>\n ${html`\n ${{\n specific: html`\n <process-property-specific\n .value=${this.model}\n .scene=${this.scene}\n .selected=${this.selected}\n .props=${this.specificProps}\n .propertyEditor=${this.propertyEditor}\n ?active=${tabName == 'specific'}\n >\n </process-property-specific>\n `,\n shape: html`\n <process-property-shape\n .value=${this.model}\n .bounds=${this.bounds}\n .selected=${this.selected}\n ?active=${tabName == 'shape'}\n >\n </process-property-shape>\n `,\n style: html`\n <process-property-style\n .value=${this.model}\n .selected=${this.selected}\n .fonts=${this.fonts}\n ?active=${tabName == 'style'}\n >\n </process-property-style>\n `,\n effect: html`\n <process-property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>\n </process-property-effect>\n `,\n 'data-binding': html`\n <process-property-data-binding\n .scene=${this.scene}\n .value=${this.model}\n ?active=${tabName == 'data-binding'}\n >\n </process-property-data-binding>\n `,\n inspector: html`\n <process-scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></process-scene-inspector>\n `\n }[this.tabName!]}\n `}\n </div>\n `\n }\n\n _onPropertyChanged(e: CustomEvent) {\n var detail = e.detail\n\n if (this.propertyTarget) {\n /* 단일 컴포넌트의 경우에 적용 */\n this.scene && this.scene.undoableChange(() => this.propertyTarget!.set(detail))\n } else {\n /* 여러 컴포넌트의 경우에 적용 */\n this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)))\n }\n }\n\n _onBoundsChanged(e: CustomEvent) {\n var detail = e.detail\n\n if (!this.scene) {\n return\n }\n\n if (this.propertyTarget) {\n /* 단일 컴포넌트의 경우에 적용 */\n this.scene.undoableChange(() => {\n this.propertyTarget!.bounds = {\n ...this.propertyTarget!.bounds,\n ...detail\n }\n })\n } else {\n /* 여러 컴포넌트의 경우에 적용 */\n this.scene.undoableChange(() => {\n this.selected.forEach(component => {\n component.bounds = {\n ...component.bounds,\n ...detail\n }\n })\n })\n }\n }\n\n _onChangedByScene() {\n if (this.propertyTarget) {\n this.model = {\n ...this.propertyTarget.model\n }\n this._setBounds(this.propertyTarget.bounds)\n }\n }\n\n _setPropertyTargetAsDefault() {\n if (!this.scene) {\n this._setPropertyTarget(null)\n this.specificProps = []\n this.model = null\n this.bounds = {}\n } else {\n this.scene.select('model-layer')\n }\n }\n\n _onCollapsed(collapsed: boolean) {\n !collapsed && (this.style.display = '')\n\n this.animate(\n collapsed\n ? [\n { transform: 'translateX(0)', opacity: 1, easing: 'ease-in' },\n { transform: 'translateX(100%)', opacity: 1 }\n ]\n : [\n { transform: 'translateX(100%)', opacity: 1 },\n { transform: 'translateX(0)', opacity: 1, easing: 'ease-out' }\n ],\n {\n duration: 500\n }\n ).onfinish = () => {\n collapsed && (this.style.display = 'none')\n dispatchEvent(new Event('resize'))\n }\n }\n\n async _onSceneChanged() {\n await this.updateComplete\n\n if (this.scene) this.selected = this.scene.select('model-layer')\n }\n\n async _onSelectedChanged(after: Component[]) {\n await this.updateComplete\n\n if (after.length == 1) {\n this._setPropertyTarget(after[0])\n // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.\n // 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.\n this.specificProps = deepClone(this.propertyTarget!.nature.properties)\n this.model = {\n ...this.propertyTarget!.model\n }\n this._setBounds(this.propertyTarget!.bounds)\n } else if (after.length == 0) {\n // 선택이 안된 경우\n\n this._setPropertyTargetAsDefault()\n } else {\n // 다중 선택된 경우\n\n var type = after[0].model.type\n for (let i = 1; i < after.length; i++) {\n if (after[i].model.type != type) {\n type = undefined\n break\n }\n }\n\n this._setPropertyTarget(null)\n\n if (type) this.specificProps = deepClone(after[0].nature.properties)\n else this.specificProps = null\n\n this.model = {\n type: type,\n alpha: 1\n }\n this.bounds = {}\n }\n }\n\n _setPropertyTarget(newTarget: Component | null) {\n var oldTarget = this.propertyTarget\n\n if (oldTarget) {\n oldTarget.off('change', this._onChangedByScene, this)\n }\n if (newTarget) {\n newTarget.on('change', this._onChangedByScene, this)\n }\n\n this.propertyTarget = newTarget\n }\n\n _setBounds(bounds: BOUNDS) {\n this.bounds = {\n left: bounds.left,\n top: bounds.top,\n width: Math.round(bounds.width),\n height: Math.round(bounds.height)\n }\n }\n}\n"]}
|
|
@@ -271,7 +271,7 @@ ProcessList.styles = css `
|
|
|
271
271
|
display: flex;
|
|
272
272
|
flex-direction: row;
|
|
273
273
|
align-items: center;
|
|
274
|
-
padding: var(--padding-default) var(--
|
|
274
|
+
padding: var(--padding-default) var(--spacing-large);
|
|
275
275
|
border-top: 2px solid rgba(0, 0, 0, 0.2);
|
|
276
276
|
background-color: var(--md-sys-color-surface);
|
|
277
277
|
box-shadow: var(--box-shadow);
|
|
@@ -290,7 +290,7 @@ ProcessList.styles = css `
|
|
|
290
290
|
}
|
|
291
291
|
|
|
292
292
|
#modes > * {
|
|
293
|
-
padding: var(--
|
|
293
|
+
padding: var(--spacing-small);
|
|
294
294
|
font-size: 1em;
|
|
295
295
|
opacity: 0.5;
|
|
296
296
|
color: var(--md-sys-color-on-primary-container);
|
|
@@ -341,7 +341,7 @@ ProcessList.styles = css `
|
|
|
341
341
|
background-color: transparent;
|
|
342
342
|
border: 0;
|
|
343
343
|
border-bottom: var(--border-dim-color);
|
|
344
|
-
padding: var(--
|
|
344
|
+
padding: var(--spacing-small) var(--spacing-small) 7px 25px;
|
|
345
345
|
font-size: var(--fontsize-large);
|
|
346
346
|
}
|
|
347
347
|
#filters [type='text']:focus {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-process-list.js","sourceRoot":"","sources":["../../src/ox-process-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup/ox-popup.js'\nimport '@operato/data-grist'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { ColumnConfig, DataGrist, FetchOption, GristData, GristRecord, SortersConfig } from '@operato/data-grist'\nimport { OxPopup } from '@operato/popup'\n\nimport { createProcess, fetchProcessList } from './graphql/process'\nimport { fetchFavoriteProcessList } from './graphql/favorite-process'\nimport { fetchProcessGroupList } from './graphql/process-group'\nimport { Process } from './types'\n\n@customElement('ox-process-list')\nclass ProcessList extends LitElement {\n static styles = css`\n :host {\n display: flex;\n\n width: 100%;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n ox-grist {\n flex: 1;\n overflow-y: auto;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n #headroom {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n border-top: 2px solid rgba(0, 0, 0, 0.2);\n background-color: var(--md-sys-color-surface);\n box-shadow: var(--box-shadow);\n }\n\n #filters {\n flex: 1;\n --md-icon-size: 20px;\n }\n #mode {\n width: 100px;\n }\n #add {\n width: 50px;\n text-align: right;\n }\n\n #modes > * {\n padding: var(--padding-narrow);\n font-size: 1em;\n opacity: 0.5;\n color: var(--md-sys-color-on-primary-container);\n cursor: pointer;\n }\n\n #modes > md-icon[active] {\n border-radius: 9px;\n background-color: rgba(var(--primary-color-rgb), 0.05);\n opacity: 1;\n color: var(--md-sys-color-on-secondary-container);\n cursor: default;\n }\n #modes > md-icon:hover {\n opacity: 1;\n color: var(--md-sys-color-on-secondary-container);\n }\n\n #add button {\n display: flex;\n align-items: center;\n justify-content: center;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n border: 0;\n border-radius: 50%;\n padding: 5px;\n width: 32px;\n height: 32px;\n cursor: pointer;\n }\n\n #add button:hover {\n background-color: var(--md-sys-color-on-primary-container);\n color: var(--md-sys-color-primary-container);\n box-shadow: var(--box-shadow);\n }\n\n #add button md-icon {\n font-size: 1.5em;\n }\n\n #filters {\n position: relative;\n }\n #filters [type='text'] {\n background-color: transparent;\n border: 0;\n border-bottom: var(--border-dim-color);\n padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;\n font-size: var(--fontsize-large);\n }\n #filters [type='text']:focus {\n outline: none;\n }\n #filters md-icon {\n position: absolute;\n top: 3px;\n color: var(--md-sys-color-on-secondary-container);\n }\n #filters * {\n margin-right: var(--spacing-medium);\n }\n\n @media only screen and (max-width: 460px) {\n #modes {\n display: none;\n }\n }\n `\n\n @property({ type: Boolean }) creatable: boolean = false\n @property({ type: Object }) config: any\n @property({ type: Object }) data: any\n @property({ type: String }) mode: 'GRID' | 'LIST' | 'CARD' = 'CARD'\n @property({ type: String }) groupId?: string\n @property({ type: Array }) groups: any[] = []\n @property({ type: Array }) favorites: any[] = []\n\n @query('ox-grist') grist!: DataGrist\n\n render() {\n const mode = this.mode || 'CARD'\n\n return html`\n <ox-grist .config=${this.config} .mode=${mode} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n <div slot=\"headroom\" id=\"headroom\">\n <div id=\"filters\">\n <md-icon>search</md-icon>\n <input type=\"text\" />\n\n <select\n @change=${(e: Event) => {\n this.groupId = (e.currentTarget as HTMLInputElement).value\n this.requestUpdate()\n }}\n >\n <option value=\"\">*</option>\n ${this.groups.map(\n group => html`\n <option value=${group.id} ?selected=${group.id === this.groupId}>${group.description}</option>\n `\n )}\n </select>\n </div>\n\n <div id=\"modes\">\n <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>\n <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>\n <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>\n </div>\n\n ${this.creatable\n ? html`\n <div id=\"add\">\n <button><md-icon @click=${() => this.onCreateProcess()}>add</md-icon></button>\n </div>\n `\n : undefined}\n </div>\n </ox-grist>\n `\n }\n\n async fetchHandler({ page, limit, sorters = [] }: FetchOption) {\n const { items: records, total } = await this.getProcesses({ page, limit, sorters })\n\n return {\n total,\n records\n }\n }\n\n get gristConfig() {\n return {\n list: {\n thumbnail: function (record: GristRecord, rowIndex: number) {\n return html` <img src=${record.thumbnail} style=\"width: 100%; height: 100%;\" /> `\n },\n fields: ['name', 'description'],\n details: ['updatedAt']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'dirty'\n },\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'string',\n name: 'name',\n header: 'name',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200,\n sortable: true\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200\n },\n {\n type: 'boolean',\n name: 'active',\n header: 'active',\n record: {\n editable: true\n },\n sortable: true,\n width: 60\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n record: {\n editable: true\n },\n sortable: true,\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n record: {\n editable: true\n },\n sortable: true,\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: true\n }\n },\n sorters: [\n {\n name: 'name',\n desc: false\n }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200]\n }\n }\n }\n\n async refresh() {\n this.groups = (await fetchProcessGroupList()).processGroups.items\n\n if (this.groups) {\n await this.refreshProcesses()\n }\n }\n\n async getProcesses({\n page = 1,\n limit = 30,\n sorters = []\n }: { page?: number; limit?: number; sorters?: SortersConfig } = {}) {\n if (this.groupId && this.groupId == 'favor')\n return await this.getFavoriteProcesses({\n page,\n limit\n })\n\n var listParam = {\n filters: this.groupId\n ? [\n {\n name: 'groupId',\n operator: 'eq',\n value: this.groupId\n }\n ]\n : [],\n sortings: sorters,\n pagination: {\n page,\n limit\n }\n }\n\n return (await fetchProcessList(listParam)).processes\n }\n\n async getFavoriteProcesses({ page = 1, limit = 30 } = {}) {\n var listParam = {\n pagination: {\n page,\n limit\n }\n }\n\n return (await fetchFavoriteProcessList(listParam)).favoriteProcesses\n }\n\n async refreshProcesses() {\n if (!this.groups) {\n await this.refresh()\n return\n }\n\n this.grist.fetch()\n }\n\n async onCreateProcess() {\n /*\n * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n * 주의. value는 object일 수도 있고, string일 수도 있다.\n * string인 경우에는 해당 보드의 id로 해석한다.\n */\n var template = html`\n <process-creation-popup\n .defaultGroup=${this.groupId}\n .groups=${this.groups}\n @create-process=${async (e: CustomEvent) => {\n try {\n var { name, description, groupId, model, thumbnail } = e.detail\n\n var process: Process = {\n name,\n description,\n groupId,\n model: model || {\n width: 1600,\n height: 1200\n },\n thumbnail\n }\n\n await createProcess(process)\n\n this.notify('info', 'new process created')\n } catch (ex: Error | any) {\n console.error(ex)\n this.notify('error', ex, ex)\n }\n }}\n ></process-creation-popup>\n `\n\n OxPopup.open({\n template,\n parent: this.renderRoot as Element\n })\n\n requestAnimationFrame(() => {\n dispatchEvent(new Event('resize'))\n })\n }\n\n notify(level: 'warn' | 'error' | 'info', message: any, ex?: Error) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level,\n message,\n ex\n }\n })\n )\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-process-list.js","sourceRoot":"","sources":["../../src/ox-process-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup/ox-popup.js'\nimport '@operato/data-grist'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { ColumnConfig, DataGrist, FetchOption, GristData, GristRecord, SortersConfig } from '@operato/data-grist'\nimport { OxPopup } from '@operato/popup'\n\nimport { createProcess, fetchProcessList } from './graphql/process'\nimport { fetchFavoriteProcessList } from './graphql/favorite-process'\nimport { fetchProcessGroupList } from './graphql/process-group'\nimport { Process } from './types'\n\n@customElement('ox-process-list')\nclass ProcessList extends LitElement {\n static styles = css`\n :host {\n display: flex;\n\n width: 100%;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n ox-grist {\n flex: 1;\n overflow-y: auto;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n #headroom {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--spacing-large);\n border-top: 2px solid rgba(0, 0, 0, 0.2);\n background-color: var(--md-sys-color-surface);\n box-shadow: var(--box-shadow);\n }\n\n #filters {\n flex: 1;\n --md-icon-size: 20px;\n }\n #mode {\n width: 100px;\n }\n #add {\n width: 50px;\n text-align: right;\n }\n\n #modes > * {\n padding: var(--spacing-small);\n font-size: 1em;\n opacity: 0.5;\n color: var(--md-sys-color-on-primary-container);\n cursor: pointer;\n }\n\n #modes > md-icon[active] {\n border-radius: 9px;\n background-color: rgba(var(--primary-color-rgb), 0.05);\n opacity: 1;\n color: var(--md-sys-color-on-secondary-container);\n cursor: default;\n }\n #modes > md-icon:hover {\n opacity: 1;\n color: var(--md-sys-color-on-secondary-container);\n }\n\n #add button {\n display: flex;\n align-items: center;\n justify-content: center;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n border: 0;\n border-radius: 50%;\n padding: 5px;\n width: 32px;\n height: 32px;\n cursor: pointer;\n }\n\n #add button:hover {\n background-color: var(--md-sys-color-on-primary-container);\n color: var(--md-sys-color-primary-container);\n box-shadow: var(--box-shadow);\n }\n\n #add button md-icon {\n font-size: 1.5em;\n }\n\n #filters {\n position: relative;\n }\n #filters [type='text'] {\n background-color: transparent;\n border: 0;\n border-bottom: var(--border-dim-color);\n padding: var(--spacing-small) var(--spacing-small) 7px 25px;\n font-size: var(--fontsize-large);\n }\n #filters [type='text']:focus {\n outline: none;\n }\n #filters md-icon {\n position: absolute;\n top: 3px;\n color: var(--md-sys-color-on-secondary-container);\n }\n #filters * {\n margin-right: var(--spacing-medium);\n }\n\n @media only screen and (max-width: 460px) {\n #modes {\n display: none;\n }\n }\n `\n\n @property({ type: Boolean }) creatable: boolean = false\n @property({ type: Object }) config: any\n @property({ type: Object }) data: any\n @property({ type: String }) mode: 'GRID' | 'LIST' | 'CARD' = 'CARD'\n @property({ type: String }) groupId?: string\n @property({ type: Array }) groups: any[] = []\n @property({ type: Array }) favorites: any[] = []\n\n @query('ox-grist') grist!: DataGrist\n\n render() {\n const mode = this.mode || 'CARD'\n\n return html`\n <ox-grist .config=${this.config} .mode=${mode} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n <div slot=\"headroom\" id=\"headroom\">\n <div id=\"filters\">\n <md-icon>search</md-icon>\n <input type=\"text\" />\n\n <select\n @change=${(e: Event) => {\n this.groupId = (e.currentTarget as HTMLInputElement).value\n this.requestUpdate()\n }}\n >\n <option value=\"\">*</option>\n ${this.groups.map(\n group => html`\n <option value=${group.id} ?selected=${group.id === this.groupId}>${group.description}</option>\n `\n )}\n </select>\n </div>\n\n <div id=\"modes\">\n <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>\n <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>\n <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>\n </div>\n\n ${this.creatable\n ? html`\n <div id=\"add\">\n <button><md-icon @click=${() => this.onCreateProcess()}>add</md-icon></button>\n </div>\n `\n : undefined}\n </div>\n </ox-grist>\n `\n }\n\n async fetchHandler({ page, limit, sorters = [] }: FetchOption) {\n const { items: records, total } = await this.getProcesses({ page, limit, sorters })\n\n return {\n total,\n records\n }\n }\n\n get gristConfig() {\n return {\n list: {\n thumbnail: function (record: GristRecord, rowIndex: number) {\n return html` <img src=${record.thumbnail} style=\"width: 100%; height: 100%;\" /> `\n },\n fields: ['name', 'description'],\n details: ['updatedAt']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'dirty'\n },\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'string',\n name: 'name',\n header: 'name',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200,\n sortable: true\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200\n },\n {\n type: 'boolean',\n name: 'active',\n header: 'active',\n record: {\n editable: true\n },\n sortable: true,\n width: 60\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n record: {\n editable: true\n },\n sortable: true,\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n record: {\n editable: true\n },\n sortable: true,\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: true\n }\n },\n sorters: [\n {\n name: 'name',\n desc: false\n }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200]\n }\n }\n }\n\n async refresh() {\n this.groups = (await fetchProcessGroupList()).processGroups.items\n\n if (this.groups) {\n await this.refreshProcesses()\n }\n }\n\n async getProcesses({\n page = 1,\n limit = 30,\n sorters = []\n }: { page?: number; limit?: number; sorters?: SortersConfig } = {}) {\n if (this.groupId && this.groupId == 'favor')\n return await this.getFavoriteProcesses({\n page,\n limit\n })\n\n var listParam = {\n filters: this.groupId\n ? [\n {\n name: 'groupId',\n operator: 'eq',\n value: this.groupId\n }\n ]\n : [],\n sortings: sorters,\n pagination: {\n page,\n limit\n }\n }\n\n return (await fetchProcessList(listParam)).processes\n }\n\n async getFavoriteProcesses({ page = 1, limit = 30 } = {}) {\n var listParam = {\n pagination: {\n page,\n limit\n }\n }\n\n return (await fetchFavoriteProcessList(listParam)).favoriteProcesses\n }\n\n async refreshProcesses() {\n if (!this.groups) {\n await this.refresh()\n return\n }\n\n this.grist.fetch()\n }\n\n async onCreateProcess() {\n /*\n * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n * 주의. value는 object일 수도 있고, string일 수도 있다.\n * string인 경우에는 해당 보드의 id로 해석한다.\n */\n var template = html`\n <process-creation-popup\n .defaultGroup=${this.groupId}\n .groups=${this.groups}\n @create-process=${async (e: CustomEvent) => {\n try {\n var { name, description, groupId, model, thumbnail } = e.detail\n\n var process: Process = {\n name,\n description,\n groupId,\n model: model || {\n width: 1600,\n height: 1200\n },\n thumbnail\n }\n\n await createProcess(process)\n\n this.notify('info', 'new process created')\n } catch (ex: Error | any) {\n console.error(ex)\n this.notify('error', ex, ex)\n }\n }}\n ></process-creation-popup>\n `\n\n OxPopup.open({\n template,\n parent: this.renderRoot as Element\n })\n\n requestAnimationFrame(() => {\n dispatchEvent(new Event('resize'))\n })\n }\n\n notify(level: 'warn' | 'error' | 'info', message: any, ex?: Error) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level,\n message,\n ex\n }\n })\n )\n }\n}\n"]}
|
|
@@ -5,7 +5,7 @@ import gql from 'graphql-tag';
|
|
|
5
5
|
import { css, html, LitElement } from 'lit';
|
|
6
6
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
7
7
|
import { buildArgs, client } from '@operato/graphql';
|
|
8
|
-
import { ScrollbarStyles
|
|
8
|
+
import { ScrollbarStyles } from '@operato/styles';
|
|
9
9
|
const FETCH_PROCESS_TEMPLATE_LIST_GQL = (listParam) => {
|
|
10
10
|
return gql `
|
|
11
11
|
{
|
|
@@ -183,7 +183,6 @@ let OxProcessTemplateList = class OxProcessTemplateList extends LitElement {
|
|
|
183
183
|
};
|
|
184
184
|
OxProcessTemplateList.styles = [
|
|
185
185
|
ScrollbarStyles,
|
|
186
|
-
TooltipStyles,
|
|
187
186
|
css `
|
|
188
187
|
:host {
|
|
189
188
|
display: flex;
|
|
@@ -204,7 +203,7 @@ OxProcessTemplateList.styles = [
|
|
|
204
203
|
|
|
205
204
|
#headroom {
|
|
206
205
|
align-items: center;
|
|
207
|
-
padding: var(--padding-default) var(--
|
|
206
|
+
padding: var(--padding-default) var(--spacing-large);
|
|
208
207
|
border-top: 2px solid rgba(0, 0, 0, 0.2);
|
|
209
208
|
background-color: var(--md-sys-color-surface);
|
|
210
209
|
box-shadow: var(--box-shadow);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-process-template-list.js","sourceRoot":"","sources":["../../src/ox-process-template-list.ts"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,iCAAiC,CAAA;AAExC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAA;AAYzE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACpD,OAAO,EAAE,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"ox-process-template-list.js","sourceRoot":"","sources":["../../src/ox-process-template-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/input/ox-input-file.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport {\n ColumnConfig,\n DataGrist,\n FetchOption,\n FilterValue,\n GristData,\n GristRecord,\n PaginationConfig,\n SortersConfig\n} from '@operato/data-grist'\nimport { buildArgs, client } from '@operato/graphql'\nimport { ScrollbarStyles } from '@operato/styles'\n\nconst FETCH_PROCESS_TEMPLATE_LIST_GQL = (listParam: any) => {\n return gql`\n {\n processTemplates(${buildArgs(listParam)}) {\n items {\n id\n name\n description\n visibility\n thumbnail\n }\n total\n }\n }\n`\n}\n\nconst FETCH_PROCESS_TEMPLATE_GQL = (id: string) => {\n return gql`\n {\n processTemplate(id: \"${id}\") {\n id\n name\n description\n visibility\n model\n thumbnail\n }\n }\n`\n}\n\n@customElement('ox-process-template-list')\nexport class OxProcessTemplateList extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n\n width: 100%;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n ox-grist {\n flex: 1;\n overflow-y: auto;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n #headroom {\n align-items: center;\n padding: var(--padding-default) var(--spacing-large);\n border-top: 2px solid rgba(0, 0, 0, 0.2);\n background-color: var(--md-sys-color-surface);\n box-shadow: var(--box-shadow);\n }\n\n #filters {\n display: flex;\n flex-direction: row;\n place-content: space-between;\n margin: var(--margin-default) 0;\n }\n\n select {\n border: 0;\n outline: none;\n text-align: right;\n }\n\n @media only screen and (max-width: 460px) {\n #filters {\n flex-direction: column;\n }\n }\n `\n ]\n\n @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n\n @query('ox-grist') grist!: DataGrist\n\n render() {\n return html`\n <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n <div slot=\"headroom\" id=\"headroom\">\n <div id=\"filters\">\n <ox-filters-form autofocus .withoutSearch=${this.withoutSearch}></ox-filters-form>\n </div>\n </div>\n </ox-grist>\n `\n }\n\n async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {\n const { items: records, total } = await this.getProcessTemplates({ page, limit, filters, sortings })\n\n return {\n total,\n records\n }\n }\n\n get gristConfig() {\n return {\n list: {\n thumbnail: 'thumbnail',\n fields: ['name'],\n details: ['description']\n },\n columns: [\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'string',\n name: 'name',\n header: 'name',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200,\n filter: 'search',\n sortable: true\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200,\n filter: 'search'\n },\n {\n type: 'select-buttons',\n name: 'visibility',\n header: 'visibility',\n record: {\n editable: false\n },\n hidden: true,\n filter: {\n operator: 'in',\n options: ['private', 'domain', 'public'],\n label: ''\n }\n },\n {\n type: 'image',\n name: 'thumbnail',\n hidden: true,\n record: {\n editable: false\n },\n width: 120\n }\n ],\n rows: {\n appendable: false,\n selectable: {\n multiple: false\n },\n handlers: {\n click: 'select-row-toggle'\n }\n },\n sorters: [\n {\n name: 'name',\n desc: false\n }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200]\n }\n }\n }\n\n async firstUpdated() {\n this.refreshProcessTemplates()\n }\n\n async getSelected() {\n const selected = this.grist.selected\n const templateId = selected && selected[0]?.id\n\n if (!templateId) {\n return\n }\n\n var processTemplateResponse = await client.query({\n query: FETCH_PROCESS_TEMPLATE_GQL(templateId)\n })\n\n var template = processTemplateResponse.data?.processTemplate\n\n if (template) {\n template = {\n ...template,\n model: JSON.parse(template.model)\n }\n }\n\n return template\n }\n\n async refreshProcessTemplates() {\n this.grist.fetch()\n }\n\n async getProcessTemplates({\n page = 1,\n limit = 30,\n filters = [],\n sortings = []\n }: { page?: number; limit?: number; filters?: FilterValue[]; sortings?: SortersConfig } = {}) {\n var pagination: PaginationConfig = {\n limit,\n page\n }\n\n var params = {\n filters,\n sortings,\n pagination\n }\n\n var processTemplateListResponse = await client.query({\n query: FETCH_PROCESS_TEMPLATE_LIST_GQL(params)\n })\n\n return processTemplateListResponse?.data?.processTemplates || {}\n }\n}\n"]}
|
|
@@ -55,6 +55,7 @@ let ProcessSelector = class ProcessSelector extends InfiniteScrollable(localize(
|
|
|
55
55
|
display: grid;
|
|
56
56
|
grid-template-rows: auto auto 1fr;
|
|
57
57
|
overflow: hidden;
|
|
58
|
+
color: var(--popup-content-color);
|
|
58
59
|
background-color: var(--popup-content-background-color);
|
|
59
60
|
}
|
|
60
61
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-process-selector.js","sourceRoot":"","sources":["../../../src/selector/ox-process-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-process-creation-card'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { buildArgs, client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'\n\nconst FETCH_PROCESS_LIST_GQL = (listParam: any) => {\n return gql`\n {\n processes(${buildArgs(listParam)}) {\n items {\n id\n name\n description\n thumbnail\n }\n total\n }\n }\n`\n}\n\nconst FETCH_PROCESS_GROUP_LIST_GQL = gql`\n {\n processGroups {\n items {\n id\n name\n description\n }\n total\n }\n }\n`\n\nconst CREATE_PROCESS_GQL = gql`\n mutation CreateProcess($process: NewProcess!) {\n createProcess(process: $process) {\n id\n name\n description\n model\n createdAt\n updatedAt\n }\n }\n`\n\n@customElement('ox-process-selector')\nexport class ProcessSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {\n static get styles() {\n return [\n ScrollbarStyles,\n css`\n :host {\n display: grid;\n grid-template-rows: auto auto 1fr;\n overflow: hidden;\n background-color: var(--popup-content-background-color);\n }\n\n #main {\n overflow: auto;\n padding: var(--popup-content-padding);\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n }\n\n .card {\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n border-radius: var(--card-list-border-radius);\n background-color: var(--card-list-background-color);\n }\n\n .card[selected] {\n border: red solid;\n }\n\n .card.create {\n overflow: visible;\n }\n\n .card:hover {\n cursor: pointer;\n }\n\n .card > .name {\n background-color: var(--board-renderer-name-background-color);\n opacity: 0.8;\n margin-top: -35px;\n width: 100%;\n color: #fff;\n font-weight: bolder;\n font-size: 13px;\n text-indent: 7px;\n }\n\n .card > .description {\n background-color: rgba(0, 0, 0, 0.7);\n width: 100%;\n min-height: 15px;\n font-size: 0.6rem;\n color: #fff;\n text-indent: 7px;\n }\n .card img {\n max-height: 100%;\n min-height: 100%;\n }\n\n #filter {\n padding: var(--popup-content-padding);\n background-color: var(--md-sys-color-surface);\n box-shadow: var(--box-shadow);\n }\n\n #filter * {\n font-size: 15px;\n }\n\n select {\n text-transform: capitalize;\n float: right;\n }\n `\n ]\n }\n\n @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []\n @property({ type: Array }) processes: any[] = []\n @property({ type: String }) group?: string\n @property({ type: Boolean }) creatable: boolean = false\n @property({ type: String }) value?: string\n\n private _page: number = 1\n private _total: number = 0\n\n constructor() {\n super()\n\n this._infiniteScrollOptions.limit = 20\n }\n\n render() {\n return html`\n <div id=\"filter\">\n <select\n @change=${(e: Event) => {\n this.group = (e.currentTarget as any)?.value\n this.requestUpdate()\n }}\n >\n <option value=\"\">${i18next.t('label.all')}</option>\n ${this.groups.map(group => html` <option value=${group.id}>${group.description}</option> `)}\n </select>\n </div>\n\n <div\n id=\"main\"\n @scroll=${(e: Event) => {\n this.onScroll(e)\n }}\n >\n ${this.creatable\n ? html`\n <ox-process-creation-card\n class=\"card create\"\n .groups=${this.groups}\n .defaultGroup=${this.group}\n @create-process=${(e: CustomEvent) => this.onCreateProcess(e)}\n ></ox-process-creation-card>\n `\n : html``}\n ${this.processes.map(\n process => html`\n <div\n class=\"card\"\n @click=${(e: Event) => this.onClickSelect(process)}\n ?selected=${this.value === process.id}\n >\n <img src=${process.thumbnail} />\n <div class=\"name\">${process.name}</div>\n <div class=\"description\">${process.description}</div>\n </div>\n `\n )}\n </div>\n `\n }\n\n get scrollTargetEl(): HTMLElement | null {\n return this.renderRoot.querySelector('#main') as HTMLElement\n }\n\n async scrollAction() {\n return this.appendProcesses()\n }\n\n firstUpdated() {\n this.refreshGroups()\n }\n\n async updated(changed: PropertyValues<this>) {\n if (changed.has('group')) {\n this.refreshProcesses()\n }\n }\n\n onClickSelect(process: any) {\n this.dispatchEvent(\n new CustomEvent('process-selected', {\n composed: true,\n bubbles: true,\n detail: {\n process\n }\n })\n )\n }\n\n async onCreateProcess(e: CustomEvent) {\n var { name, description, groupId, model, thumbnail } = e.detail\n\n await this.createProcess(name, description, groupId, model, thumbnail)\n this.refreshProcesses()\n }\n\n async refreshGroups() {\n var groupListResponse = await client.query({\n query: FETCH_PROCESS_GROUP_LIST_GQL,\n context: gqlContext()\n })\n\n if (!groupListResponse || !groupListResponse.data) return\n\n var groups = groupListResponse.data.processGroups.items\n this.groups = [...groups]\n\n this.group = groups.filter((group: { id: string }) => group.id == this.group).length > 0 ? this.group : ''\n }\n\n async refreshProcesses() {\n var processes = await this.getProcesses()\n this.processes = [...processes]\n\n var creationCard = this.renderRoot.querySelector('ox-process-creation-card')\n if (creationCard) {\n ;(creationCard as any).reset()\n }\n }\n\n async appendProcesses() {\n var processes = await this.getProcesses({ page: this._page + 1 })\n this.processes = [...this.processes, ...processes]\n }\n\n async getProcesses({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {\n var filters = []\n var sortings = [] as any[]\n var pagination = {\n limit,\n page\n }\n\n if (this.group)\n filters.push({\n name: 'groupId',\n operator: 'eq',\n value: this.group\n })\n\n var params = {\n filters,\n sortings,\n pagination\n }\n var processListResponse = await client.query({\n query: FETCH_PROCESS_LIST_GQL(params),\n context: gqlContext()\n })\n\n if (!processListResponse || !processListResponse.data) return []\n this._total = processListResponse.data.processes.total\n this._page = page\n\n return processListResponse.data.processes.items\n }\n\n async createProcess(name: string, description: string, groupId: string, modelTemplate: any, thumbnail: string) {\n var model = JSON.stringify(\n modelTemplate || {\n width: 1200,\n height: 800,\n fillStyle: 'white'\n }\n )\n\n const response = await client.mutate({\n mutation: CREATE_PROCESS_GQL,\n variables: {\n process: {\n name,\n description,\n groupId,\n model\n }\n },\n context: gqlContext()\n })\n\n return response.data\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-process-selector.js","sourceRoot":"","sources":["../../../src/selector/ox-process-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-process-creation-card'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { buildArgs, client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'\n\nconst FETCH_PROCESS_LIST_GQL = (listParam: any) => {\n return gql`\n {\n processes(${buildArgs(listParam)}) {\n items {\n id\n name\n description\n thumbnail\n }\n total\n }\n }\n`\n}\n\nconst FETCH_PROCESS_GROUP_LIST_GQL = gql`\n {\n processGroups {\n items {\n id\n name\n description\n }\n total\n }\n }\n`\n\nconst CREATE_PROCESS_GQL = gql`\n mutation CreateProcess($process: NewProcess!) {\n createProcess(process: $process) {\n id\n name\n description\n model\n createdAt\n updatedAt\n }\n }\n`\n\n@customElement('ox-process-selector')\nexport class ProcessSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {\n static get styles() {\n return [\n ScrollbarStyles,\n css`\n :host {\n display: grid;\n grid-template-rows: auto auto 1fr;\n overflow: hidden;\n color: var(--popup-content-color);\n background-color: var(--popup-content-background-color);\n }\n\n #main {\n overflow: auto;\n padding: var(--popup-content-padding);\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n }\n\n .card {\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n border-radius: var(--card-list-border-radius);\n background-color: var(--card-list-background-color);\n }\n\n .card[selected] {\n border: red solid;\n }\n\n .card.create {\n overflow: visible;\n }\n\n .card:hover {\n cursor: pointer;\n }\n\n .card > .name {\n background-color: var(--board-renderer-name-background-color);\n opacity: 0.8;\n margin-top: -35px;\n width: 100%;\n color: #fff;\n font-weight: bolder;\n font-size: 13px;\n text-indent: 7px;\n }\n\n .card > .description {\n background-color: rgba(0, 0, 0, 0.7);\n width: 100%;\n min-height: 15px;\n font-size: 0.6rem;\n color: #fff;\n text-indent: 7px;\n }\n .card img {\n max-height: 100%;\n min-height: 100%;\n }\n\n #filter {\n padding: var(--popup-content-padding);\n background-color: var(--md-sys-color-surface);\n box-shadow: var(--box-shadow);\n }\n\n #filter * {\n font-size: 15px;\n }\n\n select {\n text-transform: capitalize;\n float: right;\n }\n `\n ]\n }\n\n @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []\n @property({ type: Array }) processes: any[] = []\n @property({ type: String }) group?: string\n @property({ type: Boolean }) creatable: boolean = false\n @property({ type: String }) value?: string\n\n private _page: number = 1\n private _total: number = 0\n\n constructor() {\n super()\n\n this._infiniteScrollOptions.limit = 20\n }\n\n render() {\n return html`\n <div id=\"filter\">\n <select\n @change=${(e: Event) => {\n this.group = (e.currentTarget as any)?.value\n this.requestUpdate()\n }}\n >\n <option value=\"\">${i18next.t('label.all')}</option>\n ${this.groups.map(group => html` <option value=${group.id}>${group.description}</option> `)}\n </select>\n </div>\n\n <div\n id=\"main\"\n @scroll=${(e: Event) => {\n this.onScroll(e)\n }}\n >\n ${this.creatable\n ? html`\n <ox-process-creation-card\n class=\"card create\"\n .groups=${this.groups}\n .defaultGroup=${this.group}\n @create-process=${(e: CustomEvent) => this.onCreateProcess(e)}\n ></ox-process-creation-card>\n `\n : html``}\n ${this.processes.map(\n process => html`\n <div\n class=\"card\"\n @click=${(e: Event) => this.onClickSelect(process)}\n ?selected=${this.value === process.id}\n >\n <img src=${process.thumbnail} />\n <div class=\"name\">${process.name}</div>\n <div class=\"description\">${process.description}</div>\n </div>\n `\n )}\n </div>\n `\n }\n\n get scrollTargetEl(): HTMLElement | null {\n return this.renderRoot.querySelector('#main') as HTMLElement\n }\n\n async scrollAction() {\n return this.appendProcesses()\n }\n\n firstUpdated() {\n this.refreshGroups()\n }\n\n async updated(changed: PropertyValues<this>) {\n if (changed.has('group')) {\n this.refreshProcesses()\n }\n }\n\n onClickSelect(process: any) {\n this.dispatchEvent(\n new CustomEvent('process-selected', {\n composed: true,\n bubbles: true,\n detail: {\n process\n }\n })\n )\n }\n\n async onCreateProcess(e: CustomEvent) {\n var { name, description, groupId, model, thumbnail } = e.detail\n\n await this.createProcess(name, description, groupId, model, thumbnail)\n this.refreshProcesses()\n }\n\n async refreshGroups() {\n var groupListResponse = await client.query({\n query: FETCH_PROCESS_GROUP_LIST_GQL,\n context: gqlContext()\n })\n\n if (!groupListResponse || !groupListResponse.data) return\n\n var groups = groupListResponse.data.processGroups.items\n this.groups = [...groups]\n\n this.group = groups.filter((group: { id: string }) => group.id == this.group).length > 0 ? this.group : ''\n }\n\n async refreshProcesses() {\n var processes = await this.getProcesses()\n this.processes = [...processes]\n\n var creationCard = this.renderRoot.querySelector('ox-process-creation-card')\n if (creationCard) {\n ;(creationCard as any).reset()\n }\n }\n\n async appendProcesses() {\n var processes = await this.getProcesses({ page: this._page + 1 })\n this.processes = [...this.processes, ...processes]\n }\n\n async getProcesses({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {\n var filters = []\n var sortings = [] as any[]\n var pagination = {\n limit,\n page\n }\n\n if (this.group)\n filters.push({\n name: 'groupId',\n operator: 'eq',\n value: this.group\n })\n\n var params = {\n filters,\n sortings,\n pagination\n }\n var processListResponse = await client.query({\n query: FETCH_PROCESS_LIST_GQL(params),\n context: gqlContext()\n })\n\n if (!processListResponse || !processListResponse.data) return []\n this._total = processListResponse.data.processes.total\n this._page = page\n\n return processListResponse.data.processes.items\n }\n\n async createProcess(name: string, description: string, groupId: string, modelTemplate: any, thumbnail: string) {\n var model = JSON.stringify(\n modelTemplate || {\n width: 1200,\n height: 800,\n fillStyle: 'white'\n }\n )\n\n const response = await client.mutate({\n mutation: CREATE_PROCESS_GQL,\n variables: {\n process: {\n name,\n description,\n groupId,\n model\n }\n },\n context: gqlContext()\n })\n\n return response.data\n }\n}\n"]}
|