@obliczeniowo/elementary
Version:
Library made in Angular version 20
270 lines (264 loc) • 19.8 kB
JavaScript
import * as i0 from '@angular/core';
import { Input, ViewChild, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DrawingSvgInterface, Rect } from '@obliczeniowo/elementary/drawing';
import { ElementaryMath } from '@obliczeniowo/elementary/math';
import { Point2D, Point3D } from '@obliczeniowo/elementary/classes';
import { DrawingPdfInterface } from '@obliczeniowo/elementary/drawing-pdf';
import * as i1 from '@obliczeniowo/elementary/buttons';
import { ButtonsModule } from '@obliczeniowo/elementary/buttons';
/* eslint-disable @typescript-eslint/non-nullable-type-assertion-style */
class Diagram3D {
svg;
xAxisLength = 100;
yAxisLength = 100;
zAxisLength = 100;
xAxisAngle;
yAxisAngle;
zAxisAngle;
xScale;
yScale;
zScale;
correctionAngle;
offsetLongitude = 0;
offsetLatitude = 0;
pLatitude;
get latitude() {
return this.pLatitude + this.offsetLatitude;
}
set latitude(value) {
this.pLatitude = value;
}
pLongitude;
get longitude() {
return this.pLongitude + this.offsetLongitude;
}
set longitude(value) {
this.pLongitude = value;
}
anchor = new Point2D();
dx = 20;
dy = 20;
pzValues = [[]];
get zValues() {
return this.pzValues;
}
set zValues(value) {
if (!value.length || !value[0].length) {
throw new Error('table must have more then 0 elements for x & y');
}
this.dx = 400 / value.length;
this.dy = 400 / value[0].length;
this.pzValues = value;
}
constructor(svg) {
this.svg = svg;
this.setDiagramAngles(ElementaryMath.degreesToRadians(300), ElementaryMath.degreesToRadians(60));
}
diagramPosToDrawingArea(p3d) {
return new Point2D(p3d.x * Math.cos(this.xAxisAngle + this.correctionAngle) * this.xScale +
p3d.y * Math.cos(this.yAxisAngle + this.correctionAngle) * this.yScale +
p3d.z * Math.cos(this.zAxisAngle + this.correctionAngle) * this.zScale, p3d.x * Math.sin(this.xAxisAngle + this.correctionAngle) * this.xScale +
p3d.y * Math.sin(this.yAxisAngle + this.correctionAngle) * this.yScale +
p3d.z * Math.sin(this.zAxisAngle + this.correctionAngle) * this.zScale).add(this.anchor);
}
pointsAngle(x1, y1, x2, y2) {
if (x1 === x2 && y1 === y2) {
return 0;
}
const length = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
if (length === 0) {
return 0;
}
if (y2 < y1) {
return Math.acos((x1 - x2) / length);
}
else {
return Math.acos((x1 - x2) / -length) - Math.PI;
}
}
setDiagramAngles(latitude, longitude) {
this.latitude = latitude;
this.longitude = longitude;
this.setAxisAngles();
}
setLatitude(latitude) {
this.latitude = latitude;
this.setAxisAngles();
}
setLongitude(longitude) {
this.longitude = longitude;
this.setAxisAngles();
}
setAxisAngles() {
const length = 100;
const pX = new Point2D();
const pY = new Point2D();
const pZ = new Point2D();
const cosLong = Math.cos(this.longitude);
const sinLong = Math.sin(this.longitude);
const cosLat = Math.cos(this.latitude);
const sinLat = Math.sin(this.latitude);
const sinLongAnd90 = Math.sin(Math.PI / 2 + this.longitude);
const cosLongAnd90 = Math.cos(Math.PI / 2 + this.longitude);
const sinLatAnd90 = Math.sin(this.latitude + Math.PI / 2);
const cosLatAnd90 = Math.cos(this.latitude + Math.PI / 2);
pY.x = length * (cosLat * cosLong * cosLong + sinLat * cosLongAnd90);
pY.y = length * (cosLat * sinLong * cosLong + sinLat * sinLongAnd90);
pX.x = length * (cosLatAnd90 * cosLong * cosLong + sinLatAnd90 * cosLongAnd90);
pX.y = length * (cosLatAnd90 * sinLong * cosLong + sinLatAnd90 * sinLongAnd90);
const dx = length * Math.cos(Math.PI / 2 - this.longitude) * cosLong;
const dy = length * Math.cos(Math.PI / 2 - this.longitude) * sinLong;
pZ.x = -dx;
pZ.y = -dy;
this.xAxisAngle = this.pointsAngle(pX.x, pX.y, 0, 0);
this.yAxisAngle = this.pointsAngle(pY.x, pY.y, 0, 0);
this.zAxisAngle = this.pointsAngle(pZ.x, pZ.y, 0, 0);
this.xScale = length ? pX.length() / length : 0;
this.yScale = length ? pY.length() / length : 0;
this.zScale = length ? pZ.length() / length : 0;
if (Math.abs(this.longitude) >= Math.PI) {
this.correctionAngle = Math.PI * 0.5 - this.zAxisAngle;
}
else {
this.correctionAngle = Math.PI * 1.5 - this.zAxisAngle;
}
}
drawAxis(dc, offset = new Point3D()) {
dc.drawLine(this.diagramPosToDrawingArea(offset), this.diagramPosToDrawingArea(offset.add(new Point3D(this.xAxisLength))), 1, '#ff0000');
dc.drawLine(this.diagramPosToDrawingArea(offset), this.diagramPosToDrawingArea(offset.add(new Point3D(0, this.yAxisLength))), 1, '#00ff00');
dc.drawLine(this.diagramPosToDrawingArea(offset), this.diagramPosToDrawingArea(offset.add(new Point3D(0, 0, this.zAxisLength))), 1, '#0000ff');
}
drawNet(dc, offset = new Point3D()) {
const stroke = 0.5;
for (let x = 0; x < this.zValues.length - 1; x++) {
for (let y = 0; y < this.zValues[x].length - 1; y++) {
const points = [
this.diagramPosToDrawingArea(new Point3D(x * this.dx, y * this.dy, this.zValues[x][y]).add(offset)),
this.diagramPosToDrawingArea(new Point3D((x + 1) * this.dx, y * this.dy, this.zValues[x + 1][y]).add(offset)),
this.diagramPosToDrawingArea(new Point3D(x * this.dx, (y + 1) * this.dy, this.zValues[x][y + 1]).add(offset)),
this.diagramPosToDrawingArea(new Point3D((x + 1) * this.dx, (y + 1) * this.dy, this.zValues[x + 1][y + 1]).add(offset))
];
dc.drawLine(points[0], points[1], stroke, '#ff0000');
dc.drawLine(points[0], points[2], stroke, '#00ff00');
dc.drawLine(points[3], points[2], stroke, '#ff0000');
dc.drawLine(points[1], points[2], stroke, '#0000ff');
dc.drawLine(points[1], points[3], stroke, '#00ff00');
}
}
}
draw(dc) {
dc.clear();
const box = this.svg.getAttribute('viewBox').split(' ').slice(2).map(v => parseFloat(v));
this.anchor.x = box[0] / 2;
this.anchor.y = box[1] / 2;
const offset = new Point3D(-this.zValues.length * this.dx / 2, -this.zValues[0].length * this.dy / 2);
this.drawAxis(dc, offset);
this.drawNet(dc, offset);
}
mouse(x, y, dc) {
this.pLatitude -= 0.01 * x;
this.pLongitude -= 0.01 * y;
this.setAxisAngles();
this.draw(dc);
}
}
class Diagram3DComponent {
renderer;
width = 800;
height = 600;
diagram3d;
dc;
mousePos = new Point2D();
diagram;
pzValues = [[]];
set zValues(zValues) {
this.pzValues = zValues;
if (this.diagram3d) {
this.diagram3d.zValues = zValues;
this.diagram3d.draw(this.dc);
}
}
set latitude(latitude) {
if (this.diagram3d) {
this.diagram3d.setLatitude(latitude);
this.diagram3d.draw(this.dc);
}
}
set longitude(longitude) {
if (this.diagram3d) {
this.diagram3d.setLongitude(longitude);
this.diagram3d.draw(this.dc);
}
}
constructor(renderer) {
this.renderer = renderer;
}
ngAfterViewInit() {
if (this.diagram) {
this.diagram3d = new Diagram3D(this.diagram.nativeElement);
this.dc = new DrawingSvgInterface(this.diagram.nativeElement, this.renderer);
this.diagram3d.zValues = this.pzValues;
this.diagram3d.draw(this.dc);
}
}
mouseMove(event) {
if (this.diagram) {
const rect = this.diagram.nativeElement.getBoundingClientRect();
const x = (event.clientX - rect.left) / this.diagram.nativeElement.clientWidth * this.width; // x position within the element.
const y = (event.clientY - rect.top) / this.diagram.nativeElement.clientHeight * this.height;
if (event.buttons === 1 && this.diagram3d) {
this.diagram3d.mouse(x - this.mousePos.x, y - this.mousePos.y, this.dc);
}
this.mousePos.x = x;
this.mousePos.y = y;
}
}
pdf() {
const dc = new DrawingPdfInterface(new Rect(new Point2D(0, 0), new Point2D(800, 600), 20, 20));
this.diagram3d.draw(dc);
dc.save('Diagram 3D');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Diagram3DComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: Diagram3DComponent, isStandalone: false, selector: "obl-diagram3-d", inputs: { zValues: "zValues", latitude: "latitude", longitude: "longitude" }, viewQueries: [{ propertyName: "diagram", first: true, predicate: ["diagram"], descendants: true }], ngImport: i0, template: "<div class=\"svgContainer\">\n <svg\n #diagram\n class=\"diagram-3d\"\n [attr.viewBox]=\"'0 0 ' + width + ' ' + height\"\n (mousemove)=\"mouseMove($event)\"\n ></svg>\n <button oblButton class=\"pdf-button\" (click)=\"pdf()\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M7.9393 16.4004H8.58466C8.76358 16.4004 8.90202 16.3375 9 16.2115C9.09798 16.0856 9.14697 15.9025 9.14697 15.6621C9.14697 15.4125 9.09691 15.2145 8.99681 15.068C8.8967 14.9192 8.76251 14.8436 8.59425 14.8413H7.9393V16.4004Z\"\n fill=\"black\"\n />\n <path\n d=\"M11.6645 14.8413V18.1621H11.9457C12.2588 18.1621 12.4792 18.0739 12.607 17.8977C12.7348 17.7191 12.8019 17.4123 12.8083 16.9773V16.1085C12.8083 15.6415 12.7476 15.3164 12.6262 15.1332C12.5048 14.9478 12.2982 14.8505 12.0064 14.8413H11.6645Z\"\n fill=\"black\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M19.937 8.68L19.9276 8.65196C19.9204 8.62974 19.9132 8.60787 19.904 8.586C19.855 8.48 19.794 8.379 19.708 8.293L13.708 2.293C13.622 2.207 13.521 2.146 13.415 2.097C13.3943 2.08736 13.3727 2.08056 13.3508 2.07367C13.3409 2.07056 13.331 2.06742 13.321 2.064C13.237 2.036 13.151 2.018 13.062 2.013C13.0519 2.01208 13.0424 2.00925 13.033 2.00647C13.0221 2.0032 13.0113 2 13 2H6C4.897 2 4 2.897 4 4V20C4 21.103 4.897 22 6 22H18C19.103 22 20 21.103 20 20V9C20 8.98867 19.9968 8.97792 19.9935 8.96697C19.9907 8.95762 19.9879 8.94813 19.987 8.938C19.982 8.85 19.965 8.764 19.937 8.68ZM13 4V9H18L13 4ZM7.9393 17.2418V19H7V14H8.58466C9.04473 14 9.41108 14.1534 9.68371 14.4602C9.95847 14.7669 10.0958 15.1653 10.0958 15.6552C10.0958 16.1451 9.9606 16.5321 9.6901 16.8159C9.4196 17.0998 9.04473 17.2418 8.5655 17.2418H7.9393ZM10.7252 19V14H11.9553C12.4984 14 12.9308 14.1854 13.2524 14.5563C13.5761 14.9272 13.7412 15.4354 13.7476 16.081V16.8915C13.7476 17.5485 13.5857 18.0648 13.262 18.4402C12.9404 18.8134 12.4963 19 11.9297 19H10.7252ZM15.3642 16.9602H16.8243V16.1223H15.3642V14.8413H17V14H14.4249V19H15.3642V16.9602Z\"\n fill=\"black\"\n />\n </svg>\n </button>\n</div>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:host .svgContainer{overflow:auto;max-width:100%;position:relative}:host .svgContainer .pdf-button{position:absolute;right:20px;top:20px;display:none}:host .svgContainer:hover .pdf-button{display:block}:host .svgContainer .diagram-3d{background-color:var(--diagram-3d-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.ButtonDirective, selector: "oblButton, [oblButton]", inputs: ["oblButton", "icon", "blockWhenLoading", "loading", "toggle", "selected", "link", "target"], exportAs: ["oblButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Diagram3DComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-diagram3-d', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"svgContainer\">\n <svg\n #diagram\n class=\"diagram-3d\"\n [attr.viewBox]=\"'0 0 ' + width + ' ' + height\"\n (mousemove)=\"mouseMove($event)\"\n ></svg>\n <button oblButton class=\"pdf-button\" (click)=\"pdf()\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M7.9393 16.4004H8.58466C8.76358 16.4004 8.90202 16.3375 9 16.2115C9.09798 16.0856 9.14697 15.9025 9.14697 15.6621C9.14697 15.4125 9.09691 15.2145 8.99681 15.068C8.8967 14.9192 8.76251 14.8436 8.59425 14.8413H7.9393V16.4004Z\"\n fill=\"black\"\n />\n <path\n d=\"M11.6645 14.8413V18.1621H11.9457C12.2588 18.1621 12.4792 18.0739 12.607 17.8977C12.7348 17.7191 12.8019 17.4123 12.8083 16.9773V16.1085C12.8083 15.6415 12.7476 15.3164 12.6262 15.1332C12.5048 14.9478 12.2982 14.8505 12.0064 14.8413H11.6645Z\"\n fill=\"black\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M19.937 8.68L19.9276 8.65196C19.9204 8.62974 19.9132 8.60787 19.904 8.586C19.855 8.48 19.794 8.379 19.708 8.293L13.708 2.293C13.622 2.207 13.521 2.146 13.415 2.097C13.3943 2.08736 13.3727 2.08056 13.3508 2.07367C13.3409 2.07056 13.331 2.06742 13.321 2.064C13.237 2.036 13.151 2.018 13.062 2.013C13.0519 2.01208 13.0424 2.00925 13.033 2.00647C13.0221 2.0032 13.0113 2 13 2H6C4.897 2 4 2.897 4 4V20C4 21.103 4.897 22 6 22H18C19.103 22 20 21.103 20 20V9C20 8.98867 19.9968 8.97792 19.9935 8.96697C19.9907 8.95762 19.9879 8.94813 19.987 8.938C19.982 8.85 19.965 8.764 19.937 8.68ZM13 4V9H18L13 4ZM7.9393 17.2418V19H7V14H8.58466C9.04473 14 9.41108 14.1534 9.68371 14.4602C9.95847 14.7669 10.0958 15.1653 10.0958 15.6552C10.0958 16.1451 9.9606 16.5321 9.6901 16.8159C9.4196 17.0998 9.04473 17.2418 8.5655 17.2418H7.9393ZM10.7252 19V14H11.9553C12.4984 14 12.9308 14.1854 13.2524 14.5563C13.5761 14.9272 13.7412 15.4354 13.7476 16.081V16.8915C13.7476 17.5485 13.5857 18.0648 13.262 18.4402C12.9404 18.8134 12.4963 19 11.9297 19H10.7252ZM15.3642 16.9602H16.8243V16.1223H15.3642V14.8413H17V14H14.4249V19H15.3642V16.9602Z\"\n fill=\"black\"\n />\n </svg>\n </button>\n</div>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:host .svgContainer{overflow:auto;max-width:100%;position:relative}:host .svgContainer .pdf-button{position:absolute;right:20px;top:20px;display:none}:host .svgContainer:hover .pdf-button{display:block}:host .svgContainer .diagram-3d{background-color:var(--diagram-3d-background-color)}\n"] }]
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { diagram: [{
type: ViewChild,
args: ['diagram']
}], zValues: [{
type: Input
}], latitude: [{
type: Input
}], longitude: [{
type: Input
}] } });
class Diagram3DModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Diagram3DModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: Diagram3DModule, declarations: [Diagram3DComponent], imports: [CommonModule,
ButtonsModule], exports: [Diagram3DComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Diagram3DModule, imports: [CommonModule,
ButtonsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Diagram3DModule, decorators: [{
type: NgModule,
args: [{
declarations: [
Diagram3DComponent
],
imports: [
CommonModule,
ButtonsModule
],
exports: [
Diagram3DComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Diagram3D, Diagram3DComponent, Diagram3DModule };
//# sourceMappingURL=obliczeniowo-elementary-diagram3-d.mjs.map