@leafer-in/state 1.0.1 → 1.0.3

package/dist/state.esm.js

@@ -1,92 +1,314 @@
-import { State, PointerEvent, UI } from '@leafer-ui/core';
+import { decorateLeafAttr, attr, State } from '@leafer-ui/draw';
+import { MathHelper, State as State$1, isNull, PointerEvent, UI, dataType } from '@leafer-ui/core';
 
-function hasFixedState(leaf) {
-    return leaf.selected || leaf.disabled || State.isFocus(leaf);
-}
-function restoreStyle(leaf) {
-    const style = leaf.__.normalStyle;
-    if (style) {
-        leaf.set(style);
-        leaf.__.normalStyle = undefined;
+function stateType(defaultValue, styleName) {
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            this.waitLeafer(() => styleName ? State.setStyleName(this, styleName, value) : State.set(this, value));
+        }
+    }));
+}
+function stateStyleType(defaultValue) {
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            this.__layout.stateStyleChanged = true;
+        }
+    }));
+}
+
+function findParentButton(leaf, button) {
+    if (button && button !== true)
+        return button;
+    if (!leaf.button) {
+        let { parent } = leaf;
+        for (let i = 0; i < 2; i++) {
+            if (parent) {
+                if (parent.button)
+                    return parent;
+                parent = parent.parent;
+            }
+        }
     }
+    return null;
 }
 
-function setStateStyle(leaf, stateType, pointerState) {
-    let style;
-    const data = leaf.__;
-    if (pointerState) {
-        style = !hasFixedState(leaf) && data[stateType];
+function setStyle(leaf, style) {
+    if (typeof style !== 'object')
+        style = undefined;
+    updateStyle(leaf, style, 'in');
+}
+function unsetStyle(leaf, style) {
+    const { normalStyle } = leaf;
+    if (typeof style !== 'object')
+        style = undefined;
+    if (normalStyle) {
+        if (!style)
+            style = normalStyle;
+        updateStyle(leaf, style, 'out');
     }
-    else {
-        switch (stateType) {
-            case 'disabledStyle':
-                style = data[stateType];
-                break;
-            case 'focusStyle':
-                style = !leaf.disabled && data[stateType];
-                break;
-            case 'selectedStyle':
-                style = !leaf.disabled && !State.isFocus(leaf) && data[stateType];
-                break;
+}
+const emprtyStyle = {};
+function updateStyle(leaf, style, type) {
+    const { normalStyle } = leaf;
+    if (!style)
+        style = emprtyStyle;
+    if (style.scale) {
+        MathHelper.assignScale(style, style.scale);
+        delete style.scale;
+    }
+    if (style === emprtyStyle || !State$1.canAnimate)
+        type = null;
+    let transition = type ? getTransition(type, style, leaf) : false;
+    const fromStyle = transition ? getFromStyle(leaf, style) : undefined;
+    leaf.killAnimate('transition');
+    if (normalStyle)
+        leaf.set(normalStyle, true);
+    const statesStyle = getStyle(leaf);
+    if (statesStyle) {
+        const { animation } = statesStyle;
+        if (animation) {
+            const animate = leaf.animate(animation, undefined, 'animation', true);
+            Object.assign(statesStyle, animate.endingStyle);
+            if (type !== 'in' || style.animation !== animation)
+                animate.kill();
+            else
+                transition = false;
+            delete statesStyle.animation;
         }
+        leaf.normalStyle = filterStyle(statesStyle, leaf);
+        leaf.set(statesStyle, true);
+    }
+    else {
+        leaf.normalStyle = undefined;
     }
-    if (style) {
-        restoreStyle(leaf);
-        leaf.__.normalStyle = leaf.get(style);
-        leaf.set(style);
+    if (transition) {
+        const toStyle = filterStyle(fromStyle, leaf);
+        leaf.set(fromStyle, true);
+        leaf.animate([fromStyle, toStyle], transition, 'transition', true);
     }
+    leaf.__layout.stateStyleChanged = false;
 }
-
-function unsetStateStyle(leaf, _stateType, pointerState) {
-    if (pointerState) {
-        if (!hasFixedState(leaf)) {
-            restoreStyle(leaf);
-            if (State.isPress(leaf) && leaf.pressStyle) {
-                setStateStyle(leaf, 'pressStyle', true);
-            }
-            else if (State.isHover(leaf) && leaf.hoverStyle) {
-                setStateStyle(leaf, 'hoverStyle', true);
-            }
-        }
+function getStyle(leaf) {
+    let exist;
+    const style = {}, { state } = leaf, button = findParentButton(leaf);
+    const stateStyle = state && leaf.states[state];
+    if (stateStyle && State$1.isState(state, leaf, button))
+        exist = assign(style, stateStyle);
+    const selectedStyle = style.selectedStyle || leaf.selectedStyle;
+    if (selectedStyle && State$1.isSelected(leaf, button))
+        exist = assign(style, selectedStyle);
+    if (State$1.isDisabled(leaf, button)) {
+        const disabledStyle = style.disabledStyle || leaf.disabledStyle;
+        if (disabledStyle)
+            exist = assign(style, disabledStyle);
     }
     else {
-        restoreStyle(leaf);
-        if (leaf.disabledStyle && leaf.disabled) {
-            setStateStyle(leaf, 'disabledStyle');
-        }
-        else if (leaf.focusStyle && State.isFocus(leaf)) {
-            setStateStyle(leaf, 'focusStyle');
+        const focusStyle = style.focusStyle || leaf.focusStyle;
+        if (focusStyle && State$1.isFocus(leaf, button))
+            exist = assign(style, focusStyle);
+        const hoverStyle = style.hoverStyle || leaf.hoverStyle;
+        if (hoverStyle && State$1.isHover(leaf, button))
+            exist = assign(style, hoverStyle);
+        const pressStyle = style.pressStyle || leaf.pressStyle;
+        if (pressStyle && State$1.isPress(leaf, button))
+            exist = assign(style, pressStyle);
+    }
+    return exist ? style : undefined;
+}
+function filterStyle(style, data, addStyle, useAnimateExcludes) {
+    const to = addStyle ? style : {}, forStyle = addStyle || style;
+    for (let key in forStyle) {
+        if (useAnimateExcludes) {
+            if (!State$1.animateExcludes[key])
+                to[key] = data[key];
         }
-        else if (leaf.selectedStyle && leaf.selected) {
-            setStateStyle(leaf, 'selectedStyle');
+        else
+            to[key] = data[key];
+    }
+    return to;
+}
+function filterAnimateStyle(style, data, addStyle) {
+    return filterStyle(style, data, addStyle, true);
+}
+function getFromStyle(leaf, style) {
+    const fromStyle = filterAnimateStyle(style, leaf), animate = leaf.animate();
+    if (animate)
+        filterAnimateStyle(fromStyle, leaf, animate.fromStyle);
+    return fromStyle;
+}
+function getTransition(type, style, data) {
+    let name = type === 'in' ? 'transition' : 'transitionOut';
+    if (type === 'out' && isNull(data[name]) && isNull(style[name]))
+        name = 'transition';
+    return isNull(style[name]) ? data[name] : style[name];
+}
+function assign(style, stateStyle) {
+    Object.assign(style, stateStyle);
+    return true;
+}
+
+function setPointerState(leaf, stateName) {
+    const style = leaf[stateName];
+    if (style)
+        setStyle(leaf, style);
+    if (leaf.button)
+        setChildrenState(leaf.children, stateName);
+}
+function setState(leaf, stateName, stateStyle) {
+    if (!stateStyle)
+        stateStyle = leaf.states[stateName];
+    setStyle(leaf, stateStyle);
+    if (leaf.button)
+        setChildrenState(leaf.children, null, stateName);
+}
+function setChildrenState(children, stateType, state) {
+    if (!children)
+        return;
+    let leaf, update;
+    for (let i = 0, len = children.length; i < len; i++) {
+        leaf = children[i];
+        if (stateType) {
+            update = true;
+            switch (stateType) {
+                case 'hoverStyle':
+                    if (State$1.isHover(leaf))
+                        update = false;
+                    break;
+                case 'pressStyle':
+                    if (State$1.isPress(leaf))
+                        update = false;
+                    break;
+                case 'focusStyle':
+                    if (State$1.isFocus(leaf))
+                        update = false;
+            }
+            if (update)
+                setPointerState(leaf, stateType);
         }
+        else if (state)
+            setState(leaf, state);
+        if (leaf.isBranch)
+            setChildrenState(leaf.children, stateType, state);
+    }
+}
+
+function unsetPointerState(leaf, stateName) {
+    const style = leaf[stateName];
+    if (style)
+        unsetStyle(leaf, style);
+    if (leaf.button)
+        unsetChildrenState(leaf.children, stateName);
+}
+function unsetState(leaf, stateName, stateStyle) {
+    unsetStyle(leaf, stateStyle);
+    if (leaf.button)
+        unsetChildrenState(leaf.children, null, stateName);
+}
+function unsetChildrenState(children, stateType, state) {
+    if (!children)
+        return;
+    let leaf;
+    for (let i = 0, len = children.length; i < len; i++) {
+        leaf = children[i];
+        if (stateType)
+            unsetPointerState(leaf, stateType);
+        else if (state)
+            unsetState(leaf, state);
+        if (leaf.isBranch)
+            unsetChildrenState(leaf.children, stateType, state);
     }
 }
 
 function updateEventStyle(leaf, eventType) {
     switch (eventType) {
         case PointerEvent.ENTER:
-            setStateStyle(leaf, 'hoverStyle', true);
+            setPointerState(leaf, 'hoverStyle');
             break;
         case PointerEvent.LEAVE:
-            unsetStateStyle(leaf, 'hoverStyle', true);
+            unsetPointerState(leaf, 'hoverStyle');
             break;
         case PointerEvent.DOWN:
-            setStateStyle(leaf, 'pressStyle', true);
+            setPointerState(leaf, 'pressStyle');
             break;
         case PointerEvent.UP:
-            unsetStateStyle(leaf, 'pressStyle', true);
+            unsetPointerState(leaf, 'pressStyle');
             break;
     }
 }
 
-State.isHover = function (leaf) { return leaf.leafer && leaf.leafer.interaction.isHover(leaf); };
-State.isPress = function (leaf) { return leaf.leafer && leaf.leafer.interaction.isPress(leaf); };
-State.isFocus = function (leaf) { return leaf.leafer && leaf.leafer.interaction.isFocus(leaf); };
-State.isDrag = function (leaf) { return leaf.leafer && leaf.leafer.interaction.isDrag(leaf); };
-State.setStyle = function (leaf, stateType, value) { value ? setStateStyle(leaf, stateType) : unsetStateStyle(leaf); };
-State.updateEventStyle = updateEventStyle;
-UI.prototype.focus = function (value = true) {
+function checkPointerState(fnName, leaf, button) {
+    let find;
+    const interaction = leaf.leafer ? leaf.leafer.interaction : null;
+    if (interaction) {
+        find = interaction[fnName](leaf);
+        if (!find && button) {
+            const parentButton = findParentButton(leaf, button);
+            if (parentButton)
+                find = interaction[fnName](parentButton);
+        }
+    }
+    return find;
+}
+function checkFixedState(attrName, leaf, button) {
+    let find = leaf[attrName];
+    if (!find && button) {
+        const parentButton = findParentButton(leaf, button);
+        if (parentButton)
+            find = parentButton[attrName];
+    }
+    return find;
+}
+function checkState(stateName, leaf, button) {
+    let find = leaf.states[stateName];
+    if (!find && button) {
+        const parentButton = findParentButton(leaf, button);
+        if (parentButton)
+            find = parentButton.states[stateName];
+    }
+    return !!find;
+}
+
+State$1.animateExcludes = {
+    animation: 1,
+    animationOut: 1,
+    transition: 1,
+    transitionOut: 1,
+    states: 1,
+    state: 1,
+    normalStyle: 1,
+    hoverStyle: 1,
+    pressStyle: 1,
+    focusStyle: 1,
+    selectedStyle: 1,
+    disabledStyle: 1
+};
+State$1.isState = function (state, leaf, button) { return checkState(state, leaf, button); };
+State$1.isSelected = function (leaf, button) { return checkFixedState('selected', leaf, button); };
+State$1.isDisabled = function (leaf, button) { return checkFixedState('disabled', leaf, button); };
+State$1.isFocus = function (leaf, button) { return checkPointerState('isFocus', leaf, button); };
+State$1.isHover = function (leaf, button) { return checkPointerState('isHover', leaf, button); };
+State$1.isPress = function (leaf, button) { return checkPointerState('isPress', leaf, button); };
+State$1.isDrag = function (leaf, button) { return checkPointerState('isDrag', leaf, button); };
+State$1.setStyleName = function (leaf, stateType, value) { value ? setState(leaf, stateType, leaf[stateType]) : unsetState(leaf, stateType, leaf[stateType]); };
+State$1.set = function (leaf, stateName) { const style = leaf.states[stateName]; style ? setState(leaf, stateName, style) : unsetState(leaf, stateName, style); };
+State$1.getStyle = getStyle;
+State$1.updateStyle = updateStyle;
+State$1.updateEventStyle = updateEventStyle;
+const ui = UI.prototype;
+stateType(false, 'selectedStyle')(ui, 'selected');
+stateType(false, 'disabledStyle')(ui, 'disabled');
+stateStyleType({})(ui, 'states');
+stateType('')(ui, 'state');
+dataType()(ui, 'normalStyle');
+stateStyleType()(ui, 'hoverStyle');
+stateStyleType()(ui, 'pressStyle');
+stateStyleType()(ui, 'focusStyle');
+stateStyleType()(ui, 'selectedStyle');
+stateStyleType()(ui, 'disabledStyle');
+dataType(false)(ui, 'button');
+ui.focus = function (value = true) {
     this.waitLeafer(() => {
         let { focusData } = this.app.interaction;
         if (value) {
@@ -94,10 +316,14 @@ UI.prototype.focus = function (value = true) {
                 focusData.focus(false);
             focusData = this;
         }
-        else {
+        else
             focusData = null;
-        }
         this.app.interaction.focusData = focusData;
-        State.setStyle(this, 'focusStyle', value);
+        value ? setPointerState(this, 'focusStyle') : unsetPointerState(this, 'focusStyle');
     });
 };
+ui.updateState = function () {
+    State$1.updateStyle(this, undefined, 'in');
+};
+
+export { stateStyleType, stateType };

package/dist/state.esm.min.js

@@ -1 +1 @@
-import{State as e,PointerEvent as t,UI as s}from"@leafer-ui/core";function i(t){return t.selected||t.disabled||e.isFocus(t)}function r(e){const t=e.__.normalStyle;t&&(e.set(t),e.__.normalStyle=void 0)}function l(t,s,l){let a;const c=t.__;if(l)a=!i(t)&&c[s];else switch(s){case"disabledStyle":a=c[s];break;case"focusStyle":a=!t.disabled&&c[s];break;case"selectedStyle":a=!t.disabled&&!e.isFocus(t)&&c[s]}a&&(r(t),t.__.normalStyle=t.get(a),t.set(a))}function a(t,s,a){a?i(t)||(r(t),e.isPress(t)&&t.pressStyle?l(t,"pressStyle",!0):e.isHover(t)&&t.hoverStyle&&l(t,"hoverStyle",!0)):(r(t),t.disabledStyle&&t.disabled?l(t,"disabledStyle"):t.focusStyle&&e.isFocus(t)?l(t,"focusStyle"):t.selectedStyle&&t.selected&&l(t,"selectedStyle"))}e.isHover=function(e){return e.leafer&&e.leafer.interaction.isHover(e)},e.isPress=function(e){return e.leafer&&e.leafer.interaction.isPress(e)},e.isFocus=function(e){return e.leafer&&e.leafer.interaction.isFocus(e)},e.isDrag=function(e){return e.leafer&&e.leafer.interaction.isDrag(e)},e.setStyle=function(e,t,s){s?l(e,t):a(e)},e.updateEventStyle=function(e,s){switch(s){case t.ENTER:l(e,"hoverStyle",!0);break;case t.LEAVE:a(e,0,!0);break;case t.DOWN:l(e,"pressStyle",!0);break;case t.UP:a(e,0,!0)}},s.prototype.focus=function(t=!0){this.waitLeafer((()=>{let{focusData:s}=this.app.interaction;t?(s&&s.focus(!1),s=this):s=null,this.app.interaction.focusData=s,e.setStyle(this,"focusStyle",t)}))};
+import{decorateLeafAttr as t,attr as e,State as n}from"@leafer-ui/draw";import{MathHelper as s,State as i,isNull as o,PointerEvent as l,UI as r,dataType as a}from"@leafer-ui/core";function c(s,i){return t(s,(t=>e({set(e){this.__setAttr(t,e),this.waitLeafer((()=>i?n.setStyleName(this,i,e):n.set(this,e)))}})))}function u(n){return t(n,(t=>e({set(e){this.__setAttr(t,e),this.__layout.stateStyleChanged=!0}})))}function f(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 S(t,e){"object"!=typeof e&&(e=void 0),h(t,e,"in")}function y(t,e){const{normalStyle:n}=t;"object"!=typeof e&&(e=void 0),n&&(e||(e=n),h(t,e,"out"))}const d={};function h(t,e,n){const{normalStyle:l}=t;e||(e=d),e.scale&&(s.assignScale(e,e.scale),delete e.scale),e!==d&&i.canAnimate||(n=null);let r=!!n&&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]}(n,e,t);const a=r?function(t,e){const n=p(e,t),s=t.animate();s&&p(n,t,s.fromStyle);return n}(t,e):void 0;t.killAnimate("transition"),l&&t.set(l,!0);const c=m(t);if(c){const{animation:s}=c;if(s){const i=t.animate(s,void 0,"animation",!0);Object.assign(c,i.endingStyle),"in"!==n||e.animation!==s?i.kill():r=!1,delete c.animation}t.normalStyle=b(c,t),t.set(c,!0)}else t.normalStyle=void 0;if(r){const e=b(a,t);t.set(a,!0),t.animate([a,e],r,"transition",!0)}t.__layout.stateStyleChanged=!1}function m(t){let e;const n={},{state:s}=t,o=f(t),l=s&&t.states[s];l&&i.isState(s,t,o)&&(e=v(n,l));const r=n.selectedStyle||t.selectedStyle;if(r&&i.isSelected(t,o)&&(e=v(n,r)),i.isDisabled(t,o)){const s=n.disabledStyle||t.disabledStyle;s&&(e=v(n,s))}else{const s=n.focusStyle||t.focusStyle;s&&i.isFocus(t,o)&&(e=v(n,s));const l=n.hoverStyle||t.hoverStyle;l&&i.isHover(t,o)&&(e=v(n,l));const r=n.pressStyle||t.pressStyle;r&&i.isPress(t,o)&&(e=v(n,r))}return e?n:void 0}function b(t,e,n,s){const o=n?t:{},l=n||t;for(let t in l)s&&i.animateExcludes[t]||(o[t]=e[t]);return o}function p(t,e,n){return b(t,e,n,!0)}function v(t,e){return Object.assign(t,e),!0}function g(t,e){const n=t[e];n&&S(t,n),t.button&&k(t.children,e)}function _(t,e,n){n||(n=t.states[e]),S(t,n),t.button&&k(t.children,null,e)}function k(t,e,n){if(!t)return;let s,o;for(let l=0,r=t.length;l<r;l++){if(s=t[l],e){switch(o=!0,e){case"hoverStyle":i.isHover(s)&&(o=!1);break;case"pressStyle":i.isPress(s)&&(o=!1);break;case"focusStyle":i.isFocus(s)&&(o=!1)}o&&g(s,e)}else n&&_(s,n);s.isBranch&&k(s.children,e,n)}}function D(t,e){const n=t[e];n&&y(t,n),t.button&&O(t.children,e)}function E(t,e,n){y(t,n),t.button&&O(t.children,null,e)}function O(t,e,n){if(!t)return;let s;for(let i=0,o=t.length;i<o;i++)s=t[i],e?D(s,e):n&&E(s,n),s.isBranch&&O(s.children,e,n)}function w(t,e,n){let s;const i=e.leafer?e.leafer.interaction:null;if(i&&(s=i[t](e),!s&&n)){const o=f(e,n);o&&(s=i[t](o))}return s}function A(t,e,n){let s=e[t];if(!s&&n){const i=f(e,n);i&&(s=i[t])}return s}i.animateExcludes={animation:1,animationOut:1,transition:1,transitionOut:1,states:1,state:1,normalStyle:1,hoverStyle:1,pressStyle:1,focusStyle:1,selectedStyle:1,disabledStyle:1},i.isState=function(t,e,n){return function(t,e,n){let s=e.states[t];if(!s&&n){const i=f(e,n);i&&(s=i.states[t])}return!!s}(t,e,n)},i.isSelected=function(t,e){return A("selected",t,e)},i.isDisabled=function(t,e){return A("disabled",t,e)},i.isFocus=function(t,e){return w("isFocus",t,e)},i.isHover=function(t,e){return w("isHover",t,e)},i.isPress=function(t,e){return w("isPress",t,e)},i.isDrag=function(t,e){return w("isDrag",t,e)},i.setStyleName=function(t,e,n){n?_(t,e,t[e]):E(t,e,t[e])},i.set=function(t,e){const n=t.states[e];n?_(t,e,n):E(t,e,n)},i.getStyle=m,i.updateStyle=h,i.updateEventStyle=function(t,e){switch(e){case l.ENTER:g(t,"hoverStyle");break;case l.LEAVE:D(t,"hoverStyle");break;case l.DOWN:g(t,"pressStyle");break;case l.UP:D(t,"pressStyle")}};const P=r.prototype;c(!1,"selectedStyle")(P,"selected"),c(!1,"disabledStyle")(P,"disabled"),u({})(P,"states"),c("")(P,"state"),a()(P,"normalStyle"),u()(P,"hoverStyle"),u()(P,"pressStyle"),u()(P,"focusStyle"),u()(P,"selectedStyle"),u()(P,"disabledStyle"),a(!1)(P,"button"),P.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?g(this,"focusStyle"):D(this,"focusStyle")}))},P.updateState=function(){i.updateStyle(this,void 0,"in")};export{u as stateStyleType,c as stateType};