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

package/demo/src/app/switch-indicator-light/switch-config-store.ts

@@ -0,0 +1,477 @@
+import { BitConditonLogic, BitSwitchOperation, ConfigStore, Graph, GraphExtendedStyle, GraphResult, GraphStore, GraphType, HistoryDataStore, ImageStore, IndicatorLightType, RelationalOperator, SwitchIndicatorLight, SwitchType, ViewModel, ViewStore, WordSwitchOperation, VariableStore } from '@flexem/fc-gui';
+import * as _ from 'lodash';
+import { Observable, of } from 'rxjs';
+import { DefaultHistoryDataStore } from '../../gui/default-history-data.store';
+import { DefaultVariableStore } from '../../gui/default-config-store';
+
+class SwitchGraphStore implements GraphStore {
+
+    getGraph(graphId: string | number, stateId: number, extendedStyle?: GraphExtendedStyle): Observable<GraphResult> {
+        if (graphId === 'indicatorLight2') {
+            if (stateId >= 2) { return of(GraphResult.failed()); }
+            return of(GraphResult.success(new Graph(GraphType.Image, `/assets/gallery/indicatorLight2/state${stateId}.png`)));
+        } else if (graphId === 'indicatorLight') {
+            if (stateId > 6) { return of(GraphResult.failed()); }
+            return of(GraphResult.success(new Graph(GraphType.SVG, `/assets/gallery/indicatorLight/state${stateId}.svg`)));
+        } else if (graphId === 154) {
+            return of(GraphResult.success(new Graph(GraphType.Image, `/assets/gallery/indicatorLight2/state0.png`)));
+        }
+    }
+}
+
+export class SwitchConfigStore implements ConfigStore {
+    imageStore: ImageStore = new SwitchImageStore();
+    viewStore: ViewStore = new SwitchViewStore();
+    graphStore: GraphStore = new SwitchGraphStore();
+    historyDataStore: HistoryDataStore = new DefaultHistoryDataStore();
+    variableStore: VariableStore = new DefaultVariableStore;
+}
+
+export class SwitchImageStore implements ImageStore {
+    getImageUrl(imageId: string): string {
+        return 'assets/e8nZC.gif';
+    }
+}
+
+export class SwitchViewStore implements ViewStore {
+
+    private readonly svg: string;
+
+    private data: any[] = [
+        {
+            id: 1,
+            isAwaysEnable: true,
+            category: 'SwitchIndicatorLight',
+            useSwitch: true,
+            switchSettings: {
+                type: SwitchType.Bit,
+                settings: {
+                    operation: BitSwitchOperation.On,
+                    variableName: 'LB0',
+                    variableGroupName: 'Default'
+                }
+            },
+            useIndicatorLight: true,
+            indicatorLightSettings: {
+                type: IndicatorLightType.Bit,
+                settings: {
+                    variableName: 'LB0',
+                    variableGroupName: 'Default'
+                }
+            },
+            states: [{
+                id: 0,
+                condition: {
+                    logic: BitConditonLogic.On
+                },
+                text: {
+                    content: '开',
+                    font: {
+                        isUnderline: false,
+                        isBold: false,
+                        isItalic: false,
+                        fontSize: '14px',
+                        color: 'black',
+                        textAlign: 'center'
+                    }
+                }
+            }, {
+                id: 1,
+                condition: {
+                    logic: BitConditonLogic.Off
+                },
+                text: {
+                    content: '关',
+                    font: {
+                        isUnderline: false,
+                        isBold: false,
+                        isItalic: false,
+                        fontSize: '14px',
+                        color: 'black',
+                        textAlign: 'center'
+                    }
+                }
+            }],
+            useGraph: true,
+            graphSetting: {
+                id: 'indicatorLight2'
+            },
+            location: { x: 20, y: 50 },
+            size: { width: 100, height: 100, isReal: () => false },
+            isAwaysDisplay: true
+        },
+        {
+            id: 2,
+            isAwaysEnable: true,
+            category: 'SwitchIndicatorLight',
+            useSwitch: true,
+            switchSettings: {
+                type: SwitchType.Bit,
+                settings: {
+                    operation: BitSwitchOperation.Off,
+                    variableName: 'LB0',
+                    variableGroupName: 'Default'
+                }
+            },
+            useIndicatorLight: true,
+            indicatorLightSettings: {
+                type: IndicatorLightType.Bit,
+                settings: {
+                    variableName: 'LB0',
+                    variableGroupName: 'Default'
+                }
+            },
+            states: [{
+                id: 0,
+                condition: {
+                    logic: BitConditonLogic.On
+                },
+                text: {
+                    content: '开',
+                    font: {
+                        isUnderline: false,
+                        isBold: false,
+                        isItalic: false,
+                        fontSize: '14px',
+                        color: 'black',
+                        textAlign: 'center'
+                    }
+                }
+            }, {
+                id: 1,
+                condition: {
+                    logic: BitConditonLogic.Off
+                },
+                text: {
+                    content: '关',
+                    font: {
+                        isUnderline: false,
+                        isBold: false,
+                        isItalic: false,
+                        fontSize: '14px',
+                        color: 'black',
+                        textAlign: 'center'
+                    }
+                }
+            }],
+            useGraph: true,
+            graphSetting: {
+                id: 'indicatorLight2'
+            },
+            location: { x: 120, y: 50 },
+            size: { width: 100, height: 100, isReal: () => true },
+            isAwaysDisplay: true
+        },
+        {
+            id: 3,
+            isAwaysEnable: true,
+            category: 'SwitchIndicatorLight',
+            useSwitch: true,
+            switchSettings: {
+                type: SwitchType.Bit,
+                settings: {
+                    operation: BitSwitchOperation.Inverse,
+                    variableName: 'LB0',
+                    variableGroupName: 'Default'
+                }
+            },
+            useIndicatorLight: true,
+            indicatorLightSettings: {
+                type: IndicatorLightType.Bit,
+                settings: {
+                    variableName: 'LB0',
+                    variableGroupName: 'Default'
+                }
+            },
+            states: [{
+                id: 0,
+                condition: {
+                    logic: BitConditonLogic.On
+                },
+                text: {
+                    content: '开',
+                    font: {
+                        isUnderline: false,
+                        isBold: false,
+                        isItalic: false,
+                        fontSize: '14px',
+                        color: 'black',
+                        textAlign: 'center'
+                    }
+                }
+            }, {
+                id: 1,
+                condition: {
+                    logic: BitConditonLogic.Off
+                },
+                text: {
+                    content: '关',
+                    font: {
+                        isUnderline: false,
+                        isBold: false,
+                        isItalic: false,
+                        fontSize: '14px',
+                        color: 'black',
+                        textAlign: 'center'
+                    }
+                }
+            }],
+            useGraph: true,
+            graphSetting: {
+                id: 'indicatorLight2'
+            },
+            location: { x: 220, y: 50 },
+            size: { width: 100, height: 100, isReal: () => true },
+            isAwaysDisplay: true
+        },
+        {
+            id: 4,
+            isAwaysEnable: true,
+            category: 'SwitchIndicatorLight',
+            useSwitch: true,
+            switchSettings: {
+                type: SwitchType.Word,
+                settings: {
+                    operation: WordSwitchOperation.Add,
+                    operand: 1,
+                    variableName: 'LB0',
+                    variableGroupName: 'Default'
+                }
+            },
+            useIndicatorLight: true,
+            indicatorLightSettings: {
+                type: IndicatorLightType.Word,
+                settings: {
+                    variableName: 'LB0',
+                    variableGroupName: 'Default'
+                }
+            },
+            states: [{
+                id: 0,
+                condition: {
+                    operator: RelationalOperator.Equal,
+                    operand: 0
+                },
+                text: {
+                    content: '0',
+                    font: {
+                        isUnderline: false,
+                        isBold: false,
+                        isItalic: false,
+                        fontSize: '14px',
+                        color: 'black',
+                        textAlign: 'center'
+                    }
+                }
+            }, {
+                id: 1,
+                condition: {
+                    operator: RelationalOperator.Equal,
+                    operand: 1
+                },
+                text: {
+                    content: '1',
+                    font: {
+                        isUnderline: false,
+                        isBold: false,
+                        isItalic: false,
+                        fontSize: '14px',
+                        color: 'black',
+                        textAlign: 'center'
+                    }
+                }
+            }, {
+                id: 2,
+                condition: {
+                    operator: RelationalOperator.Equal,
+                    operand: 2
+                },
+                text: {
+                    content: '2',
+                    font: {
+                        isUnderline: false,
+                        isBold: false,
+                        isItalic: false,
+                        fontSize: '14px',
+                        color: 'black',
+                        textAlign: 'center'
+                    }
+                }
+            }, {
+                id: 3,
+                text: {
+                    content: '错误',
+                    font: {
+                        isUnderline: false,
+                        isBold: false,
+                        isItalic: false,
+                        fontSize: '24px',
+                        color: 'red',
+                        textAlign: 'center'
+                    }
+                }
+            }],
+            useGraph: true,
+            graphSetting: {
+                id: 'indicatorLight'
+            },
+            location: { x: 20, y: 180 },
+            size: { width: 100, height: 100, isReal: () => true },
+            isAwaysDisplay: true
+        },
+        {
+            id: 5,
+            isAwaysEnable: true,
+            category: 'SwitchIndicatorLight',
+            useSwitch: true,
+            switchSettings: {
+                type: SwitchType.Word,
+                settings: {
+                    operation: WordSwitchOperation.Add,
+                    operand: 1,
+                    variableName: 'LB0',
+                    variableGroupName: 'Default'
+                }
+            },
+            useIndicatorLight: true,
+            indicatorLightSettings: {
+                type: IndicatorLightType.Word,
+                settings: {
+                    variableName: 'LB0',
+                    variableGroupName: 'Default'
+                }
+            },
+            states: [{
+                id: 0,
+                condition: {
+                    operator: RelationalOperator.Equal,
+                    operand: 0
+                },
+                text: {
+                    content: '0',
+                    font: {
+                        isUnderline: false,
+                        isBold: false,
+                        isItalic: false,
+                        fontSize: '14px',
+                        color: 'black',
+                        textAlign: 'center'
+                    }
+                }
+            }, {
+                id: 1,
+                condition: {
+                    operator: RelationalOperator.Equal,
+                    operand: 1
+                },
+                text: {
+                    content: '1',
+                    font: {
+                        isUnderline: false,
+                        isBold: false,
+                        isItalic: false,
+                        fontSize: '14px',
+                        color: 'black',
+                        textAlign: 'center'
+                    }
+                }
+            }, {
+                id: 2,
+                condition: {
+                    operator: RelationalOperator.Equal,
+                    operand: 2
+                },
+                text: {
+                    content: '2',
+                    font: {
+                        isUnderline: false,
+                        isBold: false,
+                        isItalic: false,
+                        fontSize: '14px',
+                        color: 'black',
+                        textAlign: 'center'
+                    }
+                }
+            }, {
+                id: 3,
+                condition: {
+                    operator: RelationalOperator.Equal,
+                    operand: 3
+                },
+                text: {
+                    content: '3',
+                    font: {
+                        isUnderline: false,
+                        isBold: false,
+                        isItalic: false,
+                        fontSize: '14px',
+                        color: 'black',
+                        textAlign: 'center'
+                    }
+                }
+            }, {
+                id: 4,
+                condition: {
+                    operator: RelationalOperator.Equal,
+                    operand: 4
+                },
+                text: {
+                    content: '4',
+                    font: {
+                        isUnderline: false,
+                        isBold: false,
+                        isItalic: false,
+                        fontSize: '14px',
+                        color: 'black',
+                        textAlign: 'center'
+                    }
+                }
+            }],
+            useGraph: true,
+            graphSetting: {
+                id: 'indicatorLight'
+            },
+            location: { x: 140, y: 180 },
+            size: { width: 100, height: 100, isReal: () => true },
+            isAwaysDisplay: true
+        }
+    ];
+
+    constructor() {
+        const switchSvg = _.join(_.map(this.data, item => {
+            return `<g transform='matrix(1, 0, 0, 1, ${item.location.x}, ${item.location.y})' data-model='${JSON.stringify(item)}'></g>`;
+        }), '\r\n');
+        this.svg = this.getSvg(switchSvg);
+    }
+
+    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): string {
+        return `<svg width='802px' height='482px' RL='0 0 802 482'
+    xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'
+    data-model="{&quot;background&quot;:{&quot;fillType&quot;:2,&quot;graphSetting&quot;:{&quot;id&quot;:154}}}">
+  <g transform='matrix(1, 0, 0, 1, 0, 0)' clip-path='url(#mainClip2447)'>
+    <g transform='matrix(1, 0, 0, 1, 1, 1)'>
+      ${content}
+    </g>
+  </g>
+  <clipPath id='mainClip2447'>
+    <rect x='0' y='0' width='802' height='482'/>
+  </clipPath>
+</svg>`;
+    }
+}

package/demo/src/app/switch-indicator-light/switch-indicator-light.component.html

@@ -0,0 +1,5 @@
+<h1>
+  <div style="border: 1px solid black;">
+    <fc-gui [context]="context" [size]="size" (loaded)="guiLoaded()" (loadFailed)="guiLoadFailed($event)"></fc-gui>
+  </div>
+</h1>

package/demo/src/app/switch-indicator-light/switch-indicator-light.component.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { GuiContext, Size, StringifyingMap, VariableCommunicator, VariableDefinition, VariableValue } from '@flexem/fc-gui';
+import * as _ from 'lodash';
+import { Observable, Subscriber } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { DefaultGuiContext } from '../../gui/default-gui-context';
+import { SwitchConfigStore } from './switch-config-store';
+
+@Component({
+    selector: 'switch-indicator-light',
+    templateUrl: './switch-indicator-light.component.html'
+})
+export class SwitchIndicatorLightComponent {
+    context: GuiContext;
+    size: Size;
+
+    constructor() {
+        this.context = new DefaultGuiContext(new SwitchConfigStore(), null, null);
+        this.size = new Size(800, 480);
+    }
+
+    guiLoaded() {
+    }
+
+    guiLoadFailed(error: Error) {
+        console.log(error);
+    }
+}

package/demo/src/assets/gallery/character01/index.json

@@ -0,0 +1,24 @@
+{
+  "id": "character01",
+  "name": [
+    {
+      "language": "en",
+      "value": "TextBlock1"
+    },
+    {
+      "language": "zh-CN",
+      "value": "文本框1"
+    }
+  ],
+  "category": "character",
+  "thumbUrl": "character1.png",
+  "states": [
+    {
+      "id": 0,
+      "type": "svg",
+      "url": "state0.svg",
+      "canChangeStroke": false,
+      "canChangeFill": false
+    }
+  ]
+}

package/demo/src/assets/gallery/character01/state0.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 120 48" style="enable-background:new 0 0 120 48;" xml:space="preserve" width="100%" height="48px">
+<style type="text/css">
+</style>
+<title>资源 1</title>
+<g id="图层_2_1_">
+	<g id="图层_1_复制">
+		
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60" y1="2.5" x2="60" y2="49.5" gradientTransform="matrix(1 0 0 -1 0 50)">
+			<stop  offset="0" style="stop-color:#F0F0F0"/>
+			<stop  offset="1" style="stop-color:#CCCCCC"/>
+		</linearGradient>
+		<rect x="0.5" y="0.5" style="fill:url(#SVGID_1_);" width="119" height="47"/>
+		<path style="fill:#AAAAAA;" d="M119,1v46H1V1H119 M120,0H0v48h120V0z"/>
+	</g>
+</g>
+</svg>

package/demo/src/assets/gallery/indicatorLight/index.json

@@ -0,0 +1,58 @@
+{
+  "id": "indicatorLight",
+  "name": [
+    {
+      "language": "en",
+      "value": "Indicator light"
+    },
+    {
+      "language": "zh-CN",
+      "value": "指示灯"
+    }
+  ],
+  "thumbUrl": "indicatorLight.png",
+  "states": [
+    {
+      "id": 0,
+      "type": "svg",
+      "url": "state0.svg",
+      "canChangeStroke": true,
+      "canChangeFill": true
+    },
+    {
+      "id": 1,
+      "type": "svg",
+      "url": "state1.svg",
+      "canChangeStroke": true,
+      "canChangeFill": true
+    },
+    {
+      "id": 2,
+      "type": "svg",
+      "url": "state2.svg",
+      "canChangeStroke": false,
+      "canChangeFill": false
+    },
+    {
+      "id": 3,
+      "type": "svg",
+      "url": "state3.svg",
+      "canChangeStroke": false,
+      "canChangeFill": false
+    },
+    {
+      "id": 4,
+      "type": "svg",
+      "url": "state4.svg",
+      "canChangeStroke": false,
+      "canChangeFill": false
+    },
+    {
+      "id": 5,
+      "type": "svg",
+      "url": "state5.svg",
+      "canChangeStroke": false,
+      "canChangeFill": false
+    }
+  ]
+}

package/demo/src/assets/gallery/indicatorLight/state0.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="indicatorLight_0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	#indicatorLight_0 .st0.canChangeStroke{fill:#EEEEEE;}
+	#indicatorLight_0 .st1{fill:#CCCCCC;}
+	#indicatorLight_0 .st2{fill:#FF0000;}
+	#indicatorLight_0 .st3.canChangeFill{fill:url(#XMLID_3_);}
+	#indicatorLight_0 .st4{fill:#999999;}
+	#indicatorLight_0 .st5{fill:#FFFFFF;}
+</style>
+<g id="XMLID_13_">
+	<circle id="XMLID_20_" class="st0 canChangeStroke" cx="100" cy="100" r="100"/>
+	<path id="XMLID_4_" class="st1" d="M100,2c54,0,98,44,98,98s-44,98-98,98S2,154,2,100S46,2,100,2 M100,0C44.8,0,0,44.8,0,100
+		s44.8,100,100,100s100-44.8,100-100S155.2,0,100,0L100,0z"/>
+</g>
+<g id="XMLID_2_">
+	<circle id="XMLID_26_" class="st2" cx="100" cy="100" r="80"/>
+</g>
+<g id="XMLID_7_">
+	<radialGradient id="XMLID_3_" cx="100" cy="100" r="80" gradientUnits="userSpaceOnUse">
+		<stop  offset="0" style="stop-color:#000000;stop-opacity:0"/>
+		<stop  offset="0.8587" style="stop-color:#000000;stop-opacity:0.2576"/>
+		<stop  offset="1" style="stop-color:#000000;stop-opacity:0.3"/>
+	</radialGradient>
+	<circle id="XMLID_12_" class="st3 canChangeFill" cx="100" cy="100" r="80"/>
+	<path id="XMLID_6_" class="st4" d="M100,21c43.6,0,79,35.4,79,79s-35.4,79-79,79s-79-35.4-79-79S56.4,21,100,21 M100,20
+		c-44.2,0-80,35.8-80,80s35.8,80,80,80s80-35.8,80-80S144.2,20,100,20L100,20z"/>
+</g>
+<path id="XMLID_5_" class="st5" d="M37.3,82c0,0,11.4-8.3,28.2-5.1c0,0,1.1-15.9,22.8-20.2c0,0-7.1-9.4-5.1-18.4
+	C83.3,38.3,50.8,43.8,37.3,82z"/>
+</svg>

package/demo/src/assets/gallery/indicatorLight/state1.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="indicatorLight_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	#indicatorLight_1 .st0.canChangeStroke{fill:#EEEEEE;}
+	#indicatorLight_1 .st1{fill:#CCCCCC;}
+	#indicatorLight_1 .st2{fill:#13FF00;}
+	#indicatorLight_1 .st3.canChangeFill{fill:url(#XMLID_3_);}
+	#indicatorLight_1 .st4{fill:#999999;}
+	#indicatorLight_1 .st5{fill:#FFFFFF;}
+</style>
+<g id="XMLID_13_">
+	<circle id="XMLID_20_" class="st0 canChangeStroke" cx="100" cy="100" r="100"/>
+	<path id="XMLID_4_" class="st1" d="M100,2c54,0,98,44,98,98s-44,98-98,98S2,154,2,100S46,2,100,2 M100,0C44.8,0,0,44.8,0,100
+		s44.8,100,100,100s100-44.8,100-100S155.2,0,100,0L100,0z"/>
+</g>
+<g id="XMLID_2_">
+	<circle id="XMLID_26_" class="st2" cx="100" cy="100" r="80"/>
+</g>
+<g id="XMLID_7_">
+	<radialGradient id="XMLID_3_" cx="100" cy="100" r="80" gradientUnits="userSpaceOnUse">
+		<stop  offset="0" style="stop-color:#000000;stop-opacity:0"/>
+		<stop  offset="0.8587" style="stop-color:#000000;stop-opacity:0.2576"/>
+		<stop  offset="1" style="stop-color:#000000;stop-opacity:0.3"/>
+	</radialGradient>
+	<circle id="XMLID_12_" class="st3 canChangeFill" cx="100" cy="100" r="80"/>
+	<path id="XMLID_6_" class="st4" d="M100,21c43.6,0,79,35.4,79,79s-35.4,79-79,79s-79-35.4-79-79S56.4,21,100,21 M100,20
+		c-44.2,0-80,35.8-80,80s35.8,80,80,80s80-35.8,80-80S144.2,20,100,20L100,20z"/>
+</g>
+<path id="XMLID_5_" class="st5" d="M37.3,82c0,0,11.4-8.3,28.2-5.1c0,0,1.1-15.9,22.8-20.2c0,0-7.1-9.4-5.1-18.4
+	C83.3,38.3,50.8,43.8,37.3,82z"/>
+</svg>