@realnation/builder-shared-sdk 2.0.0 → 2.1.0
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.
|
@@ -48,16 +48,32 @@ export interface InteractionStyle {
|
|
|
48
48
|
export type StyleKeyCase = 'camel' | 'kebab';
|
|
49
49
|
/** Rewrites the compound property names; transition / transform / opacity are already valid CSS. */
|
|
50
50
|
export declare function toKebabStyle(style: InteractionStyle): InteractionStyle;
|
|
51
|
+
/** Whether the operator configured any second appearance at all. Untouched keys are absent. */
|
|
52
|
+
export declare function hasSelectedAppearance(property: InteractionProperty | null | undefined): boolean;
|
|
53
|
+
export interface InteractionEnabledOptions {
|
|
54
|
+
/**
|
|
55
|
+
* The caller decides when the element is selected, so the trigger has nothing
|
|
56
|
+
* to decide for it. Inferred from passing an explicit `active` to style().
|
|
57
|
+
*/
|
|
58
|
+
selfDriven?: boolean;
|
|
59
|
+
}
|
|
51
60
|
/**
|
|
52
61
|
* Whether the element has an interaction state at all.
|
|
53
62
|
*
|
|
54
|
-
*
|
|
55
|
-
* question
|
|
56
|
-
* the change looks like once something
|
|
57
|
-
*
|
|
58
|
-
*
|
|
63
|
+
* For elements the platform drives, the trigger is the master switch: it
|
|
64
|
+
* answers the first question, does this element react to anything? Easing only
|
|
65
|
+
* describes what the change looks like once something triggers it.
|
|
66
|
+
*
|
|
67
|
+
* For an element whose owner supplies its own `active` — personality-test's
|
|
68
|
+
* options, where "selected" means the answer the player picked — the trigger
|
|
69
|
+
* has nothing left to decide, and making the operator pick an arbitrary one
|
|
70
|
+
* just to switch the section on would be a riddle. There the switch is simply
|
|
71
|
+
* whether a second appearance was configured.
|
|
72
|
+
*
|
|
73
|
+
* Either way an element nobody configured behaves exactly as it did before
|
|
74
|
+
* this feature existed. Every entry point checks this first.
|
|
59
75
|
*/
|
|
60
|
-
export declare function isInteractionEnabled(property: InteractionProperty | null | undefined): boolean;
|
|
76
|
+
export declare function isInteractionEnabled(property: InteractionProperty | null | undefined, options?: InteractionEnabledOptions): boolean;
|
|
61
77
|
export declare function interactionTriggerOf(property: InteractionProperty | null | undefined): InteractionTrigger;
|
|
62
78
|
export declare function interactionDurationOf(property: InteractionProperty | null | undefined): number;
|
|
63
79
|
/**
|
|
@@ -76,6 +92,8 @@ export interface InteractionStyleOptions {
|
|
|
76
92
|
instant?: boolean;
|
|
77
93
|
/** Key style of the returned object. Defaults to camelCase. */
|
|
78
94
|
keys?: StyleKeyCase;
|
|
95
|
+
/** See isInteractionEnabled. Set by style() when the caller supplies `active`. */
|
|
96
|
+
selfDriven?: boolean;
|
|
79
97
|
}
|
|
80
98
|
/**
|
|
81
99
|
* The style to merge onto an element for a given state.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/interaction/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,wEAAwE;AACxE,eAAO,MAAM,gBAAgB;;;;;;;;;;CAUnB,CAAC;AAEX,uFAAuF;AACvF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChF,eAAO,MAAM,oBAAoB,EAAE,SAAS,kBAAkB,EAAiD,CAAC;AAEhH,uFAAuF;AACvF,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE1D;;;;;;;GAOG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iFAAiF;IACjF,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAC3C;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,OAAO,CAAC;AAO7C,oGAAoG;AACpG,wBAAgB,YAAY,CAAC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,CAItE;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/interaction/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,wEAAwE;AACxE,eAAO,MAAM,gBAAgB;;;;;;;;;;CAUnB,CAAC;AAEX,uFAAuF;AACvF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChF,eAAO,MAAM,oBAAoB,EAAE,SAAS,kBAAkB,EAAiD,CAAC;AAEhH,uFAAuF;AACvF,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE1D;;;;;;;GAOG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iFAAiF;IACjF,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAC3C;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,OAAO,CAAC;AAO7C,oGAAoG;AACpG,wBAAgB,YAAY,CAAC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,CAItE;AAeD,+FAA+F;AAC/F,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAG/F;AAED,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAChD,OAAO,GAAE,yBAA8B,GACtC,OAAO,CAGT;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,kBAAkB,CAGzG;AAED,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAE9F;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAG5F;AAED,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAChD,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,uBAA4B,GACpC,gBAAgB,CAsClB"}
|
|
@@ -39,16 +39,38 @@ const num = (value, fallback) => {
|
|
|
39
39
|
const n = Number(value);
|
|
40
40
|
return Number.isFinite(n) ? n : fallback;
|
|
41
41
|
};
|
|
42
|
+
const SELECTED_APPEARANCE_KEYS = [
|
|
43
|
+
INTERACTION_KEYS.bgColor,
|
|
44
|
+
INTERACTION_KEYS.borderColor,
|
|
45
|
+
INTERACTION_KEYS.rotation,
|
|
46
|
+
INTERACTION_KEYS.scale,
|
|
47
|
+
INTERACTION_KEYS.opacity,
|
|
48
|
+
];
|
|
49
|
+
/** Whether the operator configured any second appearance at all. Untouched keys are absent. */
|
|
50
|
+
export function hasSelectedAppearance(property) {
|
|
51
|
+
if (!property)
|
|
52
|
+
return false;
|
|
53
|
+
return SELECTED_APPEARANCE_KEYS.some((k) => property[k] != null && property[k] !== '');
|
|
54
|
+
}
|
|
42
55
|
/**
|
|
43
56
|
* Whether the element has an interaction state at all.
|
|
44
57
|
*
|
|
45
|
-
*
|
|
46
|
-
* question
|
|
47
|
-
* the change looks like once something
|
|
48
|
-
*
|
|
49
|
-
*
|
|
58
|
+
* For elements the platform drives, the trigger is the master switch: it
|
|
59
|
+
* answers the first question, does this element react to anything? Easing only
|
|
60
|
+
* describes what the change looks like once something triggers it.
|
|
61
|
+
*
|
|
62
|
+
* For an element whose owner supplies its own `active` — personality-test's
|
|
63
|
+
* options, where "selected" means the answer the player picked — the trigger
|
|
64
|
+
* has nothing left to decide, and making the operator pick an arbitrary one
|
|
65
|
+
* just to switch the section on would be a riddle. There the switch is simply
|
|
66
|
+
* whether a second appearance was configured.
|
|
67
|
+
*
|
|
68
|
+
* Either way an element nobody configured behaves exactly as it did before
|
|
69
|
+
* this feature existed. Every entry point checks this first.
|
|
50
70
|
*/
|
|
51
|
-
export function isInteractionEnabled(property) {
|
|
71
|
+
export function isInteractionEnabled(property, options = {}) {
|
|
72
|
+
if (options.selfDriven)
|
|
73
|
+
return hasSelectedAppearance(property);
|
|
52
74
|
return interactionTriggerOf(property) !== 'none';
|
|
53
75
|
}
|
|
54
76
|
export function interactionTriggerOf(property) {
|
|
@@ -78,7 +100,7 @@ export function interactionPeriodOf(property) {
|
|
|
78
100
|
* an unset colour must inherit the normal appearance rather than reset it.
|
|
79
101
|
*/
|
|
80
102
|
export function interactionStyle(property, active, options = {}) {
|
|
81
|
-
if (!isInteractionEnabled(property))
|
|
103
|
+
if (!isInteractionEnabled(property, { selfDriven: options.selfDriven }))
|
|
82
104
|
return {};
|
|
83
105
|
const bag = property;
|
|
84
106
|
// An instant change is still expressible: set the duration to zero. Easing
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/interaction/vue.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEtF,wFAAwF;AACxF,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAC;CAClD;AAED,MAAM,WAAW,0BAA0B;IACzC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACnD,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IACrC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,KAAK,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACzG,oFAAoF;IACpF,IAAI,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC;IAChG;;;;;;OAMG;IACH,IAAI,CAAC,OAAO,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;IACxC,oEAAoE;IACpE,IAAI,IAAI,IAAI,CAAC;IACb,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;CAC3C;AAUD,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,0BAA+B,GAAG,mBAAmB,
|
|
1
|
+
{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/interaction/vue.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEtF,wFAAwF;AACxF,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAC;CAClD;AAED,MAAM,WAAW,0BAA0B;IACzC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACnD,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IACrC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,KAAK,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACzG,oFAAoF;IACpF,IAAI,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC;IAChG;;;;;;OAMG;IACH,IAAI,CAAC,OAAO,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;IACxC,oEAAoE;IACpE,IAAI,IAAI,IAAI,CAAC;IACb,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;CAC3C;AAUD,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,0BAA+B,GAAG,mBAAmB,CAoFjG"}
|
package/dist/interaction/vue.js
CHANGED
|
@@ -46,7 +46,13 @@ export function useInteractionState(options = {}) {
|
|
|
46
46
|
const api = {
|
|
47
47
|
style(property, key, forced) {
|
|
48
48
|
const on = forced ?? active[key] ?? false;
|
|
49
|
-
|
|
49
|
+
// Passing `active` at all is the declaration: this caller owns the timing,
|
|
50
|
+
// so the configured trigger is not what decides whether the state exists.
|
|
51
|
+
return interactionStyle(property, on, {
|
|
52
|
+
instant: instant[key] === true,
|
|
53
|
+
keys: options.keys,
|
|
54
|
+
selfDriven: forced !== undefined,
|
|
55
|
+
});
|
|
50
56
|
},
|
|
51
57
|
bind(property, key) {
|
|
52
58
|
if (!isInteractionEnabled(property))
|