1+ import { Box } from "../types/box" ;
2+ import { Vector2 } from "../types/vector2" ;
3+
4+ const margin = 15 ;
5+
6+ export interface ImageWidgetConfig {
7+ image ?: string ;
8+ maxWidth ?: number
9+ maxHeight ?: number
10+ }
11+
12+ /**
13+ * constructor(lightNode, nodeManager, id, parameterData, app) {
14+ this.lightNode = lightNode;
15+ this.id = id;
16+ this.app = app;
17+ this.lightNode.title = parameterData.name;
18+
19+ this.lightNode.onDropFile = (file) => {
20+ // console.log(file)
21+ var reader = new FileReader();
22+ reader.onload = (evt) => {
23+ console.log(evt.target.result)
24+ nodeManager.nodeParameterChanged({
25+ id: id,
26+ data: evt.target.result,
27+ binary: true
28+ });
29+ }
30+ reader.readAsArrayBuffer(file);
31+
32+ const url = URL.createObjectURL(file);
33+ // this.loadImage(this._url, function (img) {
34+ // that.size[1] = (img.height / img.width) * that.size[0];
35+ // });
36+ this.loadImgFromURL(url);
37+ }
38+ }
39+
40+ loadImgFromURL(url) {
41+ const img = document.createElement("img");
42+ img.src = url;
43+ img.onload = () => {
44+ // if (callback) {
45+ // callback(this);
46+ // }
47+ // console.log("Image loaded, size: " + img.width + "x" + img.height);
48+ // this.dirty = true;
49+ // that.boxcolor = "#9F9";f
50+ // that.setDirtyCanvas(true);
51+ this.lightNode.widgets[0].image = img
52+ this.lightNode.setSize(this.lightNode.computeSize());
53+ };
54+ img.onerror = () => {
55+ console.log("error loading the image:" + url);
56+ }
57+ }
58+
59+ update(parameterData) {
60+ console.log("image parameter", parameterData)
61+ const curVal = parameterData.currentValue;
62+ this.app.RequestManager.getParameterValue(this.id, (response) => {
63+ const url = URL.createObjectURL(response);
64+ this.loadImgFromURL(url)
65+ })
66+ }
67+ */
68+
69+ export class ImageWidget {
70+
71+ #url: string | undefined ;
72+
73+ #image: HTMLImageElement | undefined ;
74+
75+ #maxWidth: number ;
76+
77+ #maxHeight: number ;
78+
79+ constructor ( config ?: ImageWidgetConfig ) {
80+ this . #maxWidth = config ?. maxWidth === undefined ? 150 : config ?. maxWidth ;
81+ this . #maxHeight = config ?. maxHeight === undefined ? 150 : config ?. maxHeight ;
82+ if ( config ?. image ) {
83+ this . Set ( config ?. image ) ;
84+ }
85+ }
86+
87+ Set ( url : string ) {
88+ this . #image = undefined ;
89+ this . #url = url ;
90+
91+ const img = document . createElement ( "img" ) ;
92+ img . src = url ;
93+ img . onload = ( ) => {
94+ this . #image = img ;
95+ } ;
96+ img . onerror = ( event ) => {
97+ console . log ( "error loading image:" , url , event ) ;
98+ }
99+ }
100+
101+ Size ( ) : Vector2 {
102+ if ( this . #image === undefined ) {
103+ return { "x" : 0 , "y" : 0 }
104+ }
105+
106+ let adjust = 1 ;
107+ if ( this . #image. width > this . #maxWidth) {
108+ adjust = this . #maxWidth / this . #image. width
109+ }
110+
111+ if ( this . #image. height > this . #maxHeight) {
112+ let heightAdjust = this . #maxHeight / this . #image. height
113+ if ( heightAdjust < adjust ) {
114+ adjust = heightAdjust ;
115+ }
116+ }
117+
118+ return {
119+ "x" : adjust * this . #image. width ,
120+ "y" : adjust * this . #image. height
121+ }
122+ }
123+
124+ ClickStart ( ) : void {
125+ }
126+
127+ ClickEnd ( ) : void {
128+ }
129+
130+ Draw ( ctx : CanvasRenderingContext2D , position : Vector2 , scale : number , mousePosition : Vector2 | undefined ) : Box {
131+ const size = this . Size ( ) ;
132+ const box : Box = {
133+ Position : position ,
134+ Size : {
135+ x : size . x * scale ,
136+ y : size . y * scale ,
137+ }
138+ }
139+
140+ if ( ! this . #image) {
141+ return box ;
142+ }
143+
144+ ctx . drawImage (
145+ this . #image,
146+ position . x ,
147+ position . y ,
148+ box . Size . x ,
149+ box . Size . y
150+ ) ;
151+ return box ;
152+ }
153+ }
0 commit comments