@flexem/fc-gui 3.0.0-alpha.93 → 3.0.0-alpha.96

package/CHANGELOG.md

@@ -388,34 +388,7 @@
 #### Bug Fix
     1. FLEXCLOUD-2612 组态元件写值超时
 
-## 3.0.0-alpha.87(2023-05-31)
+## 3.0.0-alpha.96(2023-09-26)
 ### Web端
 #### Bug Fix
-    1. FLEXCLOUD-2698 【app-ios】视频元件放大后缩小不应占满整个组态
-
-## 3.0.0-alpha.88(2023-06-01)
-### Web端
-#### Bug Fix
-    1. FLEXCLOUD-2699、FLEXCLOUD-2700 将视频元件还原为在组态外渲染，并且在弹窗时隐藏视频
-
-## 3.0.0-alpha.89(2023-06-01)
-### Web端
-#### Bug Fix
-    1. FLEXCLOUD-2699、FLEXCLOUD-2700 修改视频元件，优化视频显示逻辑
-
-## 3.0.0-alpha.90(2023-06-06)
-### Web端
-#### Bug Fix
-    1. 安卓和鸿蒙系统上，组态横屏时不再显示状态栏
-    2. 修复在鸿蒙系统的手机上，视频元件的控制按钮显示异常的问题
-    3. 修复ios系统中视频放大缩小后，画面会变形的问题
-
-## 3.0.0-alpha.92(2023-07-18)
-### Web端
-#### Features
-    1. FLEXCLOUD-2710 【氚云20230621000600】组态历史曲线表：历史曲线增加点位标记，便于直观看到曲线采样点的变化
-
-## 3.0.0-alpha.93(2023-07-21)
-### Web端
-#### Features
-    1. FLEXCLOUD-2741 【氚云20230714001409】模板的模拟功能，无法进行写值，一直提示提交中
+    1. FLEXCLOUD-2864 2018年创建的模板组态写值失败（在补丁包v2.22.0-Hotfix5中使用，其它分支不要用）

package/bundles/@flexem/fc-gui.umd.js

@@ -33767,7 +33767,7 @@ function styleFunction(name, value, priority) {
   };
 }
 
-/* harmony default export */ var selection_style = (function(name, value, priority) {
+/* harmony default export */ var style = (function(name, value, priority) {
   return arguments.length > 1
       ? this.each((value == null
             ? styleRemove : typeof value === "function"
@@ -34222,7 +34222,7 @@ Selection.prototype = selection_selection.prototype = {
   empty: selection_empty,
   each: each,
   attr: attr,
-  style: selection_style,
+  style: style,
   property: property,
   classed: classed,
   text: selection_text,
@@ -36357,7 +36357,6 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
             operationButtonMargin: 4
         };
         this.elementStatus = HistoricalCurveElementStatus.Loading;
-        this.data = [];
         this.logger = injector.get(logger["b" /* LOGGER_SERVICE_TOKEN */]);
         this.localization = injector.get(_tmp_localization["b" /* LOCALIZATION */]);
         this.timePeriods = this.getValidTimePeriods();
@@ -36469,7 +36468,6 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
             Object(lodash["each"])(result, v => values.push({ x: moment(v.time).local().toDate().valueOf(), y: v.values[key] }));
             data.push({ key: channel.name, area: channel.projectEnabled, values: values });
         });
-        this.data = data;
         nv_d3["addGraph"](() => {
             if (this.model.displaySetting.curveType === CurveType.BarGroup || this.model.displaySetting.curveType === CurveType.BarStack) {
                 return this.getMultiBarWithFocusChart(chartWidth, chartHeight, data);
@@ -36479,44 +36477,6 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
             }
         });
     }
-    initPoint() {
-        try {
-            this.rootElement
-                .selectAll('.nv-scatterWrap')
-                .selectAll('.nv-point')
-                .style('stroke-opacity', 0)
-                .style('stroke-width', 0);
-            const legendList = this.rootElement
-                .selectAll('.nv-legend')
-                .selectAll('.nv-series');
-            let hiddenCount = 0;
-            for (let i = 0; i < this.data.length; i++) {
-                const channel = this.model.dataSetting.channels[i];
-                const pointStyle = `stroke-opacity: 1;stroke-width: 8px;stroke :${channel.pointColor}`;
-                if (legendList._groups[0][i].firstChild.style.fillOpacity === '1') {
-                    const pointList = this.rootElement
-                        .selectAll('.nv-scatterWrap')
-                        .selectAll('.nv-series-' + (i - hiddenCount)).selectAll('.nv-point')._groups[0];
-                    if (pointList && pointList.length) {
-                        for (let j = 0; j < pointList.length; j++) {
-                            if (j && $(pointList[j]).attr('transform').split(',')[1] !== $(pointList[j - 1]).attr('transform').split(',')[1]) {
-                                if (channel.enablePoint && channel.pointColor) {
-                                    pointList[j].setAttribute('style', pointStyle);
-                                    pointList[j - 1].setAttribute('style', pointStyle);
-                                }
-                            }
-                        }
-                    }
-                }
-                else {
-                    hiddenCount++;
-                }
-            }
-        }
-        catch (e) {
-            console.log(e);
-        }
-    }
     getLineChart(chartWidth, chartHeight, data) {
         const chart = nv_d3["models"].lineChart().showLegend(true)
             .margin({ top: 0, bottom: 0, left: this.displayOption.marginLeft, right: this.displayOption.marginRight })
@@ -36532,12 +36492,6 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
         }
         this.renderCommonProperty(chart, chartWidth, chartHeight, data);
         this.renderOperationArea(chartWidth, chartHeight);
-        this.initPoint();
-        chart.legend.dispatch.on('legendClick', () => {
-            setTimeout(() => {
-                this.initPoint();
-            }, 1);
-        });
         return chart;
     }
     getMultiBarWithFocusChart(chartWidth, chartHeight, data) {
@@ -36581,11 +36535,6 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
         chart.tooltip.headerFormatter(d => this.timeFormat(d, '%x %X'));
         if (this.model.displaySetting.showAxis) {
             chart.xAxis.showMaxMin(true).tickFormat(d => {
-                clearTimeout(this.timer);
-                this.timer = undefined;
-                this.timer = setTimeout(() => {
-                    this.initPoint();
-                }, 1);
                 if (this.currentTimePeriod === 3 || this.currentTimePeriod === 4 || this.currentTimePeriod === 5) {
                     return this.timeFormat(d, '%y-%m-%d');
                 }
@@ -39364,9 +39313,6 @@ class view_operation_element_ViewOperationElement extends conditional_enable_ele
         const viewIndex = this.model.viewIndex;
         if (null != viewIndex) {
             this.popupViewService.popView(viewIndex, this.hostContainerId, this.el).subscribe(() => this.recordViewOperation(), error => this.logger.error(`ToggleView(${viewIndex}) failed. ${error}`));
-            $(`#${this.hostContainerId} video`)
-                .addClass('video-hidden')
-                .css('visibility', 'hidden');
         }
         else {
             this.logger.error('[GUI]Toggle View:invalid view index');
@@ -39374,11 +39320,6 @@ class view_operation_element_ViewOperationElement extends conditional_enable_ele
     }
     closeView() {
         this.popupViewService.closeView();
-        if ($(`#${this.hostContainerId} > svg > svg`).length === 0) {
-            $(`#${this.hostContainerId} .video-hidden`)
-                .removeClass('video-hidden')
-                .css('visibility', 'visible');
-        }
         this.recordViewOperation();
     }
     moveView(movementX, movementY) {
@@ -39525,7 +39466,6 @@ class video_element_VideoElement extends conditional_display_element_Conditional
         this.guiSize = guiSize;
         this.svgRootClass = svgRootClass;
         this.videoId = '';
-        this.isFullscreen = false;
         this.isMobileMode = _tmp_settings["a" /* DisplayMode */].Mobile === injector.get(_tmp_settings["b" /* GlobalSettings */]).displayMode;
         this.localization = injector.get(_tmp_localization["b" /* LOCALIZATION */]);
         this.init();
@@ -39561,79 +39501,60 @@ class video_element_VideoElement extends conditional_display_element_Conditional
             return;
         }
         this.videoId = guid["a" /* Guid */].newGuid().toString('n');
-        this.rootElement.append('rect').attr('id', 'rect' + this.videoId).attr('fill', 'transparent')
-            .attr('width', this.model.size.width)
-            .attr('height', this.model.size.height);
         this.videoService.getVideoUrl(this.model.videoTag).then(result => {
-            this.videoUrl = result.url;
-            this.initVideo(result.url, this.videoId);
-        }).catch(() => {
-            throw new Error('Failure of the videoService');
-        });
-    }
-    initVideo(videoUrl, videoId) {
-        const patt = /https:.+.m3u8/;
-        if (videoUrl.indexOf('http:') !== -1) {
-            videoUrl = videoUrl.replace('http:', 'https:');
-        }
-        if (!patt.test(videoUrl)) {
-            let videoToolTip = this.localization.invalidVideoAddress;
-            if (Object(lodash["isNil"])(videoUrl) || videoUrl === '') {
-                videoToolTip = this.localization.unconfiguredVideoAddress;
+            this.isMobileType = result.isMobileType;
+            const isAndroid = !!navigator.userAgent.match(/(Android)/i);
+            let videoUrl = result.url;
+            const patt = /https:.+.m3u8/;
+            if (videoUrl.indexOf('http:') !== -1) {
+                videoUrl = videoUrl.replace('http:', 'https:');
+            }
+            if (!patt.test(videoUrl)) {
+                let videoToolTip = this.localization.invalidVideoAddress;
+                if (Object(lodash["isNil"])(videoUrl) || videoUrl === '') {
+                    videoToolTip = this.localization.unconfiguredVideoAddress;
+                }
+                this.addVideoAddressToolTip(videoToolTip);
+                return;
             }
-            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;
-        }
-        const clientRect = currentRect[0].getBoundingClientRect();
-        const chartWidth = clientRect.width;
-        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();
-        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) {
-                videoHtml += ' autoplay muted></video>';
+            const video = this.rootElement.append('foreignObject')
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('width', this.model.size.width)
+                .attr('height', this.model.size.height)
+                .append('xhtml:video')
+                .attr('id', this.videoId)
+                .attr('class', 'element-video')
+                .attr('scareX', this.model.location.x / this.guiSize.width)
+                .attr('scareY', this.model.location.y / this.guiSize.height)
+                .attr('src', videoUrl)
+                .style('width', '100%')
+                .style('height', '100%')
+                .style('object-fit', 'fill')
+                .attr('playsInline', true)
+                .attr('webkit-playsinline', true)
+                .attr('controls', true)
+                .attr('muted', true);
+            if (this.isMobileMode) {
+                if (isAndroid) {
+                    video.attr('autoplay', true);
+                }
             }
             else {
-                videoHtml += ' controls muted></video>';
+                video.attr('autoplay', true);
             }
-        }
-        else {
-            videoHtml += ' controls autoplay muted></video>';
-        }
-        $('.' + this.svgRootClass).find('.svg-content').append(videoHtml);
-        if (this.isShow === false) {
-            $('#' + this.videoId).hide();
-        }
-        setTimeout(() => {
-            if (isAndroid) {
-                this.setAndroidVideo(videoId);
+            if (this.isShow === false) {
+                $('#' + this.videoId).hide();
             }
-            else if (isIos) {
-                this.setIosVideo(this.videoUrl, videoId);
+            this.videoPlayer = new EZUIPlayer(this.videoId);
+            if (isAndroid) {
+                setTimeout(() => {
+                    this.setAndroidVideo();
+                }, 500);
             }
-            this.videoPlayer = new EZUIPlayer(videoId);
-        }, 1000);
-        const style = document.createElement('style');
-        style.innerHTML = `#${videoId}::-webkit-media-controls-enclosure {
-            display: none;
-        }`;
-        document.head.append();
+        }).catch(() => {
+            throw new Error('Failure of the videoService');
+        });
     }
     addVideoAddressToolTip(videoToolTip) {
         const size = this.model.size;
@@ -39655,71 +39576,53 @@ class video_element_VideoElement extends conditional_display_element_Conditional
         const textElement = new text_element_TextElementModal(videoToolTip, font, size.width, size.height);
         this.$element.append(textElement.Element);
     }
-    setAndroidVideo(videoId) {
-        const videoElement = $('#' + videoId);
-        let preHeight = videoElement.height();
-        let preWidth = videoElement.width();
-        let preTop = videoElement.css('top');
-        let preLeft = videoElement.css('left');
+    setAndroidVideo() {
         const { StatusBar } = window;
-        videoElement.on('click', () => {
-            if (!this.isFullscreen) {
-                if (StatusBar) {
-                    StatusBar.hide();
-                }
-                preHeight = videoElement.height();
-                preWidth = videoElement.width();
-                preTop = videoElement.css('top');
-                preLeft = videoElement.css('left');
-                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');
-                videoElement.css('position', 'fixed');
-                this.isFullscreen = true;
-                try {
-                    screen.orientation.lock(screen.orientation.type);
-                }
-                catch (error) {
-                    console.error(error);
-                }
+        this.bindFullscreenEvent();
+        window.addEventListener('orientationchange', () => {
+            StatusBar.show();
+            this.hide();
+            clearTimeout(this.refreshTimer);
+            this.refreshTimer = null;
+            this.refreshTimer = setTimeout(() => {
+                this.init();
+                this.show();
+            }, 1000);
+        });
+    }
+    bindFullscreenEvent() {
+        const that = this;
+        const { StatusBar } = window;
+        $('#' + this.videoId).bind('webkitfullscreenchange', () => {
+            if (document.webkitIsFullScreen) {
+                $('#' + that.videoId).css({
+                    'object-fit': 'contain',
+                    'z-index': 99
+                });
+                StatusBar.hide();
             }
             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');
-                videoElement.css('position', 'absolute');
-                this.isFullscreen = false;
-                try {
-                    if (screen.orientation.type.includes('portrait')) {
-                        StatusBar.show();
-                    }
+                StatusBar.show();
+                if (that.isMobileType) {
+                    $('#' + this.videoId).css('object-fit', document.webkitIsFullScreen ? 'contain' : 'fill');
                 }
-                catch (error) {
-                    console.error(error);
+                else {
+                    clearTimeout(this.resetTimer);
+                    this.resetTimer = null;
+                    $('#' + this.videoId).css('display', 'none');
+                    this.resetTimer = setTimeout(() => {
+                        $('#' + this.videoId).css({
+                            'width': '100%',
+                            'height': '100%',
+                            'display': 'block',
+                            'z-index': 0,
+                            'object-fit': document.webkitIsFullScreen ? 'contain' : 'fill'
+                        });
+                    }, 1000);
                 }
             }
         });
     }
-    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);
-        });
-    }
 }
 
 // CONCATENATED MODULE: ./.tmp/elements/weather/weater-element.ts
@@ -41766,24 +41669,13 @@ let WriteValueModalComponent = class WriteValueModalComponent {
                 value = this.formatWriteValue();
             }
         }
-        if (!this.args.releasedVariableService) {
-            this.onClosed({
-                value: value,
-                showValue: showValue,
-                enableNumericalOperation: false,
-                isNumericalOperation: this.isNumericalOperation,
-                variableRwType: 6
-            });
-            return;
-        }
         this.args.releasedVariableService.getVariableWithValueTransform(this.variableName).subscribe(result => {
             const valueTransform = JSON.parse(result.valueTransform);
-            if (valueTransform.Type !== 0) {
+            if ((valueTransform === null || valueTransform === void 0 ? void 0 : valueTransform.Type) !== 0) {
                 this.isNumericalOperation = true;
             }
             this.onClosed({
-                value: value,
-                showValue: showValue,
+                value, showValue,
                 enableNumericalOperation: this.enableNumericalOperation,
                 isNumericalOperation: this.isNumericalOperation,
                 variableRwType: result.variableRwType