Optmize file load func

Reviewed-on: http://git.mrkbear.com/MrKBear/living-together/pulls/55

package.json

@@ -34,7 +34,7 @@
     "copy-package-json": "fse mkdirp ./bundle/ & node ./config/electron.forge.config.js --out ./bundle",
     "copy-build-result": "fse mkdirp ./bundle/ & fse mkdirp ./build/ & fse copy ./build/ ./bundle/",
     "copy-electron-icon": "fse mkdirp ./bundle/ & fse copy ./assets/living-together.ico ./bundle/living-together.ico & fse copy ./assets/living-together.icns ./bundle/living-together.icns",
-    "electron-app-ci": "cd ./bundle & npm install & cd ../",
+    "electron-app-ci": "cd ./bundle & set ELECTRON_SKIP_BINARY_DOWNLOAD=1& npm i & set ELECTRON_SKIP_BINARY_DOWNLOAD=& set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/& set ELECTRON_CUSTOM_DIR={{ version }}& node ./node_modules/electron/install.js & cd ../",
     "gen-bundle": "fse emptyDir ./bundle/ & npm run copy-package-json & npm run copy-electron-icon & npm run electron-app-ci"
   },
   "keywords": [

source/Context/Status.tsx

@@ -183,6 +183,8 @@ class Status extends Emitter<IStatusEvent> {
             this.setFocusObject(new Set());
             this.setLabelObject();
             this.setClipObject();
+            this.actuator.endPlay();
+            this.actuator.start(false);
 
             // 映射
             this.emit("fileLoad");

source/Panel/Statistics/Statistics.scss

@@ -8,7 +8,7 @@ div.statistics-panel {
     div.statistics-chart {
         box-sizing: border-box;
         padding-top: 10px;
-        max-width: 300px;
+        max-width: 400px;
         min-height: 100%;
         height: 100%;
         width: 100%;

source/Panel/Statistics/Statistics.tsx

@@ -9,7 +9,7 @@ import {
 import { Bar, Line } from 'react-chartjs-2';
 import { Theme } from "@Component/Theme/Theme";
 import { Icon } from "@fluentui/react";
-import { Model } from "@Model/Model";
+import { IAnyObject, Model } from "@Model/Model";
 import { Group } from "@Model/Group";
 import { ActuatorModel } from "@Model/Actuator";
 import { Message } from "@Input/Message/Message";
@@ -147,13 +147,18 @@ class Statistics extends Component<IStatisticsProps & IMixinStatusProps & IMixin
 
     private clipLineChart(clip: Clip, theme: boolean) {
 
-        type IDataSet = {label: string, data: number[], backgroundColor: string, id: string};
+        type IDataSet = {label: string, data: number[], id: string} & IAnyObject;
         const datasets: IDataSet[] = [];
         const labels: number[] = [];
+        let frameLen: number = 0;
+        let lastDataSet: Map<string, number> | undefined;
+        let lastProcess: number | undefined;
         
         // 收集数据
         clip.frames.forEach((frame) => {
-            labels.push(frame.process);
+            
+            const frameData = new Map<string, number>();
+
             frame.commands.forEach((command) => {
 
                 if (command.type !== "points") return;
@@ -166,26 +171,70 @@ class Statistics extends Component<IStatisticsProps & IMixinStatusProps & IMixin
                     }
                 }
                 
-                if (findKey) {
-                    findKey.data.push((command.data?.length ?? 0) / 3);
-                } else {
+                // 记录当前数据
+                frameData.set(command.id, (command.data?.length ?? 0) / 3);
+
+                // 新建数据
+                if (!findKey) {
+
+                    const color = `rgb(${command.parameter?.color.map((v: number) => Math.floor(v * 255)).join(",")})`;
+
                     findKey = {} as any;
-                    findKey!.data = [(command.data?.length ?? 0) / 3];
                     findKey!.label = command.name ?? "";
-                    findKey!.backgroundColor = `rgb(${command.parameter?.color.map((v: number) => Math.floor(v * 255)).join(",")})`;
+                    findKey!.backgroundColor = color;
+                    findKey!.borderColor = color;
                     findKey!.id = command.id;
+                    findKey!.pointRadius = 0;
+                    findKey!.borderWidth = 1.5;
+                    findKey!.borderCapStyle = "round";
+                    findKey!.borderJoinStyle = "round";
+                    findKey!.pointHitRadius = 8;
+
+                    // 补充数据
+                    findKey!.data = new Array(frameLen).fill(0);
+
                     datasets.push(findKey!);
                 }
-            })
             });
 
+            // 与上一帧数据进行对比
+            const isSameData = datasets.every((value: IDataSet) => {
+                if (value.data[frameLen - 1] === frameData.get(value.id)) {
+                    return true;
+                } else {
+                    return false;
+                }
+            });
+
+            lastDataSet = frameData;
+            lastProcess = frame.process;
+
+            // 如果是不同数据 纪录
+            if (!isSameData) {
+                datasets.forEach((value: IDataSet) => {
+                    value.data.push(frameData.get(value.id) ?? 0);
+                });
+                frameLen ++;
+                labels.push(frame.process);
+            }
+        });
+
+        // 记录最后一帧数据
+        if (lastDataSet && lastProcess !== labels[labels.length - 1]) {
+            datasets.forEach((value: IDataSet) => {
+                value.data.push(lastDataSet!.get(value.id) ?? 0);
+            });
+            frameLen ++;
+            labels.push(lastProcess!);
+        }
+
         if (datasets.length <= 0) {
             return <Message i18nKey="Panel.Info.Statistics.Nodata"/>
         }
 
         return <Line
             options={ theme ? this.lineLightOption : this.lineDarkOption }
-            data={{labels, datasets:[{data: [1], }] }}
+            data={{labels, datasets }}
         />;
     }