Merge branch 'master' of https://github.com/IoTSharp/IoTSharp

IoTSharp/ClientApp/src/app/routes/flow/diagram/diagram.component.html

 <div #diagramcontainer style="height: 800px" nz-row>
-  <div nz-col #ref class="diagram-container" nzLg="18" nzMd="18" nzSm="18" style="padding: 0.1rem"></div>
+  <div nz-col #ref class="diagram-container" nzLg="18" nzMd="18" nzSm="18" style="padding: 0.1rem">
+  
+  </div>
   <div nz-col nzSm="6" style="padding: 0.1rem">
     <nz-card nzTitle="对象属性">
       <form nz-form se-container="1" labelWidth="100" gutter="32">
@@ -101,28 +103,43 @@
         <se label="执行器参数(JSON)" error="请选择执行器" *ngIf="form.nodeProcessClassVisable">
        
           <nz-code-editor
+          [nzToolkit]="toolkit"
+          [class.full-screen]="fullScreen"
           (ngModelChange)="ngModelChange($event)"
           style="width: 100%; height: 500px; padding-top: 1rem"
           class="editor"
           [(ngModel)]="form.nodeProcessParams"
           [ngModelOptions]="{ standalone: true }"
-          [nzEditorOption]="{ theme: 'vs-dark',language: 'json' }"
+          [nzEditorOption]="{ theme: 'vs',language: 'json' }"
         ></nz-code-editor>
    
         </se>
 
         <se label="脚本" error="类型" *ngIf="form.flowscriptVisable">
           <nz-code-editor
+          [nzToolkit]="toolkit"
+          [class.full-screen]="fullScreen"
             (ngModelChange)="ngModelChange($event)"
             style="width: 100%; height: 500px; padding-top: 1rem"
             class="editor"
             [(ngModel)]="form.flowscript"
             [ngModelOptions]="{ standalone: true }"
-            [nzEditorOption]="{ theme: 'vs-dark',language: 'json' }"
+            [nzEditorOption]="{ theme: 'vs',language: 'json' }"
           ></nz-code-editor>
         </se>
       </form>
     </nz-card>
+
+    <ng-template #toolkit>
+      <i
+        nz-icon
+        [class.active]="fullScreen"
+        nz-tooltip
+        nzTooltipTitle="Toggle Fullscreen"
+        [nzType]="fullScreen ? 'fullscreen-exit' : 'fullscreen'"
+        (click)="toggleFullScreen()"
+      ></i>
+    </ng-template>
     <ng-template #extraTemplate>
       <a>More</a>
     </ng-template>

IoTSharp/ClientApp/src/app/routes/flow/diagram/diagram.component.less

+@import "node_modules/ng-zorro-antd/resizable/style/entry.less";
+
 .diagram-container {
   background-color: rgb(181, 245, 185);
 }
@@ -11,4 +13,21 @@
 }
 .bpmn-icon-screw-wrench{
   display: none;
-}
\ No newline at end of file
+}
+
+
+.editor {
+  height: 200px;
+}
+
+.full-screen {
+  position: fixed;
+  z-index: 999;
+ height: 100%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
+

IoTSharp/ClientApp/src/app/routes/flow/diagram/diagram.component.ts

@@ -11,6 +11,7 @@ import {
   EventEmitter,
   ChangeDetectorRef,
   Renderer2,
+  Inject,
 } from '@angular/core';
 import { _HttpClient } from '@delon/theme'; //test
 import { delay, mergeMap } from 'rxjs/operators';
@@ -22,6 +23,8 @@ import { appmessage } from '../../common/AppMessage';
 import { NzConfigService } from 'ng-zorro-antd/core/config';
 import { NzCodeEditorComponent } from 'ng-zorro-antd/code-editor';
 import { ObjectExt } from '@antv/x6';
+import { DOCUMENT } from '@angular/common';
+import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
 
 @Component({
   selector: 'app-diagram',
@@ -38,11 +41,11 @@ import { ObjectExt } from '@antv/x6';
 // 'element.mouseup'
 // 来自 https://github.com/bpmn-io/bpmn-js-examples/tree/master/interaction
 export class DiagramComponent implements AfterContentInit, OnChanges, OnDestroy {
-  nzEditorOption: { theme: 'vs-dark'; language: 'json' };
-  paramnzEditorOption: { theme: 'vs-dark'; language: 'json' };
+  nzEditorOption: { theme: 'vs'; language: 'json' };
+  paramnzEditorOption: { theme: 'vs'; language: 'json' };
   @ViewChild(NzCodeEditorComponent, { static: false }) editorComponent?: NzCodeEditorComponent;
   isCollapsed = false;
- 
+  @ViewChild(NzTooltipDirective, { static: false }) tooltip?: NzTooltipDirective;
   executors = [];
 
   EMPTY_BPMN_DIAGRAM = `
@@ -69,7 +72,9 @@ export class DiagramComponent implements AfterContentInit, OnChanges, OnDestroy
 
   @Input() url: string;
   @Input() ruleId: number;
-
+  loading = true;
+  fullScreen = false;
+  private document: Document;
   form: FormBpmnObject = {
     id: '',
     flowid: '',
@@ -89,6 +94,13 @@ export class DiagramComponent implements AfterContentInit, OnChanges, OnDestroy
   activity: Activity;
   selectedValue: any;
 
+
+  toggleFullScreen(): void {
+    this.fullScreen = !this.fullScreen;
+    this.renderer.setStyle(this.document.body, 'overflow-y', this.fullScreen ? 'hidden' : null);
+    this.editorComponent?.layout();
+    this.tooltip?.hide();
+  }
   flowscripttypeChange($event) {
     if (this.form.flowscripttype === 'executor') {
       this.form.nodeProcessClassVisable = true;
@@ -160,7 +172,9 @@ export class DiagramComponent implements AfterContentInit, OnChanges, OnDestroy
     private render: Renderer2,
     private nzConfigService: NzConfigService,
     private element: ElementRef,
+    @Inject(DOCUMENT) document: any, private renderer: Renderer2
   ) {
+    this.document = document;
     this.activity = new Activity();
     this.activity.tasks = [];
     this.activity.gateWays = [];

IoTSharp/ClientApp/src/app/shared/shared-zorro.module.ts

@@ -35,6 +35,7 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
 import { NzStepsModule } from 'ng-zorro-antd/steps';
 import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor';
 import { NzTreeViewModule } from 'ng-zorro-antd/tree-view';
+import { NzResizableModule } from 'ng-zorro-antd/resizable';
 export const SHARED_ZORRO_MODULES = [
   NzButtonModule,
   NzMessageModule,
@@ -72,5 +73,6 @@ export const SHARED_ZORRO_MODULES = [
   NzLayoutModule,
   NzStepsModule,
   NzCodeEditorModule,
-  NzTreeViewModule
+  NzTreeViewModule,
+  NzResizableModule
 ];

IoTSharp/ClientApp/src/styles/index.less

 /* You can add global styles to this file, and also import other style files */
 @import 'node_modules/ng-zorro-antd/code-editor/style/entry.less';
-
+@import "node_modules/ng-zorro-antd/resizable/style/entry.less";
 /* 测试，测完该放哪里放哪里 */
 .flowviewhighlight .djs-visual > :nth-child(1) {
   border-color: rgb(223, 126, 16) !important;