@flexem/fc-gui 3.0.0-alpha.180 → 3.0.0-alpha.182

package/gui/gui-view.js

@@ -141,7 +141,7 @@ export class GuiView {
                 }
             });
     }
-    popView(viewIndex, hostContainerId, el) {
+    popView(viewIndex, hostContainerId, el, triggerRect) {
         return this.context.configStore.viewStore.getViewConfig(viewIndex).pipe(map(view => {
             if (!view.config || !view.config.length) {
                 throw new ConfigIsEmptyError();
@@ -162,6 +162,10 @@ export class GuiView {
                 x = settings.popup.location.x;
                 y = settings.popup.location.y;
             }
+            else if (settings.popup.locationType === ViewPopupLocationType.NearButton && triggerRect) {
+                const hasShadow = settings.popup.backdropType === ViewPopupBackdropType.Shadow && !this.isMobileMode;
+                ({ x, y } = this.getNearButtonPosition(popView, triggerRect, hasShadow));
+            }
             else {
                 x = (this.rawWidth - popView.rawWidth) / 2;
                 y = (this.rawHeight - popView.rawHeight) / 2;
@@ -181,6 +185,73 @@ export class GuiView {
             this.element.appendChild(popView.element);
         }));
     }
+    /**
+     * 把屏幕像素矩形（如按钮的 getBoundingClientRect）换算为当前画面 SVG 坐标系下的矩形。
+     * 用 getScreenCTM 而不是简单的宽高比换算，因为画面容器宽高比与 rawWidth/rawHeight 不一致时
+     * SVG 会按 preserveAspectRatio 留白（letterbox），线性比例换算会有偏差。
+     */
+    toLocalRect(rect) {
+        const svgRoot = this.element;
+        const ctm = svgRoot.getScreenCTM && svgRoot.getScreenCTM();
+        if (ctm) {
+            const inverse = ctm.inverse();
+            const toLocal = (clientX, clientY) => {
+                const pt = svgRoot.createSVGPoint();
+                pt.x = clientX;
+                pt.y = clientY;
+                return pt.matrixTransform(inverse);
+            };
+            const topLeft = toLocal(rect.left, rect.top);
+            const bottomRight = toLocal(rect.right, rect.bottom);
+            return {
+                x: topLeft.x,
+                y: topLeft.y,
+                width: bottomRight.x - topLeft.x,
+                height: bottomRight.y - topLeft.y
+            };
+        }
+        const viewRect = this.element.getBoundingClientRect();
+        const scaleX = viewRect.width ? this.rawWidth / viewRect.width : 1;
+        const scaleY = viewRect.height ? this.rawHeight / viewRect.height : 1;
+        return {
+            x: (rect.left - viewRect.left) * scaleX,
+            y: (rect.top - viewRect.top) * scaleY,
+            width: rect.width * scaleX,
+            height: rect.height * scaleY
+        };
+    }
+    /**
+     * 按钮附近：按钮与弹出画面之间留缝隙，两侧都放得下时默认放右侧，放不下时放在放得下的一侧；
+     * 竖直方向默认与按钮顶部对齐，下方放不下时改为与按钮底部对齐；
+     * 左右两侧都放不下（弹窗比画面还宽）时直接退化为画面居中，不再跟随按钮
+     */
+    getNearButtonPosition(popView, triggerRect, hasShadow) {
+        const gap = 20;
+        const { x: buttonX, y: buttonY, width: buttonWidth, height: buttonHeight } = this.toLocalRect(triggerRect);
+        const rightX = buttonX + buttonWidth + gap;
+        const leftX = buttonX - gap - popView.rawWidth;
+        const fitsRight = rightX + popView.rawWidth <= this.rawWidth;
+        const fitsLeft = leftX >= 0;
+        let x;
+        let y;
+        if (!fitsRight && !fitsLeft) {
+            x = (this.rawWidth - popView.rawWidth) / 2;
+            y = (this.rawHeight - popView.rawHeight) / 2;
+        }
+        else {
+            x = fitsRight ? rightX : leftX;
+            const fitsBelow = buttonY + popView.rawHeight <= this.rawHeight;
+            y = fitsBelow ? buttonY : buttonY + buttonHeight - popView.rawHeight;
+            if (hasShadow) {
+                // 阴影会把可见内容整体右下偏移 SHADOW_INSET，这里反向补偏移让可见内容而不是容器本身对齐按钮
+                x -= GuiView.SHADOW_INSET;
+                y -= GuiView.SHADOW_INSET;
+            }
+        }
+        x = Math.max(0, Math.min(x, this.rawWidth - popView.rawWidth));
+        y = Math.max(0, Math.min(y, this.rawHeight - popView.rawHeight));
+        return { x, y };
+    }
     closeView() {
         if (!this.parentView) {
             return;
@@ -218,10 +289,11 @@ export class GuiView {
         if (!container) {
             return;
         }
+        const inset = GuiView.SHADOW_INSET;
         container.setAttribute('filter', `url(#${filterId})`);
-        container.setAttribute('x', '6');
-        container.setAttribute('y', '6');
-        $(this.element).children('g').attr('transform', 'matrix(1, 0, 0, 1, 6, 6)');
+        container.setAttribute('x', String(inset));
+        container.setAttribute('y', String(inset));
+        $(this.element).children('g').attr('transform', `matrix(1, 0, 0, 1, ${inset}, ${inset})`);
     }
     hideMusk() {
         if (this.muskElement) {
@@ -263,3 +335,5 @@ export class GuiView {
         }
     }
 }
+/** showShadow() 给阴影留白，内容整体右下偏移的量，"按钮附近"定位需要据此修正才能让可见内容与按钮对齐 */
+GuiView.SHADOW_INSET = 5;

package/gui/gui-view.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GuiView":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":51,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":52,"character":41},{"__symbolic":"reference","module":"./gui-context","name":"GuiContext","line":53,"character":34},{"__symbolic":"reference","name":"GuiView"}]}],"resize":[{"__symbolic":"method"}],"load":[{"__symbolic":"method"}],"loadElementState":[{"__symbolic":"method"}],"popView":[{"__symbolic":"method"}],"closeView":[{"__symbolic":"method"}],"moveView":[{"__symbolic":"method"}],"showMusk":[{"__symbolic":"method"}],"showShadow":[{"__symbolic":"method"}],"hideMusk":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"normalOpenedVariableNames":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GuiView":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":54,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":55,"character":41},{"__symbolic":"reference","module":"./gui-context","name":"GuiContext","line":56,"character":34},{"__symbolic":"reference","name":"GuiView"}]}],"resize":[{"__symbolic":"method"}],"load":[{"__symbolic":"method"}],"loadElementState":[{"__symbolic":"method"}],"popView":[{"__symbolic":"method"}],"toLocalRect":[{"__symbolic":"method"}],"getNearButtonPosition":[{"__symbolic":"method"}],"closeView":[{"__symbolic":"method"}],"moveView":[{"__symbolic":"method"}],"showMusk":[{"__symbolic":"method"}],"showShadow":[{"__symbolic":"method"}],"hideMusk":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"normalOpenedVariableNames":[{"__symbolic":"method"}]},"statics":{"SHADOW_INSET":5}}}}]

package/modal/verify-password/verify-password-modal.component.d.ts

@@ -1,7 +1,8 @@
-import { OnInit } from '@angular/core';
+import { Injector, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Localization } from '../../localization';
 import { SecurityChecker } from '../../security';
+import { ReleasedVariableService } from '../../service';
 export declare class VerifyPasswordModalComponent implements OnInit {
     localization: Localization;
     private _onClosed;
@@ -9,8 +10,11 @@ export declare class VerifyPasswordModalComponent implements OnInit {
     passwordError: boolean;
     password: string;
     securityChecker: SecurityChecker;
+    releasedVariableService?: ReleasedVariableService;
     validationErrorText: string;
-    constructor(localization: Localization);
+    isMobileMode: boolean;
+    private readonly isDisplayModeMobile;
+    constructor(localization: Localization, injector: Injector);
     ngOnInit(): void;
     validate(): void;
     checkSecurity(): void;

package/modal/verify-password/verify-password-modal.component.html

@@ -10,11 +10,11 @@
   <div class="modal-body">
     <span class="password-span">{{localization.password}}：
     </span>
-    <input type="password" name="password" autoFocus class="form-control element-password" [(ngModel)]="password" (keyup)="validate()"
+    <input type="password" name="password" autoFocus [class.verify-password-input]="!isMobileMode" class="form-control element-password" [(ngModel)]="password" (keyup)="validate()"
       autocomplete="off">
     <span class="help-block text-danger" [hidden]="!passwordError">{{validationErrorText}}</span>
   </div>
-  <div class="modal-footer">
+  <div class="modal-footer" [class.verify-password-footer]="!isMobileMode">
     <button type="button" class="btn md-skip btn-cancel" (click)="close()">{{localization.cancel}}
     </button>
     <button type="submit" class="btn md-skip btn-primary" [disabled]="passwordError">{{localization.submit}}</button>

package/modal/verify-password/verify-password-modal.component.js

@@ -10,20 +10,26 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 var __param = (this && this.__param) || function (paramIndex, decorator) {
     return function (target, key) { decorator(target, key, paramIndex); }
 };
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, Injector } from '@angular/core';
 import { Subject } from 'rxjs';
 import { isNil } from 'lodash';
 import { LOCALIZATION } from '../../localization';
+import { DisplayMode, GlobalSettings } from '../../settings';
 let VerifyPasswordModalComponent = class VerifyPasswordModalComponent {
-    constructor(localization) {
+    constructor(localization, injector) {
         this.localization = localization;
         this._onClosed = new Subject();
         this.passwordError = false;
+        this.isMobileMode = false;
+        this.isDisplayModeMobile = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
     }
     get onClosed() {
         return this._onClosed;
     }
     ngOnInit() {
+        // 画面模拟（SimulateRemoteGuiContext）下 releasedVariableService 恒为空，
+        // 借此和真实移动端区分开，避免在 PC 浏览器模拟移动端时套用移动端专属样式
+        this.isMobileMode = this.isDisplayModeMobile && !!this.releasedVariableService;
         this.validate();
     }
     validate() {
@@ -57,10 +63,10 @@ let VerifyPasswordModalComponent = class VerifyPasswordModalComponent {
 VerifyPasswordModalComponent = __decorate([
     Component({
         selector: 'verify-password',
-        template: "<form #verifyPasswordForm=\"ngForm\" novalidate (ngSubmit)=\"checkSecurity()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.passwordVerify}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"password-span\">{{localization.password}}： </span> <input type=\"password\" name=\"password\" autoFocus class=\"form-control element-password\" [(ngModel)]=\"password\" (keyup)=\"validate()\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!passwordError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\"> <button type=\"button\" class=\"btn md-skip btn-cancel\" (click)=\"close()\">{{localization.cancel}} </button> <button type=\"submit\" class=\"btn md-skip btn-primary\" [disabled]=\"passwordError\">{{localization.submit}}</button> </div> </form> ",
-        styles: [".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; color: #fff; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { color: #fff; height: 32px; margin-right: 10px; line-height: 0px } .password-span { color: #7f939e; font-size: 14px; margin-left: 15px; } .btn-cancel { color: #fff; height: 32px; min-width: 71px; margin-right: 6px; background-color: #dddddd; line-height: 0px } .element-password { padding-left: 8px; height: 32px; min-width: 71px; margin-left: 16px; } "]
+        template: "<form #verifyPasswordForm=\"ngForm\" novalidate (ngSubmit)=\"checkSecurity()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.passwordVerify}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"password-span\">{{localization.password}}： </span> <input type=\"password\" name=\"password\" autoFocus [class.verify-password-input]=\"!isMobileMode\" class=\"form-control element-password\" [(ngModel)]=\"password\" (keyup)=\"validate()\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!passwordError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\" [class.verify-password-footer]=\"!isMobileMode\"> <button type=\"button\" class=\"btn md-skip btn-cancel\" (click)=\"close()\">{{localization.cancel}} </button> <button type=\"submit\" class=\"btn md-skip btn-primary\" [disabled]=\"passwordError\">{{localization.submit}}</button> </div> </form> ",
+        styles: [".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; color: #fff; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { color: #fff; height: 32px; min-width: 71px; margin-right: 10px; line-height: 0px } .password-span { color: #7f939e; font-size: 14px; margin-left: 15px; } .btn-cancel { color: #fff; height: 32px; min-width: 71px; margin-right: 6px; background-color: #dddddd; line-height: 0px } .element-password { padding-left: 8px; height: 32px; min-width: 71px; margin-left: 16px; } .verify-password-input { width: 600px; } .verify-password-footer { padding-right: 18px !important; }"]
     }),
     __param(0, Inject(LOCALIZATION)),
-    __metadata("design:paramtypes", [Object])
+    __metadata("design:paramtypes", [Object, Injector])
 ], VerifyPasswordModalComponent);
 export { VerifyPasswordModalComponent };

package/modal/verify-password/verify-password-modal.component.less

@@ -38,6 +38,7 @@
 .btn-primary {
   color: #fff;
   height: 32px;
+  min-width: 71px;
   margin-right: 10px;
   line-height: 0px
 }
@@ -63,3 +64,11 @@
   min-width: 71px;
   margin-left: 16px;
 }
+
+.verify-password-input {
+  width: 600px;
+}
+
+.verify-password-footer {
+  padding-right: 18px !important;
+}

package/modal/verify-password/verify-password-modal.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"VerifyPasswordModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"verify-password","template":"<form #verifyPasswordForm=\"ngForm\" novalidate (ngSubmit)=\"checkSecurity()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.passwordVerify}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"password-span\">{{localization.password}}： </span> <input type=\"password\" name=\"password\" autoFocus class=\"form-control element-password\" [(ngModel)]=\"password\" (keyup)=\"validate()\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!passwordError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\"> <button type=\"button\" class=\"btn md-skip btn-cancel\" (click)=\"close()\">{{localization.cancel}} </button> <button type=\"submit\" class=\"btn md-skip btn-primary\" [disabled]=\"passwordError\">{{localization.submit}}</button> </div> </form> ","styles":[".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; color: #fff; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { color: #fff; height: 32px; margin-right: 10px; line-height: 0px } .password-span { color: #7f939e; font-size: 14px; margin-left: 15px; } .btn-cancel { color: #fff; height: 32px; min-width: 71px; margin-right: 6px; background-color: #dddddd; line-height: 0px } .element-password { padding-left: 8px; height: 32px; min-width: 71px; margin-left: 16px; } "]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":24,"character":17},"arguments":[{"__symbolic":"reference","module":"../../localization","name":"LOCALIZATION","line":24,"character":24}]}]],"parameters":[{"__symbolic":"reference","module":"../../localization","name":"Localization","line":24,"character":59}]}],"ngOnInit":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"checkSecurity":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"VerifyPasswordModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"verify-password","template":"<form #verifyPasswordForm=\"ngForm\" novalidate (ngSubmit)=\"checkSecurity()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.passwordVerify}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"password-span\">{{localization.password}}： </span> <input type=\"password\" name=\"password\" autoFocus [class.verify-password-input]=\"!isMobileMode\" class=\"form-control element-password\" [(ngModel)]=\"password\" (keyup)=\"validate()\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!passwordError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\" [class.verify-password-footer]=\"!isMobileMode\"> <button type=\"button\" class=\"btn md-skip btn-cancel\" (click)=\"close()\">{{localization.cancel}} </button> <button type=\"submit\" class=\"btn md-skip btn-primary\" [disabled]=\"passwordError\">{{localization.submit}}</button> </div> </form> ","styles":[".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; color: #fff; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { color: #fff; height: 32px; min-width: 71px; margin-right: 10px; line-height: 0px } .password-span { color: #7f939e; font-size: 14px; margin-left: 15px; } .btn-cancel { color: #fff; height: 32px; min-width: 71px; margin-right: 6px; background-color: #dddddd; line-height: 0px } .element-password { padding-left: 8px; height: 32px; min-width: 71px; margin-left: 16px; } .verify-password-input { width: 600px; } .verify-password-footer { padding-right: 18px !important; }"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":29,"character":17},"arguments":[{"__symbolic":"reference","module":"../../localization","name":"LOCALIZATION","line":29,"character":24}]}],null],"parameters":[{"__symbolic":"reference","module":"../../localization","name":"Localization","line":29,"character":59},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":29,"character":83}]}],"ngOnInit":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"checkSecurity":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}}}}]

package/modal/write-character/write-character-modal-args.d.ts

@@ -1,7 +1,9 @@
+import { ReleasedVariableService } from '../../service';
 export declare class WriteCharacterModalArgs {
     variableName: string;
     isPassword: boolean;
     charCount: number;
     originValue: any;
-    constructor(variableName: string, isPassword: boolean, charCount: number, originValue: any);
+    releasedVariableService?: ReleasedVariableService;
+    constructor(variableName: string, isPassword: boolean, charCount: number, originValue: any, releasedVariableService?: ReleasedVariableService);
 }

package/modal/write-character/write-character-modal-args.js

@@ -1,8 +1,9 @@
 export class WriteCharacterModalArgs {
-    constructor(variableName, isPassword, charCount, originValue) {
+    constructor(variableName, isPassword, charCount, originValue, releasedVariableService) {
         this.variableName = variableName;
         this.isPassword = isPassword;
         this.charCount = charCount;
         this.originValue = originValue;
+        this.releasedVariableService = releasedVariableService;
     }
 }

package/modal/write-character/write-character-modal-args.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"WriteCharacterModalArgs":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"boolean"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"any"}]}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"WriteCharacterModalArgs":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"boolean"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"../../service","name":"ReleasedVariableService","line":8,"character":41}]}]}}}}]

package/modal/write-character/write-character-modal.component.d.ts

@@ -9,6 +9,7 @@ export declare class WriteCharacterModalComponent implements OnInit {
     get onClosed(): Observable<WriteValueModelResult>;
     args: WriteCharacterModalArgs;
     isMobileMode: boolean;
+    private readonly isDisplayModeMobile;
     value: string;
     variableName: string;
     isPassword: boolean;

package/modal/write-character/write-character-modal.component.js

@@ -18,7 +18,8 @@ let WriteCharacterModalComponent = class WriteCharacterModalComponent {
     constructor(localization, injector) {
         this.localization = localization;
         this._onClosed = new Subject();
-        this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
+        this.isMobileMode = false;
+        this.isDisplayModeMobile = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
     }
     get onClosed() {
         return this._onClosed;
@@ -27,6 +28,9 @@ let WriteCharacterModalComponent = class WriteCharacterModalComponent {
         return this.localization.loadFailed;
     }
     ngOnInit() {
+        // 画面模拟（SimulateRemoteGuiContext）下 releasedVariableService 恒为空，
+        // 借此和真实移动端区分开，避免在 PC 浏览器模拟移动端时套用移动端专属样式
+        this.isMobileMode = this.isDisplayModeMobile && !!this.args.releasedVariableService;
         this.variableName = this.args.variableName;
         this.isPassword = this.args.isPassword ? this.args.isPassword : false;
         this.charCount = this.args.charCount;

package/modal/write-character/write-character-modal.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"WriteCharacterModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"writeCharacterModal","template":"<form #writeValueForm=\"ngForm\" novalidate (ngSubmit)=\"save()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.setting}}</span> <span>{{variableName}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <input type=\"text\" name=\"characterInput\" autoFocus [class.form-control-write]=\"!isMobileMode\" class=\"form-control write-character-value\" [(ngModel)]=\"value\" (keyup)=\"validate()\" *ngIf=\"!isPassword\" autocomplete=\"off\"> <input type=\"password\" name=\"passwordInput\" autoFocus [class.form-control-write]=\"!isMobileMode\" class=\"form-control write-character-value\" [(ngModel)]=\"value\" (keyup)=\"validate()\" *ngIf=\"isPassword\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!validationError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\" [class.modal-footer-write]=\"!isMobileMode\"> <button type=\"submit\" [class.btn-primary-write]=\"!isMobileMode\" class=\"btn md-skip btn-primary btn-block\" [disabled]=\"validationError\">{{localization.submit}}</button> </div> </form> ","styles":[".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 10px 0px 0px 15px; } .btn-primary { background-color: #3B97FC; border-color: #3B97FC; padding: 5px 30px; width: 90%; margin: 0 5%; height: 32px; } .write-character-value { padding-left: 8px; height: 32px; margin-left: 16px; } .modal-footer-write { margin-right: 4px; padding: 10px 5px 20px 5px !important; } .btn-primary-write { width: 585px; margin: 0 15px 0 0; } .form-control-write { margin: 0 16px; width: 585px; } "]}]}],"members":{"invalidErrorText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":30,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":36,"character":9},"arguments":[{"__symbolic":"reference","module":"../../localization","name":"LOCALIZATION","line":36,"character":16}]}],null],"parameters":[{"__symbolic":"reference","module":"../../localization","name":"Localization","line":36,"character":51},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":37,"character":18}]}],"ngOnInit":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"showValidationErrorInfo":[{"__symbolic":"method"}],"hideValidationErrorInfo":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"WriteCharacterModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"writeCharacterModal","template":"<form #writeValueForm=\"ngForm\" novalidate (ngSubmit)=\"save()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.setting}}</span> <span>{{variableName}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <input type=\"text\" name=\"characterInput\" autoFocus [class.form-control-write]=\"!isMobileMode\" class=\"form-control write-character-value\" [(ngModel)]=\"value\" (keyup)=\"validate()\" *ngIf=\"!isPassword\" autocomplete=\"off\"> <input type=\"password\" name=\"passwordInput\" autoFocus [class.form-control-write]=\"!isMobileMode\" class=\"form-control write-character-value\" [(ngModel)]=\"value\" (keyup)=\"validate()\" *ngIf=\"isPassword\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!validationError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\" [class.modal-footer-write]=\"!isMobileMode\"> <button type=\"submit\" [class.btn-primary-write]=\"!isMobileMode\" class=\"btn md-skip btn-primary btn-block\" [disabled]=\"validationError\">{{localization.submit}}</button> </div> </form> ","styles":[".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 10px 0px 0px 15px; } .btn-primary { background-color: #3B97FC; border-color: #3B97FC; padding: 5px 30px; width: 90%; margin: 0 5%; height: 32px; } .write-character-value { padding-left: 8px; height: 32px; margin-left: 16px; } .modal-footer-write { margin-right: 4px; padding: 10px 5px 20px 5px !important; } .btn-primary-write { width: 585px; margin: 0 15px 0 0; } .form-control-write { margin: 0 16px; width: 585px; } "]}]}],"members":{"invalidErrorText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":31,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":37,"character":9},"arguments":[{"__symbolic":"reference","module":"../../localization","name":"LOCALIZATION","line":37,"character":16}]}],null],"parameters":[{"__symbolic":"reference","module":"../../localization","name":"Localization","line":37,"character":51},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":38,"character":18}]}],"ngOnInit":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"showValidationErrorInfo":[{"__symbolic":"method"}],"hideValidationErrorInfo":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}}}}]

package/modal/write-value/write-value-modal.component.d.ts

@@ -15,6 +15,7 @@ export declare class WriteValueModalComponent implements OnInit {
     onClosed: any;
     args: WriteValueModalArgs;
     isMobileMode: boolean;
+    private readonly isDisplayModeMobile;
     private dataType;
     private fBoxDataType;
     private pattern;

package/modal/write-value/write-value-modal.component.js

@@ -25,15 +25,19 @@ let WriteValueModalComponent = class WriteValueModalComponent {
         this.fractionDigitService = fractionDigitService;
         this.numericalOperationService = numericalOperationService;
         this.bsModalRef = bsModalRef;
+        this.isMobileMode = false;
         this.displayVariableName = '';
         this.writeValueRangeText = '';
         this.isSubmitting = false;
-        this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
+        this.isDisplayModeMobile = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
     }
     get invalidErrorText() {
         return this.localization.loadFailed;
     }
     ngOnInit() {
+        // 画面模拟（SimulateRemoteGuiContext）下 releasedVariableService 恒为空，
+        // 借此和真实移动端区分开，避免在 PC 浏览器模拟移动端时套用移动端专属样式
+        this.isMobileMode = this.isDisplayModeMobile && !!this.args.releasedVariableService;
         this.initData(this.args);
         this.validate();
     }

package/modal/write-value/write-value-modal.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"WriteValueModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"writeValueModal","template":"<form #writeValueForm=\"ngForm\" novalidate (ngSubmit)=\"save()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.setting}}</span> <span>{{displayVariableName}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"write-value-range\">{{localization.writeValueRange}}：</span> <span> {{writeValueRangeText}} <span *ngIf=\"valueType\">({{valueType}})</span> </span> <input type=\"text\" name=\"valueInput\" autoFocus [class.form-control-write]=\"!isMobileMode\" class=\"form-control write-value\" [(ngModel)]=\"value\" (keyup)=\"validate($event)\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!validationError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\" [class.modal-footer-write]=\"!isMobileMode\"> <button type=\"submit\" [class.btn-primary-write]=\"!isMobileMode\" class=\"btn md-skip btn-primary btn-block\" [disabled]=\"validationError || isSubmitting\"> <ng-container *ngIf=\"!isSubmitting\">{{localization.submit}}</ng-container> <ng-container *ngIf=\"isSubmitting\">{{localization.submitting}}</ng-container> </button> </div> </form> ","styles":[".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .form-control-write { margin: 0 20px; width: 585px; } .modal-footer { padding: 10px 5px 20px 5px !important; text-align: right; border-color: transparent; } .modal-footer-write { margin-right: 4px; padding: 10px 5px 20px 5px !important; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { background-color: #3B97FC; border-color: #3B97FC; padding: 5px 30px; width: 90%; margin: 0 5%; height: 32px; } .btn-primary-write { width: 585px; margin: 0 15px 0 0; } .write-value-range { color: #7f939e; font-size: 14px; margin-left: 15px; } .write-value { padding-left: 8px; margin-left: 16px; height: 32px; } "]}]}],"members":{"invalidErrorText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":48,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":54,"character":9},"arguments":[{"__symbolic":"reference","module":"../../localization","name":"LOCALIZATION","line":54,"character":16}]}],null,null,null,null,null],"parameters":[{"__symbolic":"reference","module":"../../localization","name":"Localization","line":54,"character":51},{"__symbolic":"reference","module":"../../utils/data-type/data-type.service","name":"DataTypeService","line":55,"character":42},{"__symbolic":"reference","module":"../../utils/fraction-digit.service","name":"FractionDigitService","line":56,"character":47},{"__symbolic":"reference","module":"../../utils/numerical-operation.service","name":"NumericalOperationService","line":57,"character":52},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":58,"character":37},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":59,"character":18}]}],"ngOnInit":[{"__symbolic":"method"}],"initData":[{"__symbolic":"method"}],"setValueRangeAccordToDataParsed":[{"__symbolic":"method"}],"getWriteValueRangeText":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"handleCurrentLanguageIdSave":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"showValidationErrorInfo":[{"__symbolic":"method"}],"hideValidationErrorInfo":[{"__symbolic":"method"}],"getFractionDigits":[{"__symbolic":"method"}],"formatWriteValue":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"WriteValueModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"writeValueModal","template":"<form #writeValueForm=\"ngForm\" novalidate (ngSubmit)=\"save()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.setting}}</span> <span>{{displayVariableName}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"write-value-range\">{{localization.writeValueRange}}：</span> <span> {{writeValueRangeText}} <span *ngIf=\"valueType\">({{valueType}})</span> </span> <input type=\"text\" name=\"valueInput\" autoFocus [class.form-control-write]=\"!isMobileMode\" class=\"form-control write-value\" [(ngModel)]=\"value\" (keyup)=\"validate($event)\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!validationError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\" [class.modal-footer-write]=\"!isMobileMode\"> <button type=\"submit\" [class.btn-primary-write]=\"!isMobileMode\" class=\"btn md-skip btn-primary btn-block\" [disabled]=\"validationError || isSubmitting\"> <ng-container *ngIf=\"!isSubmitting\">{{localization.submit}}</ng-container> <ng-container *ngIf=\"isSubmitting\">{{localization.submitting}}</ng-container> </button> </div> </form> ","styles":[".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .form-control-write { margin: 0 20px; width: 585px; } .modal-footer { padding: 10px 5px 20px 5px !important; text-align: right; border-color: transparent; } .modal-footer-write { margin-right: 4px; padding: 10px 5px 20px 5px !important; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { background-color: #3B97FC; border-color: #3B97FC; padding: 5px 30px; width: 90%; margin: 0 5%; height: 32px; } .btn-primary-write { width: 585px; margin: 0 15px 0 0; } .write-value-range { color: #7f939e; font-size: 14px; margin-left: 15px; } .write-value { padding-left: 8px; margin-left: 16px; height: 32px; } "]}]}],"members":{"invalidErrorText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":49,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":55,"character":9},"arguments":[{"__symbolic":"reference","module":"../../localization","name":"LOCALIZATION","line":55,"character":16}]}],null,null,null,null,null],"parameters":[{"__symbolic":"reference","module":"../../localization","name":"Localization","line":55,"character":51},{"__symbolic":"reference","module":"../../utils/data-type/data-type.service","name":"DataTypeService","line":56,"character":42},{"__symbolic":"reference","module":"../../utils/fraction-digit.service","name":"FractionDigitService","line":57,"character":47},{"__symbolic":"reference","module":"../../utils/numerical-operation.service","name":"NumericalOperationService","line":58,"character":52},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":59,"character":37},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":60,"character":18}]}],"ngOnInit":[{"__symbolic":"method"}],"initData":[{"__symbolic":"method"}],"setValueRangeAccordToDataParsed":[{"__symbolic":"method"}],"getWriteValueRangeText":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"handleCurrentLanguageIdSave":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"showValidationErrorInfo":[{"__symbolic":"method"}],"hideValidationErrorInfo":[{"__symbolic":"method"}],"getFractionDigits":[{"__symbolic":"method"}],"formatWriteValue":[{"__symbolic":"method"}]}}}}]

package/model/alarm/alarm.model.d.ts

@@ -3,6 +3,7 @@ import { Point, Size } from '../shared';
 export interface AlarmModel extends ConditionalDisplayModel {
     readonly version: number;
     readonly size: Size;
+    readonly initSize?: Size;
     readonly location: Point;
     readonly generalSetting?: any;
     readonly filterSetting?: any;

package/model/character-display/character-display.d.ts

@@ -12,6 +12,7 @@ export interface CharacterDisplay extends ReadableModel, SecurityModel {
     readonly graphSetting: GraphSetting;
     readonly charCount: number;
     readonly size: Size;
+    readonly initSize?: Size;
     readonly useGraph: boolean;
     readonly accessPermission: any;
     readonly showVariableText?: boolean;

package/model/historical-curve/historical-curve.display-settings.d.ts

@@ -4,6 +4,7 @@ import { HistoricalCurveAxisSettings } from './historical-curve-axis-settings';
 import { CurveType } from './curve-type';
 export interface HistoricalCurveDisplaySettings {
     readonly size: Size;
+    readonly initSize?: Size;
     readonly location: Point;
     /**
      * 刷新周期（秒)

package/model/numerical-display/numerical-display.d.ts

@@ -4,6 +4,7 @@ import { NumericalOperationSettings } from './numerical-operation-settings';
 import { DisplayDataType } from '../shared/data-type/display-data-type';
 export interface NumericalDisplay extends ReadableModel, SecurityModel {
     readonly size: Size;
+    readonly initSize?: Size;
     readonly useGraph: boolean;
     readonly stroke: string;
     readonly font: string;

package/model/settings/popup/view-popup-location-type.d.ts

@@ -1,4 +1,5 @@
 export declare enum ViewPopupLocationType {
     Center = 0,
-    Custom = 1
+    Custom = 1,
+    NearButton = 2
 }

package/model/settings/popup/view-popup-location-type.js

@@ -2,4 +2,5 @@ export var ViewPopupLocationType;
 (function (ViewPopupLocationType) {
     ViewPopupLocationType[ViewPopupLocationType["Center"] = 0] = "Center";
     ViewPopupLocationType[ViewPopupLocationType["Custom"] = 1] = "Custom";
+    ViewPopupLocationType[ViewPopupLocationType["NearButton"] = 2] = "NearButton";
 })(ViewPopupLocationType || (ViewPopupLocationType = {}));

package/model/settings/popup/view-popup-location-type.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ViewPopupLocationType":{"Center":0,"Custom":1}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ViewPopupLocationType":{"Center":0,"Custom":1,"NearButton":2}}}]

package/model/switch-indicator-light/switch-indicator-light.d.ts

@@ -25,6 +25,7 @@ export interface SwitchIndicatorLight extends ConditionalEnableModel, SecurityMo
     readonly graphSetting?: GraphSetting;
     readonly location: Point;
     readonly size: Size;
+    readonly initSize?: Size;
     readonly isAwaysDisplay?: boolean;
     readonly conditionItems?: ConditionItemModel[];
     readonly dynamicSetting?: DynamicDisplayModel;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"main": "bundles/fc-gui.umd.js",
-	"version": "3.0.0-alpha.180",
+	"version": "3.0.0-alpha.182",
 	"module": "public_api.js",
 	"typings": "public_api.d.ts",
 	"license": "UNLICENSED",

package/view/popup-view.service.d.ts

@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
 import { ElementRef } from '@angular/core';
 export interface PopupViewService {
-    popView(viewIndex: number, hostContainerId: string, el: ElementRef): Observable<void>;
+    popView(viewIndex: number, hostContainerId: string, el: ElementRef, triggerRect?: DOMRect): Observable<void>;
     closeView(): any;
     moveView(movementX: number, movementY: number): any;
 }