Merge pull request 'Optmi behavior list style' (#31) from dev-mrkbear into master

Reviewed-on: http://git.mrkbear.com/MrKBear/living-together/pulls/31

source/Component/BehaviorList/BehaviorList.scss

@@ -9,93 +9,106 @@ div.behavior-list {
 
 	div.behavior-item {
 		margin: 5px;
-		height: $behavior-item-height;
+		height: 45px;
 		user-select: none;
 		border-radius: 3px;
+        overflow: hidden;
 		cursor: pointer;
-		display: flex;
+        
+        div.behavior-color-view {
+            height: 0;
+            width: 100%;
 
-		div.behavior-color-view {
-			height: $behavior-item-height;
-			width: 3px;
-			min-width: 3px;
-			border-radius: 3px;
-			flex-shrink: 0;
-		}
+            div {
+                // position: relative;
+                // top: 5px;
+                // left: 5px;
+                width: 0;
+                height: 0;
+                // border-left: 8px solid red;
+                border-bottom: 12px solid transparent;
+                // border-radius: 8px;
+            }
+        }
 
-		div.behavior-icon-view {
-			height: $behavior-item-height;
-			min-width: $behavior-item-height;
-			width: $behavior-item-height;
-			user-select: none;
-			display: flex;
-			justify-content: center;
-			align-items: center;
+        div.behavior-item-root {
+            display: flex;
 
-			i {
-				font-size: 25px;
-			}
-		}
+            div.behavior-icon-view {
+                height: $behavior-item-height;
+                min-width: $behavior-item-height;
+                width: $behavior-item-height;
+                user-select: none;
+                display: flex;
+                justify-content: center;
+                align-items: center;
 
-		div.behavior-content-view {
-			width: calc( 100% - 68px );
-			max-width: 100px;
-			height: $behavior-item-height;
-			display: flex;
-			justify-content: center;
-			flex-direction: column;
-			align-items: stretch;
+                i {
+                    font-size: 25px;
+                }
+            }
 
-			div.title-view {
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				width: 100%;
-			}
+            div.behavior-content-view {
+                width: calc( 100% - 50px );
+                padding-right: 5px;
+                max-width: 125px;
+                height: $behavior-item-height;
+                display: flex;
+                justify-content: center;
+                flex-direction: column;
+                align-items: stretch;
 
-			div.info-view {
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				width: 100%;
-				opacity: .75;
-			}
-		}
-		
-		div.behavior-action-view {
-			height: $behavior-item-height;
-			min-width: 20px;
-			width: 20px;
-			flex-shrink: 0;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-content: center;
-			align-items: center;
+                div.title-view {
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    width: 100%;
+                }
 
-			div.behavior-action-button {
-				height: 100%;
-				width: 100%;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				user-select: none;
-				cursor: pointer;
-			}
+                div.info-view {
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    width: 100%;
+                    opacity: .75;
+                }
+            }
+            
+            div.behavior-action-view {
+                height: $behavior-item-height;
+                min-width: 20px;
+                width: 20px;
+                flex-shrink: 0;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-content: center;
+                align-items: center;
 
-			div.behavior-action-button.hover-red:hover i {
-				color: $lt-red;
-			}
+                div.behavior-action-button {
+                    height: 100%;
+                    width: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    user-select: none;
+                    cursor: pointer;
+                }
 
-			div.behavior-action-button.hover-blue:hover i {
-				color: $lt-blue;
-			}
-		}
+                div.behavior-action-button.hover-red:hover i {
+                    color: $lt-red;
+                }
+
+                div.behavior-action-button.hover-blue:hover i {
+                    color: $lt-blue;
+                }
+            }
+        }
 	}
 
     div.add-button {
-        width: 45px;
-        height: 45px;
+        width: 26px;
+        height: 26px;
         display: flex;
         justify-content: center;
         align-items: center;

source/Component/BehaviorList/BehaviorList.tsx

@@ -88,6 +88,7 @@ class BehaviorList extends Component<IBehaviorListProps & IMixinSettingProps> {
 			name = behavior.name;
 			color = behavior.color;
 			needLocal = false;
+            info = behavior.behaviorName;
 		}
 
 		if (behavior instanceof BehaviorRecorder) {
@@ -111,20 +112,21 @@ class BehaviorList extends Component<IBehaviorListProps & IMixinSettingProps> {
 				this.isActionClick = false;
 			}}
 		>
-			<div
-				className="behavior-color-view"
-				style={{ backgroundColor: color }}
-			/>
-			<div className="behavior-icon-view">
-				<Icon iconName={icon}/>
-			</div>
-			<div className="behavior-content-view">
-				{this.renderTerm(behavior, name, "title-view", needLocal)}
-				{this.renderTerm(behavior, info, "info-view", true)}
-			</div>
-			<div className="behavior-action-view">
-				{this.renderActionButton(behavior)}
-			</div>
+            <div className="behavior-color-view">
+                <div style={{ borderLeft: `12px solid ${color}` }}/>
+            </div>
+            <div className="behavior-item-root">
+                <div className="behavior-icon-view">
+                    <Icon iconName={icon}/>
+                </div>
+                <div className="behavior-content-view">
+                    {this.renderTerm(behavior, name, "title-view", needLocal)}
+                    {this.renderTerm(behavior, info, "info-view", true)}
+                </div>
+                {/* <div className="behavior-action-view">
+                    {this.renderActionButton(behavior)}
+                </div> */}
+            </div>
 		</div>
 	}
 

source/Model/Actuator.ts

@@ -69,13 +69,13 @@ class Actuator extends Emitter<IActuatorEvent> {
 				// 丢帧判定
 				if (durTime > 0.1) {
 					console.log("Actuator: Ticker dur time error. dropping...")
-				}
-
-				this.alignTimer += durTime;
-				if (this.alignTimer > (1 / this.fps)) {
-					this.model.update(this.alignTimer * this.speed);
-					this.emit("loop", this.alignTimer);
-					this.alignTimer = 0;
+				} else {
+					this.alignTimer += durTime;
+					if (this.alignTimer > (1 / this.fps)) {
+						this.model.update(this.alignTimer * this.speed);
+						this.emit("loop", this.alignTimer);
+						this.alignTimer = 0;
+					}
 				}
 			}
 		} else {

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -56,11 +56,11 @@ class SimulatorWeb extends Component {
             this.status.newLabel().name = "New Label";
             this.status.newLabel().name = "Test Label 01";
             let dynamic = this.status.model.addBehavior(AllBehaviors[0]);
-            dynamic.name = "dynamic";
+            dynamic.name = "Dynamic"; dynamic.color = "rgb(250, 200, 80)";
             let brownian = this.status.model.addBehavior(AllBehaviors[1]);
-            brownian.name = "brownian";
+            brownian.name = "Brownian"; brownian.color = "rgb(200, 80, 250)";
             let boundary = this.status.model.addBehavior(AllBehaviors[2]);
-            boundary.name = "boundary";
+            boundary.name = "Boundary"; boundary.color = "rgb(80, 200, 250)";
             boundary.parameter.range = this.status.model.allRangeLabel;
             group.addBehavior(dynamic);
             group.addBehavior(brownian);