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,19 +9,30 @@ 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: $behavior-item-height;
-			width: 3px;
-			min-width: 3px;
-			border-radius: 3px;
-			flex-shrink: 0;
+            height: 0;
+            width: 100%;
+
+            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-item-root {
+            display: flex;
 
             div.behavior-icon-view {
                 height: $behavior-item-height;
@@ -38,8 +49,9 @@ div.behavior-list {
             }
 
             div.behavior-content-view {
-			width: calc( 100% - 68px );
-			max-width: 100px;
+                width: calc( 100% - 50px );
+                padding-right: 5px;
+                max-width: 125px;
                 height: $behavior-item-height;
                 display: flex;
                 justify-content: center;
@@ -92,10 +104,11 @@ div.behavior-list {
                 }
             }
         }
+	}
 
     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,10 +112,10 @@ class BehaviorList extends Component<IBehaviorListProps & IMixinSettingProps> {
 				this.isActionClick = false;
 			}}
 		>
-			<div
-				className="behavior-color-view"
-				style={{ backgroundColor: color }}
-			/>
+            <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>
@@ -122,8 +123,9 @@ class BehaviorList extends Component<IBehaviorListProps & IMixinSettingProps> {
                     {this.renderTerm(behavior, name, "title-view", needLocal)}
                     {this.renderTerm(behavior, info, "info-view", true)}
                 </div>
-			<div className="behavior-action-view">
+                {/* <div className="behavior-action-view">
                     {this.renderActionButton(behavior)}
+                </div> */}
             </div>
 		</div>
 	}

source/Model/Actuator.ts

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

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);