diff --git a/angular.json b/angular.json
index fd32527..1cedebc 100644
--- 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
index f5c867f..06281de 100644
--- 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
index c38f45c..f6fb561 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
{
- "name": "capx",
+ "name": "junction-capacity-analyzer",
"version": "0.0.0",
"lockfileVersion": 1,
"requires": true,
@@ -11854,6 +11854,11 @@
"has-flag": "^4.0.0"
}
},
+ "svg-pan-zoom": {
+ "version": "3.6.1",
+ "resolved": "https://registry.npmjs.org/svg-pan-zoom/-/svg-pan-zoom-3.6.1.tgz",
+ "integrity": "sha512-JaKkGHHfGvRrcMPdJWkssLBeWqM+Isg/a09H7kgNNajT1cX5AztDTNs+C8UzpCxjCTRrG34WbquwaovZbmSk9g=="
+ },
"svgo": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
diff --git a/package.json b/package.json
index 22dbe3d..0d1dab4 100644
--- 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
index 8259c67..1ea5af3 100644
--- 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
new file mode 100644
index 0000000..f3f6409
--- /dev/null
+++ b/projects/capx/src/app/capx/components/common/svg-viewer/svg-viewer.component.html
@@ -0,0 +1,4 @@
+
+
+
+
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
new file mode 100644
index 0000000..7e51ac5
--- /dev/null
+++ 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
new file mode 100644
index 0000000..f547e09
--- /dev/null
+++ 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/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.html
new file mode 100644
index 0000000..c3f5175
--- /dev/null
+++ b/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.html
@@ -0,0 +1,21 @@
+
+
+
+
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.scss b/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.scss
index 678feb6..8b13789 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.scss
+++ b/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.scss
@@ -1,5 +1 @@
-:host {
- display: block;
- width: 60%;
- margin: auto;
-}
+
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.svg b/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.svg
deleted file mode 100644
index bb95f74..0000000
--- a/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.ts b/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.ts
index eeb70e4..390cbea 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.ts
+++ b/projects/capx/src/app/capx/components/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/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.html
new file mode 100644
index 0000000..006dcc5
--- /dev/null
+++ b/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.html
@@ -0,0 +1,21 @@
+
+
+
+
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.scss b/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.scss
index e2ae5f8..8b13789 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.scss
+++ b/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-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/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.svg b/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.svg
deleted file mode 100644
index 6477935..0000000
--- a/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.ts b/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.ts
index 8336e01..9b3f022 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.ts
+++ b/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-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/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.html
new file mode 100644
index 0000000..d91660d
--- /dev/null
+++ b/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.html
@@ -0,0 +1,67 @@
+
+
+
+
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.scss b/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.scss
index b96cf3a..e69de29 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.scss
+++ b/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.scss
@@ -1,5 +0,0 @@
-:host {
- display: block;
- width: calc(100vw - 960px);
- margin: auto;
-}
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.svg b/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.svg
deleted file mode 100644
index e637d0f..0000000
--- a/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.svg
+++ /dev/null
@@ -1,64 +0,0 @@
-
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.ts b/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.ts
index dc70445..aeebdd2 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.ts
+++ b/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
@Component({
selector: 'capx-full-displaced-left-turn-intersection-design',
- templateUrl: './full-displaced-left-turn-intersection-design.component.svg',
+ templateUrl: './full-displaced-left-turn-intersection-design.component.html',
styleUrls: ['./full-displaced-left-turn-intersection-design.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.html
new file mode 100644
index 0000000..b7038e0
--- /dev/null
+++ b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.html
@@ -0,0 +1,45 @@
+
+
+
+
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.scss b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.scss
index e074b5f..e69de29 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.scss
+++ b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.scss
@@ -1,5 +0,0 @@
-:host {
- display: block;
- width: calc(100vw - 600px);
- margin: auto;
-}
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.svg b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.svg
deleted file mode 100644
index bba90d9..0000000
--- a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.svg
+++ /dev/null
@@ -1,42 +0,0 @@
-
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.ts b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.ts
index e43620a..c424c5a 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.ts
+++ b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
@Component({
selector: 'capx-median-uturn-intersection-east-west-design',
- templateUrl: './median-uturn-intersection-east-west-design.component.svg',
+ templateUrl: './median-uturn-intersection-east-west-design.component.html',
styleUrls: ['./median-uturn-intersection-east-west-design.component.scss']
})
export class MedianUTurnIntersectionEastWestDesignComponent implements OnInit {
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.html
new file mode 100644
index 0000000..ce5d9ed
--- /dev/null
+++ b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.html
@@ -0,0 +1,45 @@
+
+
+
+
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.scss b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.scss
index 8f6f9a6..e69de29 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.scss
+++ b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.scss
@@ -1,5 +0,0 @@
-:host {
- display: block;
- width: calc(100vw - 1283px);
- margin: auto;
-}
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.svg b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.svg
deleted file mode 100644
index 58450da..0000000
--- a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.svg
+++ /dev/null
@@ -1,42 +0,0 @@
-
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.ts b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.ts
index 1004b27..4f69c57 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.ts
+++ b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
@Component({
selector: 'capx-median-uturn-intersection-north-south-design',
- templateUrl: './median-uturn-intersection-north-south-design.component.svg',
+ templateUrl: './median-uturn-intersection-north-south-design.component.html',
styleUrls: ['./median-uturn-intersection-north-south-design.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/partial-displaced-left-turn-intersection-east-west-junction/design/partial-displaced-left-turn-intersection-east-west-design.component.svg b/projects/capx/src/app/capx/components/junctions/intersections/partial-displaced-left-turn-intersection-east-west-junction/design/partial-displaced-left-turn-intersection-east-west-design.component.html
similarity index 96%
rename from projects/capx/src/app/capx/components/junctions/intersections/partial-displaced-left-turn-intersection-east-west-junction/design/partial-displaced-left-turn-intersection-east-west-design.component.svg
rename to projects/capx/src/app/capx/components/junctions/intersections/partial-displaced-left-turn-intersection-east-west-junction/design/partial-displaced-left-turn-intersection-east-west-design.component.html
index 759eb6b..1634617 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/partial-displaced-left-turn-intersection-east-west-junction/design/partial-displaced-left-turn-intersection-east-west-design.component.svg
+++ b/projects/capx/src/app/capx/components/junctions/intersections/partial-displaced-left-turn-intersection-east-west-junction/design/partial-displaced-left-turn-intersection-east-west-design.component.html
@@ -1,4 +1,5 @@
-