Merge branch 'release/0.4.0'

examples/angular/package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser-dynamic": "~13.3.1",
     "@angular/router": "~13.3.1",
     "@ekisa-cdk/forms": "workspace:*",
+    "@ekisa-cdk/graph-drawing": "workspace:*",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
@@ -29,4 +30,4 @@
     "@types/node": "^12.11.1",
     "typescript": "~4.4.3"
   }
-}
+}

examples/angular/src/app/app-routing.module.ts

@@ -3,6 +3,10 @@ import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
   { path: 'forms', loadChildren: async () => (await import('./forms/forms.module')).FormsModule },
+  {
+    path: 'who-graphs',
+    loadChildren: async () => (await import('./who-graphs/who-graphs.module')).WhoGraphsModule,
+  },
 ];
 
 @NgModule({

examples/angular/src/app/app.component.ts

@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
     <!--The content below is only a placeholder and can be replaced.-->
     <nav>
       <div class="container">
-        <a [routerLink]="['forms']">Graphs</a>
+        <a [routerLink]="['who-graphs']">Graphs</a>
         <a [routerLink]="['forms']">Forms</a>
       </div>
     </nav>

examples/angular/src/app/who-graphs/head-circumference/head-circumference.component.ts

@@ -0,0 +1,81 @@
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+import { LineGraphDrawing } from '@ekisa-cdk/graph-drawing';
+
+@Component({
+  selector: 'app-head-circumference',
+  template: `
+    <div #graphContainer></div>
+
+    <button (click)="clearNodes()">Clear nodes</button>
+    <button (click)="loadCoordinates()">Load coordinates</button>
+    <button (click)="getCoordinates()">Get coordinates</button>
+  `,
+  styleUrls: ['./head-circumference.component.css'],
+})
+export class HeadCircumferenceComponent implements AfterViewInit {
+  @ViewChild('graphContainer') graphContainer!: ElementRef<HTMLDivElement>;
+
+  private _graphApi!: LineGraphDrawing;
+
+  private _initialized = false;
+
+  ngAfterViewInit(): void {
+    this._renderGraph();
+  }
+
+  clearNodes() {
+    if (this._initialized) {
+      this._graphApi.getNodes()?.forEach((node) => {
+        node.remove();
+        this._graphApi.redraw();
+      });
+    }
+  }
+
+  getCoordinates() {
+    const coordinates = this._graphApi.getCoordinates();
+    console.log(coordinates);
+    alert('Check the console');
+  }
+
+  loadCoordinates() {
+    const coordinates = [
+      { x: 172, y: 366, order: 2 },
+      { x: 291, y: 31, order: 3 },
+      { x: 426, y: 364, order: 4 },
+      { x: 99, y: 156, order: 5 },
+    ];
+
+    this._graphApi.loadCoordinates(coordinates);
+  }
+
+  private _renderGraph() {
+    this._graphApi = new LineGraphDrawing({
+      canDrawLines: false,
+      canRemoveNodes: true,
+    })
+      .mountScopedFrame({
+        image: {
+          src: 'https://media.cheggcdn.com/media/3bc/3bc5fc99-47c7-44a9-aadb-1f778be80537/phpCYM9Kd.png',
+          alt: 'Head circumference for age chart',
+          objectFit: 'fill',
+        },
+        svg: {
+          width: '962px',
+          heigth: '589px',
+          top: '115px',
+          left: '104px',
+        },
+        style: {
+          width: '1200px',
+          heigth: '800px',
+        },
+      })
+      .startProcess();
+
+    const container = this._graphApi.getContainerElement();
+    this._initialized = true;
+
+    container && this.graphContainer.nativeElement.append(container);
+  }
+}

examples/angular/src/app/who-graphs/who-graphs-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HeadCircumferenceComponent } from './head-circumference/head-circumference.component';
+import { WhoGraphsComponent } from './who-graphs.component';
+
+const routes: Routes = [
+  { path: '', component: WhoGraphsComponent },
+  { path: 'head-circumference', component: HeadCircumferenceComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class WhoGraphsRoutingModule {}

examples/angular/src/app/who-graphs/who-graphs.component.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: ` <a [routerLink]="['head-circumference']">Head circumference</a> `,
+})
+export class WhoGraphsComponent {}

examples/angular/src/app/who-graphs/who-graphs.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { HeadCircumferenceComponent } from './head-circumference/head-circumference.component';
+import { WhoGraphsRoutingModule } from './who-graphs-routing.module';
+import { WhoGraphsComponent } from './who-graphs.component';
+
+@NgModule({
+  declarations: [WhoGraphsComponent, HeadCircumferenceComponent],
+  imports: [CommonModule, WhoGraphsRoutingModule],
+})
+export class WhoGraphsModule {}

package.json

@@ -10,10 +10,10 @@
   "scripts": {
     "prepare": "husky install",
     "dev": "npm run dev --workspace",
+    "dev:examples:angular": "npm run start --workspace examples/angular",
     "build": "npm run build --workspace",
     "preview": "npm run preview --workspace",
     "release": "npm run release --workspace",
-    "dev:angular": "npm run start --workspace examples/angular",
     "test": "vitest",
     "test:run": "vitest run",
     "lint": "eslint . --ext .ts --fix",
@@ -29,7 +29,6 @@
     "@types/node": "^17.0.21",
     "@typescript-eslint/eslint-plugin": "^5.14.0",
     "@typescript-eslint/parser": "^5.14.0",
-    "bumpp": "^7.1.1",
     "eslint": "^8.10.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
@@ -38,6 +37,7 @@
     "lint-staged": "^12.3.5",
     "prettier": "^2.5.1",
     "rimraf": "^3.0.2",
+    "tsup": "^5.12.4",
     "typescript": "^4.6.3",
     "unbuild": "^0.7.2",
     "vitest": "^0.8.3"

packages/forms/package.json

@@ -33,6 +33,6 @@
   "scripts": {
     "dev": "unbuild --stub",
     "build": "rimraf dist && unbuild",
-    "release": "npm publish --access public"
+    "release": "pnpm publish --access public"
   }
 }

packages/graph-drawing/README.md

@@ -34,7 +34,7 @@ const graph = new LineGraphDrawing({
 })
   .mountScopedFrame({
     image: {
-      src: 'https://d20khd7ddkh5ls.cloudfront.net/point_2.jpg',
+      src: 'some-image.jpg',
       alt: 'lorem ipsum',
       objectFit: 'fill',
     },
@@ -55,6 +55,16 @@ const graph = new LineGraphDrawing({
     alt?: string;
     objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
   },
+  svg?: {
+    backgroundColor?: string;
+    opacity?: number;
+    width?: string;
+    heigth?: string;
+    top?: string;
+    left?: string;
+    bottom?: string;
+    right?: string;
+  },
   style?: {
     width?: string;
     heigth?: string
@@ -95,13 +105,13 @@ graph.redraw();
 ### **Enable lines drawing**
 
 ```ts
-graph.enableLinesDrawing();
+graph.enableDrawingLines();
 ```
 
 ### **Disable lines drawing**
 
 ```ts
-graph.disableLinesDrawing();
+graph.disableDrawingLines();
 ```
 
 ### **Enable nodes removal**

packages/graph-drawing/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@ekisa-cdk/graph-drawing",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "📈 Dynamically draw graphs on SVG elements",
   "license": "MIT",
-  "types": "dist/src/lib/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/graph-drawing.umd.js",
-  "module": "./dist/graph-drawing.es.js",
+  "main": "dist/index.mjs",
   "exports": {
+    "./package.json": "./package.json",
     ".": {
-      "import": "./dist/graph-drawing.es.js",
-      "require": "./dist/graph-drawing.umd.js"
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
     }
   },
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/Ekisa-Team/cdk/tree/main/packages/graph-drawing"
@@ -30,11 +30,8 @@
     "Drawing"
   ],
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "devDependencies": {
-    "vite": "^2.8.0"
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "release": "pnpm publish --access public"
   }
 }

packages/graph-drawing/src/lib/graph-drawing/graph-drawing-behavior.ts → packages/graph-drawing/src/graph-drawing/graph-drawing-behavior.ts

@@ -1,4 +1,4 @@
-import { NodeCoordinate } from '../shared/node-coordinate.type';
+import { NodeCoordinate } from '../types/node-coordinate.type';
 import { GraphDrawingConfig } from './graph-drawing.config';
 
 export abstract class GraphDrawingBehavior {
@@ -30,12 +30,12 @@ export abstract class GraphDrawingBehavior {
   /**
    * Allow users to draw lines and connect nodes
    */
-  abstract enableLinesDrawing(): void;
+  abstract enableDrawingLines(): void;
 
   /**
    * Prevent users from drawing lines and connecting nodes
    */
-  abstract disableLinesDrawing(): void;
+  abstract disableDrawingLines(): void;
 
   /**
    * Allow users to remove nodes

packages/graph-drawing/src/lib/graph-drawing/graph-drawing.config.ts → packages/graph-drawing/src/graph-drawing/graph-drawing.config.ts

@@ -1,4 +1,4 @@
-import { Cursor } from '../shared/cursor.type';
+import { Cursor } from '../types/cursor.type';
 
 export type GraphDrawingConfig = {
   // Behavior config

packages/graph-drawing/src/lib/graph-drawing/graph-drawing.test.ts → packages/graph-drawing/src/graph-drawing/graph-drawing.test.ts

@@ -64,13 +64,13 @@ describe('GraphDrawing', () => {
 
   it('should enable lines drawing capability', () => {
     const graph = new MockGraphDrawing().mountScopedFrame();
-    graph.enableLinesDrawing();
+    graph.enableDrawingLines();
     expect(graph.getCurrentConfig().canDrawLines).toBeTruthy();
   });
 
   it('should disable lines drawing capability', () => {
     const graph = new MockGraphDrawing().mountScopedFrame();
-    graph.disableLinesDrawing();
+    graph.disableDrawingLines();
     expect(graph.getCurrentConfig().canDrawLines).toBeFalsy();
   });
 

packages/graph-drawing/src/lib/graph-drawing/graph-drawing.ts → packages/graph-drawing/src/graph-drawing/graph-drawing.ts

@@ -1,5 +1,5 @@
-import { Cursor } from '../shared/cursor.type';
-import { NodeCoordinate } from '../shared/node-coordinate.type';
+import { Cursor } from '../types/cursor.type';
+import { NodeCoordinate } from '../types/node-coordinate.type';
 import { GraphDrawingBehavior } from './graph-drawing-behavior';
 import { DEFAULT_GRAPH_DRAWING_CONFIG, GraphDrawingConfig } from './graph-drawing.config';
 
@@ -86,6 +86,9 @@ export abstract class GraphDrawing extends GraphDrawingBehavior {
   }) {
     if (!this.containerElement) throw new Error('The scoped frame is not properly configured');
 
+    const config = this.getCurrentConfig();
+    if (!config.canDrawLines) return;
+
     const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
     line.setAttribute('x1', args.x1);
     line.setAttribute('y1', args.y1);
@@ -149,11 +152,11 @@ export abstract class GraphDrawing extends GraphDrawingBehavior {
     }));
   }
 
-  enableLinesDrawing(): void {
+  enableDrawingLines(): void {
     this.config.canDrawLines = true;
   }
 
-  disableLinesDrawing(): void {
+  disableDrawingLines(): void {
     this.config.canDrawLines = false;
   }