@flexem/fc-gui 3.0.0-alpha.13 → 3.0.0-alpha.130

package/elements/static-elements/text-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"TextElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-dynamic-display-element","name":"ConditionalDynamicDisplayElement","line":10,"character":33},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":15,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":15,"character":48},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":15,"character":77},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":16,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":16,"character":67},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":16,"character":111},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"handleTextValue":[{"__symbolic":"method"}],"initGraph":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"TextElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-dynamic-display-element","name":"ConditionalDynamicDisplayElement","line":12,"character":33},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":19,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":19,"character":48},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":19,"character":77},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":20,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":20,"character":67},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":20,"character":111},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"TextLibraryService","line":22,"character":46},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":23,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":24,"character":38}]}],"dispose":[{"__symbolic":"method"}],"subscribeLanguageChange":[{"__symbolic":"method"}],"reRenderText":[{"__symbolic":"method"}],"getDisplayText":[{"__symbolic":"method"}],"handleTextValue":[{"__symbolic":"method"}],"initGraph":[{"__symbolic":"method"}]}}}}]

package/elements/switch-indicator-light/bit-switch-operator.d.ts

@@ -15,4 +15,5 @@ export declare class BitSwitchOperator implements SwitchOperator {
     constructor(settings: BitSwitchSettings, variableCommunicator: VariableCommunicator, variableStore: VariableStore, signalRAppId: string);
     canExecute(): boolean;
     execute(): Promise<VariableOptionModel>;
+    writeValue(value: any): Promise<VariableOptionModel>;
 }

package/elements/switch-indicator-light/bit-switch-operator.js

@@ -72,6 +72,8 @@ export class BitSwitchOperator {
                     }
                 }
                 break;
+            case BitSwitchOperation.Restoration:
+                break;
             default:
                 throw new Error(`Unknown BitSwitchOperation:${settings.operation}`);
         }
@@ -85,4 +87,21 @@ export class BitSwitchOperator {
             newValue: newValue
         });
     }
+    writeValue(value) {
+        if (this.settings.isBitwiseIndex) {
+            this.variableCommunicator.writeWordByBit(this.variableName, this.settings.bitIndex, value).subscribe();
+        }
+        else {
+            this.variableCommunicator.write(this.variableName, value).subscribe();
+        }
+        let originValue;
+        if (this.currentValue && this.currentValue.value !== undefined) {
+            originValue = this.currentValue.value;
+        }
+        return Promise.resolve({
+            variableName: this.variableName,
+            originValue: originValue,
+            newValue: value
+        });
+    }
 }

package/elements/switch-indicator-light/bit-switch-operator.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"BitSwitchOperator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../model","name":"BitSwitchSettings","line":21,"character":43},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":21,"character":101},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":22,"character":40},{"__symbolic":"reference","name":"string"}]}],"canExecute":[{"__symbolic":"method"}],"execute":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"BitSwitchOperator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../model","name":"BitSwitchSettings","line":21,"character":43},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":21,"character":101},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":22,"character":40},{"__symbolic":"reference","name":"string"}]}],"canExecute":[{"__symbolic":"method"}],"execute":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}]}}}}]

package/elements/switch-indicator-light/switch-indicator-light-element.d.ts

@@ -3,15 +3,19 @@ import { BsModalService } from 'ngx-bootstrap/modal';
 import { GraphStore, VariableStore } from '../../config';
 import { Localization } from '../../localization';
 import { SwitchIndicatorLight } from '../../model';
-import { PermissionChecker, OperationRecordService } from '../../service';
+import { PermissionChecker, OperationRecordService, TextLibraryService, LanguageService } from '../../service';
 import { VariableCommunicator } from '../../communication';
 import { ConditionalEnableElement } from '../base/conditional-enable-element';
 import { SecurityChecker } from '../../security';
+import { GuiContext } from '../../gui/gui-context';
 export declare class SwitchIndicatorLightElement extends ConditionalEnableElement {
     private readonly modalService;
     private readonly graphStore;
     private readonly operationRecordService;
     private readonly securityChecker;
+    private readonly textLibraryService?;
+    private readonly languageService?;
+    private readonly guiContext?;
     protected readonly model: SwitchIndicatorLight;
     private readonly logger;
     private switchOperator;
@@ -19,13 +23,25 @@ export declare class SwitchIndicatorLightElement extends ConditionalEnableElemen
     private graphStateElement?;
     private textStateElement;
     private isMobileMode;
-    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, variableCommunicator: VariableCommunicator, graphStore: GraphStore, permissionChecker: PermissionChecker, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, variableStore: VariableStore, localization: Localization, signalRAppId: string);
+    private isBitRestoration;
+    private isVerifiedForRestoration;
+    private restorationTimer;
+    private isWriteRestorationDownValue;
+    private onDocMouseUp;
+    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, variableCommunicator: VariableCommunicator, graphStore: GraphStore, permissionChecker: PermissionChecker, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, variableStore: VariableStore, localization: Localization, signalRAppId: string, textLibraryService?: TextLibraryService, languageService?: LanguageService, guiContext?: GuiContext);
+    handleMouseUp(): void;
+    private initOnDocMouseUpEvent;
     private checkElementPassword;
     private doSwitchOperator;
+    private writeValue;
     private initSwitchOperator;
     private initIndictorLightOperator;
     private currentStateIdChange;
     private switchToState;
     private initGraphAndText;
+    /**
+     * 释放资源
+     */
+    dispose(): void;
     private checkState;
 }

package/elements/switch-indicator-light/switch-indicator-light-element.js

@@ -1,7 +1,7 @@
 import { LOGGER_SERVICE_TOKEN } from '../../logger';
 import * as d3 from 'd3-selection';
 import { isUndefined } from 'lodash';
-import { IndicatorLightType, SwitchType, State } from '../../model';
+import { IndicatorLightType, SwitchType, State, BitSwitchOperation } from '../../model';
 import { VariableState } from '../../communication';
 import { ConditionalEnableElement } from '../base/conditional-enable-element';
 import { GraphStateElement } from '../shared/graph/graph-state-element';
@@ -17,19 +17,26 @@ import { DisplayMode, GlobalSettings } from '../../settings';
 import { VariableUtil } from '../../utils/variable-util';
 import { VariableDefinition } from '../../communication/variable/variable-definition';
 export class SwitchIndicatorLightElement extends ConditionalEnableElement {
-    constructor(element, injector, modalService, variableCommunicator, graphStore, permissionChecker, operationRecordService, securityChecker, variableStore, localization, signalRAppId) {
+    constructor(element, injector, modalService, variableCommunicator, graphStore, permissionChecker, operationRecordService, securityChecker, variableStore, localization, signalRAppId, textLibraryService, languageService, guiContext) {
         super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
         this.modalService = modalService;
         this.graphStore = graphStore;
         this.operationRecordService = operationRecordService;
         this.securityChecker = securityChecker;
+        this.textLibraryService = textLibraryService;
+        this.languageService = languageService;
+        this.guiContext = guiContext;
+        this.isBitRestoration = false; // 是否是 位设定且执行设置是复位
+        this.isVerifiedForRestoration = false; // 位设定且执行设置是复位情况下，是否已经完成了验证
+        this.isWriteRestorationDownValue = false;
         this.logger = injector.get(LOGGER_SERVICE_TOKEN);
         this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
         this.checkState();
         if (this.model.useSwitch) {
             this.initSwitchOperator();
             this.rootElement.style('cursor', 'hand');
-            this.rootElement.on('mousedown', () => {
+            const isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
+            this.rootElement.on(this.isMobileMode && isMobile ? 'touchstart' : 'mousedown', () => {
                 if (!this.isInitialized) {
                     return;
                 }
@@ -43,31 +50,39 @@ export class SwitchIndicatorLightElement extends ConditionalEnableElement {
                     return;
                 }
                 if (this.switchOperator.canExecute()) {
-                    if (this.model.useSecurity) {
-                        const modalRef = this.modalService.show(ConfirmOperationModalComponent, { backdrop: 'static', class: 'gui-modal-dialog-position', animated: false });
-                        const onClosedSub = modalRef.content.onClosed.subscribe(result => {
-                            modalRef.hide();
-                            onClosedSub.unsubscribe();
-                            if (result) {
-                                this.checkElementPassword();
+                    if (!this.isBitRestoration || !this.isVerifiedForRestoration) {
+                        if (this.model.useSecurity) {
+                            const modalRef = this.modalService.show(ConfirmOperationModalComponent, { backdrop: 'static', class: 'gui-modal-dialog-position', animated: false });
+                            const onClosedSub = modalRef.content.onClosed.subscribe(result => {
+                                modalRef.hide();
+                                onClosedSub.unsubscribe();
+                                if (result) {
+                                    this.checkElementPassword(true);
+                                }
+                            });
+                        }
+                        else {
+                            this.checkElementPassword(false);
+                            if (!this.model.useIndicatorLight) {
+                                this.switchToState(1);
                             }
-                        });
+                        }
                     }
                     else {
-                        this.checkElementPassword();
-                        if (!this.model.useIndicatorLight && !this.isMobileMode) {
-                            this.switchToState(1);
-                        }
+                        document.addEventListener(this.isMobileMode ? 'touchend' : 'mouseup', this.onDocMouseUp);
+                        this.restorationTimer = setTimeout(() => {
+                            this.writeValue(1);
+                            this.isWriteRestorationDownValue = true;
+                        }, 1000);
                     }
                     d3.event.preventDefault();
                 }
             });
-            if (!this.model.useIndicatorLight && !this.isMobileMode) {
-                this.rootElement.on('mouseup', () => {
-                    this.switchToState(0);
-                    d3.event.preventDefault();
-                });
-            }
+            this.rootElement.on(this.isMobileMode && isMobile ? 'touchend' : 'mouseup', () => {
+                this.handleMouseUp();
+                d3.event.stopPropagation();
+            });
+            this.initOnDocMouseUpEvent();
         }
         this.initGraphAndText();
         if (this.model.useIndicatorLight) {
@@ -77,19 +92,62 @@ export class SwitchIndicatorLightElement extends ConditionalEnableElement {
             this.switchToState(0);
         }
     }
-    checkElementPassword() {
+    handleMouseUp() {
+        if (this.restorationTimer) {
+            clearTimeout(this.restorationTimer);
+            this.restorationTimer = undefined;
+        }
+        if (this.isBitRestoration && this.isWriteRestorationDownValue) {
+            this.writeValue(0);
+        }
+        document.removeEventListener(this.isMobileMode ? 'touchend' : 'mouseup', this.onDocMouseUp);
+        this.isVerifiedForRestoration = false;
+        this.isWriteRestorationDownValue = false;
+        if (!this.model.useIndicatorLight) {
+            this.switchToState(0);
+            if (d3.event) {
+                d3.event.preventDefault();
+            }
+        }
+    }
+    initOnDocMouseUpEvent() {
+        this.onDocMouseUp = () => {
+            this.handleMouseUp();
+        };
+    }
+    checkElementPassword(afterConfirm) {
         if (this.model.enablePassword) {
             const modalRef = this.modalService.show(VerifyPasswordModalComponent, { initialState: { securityChecker: this.securityChecker }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false });
             const onClosedSub = modalRef.content.onClosed.subscribe(result => {
                 modalRef.hide();
                 onClosedSub.unsubscribe();
                 if (result) {
-                    this.doSwitchOperator();
+                    if (!this.isBitRestoration) {
+                        this.doSwitchOperator();
+                    }
+                    else {
+                        this.isVerifiedForRestoration = true;
+                    }
                 }
             });
         }
         else {
-            this.doSwitchOperator();
+            if (!this.isBitRestoration) {
+                this.doSwitchOperator();
+            }
+            else {
+                if (afterConfirm) {
+                    this.isVerifiedForRestoration = true;
+                }
+                else {
+                    this.isVerifiedForRestoration = true;
+                    document.addEventListener(this.isMobileMode ? 'touchend' : 'mouseup', this.onDocMouseUp);
+                    this.restorationTimer = setTimeout(() => {
+                        this.writeValue(1);
+                        this.isWriteRestorationDownValue = true;
+                    }, 1000);
+                }
+            }
         }
     }
     doSwitchOperator() {
@@ -106,12 +164,27 @@ export class SwitchIndicatorLightElement extends ConditionalEnableElement {
             throw new Error('Failure of the operation record:switchOperator');
         });
     }
+    writeValue(value) {
+        this.switchOperator.writeValue(value).then(args => {
+            if (this.model.isRecordOperation || this.model.isRecordOperation === undefined) {
+                if (args.newValue !== undefined || args.originValue !== undefined) {
+                    this.operationRecordService.record({
+                        variableOptionModel: args,
+                        operationDescription: this.model.operationDescription
+                    });
+                }
+            }
+        }).catch(() => {
+            throw new Error('Failure of the operation record:switchOperator');
+        });
+    }
     initSwitchOperator() {
         const settings = this.model.switchSettings;
         switch (settings.type) {
             case SwitchType.Bit:
                 this.switchOperator =
                     new BitSwitchOperator(settings.settings, this.variableCommunicator, this.variableStore, this.signalRAppId);
+                this.isBitRestoration = settings.settings.operation === BitSwitchOperation.Restoration;
                 break;
             case SwitchType.Word:
                 this.switchOperator =
@@ -168,9 +241,31 @@ export class SwitchIndicatorLightElement extends ConditionalEnableElement {
             this.graphStateElement = new GraphStateElement(this.model.graphSetting, width, height, this.graphStore, this.logger, this.model.version, this.model.states);
             this.$element.append(this.graphStateElement.Element);
         }
-        this.textStateElement = new TextStateElement(this.model.states, width, height, this.logger, this.model.version, this.model.states);
+        this.textStateElement = new TextStateElement(this.model.states, width, height, this.logger, this.model.version, this.model.states, this.model.textLibrary, this.textLibraryService, this.languageService, this.guiContext);
         this.$element.append(this.textStateElement.Element);
     }
+    /**
+     * 释放资源
+     */
+    dispose() {
+        // 释放文本元素资源（取消语种变化订阅等）
+        if (this.textStateElement) {
+            this.textStateElement.dispose();
+        }
+        // 释放指示灯操作器资源
+        if (this.indicatorLightOperator) {
+            // indicatorLightOperator 可能有自己的dispose方法
+        }
+        // 清除定时器
+        if (this.restorationTimer) {
+            clearTimeout(this.restorationTimer);
+            this.restorationTimer = undefined;
+        }
+        // 移除事件监听
+        if (this.onDocMouseUp) {
+            document.removeEventListener(this.isMobileMode ? 'touchend' : 'mouseup', this.onDocMouseUp);
+        }
+    }
     checkState() {
         if (!this.model.states) {
             throw new Error('The switch indicator light\'s states is undefined.');

package/elements/switch-indicator-light/switch-indicator-light-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"SwitchIndicatorLightElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-enable-element","name":"ConditionalEnableElement","line":32,"character":49},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":44,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":45,"character":18},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":46,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":47,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":48,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":49,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":50,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":51,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":52,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":53,"character":22},{"__symbolic":"reference","name":"string"}]}],"checkElementPassword":[{"__symbolic":"method"}],"doSwitchOperator":[{"__symbolic":"method"}],"initSwitchOperator":[{"__symbolic":"method"}],"initIndictorLightOperator":[{"__symbolic":"method"}],"currentStateIdChange":[{"__symbolic":"method"}],"switchToState":[{"__symbolic":"method"}],"initGraphAndText":[{"__symbolic":"method"}],"checkState":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"SwitchIndicatorLightElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-enable-element","name":"ConditionalEnableElement","line":33,"character":49},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":51,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":52,"character":18},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":53,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":54,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":55,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":56,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":57,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":58,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":59,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":60,"character":22},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"TextLibraryService","line":62,"character":46},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":63,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":64,"character":38}]}],"handleMouseUp":[{"__symbolic":"method"}],"initOnDocMouseUpEvent":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"doSwitchOperator":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"initSwitchOperator":[{"__symbolic":"method"}],"initIndictorLightOperator":[{"__symbolic":"method"}],"currentStateIdChange":[{"__symbolic":"method"}],"switchToState":[{"__symbolic":"method"}],"initGraphAndText":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"checkState":[{"__symbolic":"method"}]}}}}]

package/elements/switch-indicator-light/switch-operator.d.ts

@@ -2,4 +2,5 @@ import { VariableOptionModel } from '../../service';
 export interface SwitchOperator {
     canExecute(): boolean;
     execute(): Promise<VariableOptionModel>;
+    writeValue(value: number): Promise<VariableOptionModel>;
 }

package/elements/switch-indicator-light/word-switch-operator.d.ts

@@ -14,4 +14,5 @@ export declare class WordSwitchOperator implements SwitchOperator {
     constructor(settings: WordSwitchSettings, variableCommunicator: VariableCommunicator, variableStore: VariableStore, signalRAppId: string);
     canExecute(): boolean;
     execute(): Promise<VariableOptionModel>;
+    writeValue(value: any): Promise<VariableOptionModel>;
 }

package/elements/switch-indicator-light/word-switch-operator.js

@@ -66,4 +66,10 @@ export class WordSwitchOperator {
             newValue: newValue
         });
     }
+    // 此方法为 位设定添加的，字设定目前不会用到，为了解决接口error，添加一个空实现
+    writeValue(value) {
+        return Promise.resolve({
+            newValue: value
+        });
+    }
 }

package/elements/switch-indicator-light/word-switch-operator.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"WordSwitchOperator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../model","name":"WordSwitchSettings","line":20,"character":43},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":20,"character":102},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":21,"character":40},{"__symbolic":"reference","name":"string"}]}],"canExecute":[{"__symbolic":"method"}],"execute":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"WordSwitchOperator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../model","name":"WordSwitchSettings","line":20,"character":43},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":20,"character":102},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":21,"character":40},{"__symbolic":"reference","name":"string"}]}],"canExecute":[{"__symbolic":"method"}],"execute":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}]}}}}]

package/elements/video/video-element.d.ts

@@ -16,6 +16,9 @@ export declare class VideoElement extends ConditionalDisplayElement {
     private videoId;
     private isShow;
     private videoPlayer;
+    private refreshTimer;
+    private isFullscreen;
+    private videoUrl;
     constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, videoService: VideoService, guiSize: Size, svgRootClass: string, signalRAppId: string);
     dispose(): void;
     hide(): void;
@@ -24,4 +27,5 @@ export declare class VideoElement extends ConditionalDisplayElement {
     private initVideo;
     private addVideoAddressToolTip;
     private setAndroidVideo;
+    private setIosVideo;
 }

package/elements/video/video-element.js

@@ -11,6 +11,7 @@ export class VideoElement extends ConditionalDisplayElement {
         this.guiSize = guiSize;
         this.svgRootClass = svgRootClass;
         this.videoId = '';
+        this.isFullscreen = false;
         this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
         this.localization = injector.get(LOCALIZATION);
         this.init();
@@ -50,12 +51,13 @@ export class VideoElement extends ConditionalDisplayElement {
             .attr('width', this.model.size.width)
             .attr('height', this.model.size.height);
         this.videoService.getVideoUrl(this.model.videoTag).then(result => {
-            this.initVideo(result.url, result.isMobileType, this.videoId);
+            this.videoUrl = result.url;
+            this.initVideo(result.url, this.videoId);
         }).catch(() => {
             throw new Error('Failure of the videoService');
         });
     }
-    initVideo(videoUrl, isMobileType, videoId) {
+    initVideo(videoUrl, videoId) {
         const patt = /https:.+.m3u8/;
         if (videoUrl.indexOf('http:') !== -1) {
             videoUrl = videoUrl.replace('http:', 'https:');
@@ -68,6 +70,8 @@ export class VideoElement extends ConditionalDisplayElement {
             this.addVideoAddressToolTip(videoToolTip);
             return;
         }
+        const isAndroid = !!navigator.userAgent.match(/(Android)/i);
+        const isIos = !!navigator.userAgent.match(/(Mac)/i);
         const currentRect = this.$element.find('rect#rect' + videoId).first();
         if (!currentRect.length) {
             return;
@@ -77,17 +81,19 @@ export class VideoElement extends ConditionalDisplayElement {
         const chartHeight = clientRect.height;
         const left = this.model.location.x / this.guiSize.width * $('.' + this.svgRootClass).find('.svg-content').width();
         const top = this.model.location.y / this.guiSize.height * $('.' + this.svgRootClass).find('.svg-content').height();
-        let videoHtml = `<video scareX="${this.model.location.x / this.guiSize.width}"
-    scareY="${this.model.location.y / this.guiSize.height}" id="${videoId}" src="${videoUrl}" style="
-    position: absolute;top:${top}px;left:${left}px;width:${chartWidth}px;height:${chartHeight}px;object-fit:fill;z-index:0"
-    playsInline webkit-playsinline `;
-        const isAndroid = !!navigator.userAgent.match(/(Android)/i);
+        const scareX = this.model.location.x / this.guiSize.width;
+        const scareY = this.model.location.y / this.guiSize.height;
+        if (isIos) {
+            videoUrl = videoUrl + '#t=1';
+        }
+        const preload = isIos ? ' preload=\'metadata\'' : '';
+        let videoHtml = `<video scareX="${scareX}"
+                scareY="${scareY}" id="${videoId}" ${preload} src="${videoUrl}" width="${chartWidth}" height="${chartHeight}"
+                style="position: absolute;top:${top}px;left:${left}px;object-fit:fill;z-index:0;"
+                playsInline webkit-playsinline `;
         if (this.isMobileMode) {
             if (isAndroid) {
-                if (isMobileType) {
-                    videoHtml += ' controls ';
-                }
-                videoHtml += ' autoplay muted></video>';
+                videoHtml += ' muted></video>';
             }
             else {
                 videoHtml += ' controls muted></video>';
@@ -100,10 +106,31 @@ export class VideoElement extends ConditionalDisplayElement {
         if (this.isShow === false) {
             $('#' + this.videoId).hide();
         }
-        this.videoPlayer = new EZUIPlayer(videoId);
-        if (isAndroid && !isMobileType) {
-            this.setAndroidVideo(videoId);
-        }
+        setTimeout(() => {
+            if (isAndroid) {
+                this.setAndroidVideo(videoId);
+            }
+            else if (isIos) {
+                this.setIosVideo(this.videoUrl, videoId);
+            }
+            try {
+                this.videoPlayer = new EZUIPlayer(videoId);
+                if (isAndroid) {
+                    // 确保在 EZUIPlayer 初始化后才调用 play 方法
+                    this.videoPlayer.on('canplay', () => {
+                        this.videoPlayer.play();
+                    });
+                }
+            }
+            catch (err) {
+                console.log(err);
+            }
+        }, 1000);
+        const style = document.createElement('style');
+        style.innerHTML = `#${videoId}::-webkit-media-controls-enclosure {
+            display: none;
+        }`;
+        document.head.append();
     }
     addVideoAddressToolTip(videoToolTip) {
         const size = this.model.size;
@@ -126,35 +153,68 @@ export class VideoElement extends ConditionalDisplayElement {
         this.$element.append(textElement.Element);
     }
     setAndroidVideo(videoId) {
-        let isFullscreen = false;
         const videoElement = $('#' + videoId);
         let preHeight = videoElement.height();
         let preWidth = videoElement.width();
         let preTop = videoElement.css('top');
         let preLeft = videoElement.css('left');
+        const { StatusBar } = window;
         videoElement.on('click', () => {
-            if (!isFullscreen) {
+            if (!this.isFullscreen) {
+                if (StatusBar) {
+                    StatusBar.hide();
+                }
                 preHeight = videoElement.height();
                 preWidth = videoElement.width();
                 preTop = videoElement.css('top');
                 preLeft = videoElement.css('left');
-                const width = document.body.clientWidth;
-                const height = width * 9 / 16;
+                const width = document.documentElement.clientWidth;
+                const height = document.documentElement.clientHeight;
+                videoElement.css('object-fit', 'contain');
+                videoElement.css('background', '#000000');
                 videoElement.css('width', width + 'px');
                 videoElement.css('height', height + 'px');
                 videoElement.css('left', '0px');
                 videoElement.css('top', '0px');
                 videoElement.css('z-index', '99');
-                isFullscreen = true;
+                videoElement.css('position', 'fixed');
+                this.isFullscreen = true;
+                try {
+                    screen.orientation.lock(screen.orientation.type);
+                }
+                catch (error) {
+                    console.error(error);
+                }
             }
             else {
+                videoElement.css('object-fit', 'fill');
                 videoElement.css('width', preWidth + 'px');
                 videoElement.css('height', preHeight + 'px');
                 videoElement.css('left', preLeft);
                 videoElement.css('top', preTop);
                 videoElement.css('z-index', '0');
-                isFullscreen = false;
+                videoElement.css('position', 'absolute');
+                this.isFullscreen = false;
+                try {
+                    if (screen.orientation.type.includes('portrait')) {
+                        StatusBar.show();
+                    }
+                }
+                catch (error) {
+                    console.error(error);
+                }
             }
         });
     }
+    setIosVideo(videoUrl, videoId) {
+        const video = $('#' + this.videoId);
+        video.on('webkitendfullscreen', () => {
+            video.remove();
+            clearTimeout(this.refreshTimer);
+            this.refreshTimer = null;
+            this.refreshTimer = setTimeout(() => {
+                this.initVideo(videoUrl, videoId);
+            }, 500);
+        });
+    }
 }

package/elements/video/video-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"VideoElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":15,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":23,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":24,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":25,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":26,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":27,"character":23},{"__symbolic":"reference","module":"../../service","name":"VideoService","line":28,"character":39},{"__symbolic":"reference","module":"../../model","name":"Size","line":29,"character":34},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initVideo":[{"__symbolic":"method"}],"addVideoAddressToolTip":[{"__symbolic":"method"}],"setAndroidVideo":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"VideoElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":15,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":27,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":28,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":29,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":30,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":31,"character":23},{"__symbolic":"reference","module":"../../service","name":"VideoService","line":32,"character":39},{"__symbolic":"reference","module":"../../model","name":"Size","line":33,"character":34},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initVideo":[{"__symbolic":"method"}],"addVideoAddressToolTip":[{"__symbolic":"method"}],"setAndroidVideo":[{"__symbolic":"method"}],"setIosVideo":[{"__symbolic":"method"}]}}}}]

package/elements/view-operation/view-operation.element.d.ts

@@ -3,11 +3,12 @@ import { BsModalService } from 'ngx-bootstrap/modal';
 import { Localization } from '../../localization';
 import { GraphStore, VariableStore } from '../../config';
 import { ViewOperationElementModel } from '../../model';
-import { PermissionChecker, OperationRecordService } from '../../service';
+import { PermissionChecker, OperationRecordService, TextLibraryService, LanguageService } from '../../service';
 import { VariableCommunicator } from '../../communication';
 import { ConditionalEnableElement } from '../base/conditional-enable-element';
 import { PopupViewService } from '../../view/popup-view.service';
 import { SecurityChecker } from '../../security';
+import { GuiContext } from '../../gui/gui-context';
 export declare class ViewOperationElement extends ConditionalEnableElement {
     private readonly modalService;
     private readonly graphStore;
@@ -16,13 +17,17 @@ export declare class ViewOperationElement extends ConditionalEnableElement {
     private readonly popupViewService;
     private readonly hostContainerId;
     private readonly el;
+    private readonly textLibraryService?;
+    private readonly languageService?;
+    private readonly guiContext?;
     protected model: ViewOperationElementModel;
     private readonly logger;
     private readonly viewService;
     private graphStateElement?;
+    private languageChangeSubscription?;
     private touchedScreenX;
     private touchedScreenY;
-    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, variableCommunicator: VariableCommunicator, variableStore: VariableStore, graphStore: GraphStore, permissionChecker: PermissionChecker, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, localization: Localization, popupViewService: PopupViewService, hostContainerId: string, el: ElementRef, signalRAppId: string);
+    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, variableCommunicator: VariableCommunicator, variableStore: VariableStore, graphStore: GraphStore, permissionChecker: PermissionChecker, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, localization: Localization, popupViewService: PopupViewService, hostContainerId: string, el: ElementRef, signalRAppId: string, textLibraryService?: TextLibraryService, languageService?: LanguageService, guiContext?: GuiContext);
     private initElement;
     private switchToState;
     private initGraph;
@@ -33,4 +38,20 @@ export declare class ViewOperationElement extends ConditionalEnableElement {
     private closeView;
     private moveView;
     private recordViewOperation;
+    /**
+     * 订阅语种变化事件
+     */
+    private subscribeLanguageChange;
+    /**
+     * 更新文本内容（支持文本库和语种切换）
+     */
+    private updateTextContent;
+    /**
+     * 获取显示文本
+     */
+    private getDisplayText;
+    /**
+     * 释放资源
+     */
+    dispose(): void;
 }