Reduce memory overhead (#25)

* Reduce memory overhead

* Drilldown canvas from GradientForm

---------

Co-authored-by: Abhishek Das <[email protected]>

Author: xerxovksi

marketplace/gradients/src/manifest.json

@@ -1,7 +1,7 @@
 {
     "testId": "63ca98b1-9551-4eb7-aa4f-dc494c79f23d",
     "name": "Gradients",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "manifestVersion": 2,
     "requirements": {
         "apps": [

marketplace/gradients/src/ui/components/gradient/ConicGradient.ts

@@ -28,11 +28,10 @@ export class ConicGradient extends GradientBase<ConicFillDirection> {
     }
 
     protected override getGradientImage(fillDirection: ConicFillDirection): string {
-        const canvas = document.createElement("canvas");
-        canvas.width = this.width;
-        canvas.height = this.height;
+        this.canvas.width = this.width;
+        this.canvas.height = this.height;
 
-        const canvasContext = canvas.getContext("2d");
+        const canvasContext = this.canvas.getContext("2d");
         const canvasGradient = this._getGradient(canvasContext, fillDirection);
 
         const stop1 = Number((this.stop1 / MAX_RANGE).toFixed(1));
@@ -44,7 +43,7 @@ export class ConicGradient extends GradientBase<ConicFillDirection> {
         canvasContext.fillStyle = canvasGradient;
         canvasContext.fillRect(0, 0, this.width, this.height);
 
-        return canvas.toDataURL("image/png");
+        return this.canvas.toDataURL("image/png");
     }
 
     private _getGradient(canvasContext: CanvasRenderingContext2D, fillDirection: ConicFillDirection): CanvasGradient {

marketplace/gradients/src/ui/components/gradient/GradientBase.ts

@@ -19,6 +19,9 @@ import { style } from "./Gradient.css";
 import { FillDirection } from "./GradientType";
 
 export abstract class GradientBase<T extends FillDirection> extends LitElement {
+    @property({ type: HTMLCanvasElement })
+    canvas!: HTMLCanvasElement;
+
     @property({ type: String })
     startingColor!: string;
 

marketplace/gradients/src/ui/components/gradient/GradientForm.ts

@@ -65,11 +65,17 @@ export class GradientForm extends LitElement {
     @state()
     private _gradientImageUrl: string;
 
+    private _previewImage: HTMLImageElement;
+    protected _canvas: HTMLCanvasElement;
+
     static get styles() {
         return style;
     }
 
     async firstUpdated(): Promise<void> {
+        this._previewImage = document.createElement("img");
+        this._canvas = document.createElement("canvas");
+
         const { runtime } = this.addOnUISdk.instance;
         this._sandboxApi = await runtime.apiProxy(RuntimeType.documentSandbox);
 
@@ -120,21 +126,20 @@ export class GradientForm extends LitElement {
     }
 
     private _previewGradient(): Promise<void> {
-        if (this._pageSize === undefined) {
+        if (this._pageSize === undefined || this._gradientImageUrl === undefined) {
             return;
         }
 
-        const previewImage = document.createElement("img");
-        previewImage.setAttribute("src", this._gradientImageUrl);
+        this._previewImage.setAttribute("src", this._gradientImageUrl);
 
         const previewImageScale = Number((this._pageSize.width / PREVIEW_IMAGE_WIDTH).toFixed(2));
         const previewImageHeight = Math.round(this._pageSize.height / previewImageScale);
 
-        previewImage.style.width = `${PREVIEW_IMAGE_WIDTH}px`;
-        previewImage.style.height = `${previewImageHeight}px`;
+        this._previewImage.style.width = `${PREVIEW_IMAGE_WIDTH}px`;
+        this._previewImage.style.height = `${previewImageHeight}px`;
 
         const previewContainer = this.shadowRoot.getElementById("preview-container");
-        previewContainer.replaceChildren(previewImage);
+        previewContainer.replaceChildren(this._previewImage);
     }
 
     private _reset() {
@@ -169,6 +174,7 @@ export class GradientForm extends LitElement {
         switch (this._activeGradientType) {
             case GradientType.Linear: {
                 activeGradient = html`<add-on-linear-gradient
+                    .canvas=${this._canvas}
                     .startingColor=${this._startingColor}
                     .endingColor=${this._endingColor}
                     .width=${this._pageSize.width}
@@ -182,6 +188,7 @@ export class GradientForm extends LitElement {
             }
             case GradientType.Radial: {
                 activeGradient = html`<add-on-radial-gradient
+                    .canvas=${this._canvas}
                     .startingColor=${this._startingColor}
                     .endingColor=${this._endingColor}
                     .width=${this._pageSize.width}
@@ -195,6 +202,7 @@ export class GradientForm extends LitElement {
             }
             case GradientType.Conic: {
                 activeGradient = html`<add-on-conic-gradient
+                    .canvas=${this._canvas}
                     .startingColor=${this._startingColor}
                     .endingColor=${this._endingColor}
                     .width=${this._pageSize.width}

marketplace/gradients/src/ui/components/gradient/LinearGradient.ts

@@ -28,11 +28,10 @@ export class LinearGradient extends GradientBase<LinearFillDirection> {
     }
 
     protected override getGradientImage(fillDirection: LinearFillDirection): string {
-        const canvas = document.createElement("canvas");
-        canvas.width = this.width;
-        canvas.height = this.height;
+        this.canvas.width = this.width;
+        this.canvas.height = this.height;
 
-        const canvasContext = canvas.getContext("2d");
+        const canvasContext = this.canvas.getContext("2d");
         const canvasGradient = this._getGradient(canvasContext, fillDirection);
 
         const stop1 = Number((this.stop1 / MAX_RANGE).toFixed(1));
@@ -44,7 +43,7 @@ export class LinearGradient extends GradientBase<LinearFillDirection> {
         canvasContext.fillStyle = canvasGradient;
         canvasContext.fillRect(0, 0, this.width, this.height);
 
-        return canvas.toDataURL("image/png");
+        return this.canvas.toDataURL("image/png");
     }
 
     private _getGradient(canvasContext: CanvasRenderingContext2D, fillDirection: LinearFillDirection): CanvasGradient {

marketplace/gradients/src/ui/components/gradient/RadialGradient.ts

@@ -28,11 +28,10 @@ export class RadialGradient extends GradientBase<RadialFillDirection> {
     }
 
     protected override getGradientImage(fillDirection: RadialFillDirection): string {
-        const canvas = document.createElement("canvas");
-        canvas.width = this.width;
-        canvas.height = this.height;
+        this.canvas.width = this.width;
+        this.canvas.height = this.height;
 
-        const canvasContext = canvas.getContext("2d");
+        const canvasContext = this.canvas.getContext("2d");
         const canvasGradient = this._getGradient(canvasContext, fillDirection);
 
         const stop1 = Number((this.stop1 / MAX_RANGE).toFixed(1));
@@ -44,7 +43,7 @@ export class RadialGradient extends GradientBase<RadialFillDirection> {
         canvasContext.fillStyle = canvasGradient;
         canvasContext.fillRect(0, 0, this.width, this.height);
 
-        return canvas.toDataURL("image/png");
+        return this.canvas.toDataURL("image/png");
     }
 
     private _getGradient(canvasContext: CanvasRenderingContext2D, fillDirection: RadialFillDirection): CanvasGradient {