マップマスクのUI改善。

NanasuNANA · Dec 24, 2023 · e4d3fe6 · e4d3fe6
1 parent c9dfc3e
commit e4d3fe6
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 53 deletions.
diff --git a/src/app/class/text-note.ts b/src/app/class/text-note.ts
@@ -11,6 +11,7 @@ export class TextNote extends TabletopObject {
   @SyncVar() isUpright: boolean = true;
   @SyncVar() isLocked: boolean = false;
   @SyncVar() isWhiteOut: boolean = false;
+  @SyncVar() isShowTitle: boolean = true;
 
   get width(): number { return this.getCommonValue('width', 1); }
   get height(): number { return this.getCommonValue('height', 1); }

diff --git a/src/app/component/text-note/text-note.component.css b/src/app/component/text-note/text-note.component.css
@@ -244,6 +244,10 @@
   -webkit-transition: -webkit-transform 132ms cubic-bezier(.21,.97,.75,1.25);
   transition: transform 132ms cubic-bezier(.21,.97,.75,1.25);
 }
+.fall.softy {
+  -webkit-transition: -webkit-transform 132ms ease-in-out;
+  transition: transform 132ms ease-in-out;
+}
 
 .hide-area {
   overflow: hidden !important;

diff --git a/src/app/component/text-note/text-note.component.html b/src/app/component/text-note/text-note.component.html
@@ -1,27 +1,29 @@
-<div class="component is-3d is-pointer-events-none"
+<div class="component is-3d is-pointer-events-none" [ngClass]="{'is-grab': !isLocked}"
   appMovable [movable.option]="movableOption" [movable.disable]="isEditorSelected || isLocked" (movable.ondragstart)="onMove()" (movable.ondragend)="onMoved()">
   <div class="is-3d" appRotable [rotable.option]="rotableOption" [rotable.disable]="isLocked" (rotable.ondragstart)="onMove()" (rotable.ondragend)="onMoved()">
     <div class="component-content is-3d is-pointer-events-auto"
       [style.width.px]="width * gridSize">
-      <div class="is-3d" [ngClass]="{'is-transition': transition, 'fall': fall}" [ngStyle]="{'transform': 'translateZ(' + (altitude * gridSize) + 'px) rotateY(90deg) rotateZ(' + (isUpright ? 0 : 90) + 'deg) rotateY(-90deg)'}">
-        <div class="upright-transform is-3d is-bg-color is-front is-bg-texture chrome-smooth-image-trick" [ngClass]="{'is-bg-filter': isWhiteOut && imageFile?.url.length > 0}"
-          [style.background-image]="'url(' + imageFile?.url + ')' | safe: 'style'" [style.width.px]="width * gridSize" [style.min-height.px]="height * gridSize">
-          <div *ngIf="title.length" class="title is-3d is-black-background is-pointer-events-none">{{title}}</div>
-          <textarea #textArea (input)="calcFitHeight();" class="textarea is-3d" [ngClass]="{'is-pointer-events-none': !isEditorSelected, 'is-pointer-events-auto': isEditorSelected, 'hide-area': !isEditorSelected}"
-            [style.font-size.px]="fontSize + 9" [(ngModel)]="text" spellcheck="false"></textarea>
-          <div class="is-3d is-outline-text note-text" style="margin-top:-18px" [ngClass]="{'hide-area': isEditorSelected}" (click)="activate()"
-            [style.font-size.px]="fontSize + 9" [style.color]="color" [style.text-shadow]="textShadowCss" [innerHTML]="lastNewLineAdjust(rubiedText) | safe: 'html'"></div>
+      <div class="is-3d" [ngClass]="{'fall': altitude == 0, 'softy': !isUpright}" [ngStyle]="{'transform': 'translateZ(' + (altitude * gridSize) + 'px) rotateY(90deg)'}">
+        <div class="is-3d is-transition" [ngStyle]="{'transform': 'rotateZ(' + (isUpright ? 0 : 90) + 'deg) rotateY(-90deg)'}">
+          <div class="upright-transform is-3d is-bg-color is-front is-bg-texture chrome-smooth-image-trick" [ngClass]="{'is-bg-filter': isWhiteOut && imageFile?.url.length > 0}"
+            [style.background-image]="'url(' + imageFile?.url + ')' | safe: 'style'" [style.width.px]="width * gridSize" [style.min-height.px]="height * gridSize">
+            <div *ngIf="isShowTitle && title.length" class="title is-3d is-black-background is-pointer-events-none">{{title}}</div>
+            <textarea #textArea (input)="calcFitHeight();" class="textarea is-3d" [ngClass]="{'is-pointer-events-none': !isEditorSelected, 'is-pointer-events-auto': isEditorSelected, 'hide-area': !isEditorSelected}"
+              [style.font-size.px]="fontSize + 9" [(ngModel)]="text" spellcheck="false"></textarea>
+            <div class="is-3d is-outline-text note-text" style="margin-top:-18px" [ngClass]="{'hide-area': isEditorSelected}" (click)="activate()"
+              [style.font-size.px]="fontSize + 9" [style.color]="color" [style.text-shadow]="textShadowCss" [innerHTML]="lastNewLineAdjust(rubiedText) | safe: 'html'"></div>
+              <div *ngIf="isSelected" class="selected-highlight" [ngClass]="{'is-magnetic': isMagnetic}"></div>
+          </div>
+          <div class="upright-transform is-3d is-back is-bg-color is-bg-texture chrome-smooth-image-trick" [ngClass]="{'is-bg-filter': isWhiteOut && imageFile?.url.length > 0}"
+            [style.background-image]="'url(' + imageFile?.url + ')' | safe: 'style'" [style.width.px]="width * gridSize" [style.min-height.px]="height * gridSize">
             <div *ngIf="isSelected" class="selected-highlight" [ngClass]="{'is-magnetic': isMagnetic}"></div>
-        </div>
-        <div class="upright-transform is-3d is-back is-bg-color is-bg-texture chrome-smooth-image-trick" [ngClass]="{'is-bg-filter': isWhiteOut && imageFile?.url.length > 0}"
-          [style.background-image]="'url(' + imageFile?.url + ')' | safe: 'style'" [style.width.px]="width * gridSize" [style.min-height.px]="height * gridSize">
-          <div *ngIf="isSelected" class="selected-highlight" [ngClass]="{'is-magnetic': isMagnetic}"></div>
-          <div class="is-3d is-pointer-events-none" style="visibility: hidden">
-            <div *ngIf="title.length" class="title is-3d is-black-background is-pointer-events-none">{{title}}</div>
-            <textarea class="textarea is-3d hide-area is-pointer-events-none"
-              [style.font-size.px]="fontSize + 9" [(ngModel)]="text" spellcheck="false" readonly></textarea>
-            <div class="is-3d is-outline-text note-text is-pointer-events-none" style="margin-top:-18px"
-              [style.font-size.px]="fontSize + 9" [innerHTML]="lastNewLineAdjust(rubiedText) | safe: 'html'"></div>
+            <div class="is-3d is-pointer-events-none" style="visibility: hidden">
+              <div *ngIf="isShowTitle && title.length" class="title is-3d is-black-background is-pointer-events-none">{{title}}</div>
+              <textarea class="textarea is-3d hide-area is-pointer-events-none"
+                [style.font-size.px]="fontSize + 9" [(ngModel)]="text" spellcheck="false" readonly></textarea>
+              <div class="is-3d is-outline-text note-text is-pointer-events-none" style="margin-top:-18px"
+                [style.font-size.px]="fontSize + 9" [innerHTML]="lastNewLineAdjust(rubiedText) | safe: 'html'"></div>
+            </div>
           </div>
         </div>
       </div>

diff --git a/src/app/component/text-note/text-note.component.ts b/src/app/component/text-note/text-note.component.ts
@@ -86,6 +86,9 @@ export class TextNoteComponent implements OnChanges, OnDestroy {
   get isLocked(): boolean { return this.textNote.isLocked; }
   set isLocked(isLocked: boolean) { this.textNote.isLocked = isLocked; }
 
+  get isShowTitle(): boolean { return this.textNote.isShowTitle; }
+  set isShowTitle(isShowTitle: boolean) { this.textNote.isShowTitle = isShowTitle; }
+
   get isWhiteOut(): boolean { return this.textNote.isWhiteOut; }
   set isWhiteOut(isWhiteOut: boolean) { this.textNote.isWhiteOut = isWhiteOut; }
 
@@ -105,20 +108,6 @@ export class TextNoteComponent implements OnChanges, OnDestroy {
   gridSize: number = 50;
   math = Math;
 
-  private _transitionTimeout = null;
-  private _transition: boolean = false;
-  get transition(): boolean { return this._transition; }
-  set transition(transition: boolean) {
-    this._transition = transition;
-    if (this._transitionTimeout) clearTimeout(this._transitionTimeout);
-    if (transition) {
-      this._transitionTimeout = setTimeout(() => {
-        this._transition = false;
-      }, 132);
-    } else {
-      this._transitionTimeout = null;
-    }
-  }
   private _fallTimeout = null;
   private _fall: boolean = false;
   get fall(): boolean { return this._fall; }
@@ -195,7 +184,6 @@ export class TextNoteComponent implements OnChanges, OnDestroy {
   }
 
   ngOnDestroy() {
-    if (this._transitionTimeout) clearTimeout(this._transitionTimeout);
     if (this._fallTimeout) clearTimeout(this._fallTimeout)
     EventSystem.unregister(this);
     this.input.destroy();
@@ -304,29 +292,41 @@ export class TextNoteComponent implements OnChanges, OnDestroy {
       (this.isUpright
         ? {
           name: '☑ 直立', action: () => {
-            this.transition = true;
+            //this.transition = true;
             this.isUpright = false;
           },
           checkBox: 'check'
         } : {
           name: '☐ 直立', action: () => {
-            this.transition = true;
+            //this.transition = true;
             this.isUpright = true;
           },
           checkBox: 'check'
         }),
-        (this.isWhiteOut
-          ? {
-            name: '☑ 画像の色抜き', action: () => {
-              this.isWhiteOut = false;
-            },
-            checkBox: 'check'
-          } : {
-            name: '☐ 画像の色抜き', action: () => {
-              this.isWhiteOut = true;
-            },
-            checkBox: 'check'
-          }),
+      (this.isShowTitle
+        ? {
+          name: '☑ タイトルバーの表示', action: () => {
+            this.isShowTitle = false;
+          },
+          checkBox: 'check'
+        } : {
+          name: '☐ タイトルバーの表示', action: () => {
+            this.isShowTitle = true;
+          },
+          checkBox: 'check'
+        }),
+      (this.isWhiteOut
+        ? {
+          name: '☑ 画像の色抜き', action: () => {
+            this.isWhiteOut = false;
+          },
+          checkBox: 'check'
+        } : {
+          name: '☐ 画像の色抜き', action: () => {
+            this.isWhiteOut = true;
+          },
+          checkBox: 'check'
+        }),
       ContextMenuSeparator,
       (this.isAltitudeIndicate
         ? {
@@ -343,11 +343,6 @@ export class TextNoteComponent implements OnChanges, OnDestroy {
       {
         name: '高度を0にする', action: () => {
           if (this.altitude != 0) {
-            if (this.isUpright) {
-              this.fall = true;
-            } else {
-              this.transition = true;
-            }
             this.altitude = 0;
             SoundEffect.play(PresetSound.sweep);
           }