From 8dcbfbefb0154ba3f5aeb79dd25368187d254daf Mon Sep 17 00:00:00 2001 From: MrKBear Date: Thu, 31 Mar 2022 17:35:40 +0800 Subject: [PATCH 1/2] Make style change --- .../Component/BehaviorList/BehaviorList.scss | 154 ++++++++++-------- .../Component/BehaviorList/BehaviorList.tsx | 30 ++-- source/Page/SimulatorWeb/SimulatorWeb.tsx | 6 +- 3 files changed, 101 insertions(+), 89 deletions(-) diff --git a/source/Component/BehaviorList/BehaviorList.scss b/source/Component/BehaviorList/BehaviorList.scss index 8d9baa0..e351881 100644 --- a/source/Component/BehaviorList/BehaviorList.scss +++ b/source/Component/BehaviorList/BehaviorList.scss @@ -9,93 +9,103 @@ div.behavior-list { div.behavior-item { margin: 5px; - height: $behavior-item-height; + height: 45px; user-select: none; border-radius: 3px; 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: 8px; + height: 8px; + 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; diff --git a/source/Component/BehaviorList/BehaviorList.tsx b/source/Component/BehaviorList/BehaviorList.tsx index 5308c49..2fc5521 100644 --- a/source/Component/BehaviorList/BehaviorList.tsx +++ b/source/Component/BehaviorList/BehaviorList.tsx @@ -88,6 +88,7 @@ class BehaviorList extends Component { name = behavior.name; color = behavior.color; needLocal = false; + info = behavior.behaviorName; } if (behavior instanceof BehaviorRecorder) { @@ -111,20 +112,21 @@ class BehaviorList extends Component { this.isActionClick = false; }} > -
-
- -
-
- {this.renderTerm(behavior, name, "title-view", needLocal)} - {this.renderTerm(behavior, info, "info-view", true)} -
-
- {this.renderActionButton(behavior)} -
+
+
+
+
+
+ +
+
+ {this.renderTerm(behavior, name, "title-view", needLocal)} + {this.renderTerm(behavior, info, "info-view", true)} +
+ {/*
+ {this.renderActionButton(behavior)} +
*/} +
} diff --git a/source/Page/SimulatorWeb/SimulatorWeb.tsx b/source/Page/SimulatorWeb/SimulatorWeb.tsx index a006f17..7ad6144 100644 --- a/source/Page/SimulatorWeb/SimulatorWeb.tsx +++ b/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); From 14dbd944f93b4612cdc2aa4d614e00da5e2c5ea7 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Thu, 31 Mar 2022 21:57:08 +0800 Subject: [PATCH 2/2] Optmi behavior list style --- source/Component/BehaviorList/BehaviorList.scss | 15 +++++++++------ source/Component/BehaviorList/BehaviorList.tsx | 2 +- source/Model/Actuator.ts | 14 +++++++------- 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/source/Component/BehaviorList/BehaviorList.scss b/source/Component/BehaviorList/BehaviorList.scss index e351881..364421b 100644 --- a/source/Component/BehaviorList/BehaviorList.scss +++ b/source/Component/BehaviorList/BehaviorList.scss @@ -12,6 +12,7 @@ div.behavior-list { height: 45px; user-select: none; border-radius: 3px; + overflow: hidden; cursor: pointer; div.behavior-color-view { @@ -19,12 +20,14 @@ div.behavior-list { width: 100%; div { - position: relative; - top: 5px; - left: 5px; - width: 8px; - height: 8px; - border-radius: 8px; + // position: relative; + // top: 5px; + // left: 5px; + width: 0; + height: 0; + // border-left: 8px solid red; + border-bottom: 12px solid transparent; + // border-radius: 8px; } } diff --git a/source/Component/BehaviorList/BehaviorList.tsx b/source/Component/BehaviorList/BehaviorList.tsx index 2fc5521..46fdcdd 100644 --- a/source/Component/BehaviorList/BehaviorList.tsx +++ b/source/Component/BehaviorList/BehaviorList.tsx @@ -113,7 +113,7 @@ class BehaviorList extends Component { }} >
-
+
diff --git a/source/Model/Actuator.ts b/source/Model/Actuator.ts index 64e93b5..6c0e914 100644 --- a/source/Model/Actuator.ts +++ b/source/Model/Actuator.ts @@ -69,13 +69,13 @@ class Actuator extends Emitter { // 丢帧判定 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 {