🚧 added zoom to frame and lower z index for connectors

italanta · Dec 20, 2022 · c8868cc · c8868cc
1 parent 308f11a
commit c8868cc
Show file tree

Hide file tree

Showing 14 changed files with 173 additions and 101 deletions.
diff --git a/apps/conv-learning-manager/src/styles.scss b/apps/conv-learning-manager/src/styles.scss
@@ -17,11 +17,15 @@
 
 //endpoint class when connected
 .block_endpoint.jtk-endpoint-connected {
-  z-index: 2;
+  // z-index: 2;
 }
 
 //connector
 .jsplumb_instance svg path {
   stroke: var(--connector-color);
   stroke-width: 5px;
 }
+
+.frame-connector {
+  z-index: -1;
+}
diff --git a/libs/elements/theming/common.theme.scss b/libs/elements/theming/common.theme.scss
@@ -222,7 +222,7 @@ a:focus {outline:0;}
 
  ::-webkit-scrollbar
  {
- width: 5px;
+ width: 10px;
  height: 5px;
  background-color: #F5F5F5;
  }
@@ -231,7 +231,7 @@ a:focus {outline:0;}
  ::-webkit-scrollbar-thumb
  {
    background-color: #e2e2e2;
-   border: 5px solid #C1C1C1;
+   border: 10px solid #C1C1C1;
    border-radius: 3px;
 
  }

diff --git a/...tures/convs-mgr/stories/blocks/library/main/src/lib/components/block/block.component.scss b/...tures/convs-mgr/stories/blocks/library/main/src/lib/components/block/block.component.scss
@@ -1,56 +1,58 @@
 .block {
-    position: relative;
-    cursor: move;
+	position: relative;
+	cursor: move;
 }
 
 .avatar-img {
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
+	border-radius: 50%;
+	width: 30px;
+	height: 30px;
 }
 
 .block-title-container {
-    align-items: center;
+	align-items: center;
 }
 
 .outer:hover {
-    cursor:move;
+	cursor: move;
 }
 
 .icon-color {
-    color: var(--convs-mgr-color-primary-purple)
+	color: var(--convs-mgr-color-primary-purple)
 }
 
 .block-title {
-    font-weight: 600;
-    font-size: small;
-    margin: 0 0 0 .4em;
-    color: var(--convs-mgr-color-text-black);
+	font-weight: 600;
+	font-size: small;
+	margin: 0 0 0 .4em;
+	color: var(--convs-mgr-color-text-black);
 }
 
 .outer {
-    padding: 10px;
-    padding-bottom: 0;
+	padding: 10px;
+	padding-bottom: 0;
 }
 
 .block-card {
-    border-radius: 10px;
-    padding: 0%;
-    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
+	border-radius: 10px;
+	padding: 0%;
+	box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
 }
 
 .icons {
-    cursor: pointer;
+	cursor: pointer;
 }
 
 .fa-clone {
-    padding-right: 10px;
+	padding-right: 10px;
 }
 
-.fa-clone, .fa-trash-alt {
-    color: var(--convs-mgr-color-medium-shade);
+.fa-clone,
+.fa-trash-alt {
+	color: var(--convs-mgr-color-medium-shade);
 }
 
-.fa-clone:hover, .fa-trash-alt:hover {
-    color: var(--convs-mgr-color-primary-purple);
+.fa-clone:hover,
+.fa-trash-alt:hover {
+	color: var(--convs-mgr-color-primary-purple);
 }
diff --git a/...features/convs-mgr/stories/blocks/library/main/src/lib/providers/message-block.jsplumb.ts b/...features/convs-mgr/stories/blocks/library/main/src/lib/providers/message-block.jsplumb.ts
@@ -20,11 +20,15 @@ export function _MessageBlockDecoratePlumb(block: TextMessageBlock, comp: Compon
   jsPlumb.addEndpoint(comp.location.nativeElement, {
     // Whether the anchor is target (Other Block -> This Block)
     target: true,
-    cssClass:"block_endpoint",
-
-    endpoint: 'Dot',
+    endpoint: 'Rectangle',
     anchor: "Left"
+  });
 
+  jsPlumb.addEndpoint(comp.location.nativeElement, {
+    // Whether the anchor is target (Other Block -> This Block)
+    source: true,
+    endpoint: 'Dot',
+    anchor: "Right"
   });
 
   return comp;

diff --git a/.../library/text-message-block/src/lib/components/message-block/message-block.component.html b/.../library/text-message-block/src/lib/components/message-block/message-block.component.html
@@ -1,4 +1,4 @@
-<mat-card [id]="id" *ngIf="textMessageForm">
+<mat-card class="input" [id]="id" *ngIf="textMessageForm">
     <mat-card-content>
         <form [formGroup]="textMessageForm" fxLayout="column" fxLayoutALign="start center">
 

diff --git a/...ks/library/text-message-block/src/lib/components/message-block/message-block.component.ts b/...ks/library/text-message-block/src/lib/components/message-block/message-block.component.ts
@@ -33,16 +33,5 @@ export class MessageBlockComponent implements OnInit
               private _logger: Logger) 
   { }
 
-  ngOnInit(): void {
-    if(this.jsPlumb) {
-      this._decorateElement();
-    }
-  }
-
-  private _decorateElement(){
-    const element = document.getElementById(this.id) as Element;
-    if(this.jsPlumb) {
-      _JsPlumbComponentDecorator(element, this.jsPlumb);
-    }
-  }
+  ngOnInit(): void {}
 }
diff --git a/.../convs-mgr/stories/editor/src/lib/components/blocks-library/blocks-library.component.html b/.../convs-mgr/stories/editor/src/lib/components/blocks-library/blocks-library.component.html
@@ -8,17 +8,16 @@ <h4>{{'PAGE-CONTENT.COMPONENTS.TITLE'| transloco }}</h4>
 		</mat-form-field>
 	</div>
 
-
-	<div fxLayout="row wrap" fxLayoutGap="10px" *ngIf="blockTemplate$ | async as blocks " fxFlex>
+	<div fxLayout="row wrap" fxLayoutGap="10px" fxLayoutAlign="space-between start" *ngIf="blockTemplate$ | async as blocks " fxFlex>
 		<div *ngFor="let block of blocks" (click)=" addBlock(block.type)" fxLayout="column" fxLayoutAlign="start center"
-			fxFlex="28" style="height: 100px">
+			fxFlex="25" style="height: 100px">
 			<div fxLayout="column" fxLayoutAlign="center center" class="blocks-main" fxFlex>
 				<i class="{{ block.blockIcon }}" id="icons"></i>
 			</div>
+
 			<p class="block-messages">
 				{{ block.message }}
 			</p>
-
 		</div>
 	</div>
 </div>
diff --git a/...ures/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.html b/...ures/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.html
@@ -1,3 +1,5 @@
-<div fxFlexFill #editor id="editor-frame" style="position: relative;">
-  <ng-template #viewport></ng-template>
+<div class="frame-bg" fxLayout="column" fxLayoutALign="start"  fxFlexFill>
+  <div #editor id="editor-frame" style="position: relative;" fxFlex="95">
+    <ng-template #viewport></ng-template>
+  </div>
 </div>
diff --git a/...ures/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.scss b/...ures/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.scss
@@ -1,30 +1,26 @@
-#editor-frame {
-  border-width: 2px;
-  border-style: solid;
-  border-color: lightgrey;
+#editor-frame .block {
+  position: absolute;
+}
+
+.block {
+  text-align: center;
+  cursor: move;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+}
 
+app-message-block {
+  position: relative;
+}
+
+.frame-bg {
+  background-color: white;
   background: papayawhip;
   background-image: url(^/assets/bg/pattern-bg.png);
   background-size: cover;
   background-repeat: no-repeat;
   position: relative;
-}
-
-#editor-frame .block {
-  position: absolute;
-}
-  .block {
-    text-align: center;
-    cursor: move;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    position: absolute;
-  }
-
-  app-message-block {
-    position: relative;
-  }
-
+  overflow: scroll;
+}
diff --git a/libs/features/convs-mgr/stories/editor/src/lib/convl-story-editor.module.ts b/libs/features/convs-mgr/stories/editor/src/lib/convl-story-editor.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { FlexLayoutModule, MaterialBricksModule, MaterialDesignModule, MaterialFormBricksModule } from '@iote/bricks-angular';
 import { MultiLangModule } from '@ngfi/multi-lang';
@@ -28,7 +28,7 @@ import { ConvlStoryEditorRouterModule } from './convs-story-editor.router.module
   imports: [
     CommonModule, MultiLangModule,
     MaterialDesignModule, FlexLayoutModule, MaterialBricksModule,
-    MaterialFormBricksModule, ReactiveFormsModule,
+    MaterialFormBricksModule, FormsModule, ReactiveFormsModule,
     ConvlPageModule, ConvsMgrAnchorBlockModule,
     BlocksLibraryModule, StoryEditorStateModule,
 

diff --git a/libs/features/convs-mgr/stories/editor/src/lib/model/story-editor-frame.model.ts b/libs/features/convs-mgr/stories/editor/src/lib/model/story-editor-frame.model.ts
@@ -1,7 +1,7 @@
 import { ViewContainerRef } from '@angular/core';
 import { FormArray, FormBuilder } from '@angular/forms';
 
-import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
+import { BrowserJsPlumbInstance, newInstance } from '@jsplumb/browser-ui';
 
 import { Story } from '@app/model/convs-mgr/stories/main';
 import { StoryBlock, StoryBlockConnection, StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
@@ -68,6 +68,10 @@ export class StoryEditorFrame {
     this.drawConnections();
   }
 
+  get jsPlumbInstance(): BrowserJsPlumbInstance {
+    return this._jsPlumb;
+  }
+
   /** 
    * Snapshot of the story blocks-state as edited and loaded in the frame. 
    */
@@ -118,7 +122,7 @@ export class StoryEditorFrame {
     // and target elements for connection drawing later
     // sources are mostly inputs
     // targets (blocks) are wrapped inside a mat-card 
-    let domSourceInputs = Array.from(document.querySelectorAll('input'));
+    let domSourceInputs = Array.from(document.querySelectorAll("input, .input"));
     let domBlockCards = Array.from(document.querySelectorAll('mat-card'));
 
 
@@ -135,6 +139,12 @@ export class StoryEditorFrame {
         target: targetElement as Element,
         anchors: ["Right", "Left"],
         endpoints: ["Dot", "Rectangle"],
+        connector: {
+          type: 'Flowchart',
+          options: {
+            cssClass: 'frame-connector'
+          }
+        }
       });
     }
 

diff --git a/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.html b/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.html
@@ -1,32 +1,47 @@
 <convl-page [breadcrumbs]="breadcrumbs" [title]="pageName" [nomarg]="true">
 
-  <!-- Convl page subbar -->
-  <div subbar fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="space-between center">
-    <button [disabled]="!stateSaved" (click)="save()" mat-flat-button class="subbar-btn">
-      <span *ngIf="stateSaved; else saving"> Save </span>
-      <ng-template #saving>
-        <span fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
-          <span> Saving story</span>
-          <mat-spinner diameter="20"></mat-spinner>
-        </span>
-      </ng-template>
-    </button>
-
-    <button [disabled]="!storyHasBeenSaved" (click)="addToChannel()" mat-flat-button class="add-channel-btn">
-      <span> Add to channel </span>
-    </button>
-  </div>
-
   <!-- Main body page -->
   <div fxLayout="row" fxFlexFill>
-
-    <div fxFlex="15">
+    <div fxFlex="20">
       <convl-blocks-library *ngIf="frame" [frame]="frame">
       </convl-blocks-library>
     </div>
 
-    <convl-story-editor-frame (frameLoaded)="onFrameViewLoaded($event)" fxFlex="90" fxFlexFill>
-    </convl-story-editor-frame>
+    <div fxLayout="column" fxLayoutAlign="start" fxFlex>
+      <!-- Convl page subbar -->
+      <div class="sub-bar" subbar fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="space-between center">
+        <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
+          <button class="zoom-btn" [disabled]="zoomLevel.value <= 25" mat-mini-fab (click)="decreaseFrameZoom()">
+            <mat-icon>zoom_out</mat-icon>
+          </button>
+
+          <input style="margin-right: 0px;" [formControl]="zoomLevel" min="25" max="100" (change)="zoomChanged($event)" type="number">
+
+          <button class="zoom-btn" [disabled]="zoomLevel.value >= 100" mat-mini-fab (click)="increaseFrameZoom()">
+            <mat-icon>zoom_in</mat-icon>
+          </button>
+        </div>
+
+        <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
+          <button [disabled]="!stateSaved" (click)="save()" mat-flat-button class="subbar-btn">
+            <span *ngIf="stateSaved; else saving"> Save </span>
+            <ng-template #saving>
+              <span fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
+                <span> Saving story</span>
+                <mat-spinner diameter="20"></mat-spinner>
+              </span>
+            </ng-template>
+          </button>
+
+          <button [disabled]="!storyHasBeenSaved" (click)="addToChannel()" mat-flat-button class="add-channel-btn">
+            <span> Add to channel </span>
+          </button>
+        </div>
+      </div>
+
+      <convl-story-editor-frame (frameLoaded)="onFrameViewLoaded($event)" fxFlex="90">
+      </convl-story-editor-frame>
+    </div>
 
   </div>
 </convl-page>
diff --git a/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.scss b/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.scss
@@ -3,7 +3,10 @@ app-blocks-library {
 }
 
 .sub-bar {
-  padding: 10px 20px;
+  padding: 10px 5px;
+  background-color: white;
+  border-bottom: solid #eee 1px;
+  // box-shadow: 0px 4px 8px slategrey;
 }
 
 .subbar-btn {
@@ -18,4 +21,13 @@ app-blocks-library {
   color: white;
   font-weight: 600;
   min-width: 100px;
+}
+
+.zoom-btn {
+  background-color: white;
+  color: black;
+}
+
+::ng-deep .mat-mini-fab .mat-button-wrapper {
+  bottom: 0px;
 }