fix：在setState方法中限制不存在的状态

antvis · Jun 12, 2020 · c0ba525 · c0ba525
1 parent ba97fa7
commit c0ba525
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 5 deletions.
diff --git a/src/graph/controller/item.ts b/src/graph/controller/item.ts
@@ -428,8 +428,7 @@ export default class ItemController {
 
     // 已经存在要设置的 state，或不存在 state 的样式为 undefined
     if (item.hasState(stateName) === value 
-      || (isString(value) && item.hasState(stateName))
-      || !item.getStateStyle(stateName)) {
+      || (isString(value) && item.hasState(stateName))) {
       return;
     }
 

diff --git a/src/graph/graph.ts b/src/graph/graph.ts
@@ -1464,13 +1464,22 @@ export default class Graph extends EventEmitter implements IGraph {
         if (comboId === child.id && childItem && childItem.getType && childItem.getType() === 'combo') {
           // 更新具体的 Combo 之前先清除所有的已有状态，以免将 state 中的样式更新为 Combo 的样式
           const states = [...childItem.getStates()]
-          each(states, state => this.setItemState(childItem, state, false))
+          // || !item.getStateStyle(stateName)
+          each(states, state => {
+            if (childItem.getStateStyle(state)) {
+              this.setItemState(childItem, state, false)
+            }
+          })
 
           // 更新具体的 Combo
           itemController.updateCombo(childItem, child.children);
 
           // 更新 Combo 后，还原已有的状态
-          each(states, state => this.setItemState(childItem, state, true));
+          each(states, state => {
+            if (childItem.getStateStyle(state)) {
+              this.setItemState(childItem, state, true)
+            }
+          });
 
           if (comboId) comboId = child.parentId;
         }

diff --git a/src/shape/shapeBase.ts b/src/shape/shapeBase.ts
@@ -287,10 +287,17 @@ export const shapeBase: ShapeOptions = {
     const stateName = isBoolean(value) ? name : `${name}:${value}`;
     const shapeStateStyle = this.getStateStyle(stateName, true, item);
     const itemStateStyle = item.getStateStyle(stateName);
-
+
+    // 不允许设置一个不存在的状态
+    if (!itemStateStyle && !shapeStateStyle) {
+      return;
+    }
+
     // 要设置或取消的状态的样式
     // 当没有 state 状态时，默认使用 model.stateStyles 中的样式
     const styles = mix({}, itemStateStyle || shapeStateStyle);
+
+
     const group = item.getContainer();
 
     if (value) {
@@ -410,11 +417,16 @@ export const shapeBase: ShapeOptions = {
    */
   getStateStyle(name: string, value: string | boolean, item: Item): ShapeStyle {
     const model = item.getModel();
+    const type = item.getType()
 
     if (value) {
       const modelStateStyle = model.stateStyles
         ? model.stateStyles[name]
         : this.options.stateStyles && this.options.stateStyles[name];
+
+      if (type === 'combo') {
+        return mix({}, modelStateStyle)
+      }
       return mix({}, model.style, modelStateStyle);
     }
 

diff --git a/tests/unit/combo-issue-spec.ts b/tests/unit/combo-issue-spec.ts
@@ -48,6 +48,9 @@ describe('combo states', () => {
       comboStateStyles: {
         hover: {
           stroke: 'green'
+        },
+        selected: {
+          stroke: 'red'
         }
       },
       modes: {
@@ -68,6 +71,7 @@ describe('combo states', () => {
 
     // combo 设置不存在的 state
     graph.on('combo:click', evt => {
+      debugger
       graph.setItemState(evt.item, 'notFound', true)
     })