Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import {
AfterViewInit, Component, EventEmitter, Input, Output
} from '@angular/core';
import { ElementComponent } from 'common/directives/element-component.directive';
import { GeometryElement } from 'common/models/elements/geometry/geometry';
import { ValueChangeElement } from 'common/models/elements/element';
declare const GGBApplet: any;
@Component({
selector: 'aspect-geometry',
template: `
<div [id]="elementModel.id" class="geogebra-applet"></div>
`,
styles: [
':host {display: block; width: 100%; height: 100%;}',
'.geogebra-applet {margin: auto;}'
]
})
export class GeometryComponent extends ElementComponent implements AfterViewInit {
@Input() elementModel!: GeometryElement;
@Input() appDefinition!: string;
@Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
ngAfterViewInit(): void {
this.externalResourceService.initializeGeoGebra(this.renderer);
this.externalResourceService.isGeoGebraLoaded().subscribe((isLoaded: boolean) => {
if (isLoaded) this.initApplet();
});
}
refresh() {
this.initApplet();
}
initApplet(): void {
console.log('Initializing GeoGebra applet');
if (!this.appDefinition) {
console.error('Geogebra Applet definition not found.');
return;
}
const params: any = {
id: this.elementModel.id,
width: this.elementModel.width,
height: this.elementModel.height,
showToolBar: this.elementModel.showToolbar,
showResetIcon: this.elementModel.showResetIcon,
enableShiftDragZoom: this.elementModel.enableShiftDragZoom,
showZoomButtons: this.elementModel.showZoomButtons,
showFullscreenButton: this.elementModel.showFullscreenButton,
showMenuBar: false,
showAlgebraInput: false,
enableLabelDrags: false,
enableRightClick: false,
showToolBarHelp: false,
errorDialogsActive: true,
showLogging: false,
useBrowserForJS: false,
ggbBase64: this.appDefinition,
appletOnLoad: (api: any) => {
api.registerUpdateListener(() => {
this.elementValueChanged.emit({
id: this.elementModel.id,
value: api.getBase64()
});
});
}
};
const applet = new GGBApplet(params, '5.0');
applet.setHTML5Codebase(this.externalResourceService.getGeoGebraHTML5URL());
// Needs timeout for loading new unit file in editor. For unknown reasons the component
// does not get re-initialized.
setTimeout(() => applet.inject(this.elementModel.id));
}
}