@flexem/fc-gui 3.0.0-alpha.91 → 3.0.0-alpha.92

package/demo/src/app/bar/bar.component.html

@@ -1,3 +0,0 @@
-<h1>
-  <fc-gui [context]="context" [size]="size" (loaded)="guiLoaded()" (loadFailed)="guiLoadFailed($event)"></fc-gui>
-</h1>

package/demo/src/app/bar/bar.component.ts

@@ -1,146 +0,0 @@
-import { Component } from '@angular/core';
-import { GuiContext, Size, StringifyingMap, VariableCommunicator, VariableValue, VariableState } from '@flexem/fc-gui';
-import * as _ from 'lodash';
-import { Observable, Subscriber } from 'rxjs';
-import { DefaultGuiContext } from '../../gui/default-gui-context';
-import { BarConfigStore } from './bar-config-store';
-import { map } from 'rxjs/operators';
-
-@Component({
-    selector: 'bar',
-    templateUrl: './bar.component.html'
-})
-export class BarComponent {
-    context: GuiContext;
-    size: Size;
-
-    constructor() {
-        this.context = new DefaultGuiContext(new BarConfigStore(), new BarVariableCommunicator());
-        this.size = new Size(800, 480);
-    }
-
-    guiLoaded() {
-    }
-
-    guiLoadFailed(error: Error) {
-        console.log(error);
-    }
-}
-
-export class BarVariableCommunicator implements VariableCommunicator {
-
-    private localVariables = new StringifyingMap<string, number>(k => JSON.stringify(k));
-    private observers = new StringifyingMap<string, Subscriber<VariableValue[]>[]>(k => JSON.stringify(k));
-
-    openVariables(variables: string[]): Observable<VariableValue[]> {
-        return new Observable<VariableValue[]>(observer => {
-            _.each(variables, variable => {
-                if (!this.observers.has(variable)) {
-                    this.observers.set(variable, []);
-                }
-                this.observers.get(variable).push(observer);
-            });
-            setTimeout(() => {
-                observer.next(_.map(variables, variable => {
-                    if (this.isVolatileVariable(variable)) {
-                        return this.getRandomValue(variable);
-                    } else {
-                        return new VariableValue(variable, this.getVariableValue(variable));
-                    }
-                }));
-            }, this.getRandomDelay(2000));
-
-            return () => {
-                _.each(variables, variable => {
-                    _.remove(this.observers.get(variable), item => item === observer);
-                });
-            };
-        });
-    }
-
-    openVariable(variable: string): Observable<VariableValue> {
-        return this.openVariables([variable]).pipe(map<VariableValue[], VariableValue>(values => values[0]));
-    }
-
-    write(variableName: string, value: any): Observable<VariableValue> {
-        console.log(`Begin write variable[${variableName}]:${value}`);
-        return new Observable<VariableValue>(observer => {
-            setTimeout(() => {
-                this.localVariables.set(variableName, value);
-                const variableValue = new VariableValue(variableName, value);
-                if (this.observers.has(variableName)) {
-                    _.each(this.observers.get(variableName), item => {
-                        item.next([new VariableValue(variableName, value)]);
-                    });
-                }
-                observer.next(variableValue);
-                console.log(`End write variable[${variableName}]:${value}`);
-                observer.complete();
-            }, this.getRandomDelay(2000));
-        });
-    }
-
-    writeWordByBit(variable: string, index: number, value: any): Observable<VariableValue> {
-        console.log(`Begin write variable[${variable}]:${value}`);
-        return new Observable<VariableValue>(observer => {
-            setTimeout(() => {
-                this.localVariables.set(variable, value);
-                const variableValue = new VariableValue(variable, value);
-                if (this.observers.has(variable)) {
-                    _.each(this.observers.get(variable), item => {
-                        item.next([new VariableValue(variable, value)]);
-                    });
-                }
-                observer.next(variableValue);
-                console.log(`End write variable[${variable}]:${value}`);
-                observer.complete();
-            }, this.getRandomDelay(2000));
-        });
-    }
-
-    subscribeVariableState(variableName: string): Observable<VariableState> {
-        return this.subscribeVariableStates([variableName]).pipe(map<VariableValue[], VariableValue>(values => values[0]));
-    }
-
-    subscribeVariableStates(variableNames: Array<string>): Observable<Array<VariableState>> {
-        return new Observable<VariableValue[]>(observer => {
-            const timerId = setInterval(() => {
-                observer.next(this.getRandomVariableStates(variableNames));
-            }, 1000);
-            observer.next(this.getRandomVariableStates(variableNames));
-            return () => clearInterval(timerId);
-        });
-    }
-
-    dispose() {
-    }
-
-    private isVolatileVariable(variableName: string) {
-        return variableName === 'LW1000';
-    }
-
-    private getRandomValue(variable: string) {
-        if (Math.floor(Math.random() * 10) < 5) {
-            return new VariableValue(variable, null, 'time out.');
-        } else {
-            return new VariableValue(variable, this.getVariableValue(variable));
-        }
-    }
-
-    private getVariableValue(variable: string): number {
-        if (!this.localVariables.has(variable)) {
-            this.localVariables.set(variable, 10);
-        }
-        return this.localVariables.get(variable);
-    }
-
-    private getRandomDelay(maxMillisecond: number): number {
-        return Math.floor(Math.random() * maxMillisecond);
-    }
-
-    private getRandomVariableStates(variables: Array<string>): VariableState[] {
-        return _.map(variables, t => {
-            return new VariableState(t, 0);
-        });
-    }
-}

package/demo/src/app/default/default.component.html

@@ -1,3 +0,0 @@
-<h1>
-  <fc-gui [context]="context" [size]="size" (loaded)="guiLoaded()" (loadFailed)="guiLoadFailed($event)"></fc-gui>
-</h1>

package/demo/src/app/default/default.component.ts

@@ -1,28 +0,0 @@
-import { Component } from '@angular/core';
-import { GuiContext, Size, ConfigIsEmptyError } from '@flexem/fc-gui';
-import { DefaultGuiContext } from '../../gui/default-gui-context';
-import { DefaultConfigStore } from '../../gui/default-config-store';
-import { DefaultVariableCommunicator } from '../../gui/default-variable-communicator';
-import { DefaultPermissionChecker } from '../../gui/default-permission-checker';
-
-@Component({
-    selector: 'default',
-    templateUrl: './default.component.html'
-})
-export class DefaultComponent {
-
-    context: GuiContext;
-    size: Size;
-
-    constructor() {
-        this.context = new DefaultGuiContext();
-        this.size = new Size(800, 480);
-    }
-
-    guiLoaded() {
-    }
-
-    guiLoadFailed(error: Error) {
-        console.log(error);
-    }
-}

package/demo/src/app/history-data/history-data.component.html

@@ -1,5 +0,0 @@
-<div class="history-data">
-  <div class="monitor">
-    <fc-gui [context]="context" [size]="size" (loaded)="guiLoaded()" (loadFailed)="guiLoadFailed($event)"></fc-gui>
-  </div>
-</div>

package/demo/src/app/history-data/history-data.component.less

@@ -1,6 +0,0 @@
-.history-data {
-    margin: 10px;
-    .monitor {
-        border: solid 1px #ddd;
-    }
-}

package/demo/src/app/history-data/history-data.component.ts

@@ -1,33 +0,0 @@
-import { Component } from '@angular/core';
-import { GuiContext, Size } from '@flexem/fc-gui';
-import { DefaultGuiContext } from '../../gui/default-gui-context';
-import { DefaultVariableCommunicator } from '../../gui/default-variable-communicator';
-import { HistoryDataConfigStore } from './history-data.config-store';
-
-@Component({
-    selector: 'history-data-demo',
-    templateUrl: './history-data.component.html',
-    styleUrls: ['./history-data.component.less']
-})
-export class HistoryDataDemoComponent {
-
-    size: Size;
-    context: GuiContext;
-
-    constructor() {
-        this.context = new DefaultGuiContext(new HistoryDataConfigStore(), new DefaultVariableCommunicator());
-        this.size = new Size(1280, 720);
-        window.onresize = event => {
-            const width = document.documentElement.getBoundingClientRect().width - 20;
-            const height = document.documentElement.getBoundingClientRect().height - 20;
-            this.size = new Size(width, height);
-        };
-    }
-
-    guiLoaded() {
-    }
-
-    guiLoadFailed(error: Error) {
-        console.log(error);
-    }
-}

package/demo/src/app/history-data/history-data.config-store.ts

@@ -1,159 +0,0 @@
-import { BaseElementModel, CharacterDisplay, ConfigStore, GraphStore, HistoricalCurveModel, HistoryDataStore, ImageStore, VariableDefinition, ViewModel, ViewStore, VariableStore } from '@flexem/fc-gui';
-import * as _ from 'lodash';
-import { Observable, of } from 'rxjs';
-import { DefaultGraphStore, DefaultImageStore, DefaultVariableStore } from '../../gui/default-config-store';
-import { DefaultHistoryDataStore } from '../../gui/default-history-data.store';
-
-export class HistoryDataViewStore implements ViewStore {
-
-    private readonly svg: string;
-
-    constructor() {
-        const content = _.join(_.map(this.getElements(), item => {
-            return `<g transform='matrix(1, 0, 0, 1, ${item.displaySetting.location.x}, ${item.displaySetting.location.y})' data-model='${JSON.stringify(item)}'></g>`;
-        }), '\r\n');
-        this.svg = this.getSvg(content);
-    }
-
-    getMainViewConfig(): Observable<ViewModel> {
-        return of<ViewModel>(new ViewModel(this.svg));
-    }
-
-    getViewConfig(viewId: number): Observable<ViewModel> {
-        return of<ViewModel>(new ViewModel(this.svg));
-    }
-
-    getViewConfigByConfigureViewId(viewId: number): Observable<ViewModel> {
-        return of<ViewModel>(new ViewModel(this.svg));
-    }
-
-    getViewConfigByConfigureViewCode(configureViewCode: string): Observable<ViewModel> {
-        return of<ViewModel>(new ViewModel(this.svg));
-    }
-
-    private getSvg(content: string, width: number = 800, height: number = 480): string {
-        return `<svg width='${width}px' height='${height}px' RL='0 0 ${width} ${height}'
-    xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
-  <g transform='matrix(1, 0, 0, 1, 0, 0)' clip-path='url(#mainClip2447)'>
-    <g transform='matrix(1, 0, 0, 1, 0, 0)'>${content}</g>
-  </g>
-  <clipPath id='mainClip2447'><rect x='0' y='0' width='${width}' height='${height}'/></clipPath>
-  </svg>`;
-    }
-
-    private getElements(): any[] {
-        const elements = new Array<BaseElementModel>();
-        const historicalCurveElement: any = {
-            id: 1,
-            category: 'HistoricalCurve',
-            version: 1,
-            dataSetting: {
-                dataSourceCode: 0,
-                dataName: '测试之一',
-                channels: [{
-                    name: '模拟测试1',
-                    projectEnabled: true,
-                    connectorColor: '#ddd'
-                }, {
-                    name: '点击一下',
-                    projectEnabled: false,
-                    connectorColor: '#fed'
-                }, {
-                    name: 'bucuoyo',
-                    projectEnabled: false,
-                    connectorColor: '#423'
-                }]
-            },
-            displaySetting: {
-                showAxis: true,
-                axisSetting: {
-                    axisColor: '#eee',
-                    showAxisLabel: true,
-                    axisLabelFont: {
-                        color: '#def',
-                        fontSize: '12px',
-                        isUnderline: true,
-                        isBold: true,
-                        isItalic: true,
-                        textAlign: 'left'
-                    }
-                },
-                refreshInterval: 6000,
-                displayTimePeriod: 1,
-                size: { width: 500, height: 320, isReal: () => false },
-                location: { x: 100, y: 100 }
-            }
-        };
-        const historicalCurveElement2: any = {
-            id: 1,
-            category: 'HistoricalCurve',
-            version: 1,
-            displaySetting: {
-                showAxis: true,
-                axisSetting: {
-                    axisColor: '#eee',
-                    showAxisLabel: false,
-                    axisLabelFont: {
-                        color: '#def',
-                        fontSize: '20px',
-                        isUnderline: true,
-                        isBold: true,
-                        isItalic: true,
-                        textAlign: 'left'
-                    }
-                },
-                refreshInterval: 6000,
-                displayTimePeriod: 1,
-                size: { width: 200, height: 120, isReal: () => false },
-                location: { x: 0, y: 100 }
-            },
-            dataSetting: {
-                dataSourceCode: 0,
-                dataName: '测试之一',
-                channels: [{
-                    name: '模拟测试1',
-                    projectEnabled: true,
-                    connectorColor: '#ddd'
-                }]
-            }
-        };
-        const characterDisplayElement: CharacterDisplay = {
-            id: 2,
-            category: 'Character',
-            location: { x: 0, y: 0 },
-            size: { width: 200, height: 120, isReal: () => false },
-            isSameVariable: false,
-            writeVariable: new VariableDefinition('1', '2'),
-            isPassword: false,
-            label: {
-                content: 'emtpy',
-                font: {
-                    isUnderline: false,
-                    isBold: false,
-                    isItalic: false,
-                    fontSize: '16px',
-                    color: '#ddd',
-                    textAlign: 'center'
-                }
-            },
-            accessPermission: 6,
-            useGraph: true,
-            graphSetting: { id: 'character01' },
-            useSecurity: false,
-            charCount: 10,
-            version: 1
-        };
-        // elements.push(characterDisplayElement);
-        elements.push(historicalCurveElement);
-        // elements.push(historicalCurveElement2);
-        return elements;
-    }
-}
-
-export class HistoryDataConfigStore implements ConfigStore {
-    imageStore: ImageStore = new DefaultImageStore();
-    viewStore: ViewStore = new HistoryDataViewStore();
-    graphStore: GraphStore = new DefaultGraphStore();
-    historyDataStore: HistoryDataStore = new DefaultHistoryDataStore();
-    variableStore: VariableStore = new DefaultVariableStore;
-}