From 4e9a5c1825d2fbc849b22b46e4505deb3cdfcfbd Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Tue, 25 Oct 2022 14:22:17 +0200
Subject: [PATCH] Add triangle as hotspot shape for hotspot images
---
docs/release-notes-editor.txt | 2 +-
.../input-elements/hotspot-image.component.ts | 68 ++++++++++++++++++-
projects/common/models/elements/element.ts | 2 +-
projects/common/pipes/math-atan.pipe.spec.ts | 8 +++
projects/common/pipes/math-atan.pipe.ts | 10 +++
.../common/pipes/math-degrees.pipe.spec.ts | 8 +++
projects/common/pipes/math-degrees.pipe.ts | 10 +++
projects/common/shared.module.ts | 6 +-
.../dialogs/hotspot-edit-dialog.component.ts | 1 +
projects/editor/src/assets/i18n/de.json | 1 +
10 files changed, 110 insertions(+), 6 deletions(-)
create mode 100644 projects/common/pipes/math-atan.pipe.spec.ts
create mode 100644 projects/common/pipes/math-atan.pipe.ts
create mode 100644 projects/common/pipes/math-degrees.pipe.spec.ts
create mode 100644 projects/common/pipes/math-degrees.pipe.ts
diff --git a/docs/release-notes-editor.txt b/docs/release-notes-editor.txt
index e54c428d1..11a8053bf 100644
--- a/docs/release-notes-editor.txt
+++ b/docs/release-notes-editor.txt
@@ -3,7 +3,7 @@ Editor
1.35.0
- Implement hotspot image element
Clickable and non-clickable (read-only) areas can be placed on an image.
- The shapes of the areas can be ellipses and rectangles. Their position,
+ The shapes of the areas can be ellipses, rectangles and triangles. Their position,
size, rotation, color and frame thickness can be set. The elements can be marked as required.
1.34.0
diff --git a/projects/common/components/input-elements/hotspot-image.component.ts b/projects/common/components/input-elements/hotspot-image.component.ts
index 4f09383d2..8f7394597 100644
--- a/projects/common/components/input-elements/hotspot-image.component.ts
+++ b/projects/common/components/input-elements/hotspot-image.component.ts
@@ -14,7 +14,64 @@ import { FormElementComponent } from '../../directives/form-element-component.di
tabindex="0"
(focusout)="elementFormControl.markAsTouched()">
<div *ngFor="let item of elementModel.value; let index = index">
- <div class="hotspot"
+ <div *ngIf="item.shape === 'triangle'"
+ class="triangle-container"
+ [style.top.px]="item.top"
+ [style.left.px]="item.left"
+ [style.width.px]="item.width"
+ [style.height.px]="item.height"
+ [style.transform]="'rotate(' + item.rotation + 'deg)'">
+ <div class="triangle-half">
+ <div class="triangle-half-inner hotspot"
+ [style.transform]="'scale(2) rotate(' +
+ (((item.height + item.borderWidth) | mathAtan:(item.width/2 + item.borderWidth)) | mathDegrees) +
+ 'deg)'"
+ [class.active-hotspot]="!item.readOnly"
+ [class.border-left]="item.borderWidth > 0"
+ [style.border-width.px]="(item.borderWidth + 0.5) / 2"
+ [style.border-color]="item.borderColor"
+ [style.background-color]="(parentForm && elementFormControl.value[index].value) ||
+ (!parentForm && item.value) ?
+ item.backgroundColor :
+ 'transparent'"
+ (click)="!item.readOnly && parentForm ? onHotspotClicked(index) : null">
+ </div>
+ <div *ngIf="item.borderWidth > 0"
+ class="triangle-half-bottom-border hotspot"
+ [style.left.px]="item.borderWidth - 1"
+ [style.border-width.px]="item.borderWidth"
+ [style.border-color]="item.borderColor"
+ [style.bottom.px]="item.borderWidth">
+ </div>
+ </div>
+ <div class="triangle-half"
+ [style.left.%]="50"
+ [style.transform]="'scaleX(-1)'">
+ <div class="triangle-half-inner hotspot"
+ [style.transform]="'scale(2) rotate(' +
+ (((item.height + item.borderWidth) | mathAtan:(item.width/2 + item.borderWidth)) | mathDegrees) +
+ 'deg)'"
+ [class.active-hotspot]="!item.readOnly"
+ [class.border-left]="item.borderWidth > 0"
+ [style.border-width.px]="(item.borderWidth + 0.5) / 2"
+ [style.border-color]="item.borderColor"
+ [style.background-color]="(parentForm && elementFormControl.value[index].value) ||
+ (!parentForm && item.value) ?
+ item.backgroundColor :
+ 'transparent'"
+ (click)="!item.readOnly && parentForm ? onHotspotClicked(index) : null">
+ </div>
+ <div *ngIf="item.borderWidth > 0"
+ class="triangle-half-bottom-border hotspot"
+ [style.left.px]="item.borderWidth - 1"
+ [style.border-width.px]="item.borderWidth"
+ [style.border-color]="item.borderColor"
+ [style.bottom.px]="item.borderWidth">
+ </div>
+ </div>
+ </div>
+ <div *ngIf="item.shape !== 'triangle'"
+ class="hotspot"
[class.active-hotspot]="!item.readOnly"
[class.circle]="item.shape === 'ellipse'"
[class.border]="item.borderWidth > 0"
@@ -38,10 +95,15 @@ import { FormElementComponent } from '../../directives/form-element-component.di
</div>
`,
styles: [
+ '.triangle-half {height: 100%; width: 50%; overflow: hidden; position: absolute; pointer-events: none}',
+ '.triangle-container {overflow: hidden; position: absolute; pointer-events: none;}',
+ '.triangle-half-inner {transform-origin: 0 100%; width: 100%; height: 100%;}',
+ '.triangle-half-bottom-border {top: 0; height: 100%; width: 100%; border-bottom-style: solid}',
+ '.border {border-style: solid}',
+ '.border-left {border-left-style: solid}',
'.circle {border-radius: 50%;}',
- '.border {border-color: #000000; border-style: solid}',
'.hotspot {position: absolute; box-sizing: border-box;}',
- '.active-hotspot {cursor: pointer;}',
+ '.active-hotspot {cursor: pointer; pointer-events: all}',
'.image-container {position: relative;}'
]
})
diff --git a/projects/common/models/elements/element.ts b/projects/common/models/elements/element.ts
index ee0b7536e..edf9355e8 100644
--- a/projects/common/models/elements/element.ts
+++ b/projects/common/models/elements/element.ts
@@ -205,7 +205,7 @@ export interface Hotspot {
left: number;
width: number;
height: number;
- shape: 'ellipse' | 'rect';
+ shape: 'ellipse' | 'rect' | 'triangle';
borderWidth: number;
borderColor: string;
backgroundColor: string;
diff --git a/projects/common/pipes/math-atan.pipe.spec.ts b/projects/common/pipes/math-atan.pipe.spec.ts
new file mode 100644
index 000000000..ead3ef254
--- /dev/null
+++ b/projects/common/pipes/math-atan.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { MathAtanPipe } from './math-atan.pipe';
+
+describe('MathAtanPipe', () => {
+ it('create an instance', () => {
+ const pipe = new MathAtanPipe();
+ expect(pipe).toBeTruthy();
+ });
+});
diff --git a/projects/common/pipes/math-atan.pipe.ts b/projects/common/pipes/math-atan.pipe.ts
new file mode 100644
index 000000000..61e5cd17b
--- /dev/null
+++ b/projects/common/pipes/math-atan.pipe.ts
@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'mathAtan'
+})
+export class MathAtanPipe implements PipeTransform {
+ transform(adjacent: number, opposite: number): number {
+ return Math.atan(opposite / adjacent);
+ }
+}
diff --git a/projects/common/pipes/math-degrees.pipe.spec.ts b/projects/common/pipes/math-degrees.pipe.spec.ts
new file mode 100644
index 000000000..f4bc87b37
--- /dev/null
+++ b/projects/common/pipes/math-degrees.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { MathDegreesPipe } from './math-degrees.pipe';
+
+describe('MathDegreesPipe', () => {
+ it('create an instance', () => {
+ const pipe = new MathDegreesPipe();
+ expect(pipe).toBeTruthy();
+ });
+});
diff --git a/projects/common/pipes/math-degrees.pipe.ts b/projects/common/pipes/math-degrees.pipe.ts
new file mode 100644
index 000000000..87440ae8b
--- /dev/null
+++ b/projects/common/pipes/math-degrees.pipe.ts
@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'mathDegrees'
+})
+export class MathDegreesPipe implements PipeTransform {
+ transform(radian: number): number {
+ return (radian * 180) / Math.PI;
+ }
+}
diff --git a/projects/common/shared.module.ts b/projects/common/shared.module.ts
index 161d618b1..81ac0cef7 100644
--- a/projects/common/shared.module.ts
+++ b/projects/common/shared.module.ts
@@ -68,6 +68,8 @@ import { CompoundChildOverlayComponent } from './components/compound-elements/cl
import { MarkListPipe } from './pipes/mark-list.pipe';
import { IsDisabledDirective } from './directives/is-disabled.directive';
import { GeometryComponent } from './components/geometry/geometry.component';
+import { MathAtanPipe } from './pipes/math-atan.pipe';
+import { MathDegreesPipe } from './pipes/math-degrees.pipe';
@NgModule({
imports: [
@@ -126,7 +128,9 @@ import { GeometryComponent } from './components/geometry/geometry.component';
CompoundChildOverlayComponent,
MarkListPipe,
IsDisabledDirective,
- GeometryComponent
+ GeometryComponent,
+ MathAtanPipe,
+ MathDegreesPipe
],
exports: [
CommonModule,
diff --git a/projects/editor/src/app/components/dialogs/hotspot-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/hotspot-edit-dialog.component.ts
index 8acee1882..237def27d 100644
--- a/projects/editor/src/app/components/dialogs/hotspot-edit-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/hotspot-edit-dialog.component.ts
@@ -35,6 +35,7 @@ import { Hotspot } from 'common/models/elements/element';
<label>{{'hotspot.shape' | translate}}</label>
<mat-radio-button value='ellipse'>{{'hotspot.ellipse' | translate}}</mat-radio-button>
<mat-radio-button value='rect'>{{'hotspot.rect' | translate}}</mat-radio-button>
+ <mat-radio-button value='triangle'>{{'hotspot.triangle' | translate}}</mat-radio-button>
</mat-radio-group>
<mat-form-field appearance="fill" fxFlex="50">
<mat-label>{{ 'hotspot.borderWidth' | translate }}</mat-label>
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index 56ae888e3..7a61da094 100644
--- a/projects/editor/src/assets/i18n/de.json
+++ b/projects/editor/src/assets/i18n/de.json
@@ -191,6 +191,7 @@
"shape": "Bereichsform",
"rect": "Rechteck",
"ellipse": "Ellipse",
+ "triangle": "Dreieck",
"rotation": "Drehung",
"backgroundColor": "Füllfarbe (bei Aktivierung)",
"value": "Aktivierter Bereich",
--
GitLab