@operato/board 1.4.38 → 1.4.40
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 +17 -0
- package/dist/src/modeller/property-sidebar/effects/property-event-hover.d.ts +2 -1
- package/dist/src/modeller/property-sidebar/effects/property-event-hover.js +54 -5
- package/dist/src/modeller/property-sidebar/effects/property-event-hover.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -7
- package/src/modeller/property-sidebar/effects/property-event-hover.ts +61 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,23 @@
|
|
|
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
|
+
### [1.4.40](https://github.com/hatiolab/operato/compare/v1.4.39...v1.4.40) (2023-08-31)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* support setting mouse cursor style on hover event ([6300ddc](https://github.com/hatiolab/operato/commit/6300ddc08a31070365e3d75974d448f87b90b76e))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### [1.4.39](https://github.com/hatiolab/operato/compare/v1.4.38...v1.4.39) (2023-08-29)
|
|
16
|
+
|
|
17
|
+
**Note:** Version bump only for package @operato/board
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
6
23
|
### [1.4.38](https://github.com/hatiolab/operato/compare/v1.4.37...v1.4.38) (2023-08-28)
|
|
7
24
|
|
|
8
25
|
**Note:** Version bump only for package @operato/board
|
|
@@ -14,7 +14,8 @@ export declare class PropertyEventHover extends LitElement {
|
|
|
14
14
|
_getPlaceHoder(action: string): "" | "SCENE-100" | "http://www.hatiolab.com/";
|
|
15
15
|
_getTargetList(action: string): {
|
|
16
16
|
value: string;
|
|
17
|
-
description
|
|
17
|
+
description?: string;
|
|
18
|
+
class?: string;
|
|
18
19
|
}[];
|
|
19
20
|
_onValueChange(e: Event): void;
|
|
20
21
|
}
|
|
@@ -4,8 +4,9 @@
|
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
5
|
import '@operato/input/ox-input-data.js';
|
|
6
6
|
import '@operato/i18n/ox-i18n.js';
|
|
7
|
-
import { html, LitElement } from 'lit';
|
|
7
|
+
import { css, html, LitElement } from 'lit';
|
|
8
8
|
import { property } from 'lit/decorators.js';
|
|
9
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
10
|
import { EffectsSharedStyle } from './effects-shared-style.js';
|
|
10
11
|
import { convert } from './value-converter';
|
|
11
12
|
export class PropertyEventHover extends LitElement {
|
|
@@ -24,11 +25,12 @@ export class PropertyEventHover extends LitElement {
|
|
|
24
25
|
<select id="tap-select" value-key="action" .value=${action || ''}>
|
|
25
26
|
<option value=""></option>
|
|
26
27
|
<option value="popup">popup target board</option>
|
|
27
|
-
<option value="
|
|
28
|
+
<option value="info-window">open infowindow</option>
|
|
28
29
|
<option value="data-toggle">toggle(true/false) target component data</option>
|
|
29
30
|
<option value="data-tristate">tristate(0/1/2) target component data</option>
|
|
30
31
|
<option value="data-set">set value to target component data</option>
|
|
31
32
|
<option value="value-set">set value to target component value</option>
|
|
33
|
+
<option value="mouse-cursor">change mouse cursor to target style</option>
|
|
32
34
|
</select>
|
|
33
35
|
|
|
34
36
|
<label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
|
|
@@ -46,7 +48,7 @@ export class PropertyEventHover extends LitElement {
|
|
|
46
48
|
/>
|
|
47
49
|
|
|
48
50
|
<datalist id="target-list">
|
|
49
|
-
${this._getTargetList(action).map(({ value, description }) => html ` <option .value=${value}>${description}</option> `)}
|
|
51
|
+
${this._getTargetList(action).map(({ value, description, class: a }) => html ` <option .value=${value} class=${ifDefined(a)}>${description}</option> `)}
|
|
50
52
|
</datalist>
|
|
51
53
|
`}
|
|
52
54
|
${action == 'data-set' || action == 'value-set'
|
|
@@ -89,7 +91,7 @@ export class PropertyEventHover extends LitElement {
|
|
|
89
91
|
[];
|
|
90
92
|
ids.unshift({ value: '(self)', description: 'self component' });
|
|
91
93
|
return ids;
|
|
92
|
-
case '
|
|
94
|
+
case 'info-window':
|
|
93
95
|
return ((this.scene &&
|
|
94
96
|
this.scene.ids
|
|
95
97
|
.filter(i => {
|
|
@@ -101,6 +103,10 @@ export class PropertyEventHover extends LitElement {
|
|
|
101
103
|
return { value: `#${id}`, description: (_a = this.scene.findById(id)) === null || _a === void 0 ? void 0 : _a.get('type') };
|
|
102
104
|
})) ||
|
|
103
105
|
[]);
|
|
106
|
+
case 'mouse-cursor':
|
|
107
|
+
return ['auto', 'pointer', 'default', 'move', 'text', 'wait', 'help', 'crosshair', 'not-allowed', 'grab'].map(style => {
|
|
108
|
+
return { value: style, class: 'cursor-' + style };
|
|
109
|
+
});
|
|
104
110
|
default:
|
|
105
111
|
return [];
|
|
106
112
|
}
|
|
@@ -118,7 +124,50 @@ export class PropertyEventHover extends LitElement {
|
|
|
118
124
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
|
119
125
|
}
|
|
120
126
|
}
|
|
121
|
-
PropertyEventHover.styles = [
|
|
127
|
+
PropertyEventHover.styles = [
|
|
128
|
+
EffectsSharedStyle,
|
|
129
|
+
css `
|
|
130
|
+
.cursor-auto {
|
|
131
|
+
cursor: auto;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.cursor-pointer {
|
|
135
|
+
cursor: pointer;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.cursor-default {
|
|
139
|
+
cursor: default;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.cursor-move {
|
|
143
|
+
cursor: move;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.cursor-text {
|
|
147
|
+
cursor: text;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.cursor-wait {
|
|
151
|
+
cursor: wait;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.cursor-help {
|
|
155
|
+
cursor: help;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.cursor-crosshair {
|
|
159
|
+
cursor: crosshair;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.cursor-not-allowed {
|
|
163
|
+
cursor: not-allowed;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.cursor-grab {
|
|
167
|
+
cursor: grab;
|
|
168
|
+
}
|
|
169
|
+
`
|
|
170
|
+
];
|
|
122
171
|
__decorate([
|
|
123
172
|
property({ type: Object })
|
|
124
173
|
], PropertyEventHover.prototype, "value", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"property-event-hover.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-hover.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,iCAAiC,CAAA;AACxC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"property-event-hover.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-hover.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { EffectsSharedStyle } from './effects-shared-style.js'\nimport { convert } from './value-converter'\n\nexport class PropertyEventHover extends LitElement {\n static styles = [\n EffectsSharedStyle,\n css`\n .cursor-auto {\n cursor: auto;\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .cursor-default {\n cursor: default;\n }\n\n .cursor-move {\n cursor: move;\n }\n\n .cursor-text {\n cursor: text;\n }\n\n .cursor-wait {\n cursor: wait;\n }\n\n .cursor-help {\n cursor: help;\n }\n\n .cursor-crosshair {\n cursor: crosshair;\n }\n\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n\n .cursor-grab {\n cursor: grab;\n }\n `\n ]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene?: Scene\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n var { action, value = '', target = '', emphasize, restore } = this.value || {}\n\n return html`\n <input id=\"checkbox-emphasize\" type=\"checkbox\" value-key=\"emphasize\" .checked=${emphasize} />\n <label for=\"checkbox-emphasize\" class=\"checkbox-label\">\n <ox-i18n msgid=\"label.emphasize\">emphasize</ox-i18n>\n </label>\n\n <label> <ox-i18n msgid=\"label.action\">action</ox-i18n> </label>\n <select id=\"tap-select\" value-key=\"action\" .value=${action || ''}>\n <option value=\"\"></option>\n <option value=\"popup\">popup target board</option>\n <option value=\"info-window\">open infowindow</option>\n <option value=\"data-toggle\">toggle(true/false) target component data</option>\n <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n <option value=\"data-set\">set value to target component data</option>\n <option value=\"value-set\">set value to target component value</option>\n <option value=\"mouse-cursor\">change mouse cursor to target style</option>\n </select>\n\n <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n\n ${action == 'popup'\n ? html`\n <ox-editor-board-selector value-key=\"target\" .value=${target} custom-editor></ox-editor-board-selector>\n `\n : html`\n <input\n value-key=\"target\"\n .value=${target || ''}\n list=\"target-list\"\n .placeholder=\"${this._getPlaceHoder(action)}\"\n />\n\n <datalist id=\"target-list\">\n ${this._getTargetList(action).map(\n ({ value, description, class: a }) =>\n html` <option .value=${value} class=${ifDefined(a)}>${description}</option> `\n )}\n </datalist>\n `}\n ${action == 'data-set' || action == 'value-set'\n ? html`\n <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n <ox-input-data value-key=\"value\" .value=${value} custom-editor fullwidth></ox-input-data>\n `\n : html``}\n\n <input id=\"checkbox-restore\" type=\"checkbox\" value-key=\"restore\" .checked=${restore} />\n <label for=\"checkbox-restore\" class=\"checkbox-label\">\n <ox-i18n msgid=\"label.restore-on-leave\">restore on leave</ox-i18n>\n </label>\n `\n }\n\n _getPlaceHoder(action: string) {\n switch (action) {\n case 'popup':\n case 'goto':\n return 'SCENE-100'\n case 'link-open':\n case 'link-move':\n return 'http://www.hatiolab.com/'\n default:\n return ''\n }\n }\n\n _getTargetList(action: string): { value: string; description?: string; class?: string }[] {\n switch (action) {\n case 'data-toggle':\n case 'data-tristate':\n case 'data-set':\n case 'value-set':\n let ids =\n (this.scene &&\n this.scene.ids.map(i => {\n const id = i.key\n return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n })) ||\n []\n ids.unshift({ value: '(self)', description: 'self component' })\n return ids\n\n case 'info-window':\n return (\n (this.scene &&\n this.scene.ids\n .filter(i => {\n return this.scene!.findById(i.key).get('type') == 'info-window'\n })\n .map(i => {\n const id = i.key\n return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n })) ||\n []\n )\n\n case 'mouse-cursor':\n return ['auto', 'pointer', 'default', 'move', 'text', 'wait', 'help', 'crosshair', 'not-allowed', 'grab'].map(\n style => {\n return { value: style, class: 'cursor-' + style }\n }\n )\n\n default:\n return []\n }\n }\n\n _onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n this.value = {\n ...this.value,\n [key]: convert(element)\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|