Skip to content

Commit

Permalink
Add API to export graph, add boundaries & multiple enhancements
Browse files Browse the repository at this point in the history
  • Loading branch information
@jm-1997
jm-1997 committed May 18, 2022
1 parent 81d0302 commit b2472c1
Show file tree
Hide file tree
Showing 8 changed files with 294 additions and 133 deletions.
124 changes: 74 additions & 50 deletions examples/angular/src/app/who-graphs/head-circumference/head-circumference.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,109 +4,133 @@ 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>
<button (click)="getCoordinates()">Export as .JPG</button>
<button (click)="getCoordinates()">Export as .PNG</button>
<button (click)="exportAsJpeg()">Export as .JPG</button>
<button (click)="exportAsPng()">Export as .PNG</button>
<div #graphContainer style="overflow-x: scroll"></div>
<img #exportedGraph alt="Exported graph" />
`,
styleUrls: ['./head-circumference.component.css'],
})
export class HeadCircumferenceComponent implements AfterViewInit {
@ViewChild('graphContainer') graphContainer!: ElementRef<HTMLDivElement>;
@ViewChild('exportedGraph') exportedGraph!: ElementRef<HTMLImageElement>;

private _graphApi!: LineGraphDrawing;

private _initialized = false;
private _graph!: LineGraphDrawing;

ngAfterViewInit(): void {
this._renderGraph();
}

clearNodes() {
if (this._initialized) {
this._graphApi.getNodes()?.forEach((node) => {
node.remove();
this._graphApi.redraw();
});
}
this._graph.getNodes()?.forEach((node) => {
node.remove();
this._graph.redraw();
});
}

getCoordinates() {
const coordinates = this._graphApi.getCoordinates();
const coordinates = this._graph.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 },
{ x: 338, y: 280, order: 0 },
{ x: 665, y: 279, order: 1 },
{ x: 340, y: 492, order: 2 },
{ x: 488, y: 139, order: 3 },
{ x: 645, y: 492, order: 4 },
{ x: 327, y: 278, order: 5 },
];

this._graphApi.loadCoordinates(coordinates);
this._graph.loadCoordinates(coordinates);
}

// const tomato = {
// tomato1: '#fffcfc',
// tomato2: '#fff8f7',
// tomato3: '#fff0ee',
// tomato4: '#ffe6e2',
// tomato5: '#fdd8d3',
// tomato6: '#fac7be',
// tomato7: '#f3b0a2',
// tomato8: '#ea9280',
// tomato9: '#e54d2e',
// tomato10: '#db4324',
// tomato11: '#ca3214',
// tomato12: '#341711',
// }
async exportAsJpeg() {
const base64 = await this._graph.exportAs('image/jpeg', { scale: 1.2 });
this.exportedGraph.nativeElement.src = base64;
console.log(base64);
}

async exportAsPng() {
const base64 = await this._graph.exportAs('image/png');
this.exportedGraph.nativeElement.src = base64;
console.log(base64);
}

private _renderGraph() {
this._graphApi = new LineGraphDrawing({
this._graph = new LineGraphDrawing({
canDrawLines: true,
canRemoveNodes: true,
styles: {
line: {
color: '#ca3214',
width: 3,
width: 4,
},
node: {
width: 5,
width: 6,
color: '#00259e',
hoverColor: '#ca3214',
hoverSizeMultiplier: 2,
cursor: 'url("https://i.stack.imgur.com/bUGV0.png"), auto',
},
},
})
.mountScopedFrame({
image: {
src: 'https://media.cheggcdn.com/media/3bc/3bc5fc99-47c7-44a9-aadb-1f778be80537/phpCYM9Kd.png',
src: 'assets/images/girls-head-circumference-for-age.png',
alt: 'Head circumference-for-age GIRLS',
objectFit: 'fill',
},
frame: {
width: '962px',
heigth: '589px',
top: '115px',
left: '104px',
cursor: 'default',
container: {
boundaries: [
// top
{
width: '100%',
height: '116px',
inset: '0',
cursor: 'url("https://i.stack.imgur.com/bUGV0.png"), auto',
},
// right
{
width: '114px',
height: '100%',
inset: '0 0 0 auto',
cursor: 'url("https://i.stack.imgur.com/bUGV0.png"), auto',
},
// bottom
{
width: '100%',
height: '98px',
inset: 'auto auto 0 auto',
cursor: 'url("https://i.stack.imgur.com/bUGV0.png"), auto',
},
// left
{
width: '88px',
height: '100%',
inset: '0 auto 0 0',
cursor: 'url("https://i.stack.imgur.com/bUGV0.png"), auto',
},
],
styles: {
width: '1000px',
heigth: '800px',
},
},
style: {
width: '1200px',
heigth: '800px',
frame: {
styles: {
cursor: 'crosshair',
},
},
})
.startProcess();

const container = this._graphApi.getContainerElement();
this._initialized = true;

const container = this._graph.getContainerElement();
container && this.graphContainer.nativeElement.append(container);
}
}
Binary file added examples/angular/src/assets/images/girls-head-circumference-for-age.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
91 changes: 72 additions & 19 deletions packages/graph-drawing/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,50 @@ const graph = new LineGraphDrawing({
})
.mountScopedFrame({
image: {
src: 'some-image.jpg',
alt: 'lorem ipsum',
src: 'some-image.png',
alt: 'Some description',
objectFit: 'fill',
},
style: {
width: '600px',
heigth: '400px',
container: {
boundaries: [
// top
{
width: '100%',
height: '116px',
inset: '0',
cursor: 'url("https://i.stack.imgur.com/bUGV0.png"), auto',
},
// right
{
width: '114px',
height: '100%',
inset: '0 0 0 auto',
cursor: 'url("https://i.stack.imgur.com/bUGV0.png"), auto',
},
// bottom
{
width: '100%',
height: '98px',
inset: 'auto auto 0 auto',
cursor: 'url("https://i.stack.imgur.com/bUGV0.png"), auto',
},
// left
{
width: '88px',
height: '100%',
inset: '0 auto 0 0',
cursor: 'url("https://i.stack.imgur.com/bUGV0.png"), auto',
},
],
styles: {
width: '1000px',
heigth: '800px',
},
},
frame: {
styles: {
cursor: 'crosshair',
},
},
})
.startProcess();
Expand All @@ -54,20 +91,29 @@ const graph = new LineGraphDrawing({
src: string;
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
};
container?: {
boundaries?: Array<
Partial<{
width: string;
height: string;
inset: string;
backgroundColor?: string;
opacity?: number;
cursor?: Cursor;
}>
>;
styles?: Partial<{
width: string;
heigth: string;
}>;
};
frame?: {
styles?: {
backgroundColor?: string;
opacity?: number;
cursor?: Cursor;
};
};
}
```
Expand Down Expand Up @@ -102,6 +148,13 @@ graph.loadCoordinates([
graph.redraw();
```

### **Export graph**

```ts
graph.exportAs('image/jpeg');
graph.exportAs('image/png');
```

### **Enable lines drawing**

```ts
Expand Down
3 changes: 3 additions & 0 deletions packages/graph-drawing/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,5 +33,8 @@
"dev": "tsup --watch",
"build": "tsup",
"release": "pnpm publish --access public"
},
"dependencies": {
"html2canvas": "^1.4.1"
}
}
28 changes: 14 additions & 14 deletions packages/graph-drawing/src/graph-drawing/graph-drawing.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@ export type GraphDrawingConfig = {
canRemoveNodes?: boolean;

// Styles config
styles?: {
node?: {
color?: string;
hoverColor?: string;
hoverSizeMultiplier?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
width?: number;
transition?: string;
cursor?: Cursor;
};
line?: {
color?: string;
width?: number;
};
};
styles?: Partial<{
node: Partial<{
color: string;
hoverColor: string;
hoverSizeMultiplier: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
width: number;
transition: string;
cursor: Cursor;
}>;
line: Partial<{
color: string;
width: number;
}>;
}>;
};

export const DEFAULT_GRAPH_DRAWING_CONFIG: GraphDrawingConfig = {
Expand Down
25 changes: 24 additions & 1 deletion packages/graph-drawing/src/graph-drawing/graph-drawing.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import html2canvas, { Options as Html2CanvasOptions } from 'html2canvas';
import { Cursor } from '../types/cursor.type';
import { NodeCoordinate } from '../types/node-coordinate.type';
import { DEFAULT_GRAPH_DRAWING_CONFIG, GraphDrawingConfig } from './graph-drawing.config';
Expand All @@ -12,7 +13,7 @@ export abstract class GraphDrawing {
// Config attributes
private config: GraphDrawingConfig;

// Getters & Setters
// Accesors
protected set wrapperElement(element: HTMLDivElement) {
this.containerElement = element;
}
Expand Down Expand Up @@ -159,6 +160,28 @@ export abstract class GraphDrawing {
this.redraw();
}

/**
* Export frame as the specified mime type
* @param mimeType file media identifier
* @param options export options
* @returns file encoded in base64
*/
async exportAs(
mimeType: 'image/jpeg' | 'image/png',
options?: Partial<Html2CanvasOptions>,
): Promise<string> {
// Validates container
if (!this.containerElement) {
throw new Error(
`Error exporting frame as ${mimeType}: the container element couldn't be found.`,
);
}

// Generates canvas
const canvas = await html2canvas(this.containerElement, options);
return canvas.toDataURL(mimeType, 1);
}

/**
* Allow users to draw lines and connect nodes
*/
Expand Down
Loading

0 comments on commit b2472c1

Please sign in to comment.