@leafer-in/state 1.0.1 → 1.0.3

package/src/index.ts

@@ -1,29 +1,83 @@
-import { ILeaf, IStateStyleType } from '@leafer-ui/interface'
-import { State, UI } from '@leafer-ui/core'
+export { stateType, stateStyleType } from './decorator'
 
-import { setStateStyle } from './set'
-import { unsetStateStyle } from './unset'
+import { IUI, IStateStyleType, IStateName } from '@leafer-ui/interface'
+import { State, UI, dataType } from '@leafer-ui/core'
+
+import { setPointerState, setState } from './set'
+import { unsetPointerState, unsetState } from './unset'
 import { updateEventStyle } from './event'
+import { checkPointerState, checkFixedState, checkState } from './check'
+import { getStyle, updateStyle } from './style'
+import { stateType, stateStyleType } from './decorator'
+
+
+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
+}
+
+
+State.isState = function (state: IStateName, leaf: IUI, button?: IUI | boolean): boolean { return checkState(state, leaf, button) }
+State.isSelected = function (leaf: IUI, button?: IUI | boolean): boolean { return checkFixedState('selected', leaf, button) }
+State.isDisabled = function (leaf: IUI, button?: IUI | boolean): boolean { return checkFixedState('disabled', leaf, button) }
 
+State.isFocus = function (leaf: IUI, button?: IUI | boolean): boolean { return checkPointerState('isFocus', leaf, button) }
+State.isHover = function (leaf: IUI, button?: IUI | boolean): boolean { return checkPointerState('isHover', leaf, button) }
+State.isPress = function (leaf: IUI, button?: IUI | boolean): boolean { return checkPointerState('isPress', leaf, button) }
 
-State.isHover = function (leaf: ILeaf): boolean { return leaf.leafer && leaf.leafer.interaction.isHover(leaf) }
-State.isPress = function (leaf: ILeaf): boolean { return leaf.leafer && leaf.leafer.interaction.isPress(leaf) }
-State.isFocus = function (leaf: ILeaf): boolean { return leaf.leafer && leaf.leafer.interaction.isFocus(leaf) }
-State.isDrag = function (leaf: ILeaf): boolean { return leaf.leafer && leaf.leafer.interaction.isDrag(leaf) }
-State.setStyle = function (leaf: ILeaf, stateType: IStateStyleType, value: boolean): void { value ? setStateStyle(leaf, stateType) : unsetStateStyle(leaf, stateType) }
+State.isDrag = function (leaf: IUI, button?: IUI | boolean): boolean { return checkPointerState('isDrag', leaf, button) }
+
+State.setStyleName = function (leaf: IUI, stateType: IStateStyleType, value: boolean): void { value ? setState(leaf, stateType, leaf[stateType]) : unsetState(leaf, stateType, leaf[stateType]) }
+State.set = function (leaf: IUI, stateName: string): void { const style = leaf.states[stateName]; style ? setState(leaf, stateName, style) : unsetState(leaf, stateName, style) }
+
+State.getStyle = getStyle
+State.updateStyle = updateStyle
 State.updateEventStyle = updateEventStyle
 
 
-UI.prototype.focus = function (value: boolean = true): void {
+const ui = UI.prototype
+
+// addAttr
+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: boolean = true): void {
     this.waitLeafer(() => {
         let { focusData } = this.app.interaction
         if (value) {
             if (focusData) focusData.focus(false)
             focusData = this
-        } else {
-            focusData = null
-        }
+        } else focusData = null
         this.app.interaction.focusData = focusData
-        State.setStyle(this, 'focusStyle', value)
+        value ? setPointerState(this, 'focusStyle') : unsetPointerState(this, 'focusStyle')
     })
+}
+
+ui.updateState = function (): void {
+    State.updateStyle(this, undefined, 'in')
 }

package/src/set.ts

@@ -1,40 +1,45 @@
-import { ILeaf, IObject, IStateStyleType } from '@leafer-ui/interface'
+import { IUI, IStateStyle, IStateStyleType, IStateName } from '@leafer-ui/interface'
 import { State } from '@leafer-ui/core'
 
-import { hasFixedState, restoreStyle } from './helper'
+import { setStyle } from './style'
 
 
-export function setStateStyle(leaf: ILeaf, stateType: IStateStyleType, pointerState?: boolean): void {
+export function setPointerState(leaf: IUI, stateName: IStateStyleType): void {
+    const style = leaf[stateName]
+    if (style) setStyle(leaf, style)
+    if (leaf.button) setChildrenState(leaf.children, stateName)
+}
 
-    let style: IObject
-    const data = leaf.__ as IObject
+export function setState(leaf: IUI, stateName: string, stateStyle?: IStateStyle): void {
+    if (!stateStyle) stateStyle = leaf.states[stateName]
+    setStyle(leaf, stateStyle)
+    if (leaf.button) setChildrenState(leaf.children, null, stateName)
+}
 
-    if (pointerState) {
 
-        // hover / press
-        style = !hasFixedState(leaf) && data[stateType]
+function setChildrenState(children: IUI[], stateType: IStateStyleType, state?: IStateName): void {
+    if (!children) return
 
-    } else {
+    let leaf: IUI, update: boolean
+    for (let i = 0, len = children.length; i < len; i++) {
+        leaf = children[i]
+        if (stateType) {
 
-        //  disabled > focus > selected
-        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
-        }
+            update = true
+            switch (stateType) {
+                case 'hoverStyle':
+                    if (State.isHover(leaf)) update = false
+                    break
+                case 'pressStyle':
+                    if (State.isPress(leaf)) update = false
+                    break
+                case 'focusStyle':
+                    if (State.isFocus(leaf)) update = false
+            }
+            if (update) setPointerState(leaf, stateType)
 
-    }
+        } else if (state) setState(leaf, state)
 
-    if (style) {
-        restoreStyle(leaf) // 先回到正常状态
-        leaf.__.normalStyle = leaf.get(style) as IObject
-        leaf.set(style)
+        if (leaf.isBranch) setChildrenState(leaf.children, stateType, state)
     }
-
 }

package/src/style.ts

@@ -0,0 +1,136 @@
+import { IUI, IObject, IUIInputData, IStateStyle, IScaleData, ITransition } from '@leafer-ui/interface'
+import { State, MathHelper, isNull } from '@leafer-ui/core'
+
+import { findParentButton } from './helper'
+
+
+export function setStyle(leaf: IUI, style: IStateStyle): void {
+    if (typeof style !== 'object') style = undefined
+    updateStyle(leaf, style, 'in')
+}
+
+export function unsetStyle(leaf: IUI, style?: IStateStyle): void {
+    const { normalStyle } = leaf
+    if (typeof style !== 'object') style = undefined
+    if (normalStyle) {
+        if (!style) style = normalStyle
+        updateStyle(leaf, style, 'out')
+    }
+}
+
+const emprtyStyle = {}
+
+export function updateStyle(leaf: IUI, style?: IStateStyle, type?: 'in' | 'out'): void {
+    const { normalStyle } = leaf
+
+    if (!style) style = emprtyStyle
+
+    if (style.scale) {
+        MathHelper.assignScale(style as IScaleData, style.scale)
+        delete style.scale
+    }
+
+    if (style === emprtyStyle || !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 (transition) {
+        const toStyle = filterStyle(fromStyle, leaf)
+        leaf.set(fromStyle, true)
+        leaf.animate([fromStyle, toStyle], transition, 'transition', true)
+    }
+
+    leaf.__layout.stateStyleChanged = false
+}
+
+export function getStyle(leaf: IUI): IStateStyle {
+
+    //   从低到高依次覆盖: states < selected < focus < hover < press < disabled
+
+    let exist: boolean
+    const style: IUIInputData = {}, { state } = leaf, button = findParentButton(leaf)
+
+    const stateStyle = state && leaf.states[state]
+    if (stateStyle && State.isState(state, leaf, button)) exist = assign(style, stateStyle)
+
+    const selectedStyle = style.selectedStyle || leaf.selectedStyle
+    if (selectedStyle && State.isSelected(leaf, button)) exist = assign(style, selectedStyle)
+
+    if (State.isDisabled(leaf, button)) {
+
+        const disabledStyle = style.disabledStyle || leaf.disabledStyle
+        if (disabledStyle) exist = assign(style, disabledStyle)
+
+    } else {
+
+        const focusStyle = style.focusStyle || leaf.focusStyle
+        if (focusStyle && State.isFocus(leaf, button)) exist = assign(style, focusStyle)
+
+        const hoverStyle = style.hoverStyle || leaf.hoverStyle
+        if (hoverStyle && State.isHover(leaf, button)) exist = assign(style, hoverStyle)
+
+        const pressStyle = style.pressStyle || leaf.pressStyle
+        if (pressStyle && State.isPress(leaf, button)) exist = assign(style, pressStyle)
+
+    }
+
+    return exist ? style : undefined
+}
+
+
+function filterStyle(style: IObject, data: IObject, addStyle?: IObject, useAnimateExcludes?: boolean): IObject {
+    const to: IObject = addStyle ? style : {}, forStyle = addStyle || style
+    for (let key in forStyle) {
+        if (useAnimateExcludes) {
+            if (!State.animateExcludes[key]) to[key] = data[key]
+        } else to[key] = data[key]
+    }
+    return to
+}
+
+function filterAnimateStyle(style: IObject, data: IObject, addStyle?: IObject): IObject {
+    return filterStyle(style, data, addStyle, true)
+}
+
+function getFromStyle(leaf: IUI, style: IObject): IObject {
+    const fromStyle = filterAnimateStyle(style, leaf), animate = leaf.animate()
+    if (animate) filterAnimateStyle(fromStyle, leaf, animate.fromStyle)
+    return fromStyle
+}
+
+function getTransition(type: 'in' | 'out', style: IStateStyle, data: IUI): ITransition {
+    let name: 'transition' | 'transitionOut' = 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: IStateStyle, stateStyle: IStateStyle): boolean {
+    Object.assign(style, stateStyle)
+    return true
+}

package/src/unset.ts

@@ -1,40 +1,29 @@
-import { ILeaf, IStateStyleType } from '@leafer/interface'
-import { State } from '@leafer-ui/core'
+import { IUI, IStateStyleType, IStateStyle, IStateName } from '@leafer-ui/interface'
 
-import { setStateStyle } from './set'
-import { hasFixedState, restoreStyle } from './helper'
+import { unsetStyle } from './style'
 
 
-export function unsetStateStyle(leaf: ILeaf, _stateType: IStateStyleType, pointerState?: boolean): void {
+export function unsetPointerState(leaf: IUI, stateName: IStateStyleType): void {
+    const style = leaf[stateName]
+    if (style) unsetStyle(leaf, style)
+    if (leaf.button) unsetChildrenState(leaf.children, stateName)
+}
 
-    if (pointerState) {
+export function unsetState(leaf: IUI, stateName: string, stateStyle?: IStateStyle): void {
+    unsetStyle(leaf, stateStyle)
+    if (leaf.button) unsetChildrenState(leaf.children, null, stateName)
+}
 
-        if (!hasFixedState(leaf)) {
 
-            restoreStyle(leaf)
+function unsetChildrenState(children: IUI[], stateType: IStateStyleType, state?: IStateName): void {
+    if (!children) return
 
-            // press > hover
-            if (State.isPress(leaf) && leaf.pressStyle) {
-                setStateStyle(leaf, 'pressStyle', true)
-            } else if (State.isHover(leaf) && leaf.hoverStyle) {
-                setStateStyle(leaf, 'hoverStyle', true)
-            }
-
-        }
-
-    } else {
-
-        //  disabled > focus > selected
-        restoreStyle(leaf)
-
-        if (leaf.disabledStyle && leaf.disabled) {
-            setStateStyle(leaf, 'disabledStyle')
-        } else if (leaf.focusStyle && State.isFocus(leaf)) {
-            setStateStyle(leaf, 'focusStyle')
-        } else if (leaf.selectedStyle && leaf.selected) {
-            setStateStyle(leaf, 'selectedStyle')
-        }
+    let leaf: IUI
+    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)
     }
-
 }

package/types/index.d.ts

@@ -1,2 +1,7 @@
+import * as _leafer_ui_interface from '@leafer-ui/interface';
+import { IValue } from '@leafer-ui/interface';
 
-export {  }
+declare function stateType(defaultValue?: IValue, styleName?: string): (target: _leafer_ui_interface.ILeaf, key: string) => void;
+declare function stateStyleType(defaultValue?: IValue): (target: _leafer_ui_interface.ILeaf, key: string) => void;
+
+export { stateStyleType, stateType };