@leafer-in/state 1.0.2 → 1.0.4

package/dist/state.js

@@ -1,93 +1,315 @@
-(function (core) {
+this.LeaferIN = this.LeaferIN || {};
+this.LeaferIN.state = (function (exports, draw, core) {
     'use strict';
 
-    function hasFixedState(leaf) {
-        return leaf.selected || leaf.disabled || core.State.isFocus(leaf);
-    }
-    function restoreStyle(leaf) {
-        const style = leaf.__.normalStyle;
-        if (style) {
-            leaf.set(style);
-            leaf.__.normalStyle = undefined;
+    function stateType(defaultValue, styleName) {
+        return draw.decorateLeafAttr(defaultValue, (key) => draw.attr({
+            set(value) {
+                this.__setAttr(key, value);
+                this.waitLeafer(() => styleName ? draw.State.setStyleName(this, styleName, value) : draw.State.set(this, value));
+            }
+        }));
+    }
+    function stateStyleType(defaultValue) {
+        return draw.decorateLeafAttr(defaultValue, (key) => draw.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 && !core.State.isFocus(leaf) && data[stateType];
-                    break;
+    }
+    const emprtyStyle = {};
+    function updateStyle(leaf, style, type) {
+        const { normalStyle } = leaf;
+        if (!style)
+            style = emprtyStyle;
+        if (style.scale) {
+            core.MathHelper.assignScale(style, style.scale);
+            delete style.scale;
+        }
+        if (style === emprtyStyle || !core.State.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 (core.State.isPress(leaf) && leaf.pressStyle) {
-                    setStateStyle(leaf, 'pressStyle', true);
-                }
-                else if (core.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 && core.State.isState(state, leaf, button))
+            exist = assign(style, stateStyle);
+        const selectedStyle = style.selectedStyle || leaf.selectedStyle;
+        if (selectedStyle && core.State.isSelected(leaf, button))
+            exist = assign(style, selectedStyle);
+        if (core.State.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 && core.State.isFocus(leaf)) {
-                setStateStyle(leaf, 'focusStyle');
+            const focusStyle = style.focusStyle || leaf.focusStyle;
+            if (focusStyle && core.State.isFocus(leaf, button))
+                exist = assign(style, focusStyle);
+            const hoverStyle = style.hoverStyle || leaf.hoverStyle;
+            if (hoverStyle && core.State.isHover(leaf, button))
+                exist = assign(style, hoverStyle);
+            const pressStyle = style.pressStyle || leaf.pressStyle;
+            if (pressStyle && core.State.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 (!core.State.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' && core.isNull(data[name]) && core.isNull(style[name]))
+            name = 'transition';
+        return core.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 (core.State.isHover(leaf))
+                            update = false;
+                        break;
+                    case 'pressStyle':
+                        if (core.State.isPress(leaf))
+                            update = false;
+                        break;
+                    case 'focusStyle':
+                        if (core.State.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 core.PointerEvent.ENTER:
-                setStateStyle(leaf, 'hoverStyle', true);
+                setPointerState(leaf, 'hoverStyle');
                 break;
             case core.PointerEvent.LEAVE:
-                unsetStateStyle(leaf, 'hoverStyle', true);
+                unsetPointerState(leaf, 'hoverStyle');
                 break;
             case core.PointerEvent.DOWN:
-                setStateStyle(leaf, 'pressStyle', true);
+                setPointerState(leaf, 'pressStyle');
                 break;
             case core.PointerEvent.UP:
-                unsetStateStyle(leaf, 'pressStyle', true);
+                unsetPointerState(leaf, 'pressStyle');
                 break;
         }
     }
 
-    core.State.isHover = function (leaf) { return leaf.leafer && leaf.leafer.interaction.isHover(leaf); };
-    core.State.isPress = function (leaf) { return leaf.leafer && leaf.leafer.interaction.isPress(leaf); };
-    core.State.isFocus = function (leaf) { return leaf.leafer && leaf.leafer.interaction.isFocus(leaf); };
-    core.State.isDrag = function (leaf) { return leaf.leafer && leaf.leafer.interaction.isDrag(leaf); };
-    core.State.setStyle = function (leaf, stateType, value) { value ? setStateStyle(leaf, stateType) : unsetStateStyle(leaf); };
+    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;
+    }
+
+    core.State.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
+    };
+    core.State.isState = function (state, leaf, button) { return checkState(state, leaf, button); };
+    core.State.isSelected = function (leaf, button) { return checkFixedState('selected', leaf, button); };
+    core.State.isDisabled = function (leaf, button) { return checkFixedState('disabled', leaf, button); };
+    core.State.isFocus = function (leaf, button) { return checkPointerState('isFocus', leaf, button); };
+    core.State.isHover = function (leaf, button) { return checkPointerState('isHover', leaf, button); };
+    core.State.isPress = function (leaf, button) { return checkPointerState('isPress', leaf, button); };
+    core.State.isDrag = function (leaf, button) { return checkPointerState('isDrag', leaf, button); };
+    core.State.setStyleName = function (leaf, stateType, value) { value ? setState(leaf, stateType, leaf[stateType]) : unsetState(leaf, stateType, leaf[stateType]); };
+    core.State.set = function (leaf, stateName) { const style = leaf.states[stateName]; style ? setState(leaf, stateName, style) : unsetState(leaf, stateName, style); };
+    core.State.getStyle = getStyle;
+    core.State.updateStyle = updateStyle;
     core.State.updateEventStyle = updateEventStyle;
-    core.UI.prototype.focus = function (value = true) {
+    const ui = core.UI.prototype;
+    stateType(false, 'selectedStyle')(ui, 'selected');
+    stateType(false, 'disabledStyle')(ui, 'disabled');
+    stateStyleType({})(ui, 'states');
+    stateType('')(ui, 'state');
+    core.dataType()(ui, 'normalStyle');
+    stateStyleType()(ui, 'hoverStyle');
+    stateStyleType()(ui, 'pressStyle');
+    stateStyleType()(ui, 'focusStyle');
+    stateStyleType()(ui, 'selectedStyle');
+    stateStyleType()(ui, 'disabledStyle');
+    core.dataType(false)(ui, 'button');
+    ui.focus = function (value = true) {
         this.waitLeafer(() => {
             let { focusData } = this.app.interaction;
             if (value) {
@@ -95,12 +317,19 @@
                     focusData.focus(false);
                 focusData = this;
             }
-            else {
+            else
                 focusData = null;
-            }
             this.app.interaction.focusData = focusData;
-            core.State.setStyle(this, 'focusStyle', value);
+            value ? setPointerState(this, 'focusStyle') : unsetPointerState(this, 'focusStyle');
         });
     };
+    ui.updateState = function () {
+        core.State.updateStyle(this, undefined, 'in');
+    };
+
+    exports.stateStyleType = stateStyleType;
+    exports.stateType = stateType;
+
+    return exports;
 
-})(LeaferUI);
+})({}, LeaferUI, LeaferUI);

package/dist/state.min.cjs

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

package/dist/state.min.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-in/state",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "@leafer-in/state",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -34,8 +34,8 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer-ui/core": "^1.0.2",
-    "@leafer-ui/interface": "^1.0.2",
-    "@leafer-in/interface": "^1.0.2"
+    "@leafer-ui/core": "^1.0.4",
+    "@leafer-ui/interface": "^1.0.4",
+    "@leafer-in/interface": "^1.0.4"
   }
 }

package/src/check.ts

@@ -0,0 +1,35 @@
+import { IUI, IStateName, } from '@leafer-ui/interface'
+
+import { findParentButton } from './helper'
+
+
+export function checkPointerState(fnName: 'isHover' | 'isPress' | 'isFocus' | 'isDrag', leaf: IUI, button?: IUI | boolean): boolean {
+    let find: boolean
+    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
+}
+
+export function checkFixedState(attrName: 'selected' | 'disabled', leaf: IUI, button?: IUI | boolean): boolean {
+    let find = leaf[attrName]
+    if (!find && button) {
+        const parentButton = findParentButton(leaf, button)
+        if (parentButton) find = parentButton[attrName]
+    }
+    return find
+}
+
+export function checkState(stateName: IStateName, leaf: IUI, button?: IUI | boolean): boolean {
+    let find = leaf.states[stateName]
+    if (!find && button) {
+        const parentButton = findParentButton(leaf, button)
+        if (parentButton) find = parentButton.states[stateName]
+    }
+    return !!find
+}

package/src/decorator.ts

@@ -0,0 +1,20 @@
+import { IValue } from '@leafer-ui/interface'
+import { decorateLeafAttr, attr, State } from '@leafer-ui/draw'
+
+export function stateType(defaultValue?: IValue, styleName?: string) {
+    return decorateLeafAttr(defaultValue, (key: string) => attr({
+        set(value: any) {
+            this.__setAttr(key, value)
+            this.waitLeafer(() => styleName ? State.setStyleName(this, styleName, value) : State.set(this, value))
+        }
+    }))
+}
+
+export function stateStyleType(defaultValue?: IValue) {
+    return decorateLeafAttr(defaultValue, (key: string) => attr({
+        set(value: any) {
+            this.__setAttr(key, value)
+            this.__layout.stateStyleChanged = true
+        }
+    }))
+}

package/src/event.ts

@@ -1,23 +1,23 @@
-import { ILeaf } from '@leafer-ui/interface'
+import { IUI } from '@leafer-ui/interface'
 import { PointerEvent } from '@leafer-ui/core'
 
-import { setStateStyle } from './set'
-import { unsetStateStyle } from './unset'
+import { setPointerState } from './set'
+import { unsetPointerState } from './unset'
 
 
-export function updateEventStyle(leaf: ILeaf, eventType: string): void {
+export function updateEventStyle(leaf: IUI, eventType: string): void {
     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
     }
 }

package/src/helper.ts

@@ -1,15 +1,16 @@
-import { ILeaf } from '@leafer-ui/interface'
-import { State } from '@leafer-ui/core'
+import { IUI } from '@leafer-ui/interface'
 
 
-export function hasFixedState(leaf: ILeaf): boolean {
-    return leaf.selected || leaf.disabled || State.isFocus(leaf)
-}
-
-export function restoreStyle(leaf: ILeaf) {
-    const style = leaf.__.normalStyle
-    if (style) {
-        leaf.set(style)
-        leaf.__.normalStyle = undefined
+export function findParentButton(leaf: IUI, button?: IUI | boolean): IUI {
+    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
 }