@leafer-in/state 1.8.0 → 1.9.1
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/dist/state.cjs +187 -167
- package/dist/state.esm.js +185 -166
- package/dist/state.esm.min.js +1 -1
- package/dist/state.esm.min.js.map +1 -1
- package/dist/state.js +140 -178
- package/dist/state.min.cjs +1 -1
- package/dist/state.min.cjs.map +1 -1
- package/dist/state.min.js +1 -1
- package/dist/state.min.js.map +1 -1
- package/package.json +4 -4
- package/src/set.ts +2 -2
- package/src/style.ts +3 -3
- package/src/unset.ts +2 -1
package/dist/state.esm.js
CHANGED
|
@@ -1,18 +1,16 @@
|
|
|
1
|
-
import { decorateLeafAttr, attr, State, MathHelper, isNull, PointerEvent, Plugin, UI, dataType, Text, defineKey, getDescriptor, doBoundsType } from
|
|
1
|
+
import { decorateLeafAttr, attr, State, MathHelper, isObject, isNull, isUndefined, PointerEvent, Plugin, UI, dataType, Text, defineKey, getDescriptor, doBoundsType } from "@leafer-ui/core";
|
|
2
2
|
|
|
3
3
|
function stateType(defaultValue, styleName) {
|
|
4
|
-
return decorateLeafAttr(defaultValue,
|
|
4
|
+
return decorateLeafAttr(defaultValue, key => attr({
|
|
5
5
|
set(value) {
|
|
6
6
|
this.__setAttr(key, value);
|
|
7
|
-
if (this.leaferIsReady)
|
|
8
|
-
styleName ? State.setStyleName(this, styleName, value) : State.set(this, value);
|
|
9
|
-
else
|
|
10
|
-
this.__layout.stateStyleChanged = true;
|
|
7
|
+
if (this.leaferIsReady) styleName ? State.setStyleName(this, styleName, value) : State.set(this, value); else this.__layout.stateStyleChanged = true;
|
|
11
8
|
}
|
|
12
9
|
}));
|
|
13
10
|
}
|
|
11
|
+
|
|
14
12
|
function stateStyleType(defaultValue) {
|
|
15
|
-
return decorateLeafAttr(defaultValue,
|
|
13
|
+
return decorateLeafAttr(defaultValue, key => attr({
|
|
16
14
|
set(value) {
|
|
17
15
|
this.__setAttr(key, value);
|
|
18
16
|
this.__layout.stateStyleChanged = true;
|
|
@@ -21,14 +19,12 @@ function stateStyleType(defaultValue) {
|
|
|
21
19
|
}
|
|
22
20
|
|
|
23
21
|
function findParentButton(leaf, button) {
|
|
24
|
-
if (button && button !== true)
|
|
25
|
-
return button;
|
|
22
|
+
if (button && button !== true) return button;
|
|
26
23
|
if (!leaf.button) {
|
|
27
|
-
let { parent
|
|
24
|
+
let {parent: parent} = leaf;
|
|
28
25
|
for (let i = 0; i < 2; i++) {
|
|
29
26
|
if (parent) {
|
|
30
|
-
if (parent.button)
|
|
31
|
-
return parent;
|
|
27
|
+
if (parent.button) return parent;
|
|
32
28
|
parent = parent.parent;
|
|
33
29
|
}
|
|
34
30
|
}
|
|
@@ -37,121 +33,106 @@ function findParentButton(leaf, button) {
|
|
|
37
33
|
}
|
|
38
34
|
|
|
39
35
|
function setStyle(leaf, style) {
|
|
40
|
-
if (
|
|
41
|
-
|
|
42
|
-
updateStyle(leaf, style, 'in');
|
|
36
|
+
if (!isObject(style)) style = undefined;
|
|
37
|
+
updateStyle(leaf, style, "in");
|
|
43
38
|
}
|
|
39
|
+
|
|
44
40
|
function unsetStyle(leaf, style) {
|
|
45
|
-
const { normalStyle
|
|
46
|
-
if (
|
|
47
|
-
style = undefined;
|
|
41
|
+
const {normalStyle: normalStyle} = leaf;
|
|
42
|
+
if (!isObject(style)) style = undefined;
|
|
48
43
|
if (normalStyle) {
|
|
49
|
-
if (!style)
|
|
50
|
-
|
|
51
|
-
updateStyle(leaf, style, 'out');
|
|
44
|
+
if (!style) style = normalStyle;
|
|
45
|
+
updateStyle(leaf, style, "out");
|
|
52
46
|
}
|
|
53
47
|
}
|
|
48
|
+
|
|
54
49
|
const emprtyStyle = {};
|
|
50
|
+
|
|
55
51
|
function updateStyle(leaf, style, type) {
|
|
56
|
-
const { normalStyle
|
|
57
|
-
if (!style)
|
|
58
|
-
style = emprtyStyle;
|
|
52
|
+
const {normalStyle: normalStyle} = leaf;
|
|
53
|
+
if (!style) style = emprtyStyle;
|
|
59
54
|
if (style.scale) {
|
|
60
55
|
MathHelper.assignScale(style, style.scale);
|
|
61
56
|
delete style.scale;
|
|
62
57
|
}
|
|
63
|
-
if (style === emprtyStyle || !State.canAnimate)
|
|
64
|
-
type = null;
|
|
58
|
+
if (style === emprtyStyle || !State.canAnimate) type = null;
|
|
65
59
|
let transition = type ? getTransition(type, style, leaf) : false;
|
|
66
60
|
const fromStyle = transition ? getFromStyle(leaf, style) : undefined;
|
|
67
61
|
const nextStyle = State.canAnimate && getStyle(leaf);
|
|
68
|
-
if (nextStyle)
|
|
69
|
-
|
|
70
|
-
if (normalStyle)
|
|
71
|
-
leaf.set(normalStyle, 'temp');
|
|
62
|
+
if (nextStyle) leaf.killAnimate("transition");
|
|
63
|
+
if (normalStyle) leaf.set(normalStyle, "temp");
|
|
72
64
|
const statesStyle = getStyle(leaf);
|
|
73
65
|
if (statesStyle) {
|
|
74
|
-
const { animation
|
|
66
|
+
const {animation: animation} = statesStyle;
|
|
75
67
|
if (animation) {
|
|
76
|
-
const animate = leaf.animate(animation, undefined,
|
|
68
|
+
const animate = leaf.animate(animation, undefined, "animation", true);
|
|
77
69
|
Object.assign(statesStyle, animate.endingStyle);
|
|
78
|
-
if (type !==
|
|
79
|
-
animate.kill();
|
|
80
|
-
else
|
|
81
|
-
transition = false;
|
|
70
|
+
if (type !== "in" || style.animation !== animation) animate.kill(); else transition = false;
|
|
82
71
|
delete statesStyle.animation;
|
|
83
72
|
}
|
|
84
73
|
leaf.normalStyle = filterStyle(statesStyle, leaf);
|
|
85
|
-
leaf.set(statesStyle,
|
|
86
|
-
}
|
|
87
|
-
else {
|
|
74
|
+
leaf.set(statesStyle, "temp");
|
|
75
|
+
} else {
|
|
88
76
|
leaf.normalStyle = undefined;
|
|
89
77
|
}
|
|
90
78
|
if (transition) {
|
|
91
79
|
const toStyle = filterStyle(fromStyle, leaf);
|
|
92
|
-
leaf.set(fromStyle,
|
|
93
|
-
leaf.animate([fromStyle, toStyle], transition,
|
|
80
|
+
leaf.set(fromStyle, "temp");
|
|
81
|
+
leaf.animate([ fromStyle, toStyle ], transition, "transition", true);
|
|
94
82
|
}
|
|
95
83
|
leaf.__layout.stateStyleChanged = false;
|
|
96
84
|
}
|
|
85
|
+
|
|
97
86
|
function getStyle(leaf) {
|
|
98
87
|
let exist;
|
|
99
88
|
const style = {}, button = findParentButton(leaf);
|
|
100
|
-
const state = button ?
|
|
89
|
+
const state = button ? leaf.state || button.state : leaf.state;
|
|
101
90
|
const stateStyle = state && leaf.states[state];
|
|
102
|
-
if (stateStyle && State.isState(state, leaf, button))
|
|
103
|
-
exist = assign(style, stateStyle);
|
|
91
|
+
if (stateStyle && State.isState(state, leaf, button)) exist = assign(style, stateStyle);
|
|
104
92
|
const selectedStyle = style.selectedStyle || leaf.selectedStyle;
|
|
105
|
-
if (selectedStyle && State.isSelected(leaf, button))
|
|
106
|
-
exist = assign(style, selectedStyle);
|
|
93
|
+
if (selectedStyle && State.isSelected(leaf, button)) exist = assign(style, selectedStyle);
|
|
107
94
|
const placeholderStyle = style.placeholderStyle || leaf.placeholderStyle;
|
|
108
|
-
if (placeholderStyle && State.isPlacehold(leaf, button))
|
|
109
|
-
exist = assign(style, placeholderStyle);
|
|
95
|
+
if (placeholderStyle && State.isPlacehold(leaf, button)) exist = assign(style, placeholderStyle);
|
|
110
96
|
if (State.isDisabled(leaf, button)) {
|
|
111
97
|
const disabledStyle = style.disabledStyle || leaf.disabledStyle;
|
|
112
|
-
if (disabledStyle)
|
|
113
|
-
|
|
114
|
-
}
|
|
115
|
-
else {
|
|
98
|
+
if (disabledStyle) exist = assign(style, disabledStyle);
|
|
99
|
+
} else {
|
|
116
100
|
const focusStyle = style.focusStyle || leaf.focusStyle;
|
|
117
|
-
if (focusStyle && State.isFocus(leaf, button))
|
|
118
|
-
exist = assign(style, focusStyle);
|
|
101
|
+
if (focusStyle && State.isFocus(leaf, button)) exist = assign(style, focusStyle);
|
|
119
102
|
const hoverStyle = style.hoverStyle || leaf.hoverStyle;
|
|
120
|
-
if (hoverStyle && State.isHover(leaf, button))
|
|
121
|
-
exist = assign(style, hoverStyle);
|
|
103
|
+
if (hoverStyle && State.isHover(leaf, button)) exist = assign(style, hoverStyle);
|
|
122
104
|
const pressStyle = style.pressStyle || leaf.pressStyle;
|
|
123
|
-
if (pressStyle && State.isPress(leaf, button))
|
|
124
|
-
exist = assign(style, pressStyle);
|
|
105
|
+
if (pressStyle && State.isPress(leaf, button)) exist = assign(style, pressStyle);
|
|
125
106
|
}
|
|
126
107
|
return exist ? style : undefined;
|
|
127
108
|
}
|
|
109
|
+
|
|
128
110
|
function filterStyle(style, data, addStyle, useAnimateExcludes) {
|
|
129
111
|
const to = addStyle ? style : {}, forStyle = addStyle || style;
|
|
130
112
|
for (let key in forStyle) {
|
|
131
113
|
if (useAnimateExcludes) {
|
|
132
|
-
if (!State.animateExcludes[key])
|
|
133
|
-
|
|
134
|
-
}
|
|
135
|
-
else
|
|
136
|
-
to[key] = data[key];
|
|
114
|
+
if (!State.animateExcludes[key]) to[key] = data[key];
|
|
115
|
+
} else to[key] = data[key];
|
|
137
116
|
}
|
|
138
117
|
return to;
|
|
139
118
|
}
|
|
119
|
+
|
|
140
120
|
function filterAnimateStyle(style, data, addStyle) {
|
|
141
121
|
return filterStyle(style, data, addStyle, true);
|
|
142
122
|
}
|
|
123
|
+
|
|
143
124
|
function getFromStyle(leaf, style) {
|
|
144
125
|
const fromStyle = filterAnimateStyle(style, leaf), animate = leaf.animate();
|
|
145
|
-
if (animate)
|
|
146
|
-
filterAnimateStyle(fromStyle, leaf, animate.fromStyle);
|
|
126
|
+
if (animate) filterAnimateStyle(fromStyle, leaf, animate.fromStyle);
|
|
147
127
|
return fromStyle;
|
|
148
128
|
}
|
|
129
|
+
|
|
149
130
|
function getTransition(type, style, data) {
|
|
150
|
-
let name = type ===
|
|
151
|
-
if (type ===
|
|
152
|
-
name = 'transition';
|
|
131
|
+
let name = type === "in" ? "transition" : "transitionOut";
|
|
132
|
+
if (type === "out" && isNull(data[name]) && isNull(style[name])) name = "transition";
|
|
153
133
|
return isNull(style[name]) ? data[name] : style[name];
|
|
154
134
|
}
|
|
135
|
+
|
|
155
136
|
function assign(style, stateStyle) {
|
|
156
137
|
Object.assign(style, stateStyle);
|
|
157
138
|
return true;
|
|
@@ -159,90 +140,79 @@ function assign(style, stateStyle) {
|
|
|
159
140
|
|
|
160
141
|
function setPointerState(leaf, stateName) {
|
|
161
142
|
const style = leaf[stateName];
|
|
162
|
-
if (style)
|
|
163
|
-
|
|
164
|
-
if (leaf.button)
|
|
165
|
-
setChildrenState(leaf.children, stateName);
|
|
143
|
+
if (style) setStyle(leaf, style);
|
|
144
|
+
if (leaf.button) setChildrenState(leaf.children, stateName);
|
|
166
145
|
}
|
|
146
|
+
|
|
167
147
|
function setState(leaf, stateName, stateStyle) {
|
|
168
|
-
if (!stateStyle)
|
|
169
|
-
stateStyle = leaf.states[stateName];
|
|
148
|
+
if (!stateStyle) stateStyle = leaf.states[stateName];
|
|
170
149
|
setStyle(leaf, stateStyle);
|
|
171
|
-
if (leaf.button)
|
|
172
|
-
setChildrenState(leaf.children, null, stateName);
|
|
150
|
+
if (leaf.button) setChildrenState(leaf.children, null, stateName);
|
|
173
151
|
}
|
|
152
|
+
|
|
174
153
|
function setChildrenState(children, stateType, stateName) {
|
|
175
|
-
if (!children)
|
|
176
|
-
return;
|
|
154
|
+
if (!children) return;
|
|
177
155
|
let leaf, update;
|
|
178
156
|
for (let i = 0, len = children.length; i < len; i++) {
|
|
179
157
|
leaf = children[i];
|
|
180
158
|
if (stateType) {
|
|
181
159
|
update = true;
|
|
182
160
|
switch (stateType) {
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
update = false;
|
|
161
|
+
case "hoverStyle":
|
|
162
|
+
if (State.isHover(leaf)) update = false;
|
|
163
|
+
break;
|
|
164
|
+
|
|
165
|
+
case "pressStyle":
|
|
166
|
+
if (State.isPress(leaf)) update = false;
|
|
167
|
+
break;
|
|
168
|
+
|
|
169
|
+
case "focusStyle":
|
|
170
|
+
if (State.isFocus(leaf)) update = false;
|
|
194
171
|
}
|
|
195
|
-
if (update)
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
else if (stateName !== undefined)
|
|
199
|
-
setState(leaf, stateName);
|
|
200
|
-
if (leaf.isBranch)
|
|
201
|
-
setChildrenState(leaf.children, stateType, stateName);
|
|
172
|
+
if (update) setPointerState(leaf, stateType);
|
|
173
|
+
} else if (!isUndefined(stateName)) setState(leaf, stateName);
|
|
174
|
+
if (leaf.isBranch) setChildrenState(leaf.children, stateType, stateName);
|
|
202
175
|
}
|
|
203
176
|
}
|
|
204
177
|
|
|
205
178
|
function unsetPointerState(leaf, stateName) {
|
|
206
179
|
const style = leaf[stateName];
|
|
207
|
-
if (style)
|
|
208
|
-
|
|
209
|
-
if (leaf.button)
|
|
210
|
-
unsetChildrenState(leaf.children, stateName);
|
|
180
|
+
if (style) unsetStyle(leaf, style);
|
|
181
|
+
if (leaf.button) unsetChildrenState(leaf.children, stateName);
|
|
211
182
|
}
|
|
183
|
+
|
|
212
184
|
function unsetState(leaf, stateName, stateStyle) {
|
|
213
185
|
unsetStyle(leaf, stateStyle);
|
|
214
|
-
if (leaf.button)
|
|
215
|
-
unsetChildrenState(leaf.children, null, stateName);
|
|
186
|
+
if (leaf.button) unsetChildrenState(leaf.children, null, stateName);
|
|
216
187
|
}
|
|
188
|
+
|
|
217
189
|
function unsetChildrenState(children, stateType, stateName) {
|
|
218
|
-
if (!children)
|
|
219
|
-
return;
|
|
190
|
+
if (!children) return;
|
|
220
191
|
let leaf;
|
|
221
192
|
for (let i = 0, len = children.length; i < len; i++) {
|
|
222
193
|
leaf = children[i];
|
|
223
|
-
if (stateType)
|
|
224
|
-
|
|
225
|
-
else if (stateName !== undefined)
|
|
226
|
-
unsetState(leaf, stateName);
|
|
227
|
-
if (leaf.isBranch)
|
|
228
|
-
unsetChildrenState(leaf.children, stateType, stateName);
|
|
194
|
+
if (stateType) unsetPointerState(leaf, stateType); else if (!isUndefined(stateName)) unsetState(leaf, stateName);
|
|
195
|
+
if (leaf.isBranch) unsetChildrenState(leaf.children, stateType, stateName);
|
|
229
196
|
}
|
|
230
197
|
}
|
|
231
198
|
|
|
232
199
|
function updateEventStyle(leaf, eventType) {
|
|
233
200
|
switch (eventType) {
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
201
|
+
case PointerEvent.ENTER:
|
|
202
|
+
setPointerState(leaf, "hoverStyle");
|
|
203
|
+
break;
|
|
204
|
+
|
|
205
|
+
case PointerEvent.LEAVE:
|
|
206
|
+
unsetPointerState(leaf, "hoverStyle");
|
|
207
|
+
break;
|
|
208
|
+
|
|
209
|
+
case PointerEvent.DOWN:
|
|
210
|
+
setPointerState(leaf, "pressStyle");
|
|
211
|
+
break;
|
|
212
|
+
|
|
213
|
+
case PointerEvent.UP:
|
|
214
|
+
unsetPointerState(leaf, "pressStyle");
|
|
215
|
+
break;
|
|
246
216
|
}
|
|
247
217
|
}
|
|
248
218
|
|
|
@@ -253,32 +223,32 @@ function checkPointerState(fnName, leaf, button) {
|
|
|
253
223
|
find = interaction[fnName](leaf);
|
|
254
224
|
if (!find && button) {
|
|
255
225
|
const parentButton = findParentButton(leaf, button);
|
|
256
|
-
if (parentButton)
|
|
257
|
-
find = interaction[fnName](parentButton);
|
|
226
|
+
if (parentButton) find = interaction[fnName](parentButton);
|
|
258
227
|
}
|
|
259
228
|
}
|
|
260
229
|
return find;
|
|
261
230
|
}
|
|
231
|
+
|
|
262
232
|
function checkFixedState(attrName, leaf, button) {
|
|
263
233
|
let find = leaf[attrName];
|
|
264
234
|
if (!find && button) {
|
|
265
235
|
const parentButton = findParentButton(leaf, button);
|
|
266
|
-
if (parentButton)
|
|
267
|
-
find = parentButton[attrName];
|
|
236
|
+
if (parentButton) find = parentButton[attrName];
|
|
268
237
|
}
|
|
269
238
|
return find;
|
|
270
239
|
}
|
|
240
|
+
|
|
271
241
|
function checkState(stateName, leaf, button) {
|
|
272
242
|
let find = leaf.states[stateName];
|
|
273
243
|
if (!find && button) {
|
|
274
244
|
const parentButton = findParentButton(leaf, button);
|
|
275
|
-
if (parentButton)
|
|
276
|
-
find = parentButton.states[stateName];
|
|
245
|
+
if (parentButton) find = parentButton.states[stateName];
|
|
277
246
|
}
|
|
278
247
|
return !!find;
|
|
279
248
|
}
|
|
280
249
|
|
|
281
|
-
Plugin.add(
|
|
250
|
+
Plugin.add("state");
|
|
251
|
+
|
|
282
252
|
State.animateExcludes = {
|
|
283
253
|
animation: 1,
|
|
284
254
|
animationOut: 1,
|
|
@@ -295,57 +265,106 @@ State.animateExcludes = {
|
|
|
295
265
|
disabledStyle: 1,
|
|
296
266
|
placeholderStyle: 1
|
|
297
267
|
};
|
|
298
|
-
|
|
299
|
-
State.
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
State.
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
State.
|
|
268
|
+
|
|
269
|
+
State.isState = function(state, leaf, button) {
|
|
270
|
+
return checkState(state, leaf, button);
|
|
271
|
+
};
|
|
272
|
+
|
|
273
|
+
State.isSelected = function(leaf, button) {
|
|
274
|
+
return checkFixedState("selected", leaf, button);
|
|
275
|
+
};
|
|
276
|
+
|
|
277
|
+
State.isDisabled = function(leaf, button) {
|
|
278
|
+
return checkFixedState("disabled", leaf, button);
|
|
279
|
+
};
|
|
280
|
+
|
|
281
|
+
State.isFocus = function(leaf, button) {
|
|
282
|
+
return checkPointerState("isFocus", leaf, button);
|
|
283
|
+
};
|
|
284
|
+
|
|
285
|
+
State.isHover = function(leaf, button) {
|
|
286
|
+
return checkPointerState("isHover", leaf, button);
|
|
287
|
+
};
|
|
288
|
+
|
|
289
|
+
State.isPress = function(leaf, button) {
|
|
290
|
+
return checkPointerState("isPress", leaf, button);
|
|
291
|
+
};
|
|
292
|
+
|
|
293
|
+
State.isPlacehold = function(leaf, _button) {
|
|
294
|
+
return leaf.__.__isPlacehold;
|
|
295
|
+
};
|
|
296
|
+
|
|
297
|
+
State.isDrag = function(leaf, button) {
|
|
298
|
+
return checkPointerState("isDrag", leaf, button);
|
|
299
|
+
};
|
|
300
|
+
|
|
301
|
+
State.setStyleName = function(leaf, stateType, value) {
|
|
302
|
+
value ? setState(leaf, stateType, leaf[stateType]) : unsetState(leaf, stateType, leaf[stateType]);
|
|
303
|
+
};
|
|
304
|
+
|
|
305
|
+
State.set = function(leaf, stateName) {
|
|
306
|
+
const style = leaf.states[stateName];
|
|
307
|
+
style ? setState(leaf, stateName, style) : unsetState(leaf, stateName, style);
|
|
308
|
+
};
|
|
309
|
+
|
|
308
310
|
State.getStyle = getStyle;
|
|
311
|
+
|
|
309
312
|
State.updateStyle = updateStyle;
|
|
313
|
+
|
|
310
314
|
State.updateEventStyle = updateEventStyle;
|
|
315
|
+
|
|
311
316
|
const ui = UI.prototype;
|
|
312
|
-
|
|
313
|
-
UI.addAttr(
|
|
314
|
-
|
|
315
|
-
UI.addAttr(
|
|
316
|
-
|
|
317
|
-
UI.addAttr(
|
|
318
|
-
|
|
319
|
-
UI.addAttr(
|
|
320
|
-
|
|
321
|
-
UI.addAttr(
|
|
322
|
-
|
|
323
|
-
UI.addAttr(
|
|
324
|
-
|
|
317
|
+
|
|
318
|
+
UI.addAttr("selected", false, stateType, "selectedStyle");
|
|
319
|
+
|
|
320
|
+
UI.addAttr("disabled", false, stateType, "disabledStyle");
|
|
321
|
+
|
|
322
|
+
UI.addAttr("states", {}, stateStyleType);
|
|
323
|
+
|
|
324
|
+
UI.addAttr("state", "", stateType);
|
|
325
|
+
|
|
326
|
+
UI.addAttr("normalStyle", undefined, dataType);
|
|
327
|
+
|
|
328
|
+
UI.addAttr("hoverStyle", undefined, stateStyleType);
|
|
329
|
+
|
|
330
|
+
UI.addAttr("pressStyle", undefined, stateStyleType);
|
|
331
|
+
|
|
332
|
+
UI.addAttr("focusStyle", undefined, stateStyleType);
|
|
333
|
+
|
|
334
|
+
UI.addAttr("selectedStyle", undefined, stateStyleType);
|
|
335
|
+
|
|
336
|
+
UI.addAttr("disabledStyle", undefined, stateStyleType);
|
|
337
|
+
|
|
338
|
+
UI.addAttr("placeholderStyle", undefined, stateStyleType);
|
|
339
|
+
|
|
340
|
+
UI.addAttr("button", false, dataType);
|
|
341
|
+
|
|
342
|
+
ui.focus = function(value = true) {
|
|
325
343
|
this.waitLeafer(() => {
|
|
326
|
-
let { focusData
|
|
344
|
+
let {focusData: focusData} = this.app.interaction;
|
|
327
345
|
if (value) {
|
|
328
|
-
if (focusData)
|
|
329
|
-
focusData.focus(false);
|
|
346
|
+
if (focusData) focusData.focus(false);
|
|
330
347
|
focusData = this;
|
|
331
|
-
}
|
|
332
|
-
else
|
|
333
|
-
focusData = null;
|
|
348
|
+
} else focusData = null;
|
|
334
349
|
this.app.interaction.focusData = focusData;
|
|
335
|
-
value ? setPointerState(this,
|
|
350
|
+
value ? setPointerState(this, "focusStyle") : unsetPointerState(this, "focusStyle");
|
|
336
351
|
});
|
|
337
352
|
};
|
|
338
|
-
|
|
339
|
-
|
|
353
|
+
|
|
354
|
+
ui.updateState = function() {
|
|
355
|
+
State.updateStyle(this, undefined, "in");
|
|
340
356
|
};
|
|
341
|
-
|
|
342
|
-
|
|
357
|
+
|
|
358
|
+
const text = Text.prototype, textKey = "text";
|
|
359
|
+
|
|
360
|
+
defineKey(text, textKey, Object.assign(Object.assign({}, getDescriptor(text, textKey)), {
|
|
361
|
+
set(value) {
|
|
343
362
|
const t = this, oldValue = t.text;
|
|
344
363
|
if (t.__setAttr(textKey, value)) {
|
|
345
364
|
doBoundsType(t);
|
|
346
|
-
if (t.placeholderStyle && t.placeholder && (oldValue ===
|
|
347
|
-
t.__layout.stateStyleChanged = true;
|
|
365
|
+
if (t.placeholderStyle && t.placeholder && (oldValue === "" || value === "")) t.__layout.stateStyleChanged = true;
|
|
348
366
|
}
|
|
349
|
-
}
|
|
367
|
+
}
|
|
368
|
+
}));
|
|
350
369
|
|
|
351
370
|
export { stateStyleType, stateType };
|
package/dist/state.esm.min.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{decorateLeafAttr as t,attr as e,State as n,MathHelper as s,
|
|
1
|
+
import{decorateLeafAttr as t,attr as e,State as n,MathHelper as s,isObject as i,isNull as o,isUndefined as l,PointerEvent as a,Plugin as r,UI as c,dataType as u,Text as d,defineKey as f,getDescriptor as y,doBoundsType as S}from"@leafer-ui/core";function h(s,i){return t(s,t=>e({set(e){this.__setAttr(t,e),this.leaferIsReady?i?n.setStyleName(this,i,e):n.set(this,e):this.__layout.stateStyleChanged=!0}}))}function p(n){return t(n,t=>e({set(e){this.__setAttr(t,e),this.__layout.stateStyleChanged=!0}}))}function m(t,e){if(e&&!0!==e)return e;if(!t.button){let{parent:e}=t;for(let t=0;t<2;t++)if(e){if(e.button)return e;e=e.parent}}return null}function v(t,e){i(e)||(e=void 0),_(t,e,"in")}function b(t,e){const{normalStyle:n}=t;i(e)||(e=void 0),n&&(e||(e=n),_(t,e,"out"))}const A={};function _(t,e,i){const{normalStyle:l}=t;e||(e=A),e.scale&&(s.assignScale(e,e.scale),delete e.scale),e!==A&&n.canAnimate||(i=null);let a=!!i&&function(t,e,n){let s="in"===t?"transition":"transitionOut";"out"===t&&o(n[s])&&o(e[s])&&(s="transition");return o(e[s])?n[s]:e[s]}(i,e,t);const r=a?function(t,e){const n=P(e,t),s=t.animate();s&&P(n,t,s.fromStyle);return n}(t,e):void 0;n.canAnimate&&g(t)&&t.killAnimate("transition"),l&&t.set(l,"temp");const c=g(t);if(c){const{animation:n}=c;if(n){const s=t.animate(n,void 0,"animation",!0);Object.assign(c,s.endingStyle),"in"!==i||e.animation!==n?s.kill():a=!1,delete c.animation}t.normalStyle=O(c,t),t.set(c,"temp")}else t.normalStyle=void 0;if(a){const e=O(r,t);t.set(r,"temp"),t.animate([r,e],a,"transition",!0)}t.__layout.stateStyleChanged=!1}function g(t){let e;const s={},i=m(t),o=i?t.state||i.state:t.state,l=o&&t.states[o];l&&n.isState(o,t,i)&&(e=k(s,l));const a=s.selectedStyle||t.selectedStyle;a&&n.isSelected(t,i)&&(e=k(s,a));const r=s.placeholderStyle||t.placeholderStyle;if(r&&n.isPlacehold(t,i)&&(e=k(s,r)),n.isDisabled(t,i)){const n=s.disabledStyle||t.disabledStyle;n&&(e=k(s,n))}else{const o=s.focusStyle||t.focusStyle;o&&n.isFocus(t,i)&&(e=k(s,o));const l=s.hoverStyle||t.hoverStyle;l&&n.isHover(t,i)&&(e=k(s,l));const a=s.pressStyle||t.pressStyle;a&&n.isPress(t,i)&&(e=k(s,a))}return e?s:void 0}function O(t,e,s,i){const o=s?t:{},l=s||t;for(let t in l)i&&n.animateExcludes[t]||(o[t]=e[t]);return o}function P(t,e,n){return O(t,e,n,!0)}function k(t,e){return Object.assign(t,e),!0}function D(t,e){const n=t[e];n&&v(t,n),t.button&&x(t.children,e)}function E(t,e,n){n||(n=t.states[e]),v(t,n),t.button&&x(t.children,null,e)}function x(t,e,s){if(!t)return;let i,o;for(let a=0,r=t.length;a<r;a++){if(i=t[a],e){switch(o=!0,e){case"hoverStyle":n.isHover(i)&&(o=!1);break;case"pressStyle":n.isPress(i)&&(o=!1);break;case"focusStyle":n.isFocus(i)&&(o=!1)}o&&D(i,e)}else l(s)||E(i,s);i.isBranch&&x(i.children,e,s)}}function j(t,e){const n=t[e];n&&b(t,n),t.button&&F(t.children,e)}function C(t,e,n){b(t,n),t.button&&F(t.children,null,e)}function F(t,e,n){if(!t)return;let s;for(let i=0,o=t.length;i<o;i++)s=t[i],e?j(s,e):l(n)||C(s,n),s.isBranch&&F(s.children,e,n)}function H(t,e,n){let s;const i=e.leafer?e.leafer.interaction:null;if(i&&(s=i[t](e),!s&&n)){const o=m(e,n);o&&(s=i[t](o))}return s}function N(t,e,n){let s=e[t];if(!s&&n){const i=m(e,n);i&&(s=i[t])}return s}r.add("state"),n.animateExcludes={animation:1,animationOut:1,transition:1,transitionOut:1,states:1,state:1,placeholder:1,normalStyle:1,hoverStyle:1,pressStyle:1,focusStyle:1,selectedStyle:1,disabledStyle:1,placeholderStyle:1},n.isState=function(t,e,n){return function(t,e,n){let s=e.states[t];if(!s&&n){const i=m(e,n);i&&(s=i.states[t])}return!!s}(t,e,n)},n.isSelected=function(t,e){return N("selected",t,e)},n.isDisabled=function(t,e){return N("disabled",t,e)},n.isFocus=function(t,e){return H("isFocus",t,e)},n.isHover=function(t,e){return H("isHover",t,e)},n.isPress=function(t,e){return H("isPress",t,e)},n.isPlacehold=function(t,e){return t.__.__isPlacehold},n.isDrag=function(t,e){return H("isDrag",t,e)},n.setStyleName=function(t,e,n){n?E(t,e,t[e]):C(t,e,t[e])},n.set=function(t,e){const n=t.states[e];n?E(t,e,n):C(t,e,n)},n.getStyle=g,n.updateStyle=_,n.updateEventStyle=function(t,e){switch(e){case a.ENTER:D(t,"hoverStyle");break;case a.LEAVE:j(t,"hoverStyle");break;case a.DOWN:D(t,"pressStyle");break;case a.UP:j(t,"pressStyle")}};const w=c.prototype;c.addAttr("selected",!1,h,"selectedStyle"),c.addAttr("disabled",!1,h,"disabledStyle"),c.addAttr("states",{},p),c.addAttr("state","",h),c.addAttr("normalStyle",void 0,u),c.addAttr("hoverStyle",void 0,p),c.addAttr("pressStyle",void 0,p),c.addAttr("focusStyle",void 0,p),c.addAttr("selectedStyle",void 0,p),c.addAttr("disabledStyle",void 0,p),c.addAttr("placeholderStyle",void 0,p),c.addAttr("button",!1,u),w.focus=function(t=!0){this.waitLeafer(()=>{let{focusData:e}=this.app.interaction;t?(e&&e.focus(!1),e=this):e=null,this.app.interaction.focusData=e,t?D(this,"focusStyle"):j(this,"focusStyle")})},w.updateState=function(){n.updateStyle(this,void 0,"in")};const B=d.prototype,L="text";f(B,L,Object.assign(Object.assign({},y(B,L)),{set(t){const e=this,n=e.text;e.__setAttr(L,t)&&(S(e),e.placeholderStyle&&e.placeholder&&(""===n||""===t)&&(e.__layout.stateStyleChanged=!0))}}));export{p as stateStyleType,h as stateType};
|
|
2
2
|
//# sourceMappingURL=state.esm.min.js.map
|