Item navigation bar frangoteam#454

client/dist/assets/i18n/en.json

@@ -180,6 +180,7 @@
     "chart.property-data": "Data",
     "chart.property-props": "Property",
     "chart.property-layout": "Layout",
+    "chart.property-name": "Name",
     "chart.property-chart": "Chart to show",
     "chart.property-newchart": "New Chart...",
     "chart.property-chart-type": "Show mode",
@@ -311,6 +312,7 @@
     "table.property-title": "Data Table settings",
     "table.property-data": "Data",
     "table.property-date-last-range": "Date range",
+    "table.property-name": "Name",
     "table.property-type": "Type",
     "table.property-header": "Header",
     "table.property-header-height": "Height",
@@ -558,6 +560,9 @@
     "editor.tools-alignbottom-title": "Align Bottom",
     "editor.tools-ungroup-title": "Ungroup Elements [G]",
     "editor.tools-hyperlink-title": "Make Hyperlink",
+    "editor.tools-svg-selector": "Item list selector",
+
+    "svg.selector.property-title": "View item list",
 
     "tutorial.editor-keyboard-shortcuts": "Editor Keyboard Shortcuts",
 

client/dist/index.html

@@ -48,6 +48,6 @@
             </div>
         </div>
     </app-root>
-<script src="runtime-es2015.17457c14264390561f33.js" type="module"></script><script src="runtime-es5.17457c14264390561f33.js" nomodule defer></script><script src="polyfills-es5.2e5c038c55f275d820b1.js" nomodule defer></script><script src="polyfills-es2015.55a7749c656a82308d3e.js" type="module"></script><script src="scripts.6e06c03e26af8d1d6034.js" defer></script><script src="main-es2015.899c49b6c672c6fde817.js" type="module"></script><script src="main-es5.899c49b6c672c6fde817.js" nomodule defer></script></body>
+<script src="runtime-es2015.17457c14264390561f33.js" type="module"></script><script src="runtime-es5.17457c14264390561f33.js" nomodule defer></script><script src="polyfills-es5.2e5c038c55f275d820b1.js" nomodule defer></script><script src="polyfills-es2015.55a7749c656a82308d3e.js" type="module"></script><script src="scripts.6e06c03e26af8d1d6034.js" defer></script><script src="main-es2015.c7ddb8196d50666876ea.js" type="module"></script><script src="main-es5.c7ddb8196d50666876ea.js" nomodule defer></script></body>
 
 </html>

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuxa",
-  "version": "1.1.9-924",
+  "version": "1.1.9-925",
   "keywords": [],
   "author": "frangoteam <4frango@gmail.com>",
   "description": "Web-based Process Visualization (SCADA/HMI/Dashboard) software",

client/src/app/_models/hmi.ts

@@ -405,6 +405,7 @@ export class WindowLink {
 
 export class SelElement {
     type = '';
+    id: string;
     ele: any = null;
 }
 
@@ -498,4 +499,9 @@ export const DEVICE_READONLY = 'rodevice';
 export interface IDateRange {
     start;
     end;
+}
+
+export interface ISvgElement {
+    id: string;
+    name: string;
 }

client/src/app/app.module.ts

@@ -163,6 +163,7 @@ import { ReportItemAlarmsComponent } from './reports/report-editor/report-item-a
 import { ReportItemChartComponent } from './reports/report-editor/report-item-chart/report-item-chart.component';
 import { ScriptModeComponent } from './scripts/script-mode/script-mode.component';
 import { DeviceWebapiPropertyDialogComponent } from './device/device-map/device-webapi-property-dialog/device-webapi-property-dialog.component';
+import { SvgSelectorComponent } from './editor/svg-selector/svg-selector.component';
 
 export function createTranslateLoader(http: HttpClient) {
     return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -213,6 +214,7 @@ export function createTranslateLoader(http: HttpClient) {
         GaugeSemaphoreComponent,
         GaugePropertyComponent,
         DialogGaugePermission,
+        SvgSelectorComponent,
         ChartPropertyComponent,
         BagPropertyComponent,
         PipePropertyComponent,
@@ -364,6 +366,7 @@ export function createTranslateLoader(http: HttpClient) {
         DeviceTagDialog,
         GaugePropertyComponent,
         DialogGaugePermission,
+        SvgSelectorComponent,
         ChartPropertyComponent,
         NgxGaugeComponent,
         NgxNouisliderComponent,

client/src/app/editor/editor.component.css

@@ -1,3 +1,11 @@
+.editor-sidenav {
+    position: fixed;
+    margin-top: 36px;
+    height: calc(100% - 74px);
+    padding: 7px;
+    width: 350px;
+}
+
 #svg_editor_container {
     background: #aaa;
     height: 100%;
@@ -127,6 +135,14 @@
     height: 100%;
 }
 
+.svg-preview {
+    background-color: #3058af36;
+    height: 0px;
+    width: 0px;
+    z-index: 1;
+    position: absolute;
+}
+
 #rulers > div {
     background-color: var(--svgEditRulersBackground) !important;
     color: var(--svgEditRulersColor) !important;
@@ -265,6 +281,10 @@
     height: 24px;
 }
 
+.svg-element-selected {
+    display: inline-flex;
+}
+
 /* --------------- */
 /* left panel */
 /* --------------- */

client/src/app/editor/editor.component.html

@@ -2,7 +2,13 @@
     <mat-progress-bar mode="indeterminate" color="warn" style="position: absolute; top: 0px; left: 0px; right: 0px; z-index: 99999;">
     </mat-progress-bar>
 </div>
-<mat-drawer #sidePanel class="example-sidenav" mode="side" position="end" style="position:fixed;margin-top: 36px;height: calc(100% - 74px);padding: 7px; width:350px">
+<mat-drawer #svgSelectorPanel class="editor-sidenav" mode="side" position="end">
+    <button mat-icon-button (click)="svgSelectorPanel.toggle()" style="position: absolute; top: 3px; right: 3px;">
+        <mat-icon>close</mat-icon>
+    </button>
+    <app-svg-selector (onSelect)="onSvgElementSelected($event)" (onPreview)="onSvgElementPreview($event)" [elements]="svgElements" [selected]="svgElementSelected"></app-svg-selector>
+</mat-drawer>
+<mat-drawer #sidePanel class="editor-sidenav" mode="side" position="end">
     <button mat-icon-button (click)="sidePanel.toggle()" style="position: absolute; top: 3px; right: 3px;">
         <mat-icon>close</mat-icon>
     </button>
@@ -482,7 +488,7 @@
                             </div>
                         </div>
                     </mat-expansion-panel>
-                    <mat-expansion-panel id="tool_stroke" class="svg-workarea-fly-p" style="left: unset !important" (opened)="panelFillOpenState = true" (closed)="panelFillOpenState = false" hideToggle="true" expanded="true">
+                    <mat-expansion-panel id="tool_stroke" class="svg-workarea-fly-p" (opened)="panelFillOpenState = true" (closed)="panelFillOpenState = false" hideToggle="true" expanded="true">
                         <mat-expansion-panel-header class="svg-workarea-leftbar-h">
                             <mat-panel-title>
                                 <mat-icon aria-label="Select" *ngIf="panelFillOpenState">expand_less</mat-icon>
@@ -721,10 +727,14 @@
                                 <span class="ungroup"></span>
                             </button>
                         </div>
+                        <div class="svg-element-selected">
+                            <button mat-button matTooltip="{{'editor.tools-svg-selector' | translate}}" (click)="svgSelectorPanel.toggle()" class="main-btn">
+                                <mat-icon style="font-size: 28px;">list</mat-icon>
+                            </button>
+                        </div>
                     </div>
                     <!-- tools_top -->
                     <div id="cur_context_panel">
-
                     </div>
 
                     <!-- tool bottom -->
@@ -1072,4 +1082,5 @@
         </li>
     </ul>
     <!-- layers context menu END -->
-</div>
+    <div #svgpreview class="svg-preview"></div>
+</div>

client/src/app/editor/editor.component.ts

@@ -9,11 +9,9 @@ import { Subscription } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
 
 import { ProjectService, SaveMode } from '../_services/project.service';
-import { Hmi, View, GaugeSettings, SelElement, LayoutSettings, ViewType, CardWidget, CardWidgetType } from '../_models/hmi';
+import { Hmi, View, GaugeSettings, SelElement, LayoutSettings, ViewType, CardWidget, CardWidgetType, ISvgElement } from '../_models/hmi';
 import { WindowRef } from '../_helpers/windowref';
 import { GaugePropertyComponent, GaugeDialogType } from '../gauges/gauge-property/gauge-property.component';
-import { ChartPropertyComponent } from '../gauges/controls/html-chart/chart-property/chart-property.component';
-import { GraphPropertyComponent } from '../gauges/controls/html-graph/graph-property/graph-property.component';
 
 import { GaugesManager } from '../gauges/gauges.component';
 import { GaugeBaseComponent } from '../gauges/gauge-base/gauge-base.component'
@@ -37,29 +35,19 @@ import { HtmlSwitchPropertyComponent } from '../gauges/controls/html-switch/html
 import { GridsterItem } from 'angular-gridster2';
 import { CardConfigComponent } from './card-config/card-config.component';
 import { CardsViewComponent } from '../cards-view/cards-view.component';
+import { IElementPreview } from './svg-selector/svg-selector.component';
 
 declare var Gauge: any;
 
 declare var $: any;
-declare var svgEditor: any;
 declare var mypathseg: any;         ///< svg-editor component
-declare var initPathSeg: any;
 declare var mybrowser: any;
-declare var initBrowser: any;
 declare var mysvgutils: any;
-declare var initSvgutils: any;
 declare var myselect: any;
-declare var initSelect: any;
 declare var mydraw: any;
-declare var initDraw: any;
-declare var mylocal: any;
-declare var initLocale: any;
-declare var mycontextmenu: any;
 declare var initContextmenu: any;
 declare var mysvgcanvas: any;
-declare var initSvgCanvas: any;
 declare var mysvgeditor: any;
-declare var initSvgEditor: any;
 
 @Component({
     moduleId: module.id,
@@ -68,14 +56,15 @@ declare var initSvgEditor: any;
 })
 
 export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
-    // currentUser: User;
-    // users: User[] = [];
-    // @ViewChild('fillcolor') fillcolor: ElementRef;
     @ViewChild('gaugepanel', {static: false}) gaugePanelComponent: GaugeBaseComponent;
     @ViewChild('viewFileImportInput', {static: false}) viewFileImportInput: any;
     @ViewChild('cardsview', {static: false}) cardsview: CardsViewComponent;
     @ViewChild('sidePanel', {static: false}) sidePanel: MatDrawer;
-
+    @ViewChild('svgSelectorPanel', {static: false}) svgSelectorPanel: MatDrawer;
+    @ViewChild('svgpreview', {static: false}) svgPreview: ElementRef;
+
+    svgElementSelected: ISvgElement = null;
+    svgElements: ISvgElement[] = [];
     gaugeDialogType = GaugeDialogType;
     gaugeDialog = { type: null, data: null };
     reloadGaugeDialog: boolean;
@@ -207,7 +196,7 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
                 (selected) => {
                     this.isAnySelected = (selected);
                     this.onSelectedElement(selected);
-                    let ga: GaugeSettings = this.getGaugeSettings(selected);
+                    this.getGaugeSettings(selected);
                 },
                 (type, args) => {
                     this.onExtensionLoaded(args);
@@ -232,10 +221,12 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
                     setTimeout(() => {
                         this.setMode('select', false);
                     }, 700);
+                    this.checkSvgElementsMap(true);
                     // this.hmiService.addGauge(this.hmi, eleadded);
                 },
                 (eleremoved) => {
                     this.onRemoveElement(eleremoved);
+                    this.checkSvgElementsMap(true);
                 },
                 (eleresized) => {
                     if (eleresized && eleresized.id) {
@@ -273,6 +264,40 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
         this.setFillColor(this.colorStroke);
     }
 
+    /**
+     * Search SVG elements in View, fill into select box and select the current svg element selected
+     * @param loadSvgElement
+     */
+    private checkSvgElementsMap(loadSvgElement = false) {
+        if (loadSvgElement) {
+            this.svgElements = Array.from(document.querySelectorAll('g, text, line, rect, image, path, circle, ellipse'))
+                                    .filter((svg: any) => svg.attributes?.type?.value?.startsWith('svg-ext') || 
+                                                          (svg.id?.startsWith('svg_') && !svg.parentNode?.attributes?.type?.value?.startsWith('svg-ext')))
+                                    .map(ele => <ISvgElement>{id: ele.id, name: this.currentView.items[ele.id]?.name});
+        }
+        this.svgElementSelected = this.svgElements.find(se => se.id === this.selectedElement?.id);
+    }
+
+    /**
+     * Selected in select box will be selected in editor
+     */
+    onSvgElementSelected(value: ISvgElement) {
+        this.clearSelection();
+        this.winRef.nativeWindow.svgEditor.selectOnly([document.getElementById(value.id)], true);
+    }
+
+    onSvgElementPreview(value: IElementPreview) {//value: ISvgElement, preview: boolean) {
+        let elem = document.getElementById(value.element?.id);
+        let rect: DOMRect = elem.getBoundingClientRect();
+        if (elem && rect) {
+            this.svgPreview.nativeElement.style.width = `${rect.width}px`;
+            this.svgPreview.nativeElement.style.height = `${rect.height}px`;
+            this.svgPreview.nativeElement.style.top = `${rect.top}px`;
+            this.svgPreview.nativeElement.style.left = `${rect.left}px`;
+        }
+        this.svgPreview.nativeElement.style.display = (value.preview) ? 'flex' : 'none';
+    }
+
     /**
      * Load the hmi resource and bind it
      */
@@ -489,6 +514,7 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
                         this.checkGaugeAdded(ga);
                     }
                     this.winRef.nativeWindow.svgEditor.refreshCanvas();
+                    this.checkSvgElementsMap(true);
                 }, 500);
             } else if (this.cardsview) {
                 this.cardsview.view = view;
@@ -606,6 +632,7 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
                 this.checkGaugeInView(this.selectedElement);
             }
         }
+        this.checkSvgElementsMap(false)
         if (this.sidePanel.opened) {
             this.sidePanel.toggle();
         }

client/src/app/editor/svg-selector/svg-selector.component.html

@@ -0,0 +1,12 @@
+<div class="element-property">
+    <div class="element-property-title">
+        {{'svg.selector.property-title' | translate}}
+    </div>
+    <div class="svg-selector-list">
+        <div *ngFor="let svgElement of svgElements" class="svg-selector-item" [ngClass]="{'svg-selector-active': isSelected(svgElement)}"
+            (click)="onSelected(svgElement)" (mouseout)="onSvgElementPreview(svgElement, false)" (mouseover)="onSvgElementPreview(svgElement, true)">
+            <div class="name">{{ svgElement.name }}</div>
+            <div class="id">{{ svgElement.id }}</div>
+        </div>
+    </div>
+</div>

client/src/app/editor/svg-selector/svg-selector.component.scss

@@ -0,0 +1,37 @@
+.svg-selector-list {
+    position: absolute;
+    top: 35px;
+    bottom: 0px;
+    overflow: auto;
+    margin-top: 10px;
+    right: 0px;
+    left: 5px;
+}
+
+.svg-selector-item {
+    font-size: 12px;
+    line-height: 24px;
+    cursor: pointer;
+    padding-left: 5px;
+    display: block;
+    .name {
+        display: inline-block;
+        min-width: 170px;
+        font-size: 13px;
+    }
+
+    .id {
+        display: inline-block;
+        margin-left: 10px;
+        color:darkgray;
+        width: 150px;
+    }
+}
+
+.svg-selector-item:hover {
+    background-color: #9c9c9c36;
+}
+
+.svg-selector-active {
+    background-color: rgba(48,89,175,1);
+}

client/src/app/editor/svg-selector/svg-selector.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { SvgSelectorComponent } from './svg-selector.component';
+
+describe('SvgSelectorComponent', () => {
+  let component: SvgSelectorComponent;
+  let fixture: ComponentFixture<SvgSelectorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SvgSelectorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SvgSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});