implemented svg pan zoom

geoyogesh · Oct 5, 2020 · 88991d6 · 88991d6
1 parent a5dcd99
commit 88991d6
Show file tree

Hide file tree

Showing 61 changed files with 426 additions and 384 deletions.
diff --git a/angular.json b/angular.json
@@ -67,7 +67,8 @@
               "complex.js",
               "fraction.js",
               "decimal.js",
-              "typed-function"
+              "typed-function",
+              "svg-pan-zoom"
             ]
           },
           "configurations": {

diff --git a/development.md b/development.md
@@ -48,6 +48,8 @@ ng generate component capx/components/junctions/SinglePointInterchangeEastWestJu
 
 ng generate component capx/components/common/CriticalLaneVolumeSum --prefix=capx --module=Capx
 
+ng generate component capx/components/common/SvgViewer --prefix=capx --module=Capx
+
 
 
 ng generate component capx/components/junctions/conventional-junction/ConventionalDesign --prefix=capx --module=Capx

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,13 +22,14 @@
     "@angular/platform-browser-dynamic": "~10.0.0",
     "@angular/router": "~10.0.0",
     "@clr/angular": "4.0.1",
+    "@clr/icons": "4.0.1",
+    "@clr/ui": "4.0.1",
+    "@webcomponents/webcomponentsjs": "^2.0.0",
     "mathjs": "^7.2.0",
     "rxjs": "~6.5.5",
+    "svg-pan-zoom": "^3.6.1",
     "tslib": "^2.0.0",
-    "zone.js": "~0.10.3",
-    "@clr/ui": "4.0.1",
-    "@clr/icons": "4.0.1",
-    "@webcomponents/webcomponentsjs": "^2.0.0"
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1000.8",

diff --git a/projects/capx/src/app/capx/capx.module.ts b/projects/capx/src/app/capx/capx.module.ts
@@ -80,6 +80,7 @@ import { JunctionComponent } from '../capx/components/junctions/junction.compone
 import {PortalModule} from '@angular/cdk/portal';
 import { MedianUTurnIntersectionEastWestDesignComponent } from '../capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component';
 import { MedianUTurnIntersectionEastWestConfigurationComponent } from '../capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/configuration/median-uturn-intersection-east-west-configuration.component';
+import { SvgViewerComponent } from '../capx/components/common/svg-viewer/svg-viewer.component';
 
 @NgModule({
   declarations: [
@@ -156,7 +157,8 @@ import { MedianUTurnIntersectionEastWestConfigurationComponent } from '../capx/c
      TwoNorthSouthxTwoEastWestLaneRoundaboutJunctionConfigurationComponent,
      JunctionComponent,
      MedianUTurnIntersectionEastWestDesignComponent,
-     MedianUTurnIntersectionEastWestConfigurationComponent],
+     MedianUTurnIntersectionEastWestConfigurationComponent,
+     SvgViewerComponent],
   imports: [
     CommonModule,
     CapxRoutingModule,

diff --git a/projects/capx/src/app/capx/components/common/svg-viewer/svg-viewer.component.html b/projects/capx/src/app/capx/components/common/svg-viewer/svg-viewer.component.html
@@ -0,0 +1,4 @@
+<div class="container" #container>
+  <ng-content></ng-content>
+</div>
+
diff --git a/projects/capx/src/app/capx/components/common/svg-viewer/svg-viewer.component.scss b/projects/capx/src/app/capx/components/common/svg-viewer/svg-viewer.component.scss
@@ -0,0 +1,12 @@
+:host {
+  display: block;
+
+  .container {
+    width: calc(100vw - 18rem);
+    height: calc(100vh - 9rem);
+  }
+
+  svg {
+    width: 100%;height:100%
+  }
+}
diff --git a/projects/capx/src/app/capx/components/common/svg-viewer/svg-viewer.component.ts b/projects/capx/src/app/capx/components/common/svg-viewer/svg-viewer.component.ts
@@ -0,0 +1,37 @@
+import { AfterViewInit, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
+import * as svgPanZoom from 'svg-pan-zoom';
+
+@Component({
+  selector: 'capx-svg-viewer',
+  templateUrl: './svg-viewer.component.html',
+  styleUrls: ['./svg-viewer.component.scss']
+})
+export class SvgViewerComponent implements OnInit, AfterViewInit {
+
+  constructor() { }
+
+  @ViewChild('container') public scene: ElementRef;
+    public svgPanZoom: SvgPanZoom.Instance;
+
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit(): void {
+    this.svgPanZoom = svgPanZoom(this.scene.nativeElement.children[0], {
+      zoomEnabled: true,
+      controlIconsEnabled: true,
+      fit: true,
+      center: true
+    });
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event): void {
+    if (this.svgPanZoom) {
+      this.svgPanZoom.resize();
+      this.svgPanZoom.fit();
+      this.svgPanZoom.center();
+    }
+  }
+
+}
diff --git a/...s/junctions/intersections/conventional-junction/design/conventional-design.component.html b/...s/junctions/intersections/conventional-junction/design/conventional-design.component.html
@@ -0,0 +1,21 @@
+<capx-svg-viewer>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Layer_1" data-name="Layer 1">
+      <image width="1600" height="1280" transform="scale(0.49)" xlink:href="assets/junctions/conventional.jpeg"/>
+    </g>
+    <g id="drawings">
+      <circle cx="383.63" cy="321.5" r="12" style="fill: #fcee21"/>
+      <line x1="193.61" y1="152" x2="383.63" y2="321.5" style="fill: red;stroke: red;stroke-miterlimit: 10;stroke-width: 2px"/>
+    </g>
+    <g id="dynamic_layer">
+      <rect x="130.61" y="75" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctions.ConventionalIntersection).intersectionResult | async).zone5_center_clv)"/>
+      <text transform="translate(164.01 102.73) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctions.ConventionalIntersection).intersectionResult | async).zone5_center_clv}}</text>
+      <rect x="130.61" y="113.5" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
+      <rect x="130.61" y="113.5" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctions.ConventionalIntersection).intersectionResult | async).zone5_center_clv)"/>
+      <text transform="translate(143.87 139.36) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctions.ConventionalIntersection).intersectionResult | async).zone5_center_vc}}</text>
+      <text transform="translate(202.87 139.57) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
+      <text transform="translate(155.63 62.5)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 5</text>
+    </g>
+  </svg>
+
+</capx-svg-viewer>
diff --git a/...s/junctions/intersections/conventional-junction/design/conventional-design.component.scss b/...s/junctions/intersections/conventional-junction/design/conventional-design.component.scss
@@ -1,5 +1 @@
-:host {
-  display: block;
-  width: 60%;
-  margin: auto;
-}
+
diff --git a/...ns/intersections/conventional-junction/design/conventional-design.component.svg b/...ns/intersections/conventional-junction/design/conventional-design.component.svg
diff --git a/...nts/junctions/intersections/conventional-junction/design/conventional-design.component.ts b/...nts/junctions/intersections/conventional-junction/design/conventional-design.component.ts
@@ -6,7 +6,7 @@ import { Junctions } from './../../../../../services/models/junctions';
 
 @Component({
   selector: 'capx-conventional-design',
-  templateUrl: './conventional-design.component.svg',
+  templateUrl: './conventional-design.component.html',
   styleUrls: ['./conventional-design.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })

diff --git a/...-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.html b/...-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.html
@@ -0,0 +1,21 @@
+<capx-svg-viewer>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Layer_1" data-name="Layer 1">
+      <image width="1600" height="1280" transform="scale(0.44 0.5)" xlink:href="assets/junctions/conventional-shared-right-turn-left-turn.jpeg"/>
+    </g>
+    <g id="drawings">
+      <circle cx="345" cy="321.5" r="12" style="fill: #fcee21"/>
+      <line x1="154.98" y1="152" x2="345" y2="321.5" style="fill: red;stroke: red;stroke-miterlimit: 10;stroke-width: 2px"/>
+    </g>
+    <g id="dynamic_layer">
+      <rect x="91.98" y="75" width="126" height="38.5" style="fill: #faaf40;stroke: #231f20;stroke-miterlimit: 10"/>
+      <text transform="translate(125.39 102.73) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">662</text>
+      <rect x="91.98" y="113.5" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
+      <rect x="91.98" y="113.5" width="63" height="38.5" style="fill: #00adee;stroke: #231f20;stroke-miterlimit: 10"/>
+      <text transform="translate(105.24 139.36) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">0.41</text>
+      <text transform="translate(164.24 139.57) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
+      <text transform="translate(117.01 62.5)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 5</text>
+    </g>
+  </svg>
+
+</capx-svg-viewer>
diff --git a/...-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.scss b/...-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.scss
@@ -1,5 +1 @@
-:host {
-  display: block;
-  width: 40%;
-  margin: auto;
-}
+
diff --git a/...n-junction/design/conventional-shared-right-turn-left-turn-design.component.svg b/...n-junction/design/conventional-shared-right-turn-left-turn-design.component.svg
diff --git a/...rn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.ts b/...rn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'capx-conventional-shared-right-turn-left-turn-design',
-  templateUrl: './conventional-shared-right-turn-left-turn-design.component.svg',
+  templateUrl: './conventional-shared-right-turn-left-turn-design.component.html',
   styleUrls: ['./conventional-shared-right-turn-left-turn-design.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })

diff --git a/...-intersection-junction/design/full-displaced-left-turn-intersection-design.component.html b/...-intersection-junction/design/full-displaced-left-turn-intersection-design.component.html
@@ -0,0 +1,67 @@
+<capx-svg-viewer>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Layer_1" data-name="Layer 1">
+      <image width="2232" height="2251" transform="scale(0.29 0.29)" xlink:href="assets/junctions/full-displaced-left-turn-intersection.jpeg"/>
+    </g>
+    <g id="drawings">
+      <circle cx="96.3" cy="312.69" r="12" style="fill: #fcee21"/>
+      <line x1="72.04" y1="261.19" x2="97.3" y2="312.69" style="fill: red;stroke: red;stroke-miterlimit: 10;stroke-width: 2px"/>
+      <circle cx="579.87" cy="347.04" r="12" style="fill: #fcee21"/>
+      <line x1="521.04" y1="437.28" x2="579.87" y2="347.04" style="fill: red;stroke: red;stroke-miterlimit: 10;stroke-width: 2px"/>
+      <circle cx="329.53" cy="327.86" r="12" style="fill: #fcee21"/>
+      <line x1="401.04" y1="269.28" x2="329.53" y2="327.86" style="fill: red;stroke: red;stroke-miterlimit: 10;stroke-width: 2px"/>
+      <circle cx="309.58" cy="578.97" r="12" style="fill: #fcee21"/>
+      <line x1="376.04" y1="611.78" x2="310.58" y2="578.97" style="fill: red;stroke: red;stroke-miterlimit: 10;stroke-width: 2px"/>
+      <circle cx="345.93" cy="83.68" r="12" style="fill: #fcee21"/>
+      <line x1="403.04" y1="86.78" x2="345.93" y2="83.68" style="fill: red;stroke: red;stroke-miterlimit: 10;stroke-width: 2px"/>
+    </g>
+    <g id="dynamic_layer">
+      <g id="zone3">
+        <rect x="521.04" y="437.28" width="126" height="38.5" style="fill: #faaf40;stroke: #231f20;stroke-miterlimit: 10"/>
+        <text transform="translate(554.44 465.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">662</text>
+        <rect x="521.04" y="475.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
+        <rect x="521.04" y="475.78" width="63" height="38.5" style="fill: #00adee;stroke: #231f20;stroke-miterlimit: 10"/>
+        <text transform="translate(534.3 501.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">0.41</text>
+        <text transform="translate(593.3 501.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
+        <text transform="translate(546.06 424.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 3</text>
+      </g>
+      <g id="zone4">
+        <rect x="9.04" y="184.19" width="126" height="38.5" style="fill: #faaf40;stroke: #231f20;stroke-miterlimit: 10"/>
+        <text transform="translate(42.44 211.92) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">662</text>
+        <rect x="9.04" y="222.69" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
+        <rect x="9.04" y="222.69" width="63" height="38.5" style="fill: #00adee;stroke: #231f20;stroke-miterlimit: 10"/>
+        <text transform="translate(22.3 248.55) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">0.41</text>
+        <text transform="translate(81.3 248.76) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
+        <text transform="translate(34.06 171.69)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 4</text>
+      </g>
+      <g id="zone5">
+        <rect x="401.04" y="192.28" width="126" height="38.5" style="fill: #faaf40;stroke: #231f20;stroke-miterlimit: 10"/>
+        <text transform="translate(434.44 220.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">662</text>
+        <rect x="401.04" y="230.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
+        <rect x="401.04" y="230.78" width="63" height="38.5" style="fill: #00adee;stroke: #231f20;stroke-miterlimit: 10"/>
+        <text transform="translate(414.3 256.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">0.41</text>
+        <text transform="translate(473.3 256.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
+        <text transform="translate(426.06 179.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 5</text>
+      </g>
+      <g id="zone2">
+        <rect x="376.04" y="573.28" width="126" height="38.5" style="fill: #faaf40;stroke: #231f20;stroke-miterlimit: 10"/>
+        <text transform="translate(409.44 601.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">662</text>
+        <rect x="376.04" y="611.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
+        <rect x="376.04" y="611.78" width="63" height="38.5" style="fill: #00adee;stroke: #231f20;stroke-miterlimit: 10"/>
+        <text transform="translate(389.3 637.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">0.41</text>
+        <text transform="translate(448.3 637.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
+        <text transform="translate(401.06 560.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 2</text>
+      </g>
+      <g id="zone1">
+        <rect x="403.04" y="48.28" width="126" height="38.5" style="fill: #faaf40;stroke: #231f20;stroke-miterlimit: 10"/>
+        <text transform="translate(436.44 76.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">662</text>
+        <rect x="403.04" y="86.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
+        <rect x="403.04" y="86.78" width="63" height="38.5" style="fill: #00adee;stroke: #231f20;stroke-miterlimit: 10"/>
+        <text transform="translate(416.3 112.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">0.41</text>
+        <text transform="translate(475.3 112.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
+        <text transform="translate(428.06 35.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 1</text>
+      </g>
+    </g>
+  </svg>
+</capx-svg-viewer>
+
diff --git a/...-intersection-junction/design/full-displaced-left-turn-intersection-design.component.scss b/...-intersection-junction/design/full-displaced-left-turn-intersection-design.component.scss
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  width: calc(100vw - 960px);
-  margin: auto;
-}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -48,6 +48,8 @@ ng generate component capx/components/junctions/SinglePointInterchangeEastWestJu

		ng generate component capx/components/common/CriticalLaneVolumeSum --prefix=capx --module=Capx

		ng generate component capx/components/common/SvgViewer --prefix=capx --module=Capx



		ng generate component capx/components/junctions/conventional-junction/ConventionalDesign --prefix=capx --module=Capx
Expand Down