Merge pull request TK11235#156 from entyu/v1.10.0b2

V1.10.0b2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "udonarium_lily",
-  "version": "1.10.0b1.1",
+  "version": "1.10.0b2",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

src/app/class/game-character.ts

@@ -5,16 +5,23 @@ import { ImageStorage } from './core/file-storage/image-storage';
 import { SyncObject, SyncVar } from './core/synchronize-object/decorator';
 import { DataElement } from './data-element';
 import { TabletopObject } from './tabletop-object';
+import { UUID } from '@udonarium/core/system/util/uuid';
 
 //import { GameObjectInventoryService } from 'service/game-object-inventory.service';
 import { ObjectStore } from './core/synchronize-object/object-store';
 
 @SyncObject('character')
 export class GameCharacter extends TabletopObject {
+  constructor(identifier: string = UUID.generateUuid()) {
+    super(identifier);
+    this.isAltitudeIndicate = true;
+  }
+
   @SyncVar() isLock: boolean = false;
 
   @SyncVar() rotate: number = 0;
   @SyncVar() roll: number = 0;
+  @SyncVar() isDropShadow: boolean = true;
 
   @SyncVar() hideInventory: boolean = false;
   @SyncVar() nonTalkFlag: boolean = false;
@@ -86,7 +93,6 @@ export class GameCharacter extends TabletopObject {
 
   get name(): string { return this.getCommonValue('name', ''); }
   get size(): number { return this.getCommonValue('size', 1); }
-
   get chatPalette(): ChatPalette {
     for (let child of this.children) {
       if (child instanceof ChatPalette) return child;
@@ -213,6 +219,7 @@ export class GameCharacter extends TabletopObject {
 
     let nameElement: DataElement = DataElement.create('name', name, {}, 'name_' + this.identifier);
     let sizeElement: DataElement = DataElement.create('size', size, {}, 'size_' + this.identifier);
+    let altitudeElement: DataElement = DataElement.create('altitude', 0, {}, 'altitude_' + this.identifier);
 
     if (this.imageDataElement.getFirstElementByName('imageIdentifier')) {
       this.imageDataElement.getFirstElementByName('imageIdentifier').value = imageIdentifier;
@@ -225,6 +232,7 @@ export class GameCharacter extends TabletopObject {
 
     this.commonDataElement.appendChild(nameElement);
     this.commonDataElement.appendChild(sizeElement);
+    this.commonDataElement.appendChild(altitudeElement);
 
     this.detailDataElement.appendChild(resourceElement);
     resourceElement.appendChild(hpElement);
@@ -285,6 +293,7 @@ export class GameCharacter extends TabletopObject {
 
     let nameElement: DataElement = DataElement.create('name', name, {}, 'name_' + this.identifier);
     let sizeElement: DataElement = DataElement.create('size', size, {}, 'size_' + this.identifier);
+    let altitudeElement: DataElement = DataElement.create('altitude', 0, {}, 'altitude_' + this.identifier);
 
     if (this.imageDataElement.getFirstElementByName('imageIdentifier')) {
       this.imageDataElement.getFirstElementByName('imageIdentifier').value = imageIdentifier;
@@ -296,6 +305,7 @@ export class GameCharacter extends TabletopObject {
 
     this.commonDataElement.appendChild(nameElement);
     this.commonDataElement.appendChild(sizeElement);
+    this.commonDataElement.appendChild(altitudeElement);
 
     this.detailDataElement.appendChild(resourceElement);
     resourceElement.appendChild(hpElement);
@@ -382,6 +392,7 @@ export class GameCharacter extends TabletopObject {
 
     let nameElement: DataElement = DataElement.create('name', name, {}, 'name_' + this.identifier);
     let sizeElement: DataElement = DataElement.create('size', size, {}, 'size_' + this.identifier);
+    let altitudeElement: DataElement = DataElement.create('altitude', 0, {}, 'altitude_' + this.identifier);
 
     if (this.imageDataElement.getFirstElementByName('imageIdentifier')) {
       this.imageDataElement.getFirstElementByName('imageIdentifier').value = imageIdentifier;
@@ -393,6 +404,7 @@ export class GameCharacter extends TabletopObject {
 
     this.commonDataElement.appendChild(nameElement);
     this.commonDataElement.appendChild(sizeElement);
+    this.commonDataElement.appendChild(altitudeElement);
 
 //    this.detailDataElement.appendChild(resourceElement);
 //    resourceElement.appendChild(hpElement);

src/app/class/range.ts

@@ -3,12 +3,19 @@ import { ObjectStore } from '@udonarium/core/synchronize-object/object-store';
 import { GameCharacter } from '@udonarium/game-character';
 import { DataElement } from './data-element';
 import { TabletopObject } from './tabletop-object';
+import { UUID } from './core/system/util/uuid';
 
 @SyncObject('range')
 export class RangeArea extends TabletopObject {
+  constructor(identifier: string = UUID.generateUuid()) {
+    super(identifier);
+    this.isAltitudeIndicate = true;
+    this.followingCharctorIdentifier = null;
+  }
   @SyncVar() isLock: boolean = false;
   @SyncVar() rotate: number = 0;
   @SyncVar() followingCharctor: GameCharacter = null;
+  @SyncVar() followingCharctorIdentifier: string = null;
   @SyncVar() followingCounterDummy: number = 0; // 追従時再描画用ダミー
 
   @SyncVar() offSetX: boolean = false;

src/app/class/tabletop-object.ts

@@ -57,6 +57,20 @@ export class TabletopObject extends ObjectNode {
     return this._imageFile;
   }
 
+  @SyncVar() isAltitudeIndicate: boolean = false;
+  get altitude(): number {
+    let element = this.getElement('altitude', this.commonDataElement);
+    if (!element && this.commonDataElement) {
+      this.commonDataElement.appendChild(DataElement.create('altitude', 0, {}, 'altitude_' + this.identifier));
+    }
+    let num = element ? +element.value : 0;
+    return Number.isNaN(num) ? 0 : num;
+  }
+  set altitude(altitude: number) {
+    let element = this.getElement('altitude', this.commonDataElement);
+    if (element) element.value = altitude;
+  }
+
   protected createDataElements() {
     this.initialize();
     let aliasName: string = this.aliasName;

src/app/class/terrain.ts

@@ -10,11 +10,23 @@ export enum TerrainViewState {
   ALL = 3,
 }
 
+export enum SlopeDirection {
+  NONE = 0,
+  TOP = 1,
+  BOTTOM = 2,
+  LEFT = 3,
+  RIGHT = 4,
+}
+
 @SyncObject('terrain')
 export class Terrain extends TabletopObject {
   @SyncVar() isLocked: boolean = false;
   @SyncVar() mode: TerrainViewState = TerrainViewState.ALL;
   @SyncVar() rotate: number = 0;
+  @SyncVar() isDropShadow: boolean = true;
+  @SyncVar() isSlope: boolean = false;
+  @SyncVar() isSurfaceShading: boolean = true;
+  @SyncVar() slopeDirection: number = SlopeDirection.NONE;
 
   @SyncVar() isGrid: boolean = false;
 

src/app/class/text-note.ts

@@ -10,6 +10,7 @@ export class TextNote extends TabletopObject {
   @SyncVar() rotate: number = 0;
   @SyncVar() zindex: number = 0;
   @SyncVar() password: string = '';
+  @SyncVar() isUpright: boolean = true;
 
   @SyncVar() limitHeight: boolean = false;
   @SyncVar() overViewWidth: number = 250;

src/app/component/context-menu/context-menu.component.css

@@ -48,6 +48,40 @@
 .menu-title {
   display: inline-block;
 }
+
+
+td.altitude {
+  vertical-align: middle;
+  height: 100%;
+}
+
+input.altitude {
+  writing-mode: bt-lr;   
+  appearance: slider-vertical;
+  width: 8px;
+  height: 200px;
+
+  padding: 3px;
+}
+
+.disabled .menu-title, .disabled .material-icons {
+  color: gray;
+}
+
+.altitude-view {
+  color: black;
+  vertical-align: top;
+  width: 3em;
+  text-align: right;
+}
+
+.ruler {
+  color: #444;
+  font-size: small;
+  padding-left: 4px;
+  padding-right: 2px;
+}
+
 hr.separator {
   margin: 0.1em -12px;
   height: 1px;

src/app/component/context-menu/context-menu.component.html

@@ -1,17 +1,29 @@
 <div class="component" [ngClass]="{'submenu-panel': isSubmenu, 'is-max-limit': !isSubmenu, 'pointer-events-none': isPointerDragging}" (mouseleave)="hideSubMenu()" #root>
   <div *ngIf="0 < title.length" class="title">{{title}}</div>
-  <ul>
-    <ng-container *ngIf = "title != 'インデックス'">
-      <ng-container *ngFor="let action of actions">
-        <ng-container *ngTemplateOutlet="action?.type === 'separator' ? separator : actionMenu; context: { action: action }"></ng-container>
-      </ng-container>
-    </ng-container>
-    <ng-container *ngIf = "title == 'インデックス'">
-      <ng-container *ngFor="let action of actions">
-        <ng-container *ngTemplateOutlet="action?.type === 'separator' ? separator : indexMenu; context: { action: action }"></ng-container>
-      </ng-container>
-    </ng-container>
-  </ul>
+  <div style="display: flex; align-items: top">
+    <div *ngIf="altitudeHande" class="altitude ruler" style="display: flex; align-self: stretch; flex-direction: column; align-content: center">
+      <div style="margin-top: 2em;">高</div><div style="align-self: center; margin-top: auto; margin-bottom: auto">0</div><div style="margin-bottom: 2em;">低</div>
+    </div>
+    <div *ngIf="altitudeHande" class="altitude"><input #altitudeSlider class="altitude" title="{{altitudeHande.altitude}}" [(ngModel)]="altitudeHande.altitude" type="range" max="12" min="-12" step="0.5" orient="vertical"></div>
+    <div style="flex-grow: 1;">
+      <div *ngIf="altitudeHande">
+        <div class="title" [style.color]="titleColor" [style.font-weight]="titleBold ? 'bolder' : 'normal'"><span style="font-size: small;" *ngIf="altitudeHande"> (高度 <input type="number" step="0.1" style="font-size: small; width:3.6em; text-align:right" [(ngModel)]="altitudeHande.altitude">)</span>
+        </div>
+      </div>
+      <ul>
+        <ng-container *ngIf = "title != 'インデックス'">
+          <ng-container *ngFor="let action of actions">
+            <ng-container *ngTemplateOutlet="action?.type === 'separator' ? separator : actionMenu; context: { action: action }"></ng-container>
+          </ng-container>
+        </ng-container>
+        <ng-container *ngIf = "title == 'インデックス'">
+          <ng-container *ngFor="let action of actions">
+            <ng-container *ngTemplateOutlet="action?.type === 'separator' ? separator : indexMenu; context: { action: action }"></ng-container>
+          </ng-container>
+        </ng-container>
+      </ul>
+    </div>
+  </div>
 </div>
 
 <ng-template #indexMenu let-action="action">
@@ -22,7 +34,13 @@
 
 <ng-template #actionMenu let-action="action">
   <li class="hasHighlight" (click)="doAction(action)" (mouseenter)="showSubMenu(action)">
-    <div class="menu-title">{{action.name}}</div>
+    <div class="menu-title">
+      <input *ngIf="action.name && action.name.indexOf('☑') == 0" type="checkbox" [disabled]="action.disabled" checked/>
+      <input *ngIf="action.name && action.name.indexOf('☐') == 0" type="checkbox" [disabled]="action.disabled" />
+      <input *ngIf="action.name && action.name.indexOf('◉') == 0" type="radio" [disabled]="action.disabled" checked />
+      <input *ngIf="action.name && action.name.indexOf('○') == 0" type="radio" [disabled]="action.disabled" />
+      {{ action.name.replace('☑', '').replace('☐', '').replace('◉', '').replace('○', '') }}
+    </div>
     <div *ngIf="action.subActions" class="sub-menu-arrow">
       <i class="material-icons" style="font-size: 1em; vertical-align: bottom;">arrow_forward_ios</i>
     </div>

src/app/component/context-menu/context-menu.component.ts

@@ -1,6 +1,7 @@
 import { AfterViewInit, Component, ElementRef, HostListener, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ContextMenuAction, ContextMenuService } from 'service/context-menu.service';
 import { PointerDeviceService } from 'service/pointer-device.service';
+import { TabletopObject } from '@udonarium/tabletop-object';
 
 import { EventSystem } from '@udonarium/core/system';
 
@@ -26,6 +27,12 @@ export class ContextMenuComponent implements OnInit, OnDestroy, AfterViewInit {
   private callbackOnOutsideClick = (e) => this.onOutsideClick(e);
 
   get isPointerDragging(): boolean { return this.pointerDeviceService.isDragging; }
+  get altitudeHande(): TabletopObject { 
+    for (let action of this.actions) {
+      if (action && action.altitudeHande) return action.altitudeHande;
+    }
+    return null;
+  }
 
   constructor(
     private elementRef: ElementRef<HTMLElement>,

src/app/component/game-character/game-character.component.css

@@ -32,6 +32,11 @@
   transition: transform 132ms linear;
 }
 
+.upright-transform {
+  -webkit-transition: -webkit-transform 132ms ease;
+  transition: transform 132ms ease;
+}
+
 .is-pointer-events-none {
   pointer-events: none;
 }
@@ -269,6 +274,22 @@
   display: none;
 }
 
+.altitude-indicator {
+  font-size: 10px;
+}
+
+.elevation-indicator, .altitude-indicator {
+  padding-left: 2px;
+  color: black;
+  text-shadow: #f5f5f5 0px 0px 3px;
+  backface-visibility: hidden;
+}
+
+.elevation-indicator {
+  font-weight: bolder;
+  font-size: 12px;
+}
+
 .component:hover .material-icons, .component:active .material-icons {
   display: inline;
 }