closes #100 display names of HFSM object types in part browser.

finger563 · Mar 30, 2018 · f9f3bda · f9f3bda
1 parent 189cae3
commit f9f3bda
Show file tree

Hide file tree

Showing 13 changed files with 209 additions and 60 deletions.
diff --git a/src/decorators/UMLStateMachineDecorator/Core/ChoicePseudostate.html b/src/decorators/UMLStateMachineDecorator/Core/ChoicePseudostate.html
@@ -1,4 +1,5 @@
 <div class="choice-pseudostate">
+    <div class="name"></div>
     <div class="icon"></div>
     <div class='connector top'></div>
     <div class='connector bottom'></div>

diff --git a/src/decorators/UMLStateMachineDecorator/Core/DeepHistoryPseudostate.html b/src/decorators/UMLStateMachineDecorator/Core/DeepHistoryPseudostate.html
@@ -1,4 +1,5 @@
 <div class="deep-history-pseudostate">
+    <div class="name"></div>
     <div class="icon"><b>H*</b></div>
     <div class='connector top'></div>
     <div class='connector bottom'></div>

diff --git a/src/decorators/UMLStateMachineDecorator/Core/EndState.html b/src/decorators/UMLStateMachineDecorator/Core/EndState.html
@@ -1,4 +1,5 @@
 <div class="end-state">
+  <div class="name"></div>
   <div class="icon">
     <div class="inner"></div>
   </div>

diff --git a/src/decorators/UMLStateMachineDecorator/Core/InitialState.html b/src/decorators/UMLStateMachineDecorator/Core/InitialState.html
@@ -1,4 +1,5 @@
 <div class="initial-state">
+    <div class="name"></div>
     <div class="icon"></div>
     <div class='connector top'></div>
     <div class='connector bottom'></div>

diff --git a/src/decorators/UMLStateMachineDecorator/Core/ShallowHistoryPseudostate.html b/src/decorators/UMLStateMachineDecorator/Core/ShallowHistoryPseudostate.html
@@ -1,4 +1,5 @@
 <div class="shallow-history-pseudostate">
+    <div class="name"></div>
     <div class="icon"><b>H</b></div>
     <div class='connector top'></div>
     <div class='connector bottom'></div>

diff --git a/src/decorators/UMLStateMachineDecorator/Core/_ChoicePseudostate.scss b/src/decorators/UMLStateMachineDecorator/Core/_ChoicePseudostate.scss
@@ -8,6 +8,9 @@ $connector-diff: -2px;
 @mixin ChoicePseudostate {
   .choice-pseudostate {
     .icon {
+      margin-left: auto;
+      margin-right: auto;
+      display:block;
       width: $choice-pseudostate-size;
       height: $choice-pseudostate-size;
       border: 2px solid $choice-pseudostate-background-color;
@@ -16,10 +19,17 @@ $connector-diff: -2px;
     }
 
     .name {
-    	white-space: nowrap;
-        position: absolute;
-        margin-left: 0px;
-        left: 50%;
+      margin-left: auto;
+      margin-right: auto;
+      display:block;
+      white-space: nowrap;
+      font-size: 12px;
+      font-weight: bold;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      height: 16px;
+      line-height: 16px;
     }
 
     .connector {

diff --git a/src/decorators/UMLStateMachineDecorator/Core/_DeepHistoryPseudostate.scss b/src/decorators/UMLStateMachineDecorator/Core/_DeepHistoryPseudostate.scss
@@ -10,6 +10,9 @@ $connector-diff: -2px;
   .deep-history-pseudostate {
 
     .icon {
+      margin-left: auto;
+      margin-right: auto;
+      display:block;
       border-radius: $deep-history-pseudostate-border-radius;
       width: $deep-history-pseudostate-size;
       height: $deep-history-pseudostate-size;
@@ -20,10 +23,17 @@ $connector-diff: -2px;
     }
 
     .name {
-    	white-space: nowrap;
-        position: absolute;
-        margin-left: 0px;
-        left: 50%;
+      margin-left: auto;
+      margin-right: auto;
+      display:block;
+      white-space: nowrap;
+      font-size: 12px;
+      font-weight: bold;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      height: 16px;
+      line-height: 16px;
     }
 
     .connector {

diff --git a/src/decorators/UMLStateMachineDecorator/Core/_EndState.scss b/src/decorators/UMLStateMachineDecorator/Core/_EndState.scss
@@ -12,6 +12,9 @@ $end-state-internal-border-radius: 10px;
 @mixin EndState {
   .end-state {
     .icon {
+      margin-left: auto;
+      margin-right: auto;
+      display:block;
       background-color: $end-state-background-color;
       border: $end-state-border;
       width: $end-state-size;
@@ -34,12 +37,18 @@ $end-state-internal-border-radius: 10px;
       }
     }
 
-
     .name {
+      margin-left: auto;
+      margin-right: auto;
+      display:block;
       white-space: nowrap;
-      position: absolute;
-      margin-left: 0px;
-      left: 50%;
+      font-size: 12px;
+      font-weight: bold;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      height: 16px;
+      line-height: 16px;
     }
 
     .connector {

diff --git a/src/decorators/UMLStateMachineDecorator/Core/_InitialState.scss b/src/decorators/UMLStateMachineDecorator/Core/_InitialState.scss
@@ -9,6 +9,9 @@ $connector-diff: -2px;
 @mixin InitialState {
   .initial-state {
     .icon {
+      margin-left: auto;
+      margin-right: auto;
+      display:block;
       background-color: $initial-state-background-color;
       width: $initial-state-size;
       height: $initial-state-size;
@@ -18,10 +21,17 @@ $connector-diff: -2px;
     }
 
     .name {
-    	white-space: nowrap;
-        position: absolute;
-        margin-left: 0px;
-        left: 50%;
+      margin-left: auto;
+      margin-right: auto;
+      display:block;
+      white-space: nowrap;
+      font-size: 12px;
+      font-weight: bold;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      height: 16px;
+      line-height: 16px;
     }
 
     .connector {

diff --git a/src/decorators/UMLStateMachineDecorator/Core/_ShallowHistoryPseudostate.scss b/src/decorators/UMLStateMachineDecorator/Core/_ShallowHistoryPseudostate.scss
@@ -10,6 +10,9 @@ $connector-diff: -2px;
   .shallow-history-pseudostate {
 
     .icon {
+      margin-left: auto;
+      margin-right: auto;
+      display:block;
       border-radius: $shallow-history-pseudostate-border-radius;
       width: $shallow-history-pseudostate-size;
       height: $shallow-history-pseudostate-size;
@@ -20,10 +23,17 @@ $connector-diff: -2px;
     }
 
     .name {
-    	white-space: nowrap;
-        position: absolute;
-        margin-left: 0px;
-        left: 50%;
+      margin-left: auto;
+      margin-right: auto;
+      display:block;
+      white-space: nowrap;
+      font-size: 12px;
+      font-weight: bold;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      height: 16px;
+      line-height: 16px;
     }
 
     .connector {

diff --git a/...LStateMachineDecorator/DiagramDesigner/UMLStateMachineDecorator.DiagramDesignerWidget.css b/...LStateMachineDecorator/DiagramDesigner/UMLStateMachineDecorator.DiagramDesignerWidget.css
diff --git a/...MLStateMachineDecorator/DiagramDesigner/UMLStateMachineDecorator.DiagramDesignerWidget.js b/...MLStateMachineDecorator/DiagramDesigner/UMLStateMachineDecorator.DiagramDesignerWidget.js
@@ -62,12 +62,7 @@ define(['js/Constants',
         this._renderContent();
 
         //if END or INITIAL state, don't display name except only on META level
-        if (META_TYPES['End State'] &&
-            META_TYPES.Initial &&
-            (this._metaType === META_TYPES['End State'] ||
-            this._metaType === META_TYPES.Initial) &&
-            this._gmeID !== META_TYPES.Initial &&
-            this._gmeID !== META_TYPES['End State']) {
+        if (META_TYPES['State'] && this._gmeID !== this._metaType && this._metaType !== META_TYPES['State']) {
             this.$name.remove();
         } else {
             // set title editable on double-click