Fix pattern in JupyterLab

Author: martinRenou

src/widget.ts

@@ -377,7 +377,35 @@ export class CanvasManagerModel extends WidgetModel {
   static model_module_version = MODULE_VERSION;
 }
 
-export class Path2DModel extends WidgetModel {
+export class AsyncValueWidgetModel<ValueType> extends WidgetModel {
+  initialize(attributes: any, options: any) {
+    super.initialize(attributes, options);
+
+    this._initPromise = new Promise(resolve => {
+      this._resolve = resolve;
+    });
+  }
+
+  async initialized(): Promise<ValueType> {
+    return this._initPromise;
+  }
+
+  set value(v: ValueType) {
+    this._underlyingValue = v;
+    this._resolve(v);
+  }
+
+  get value(): ValueType | undefined {
+    return this._underlyingValue;
+  }
+
+  protected _underlyingValue: ValueType | undefined = undefined;
+
+  private _initPromise: Promise<ValueType>;
+  private _resolve: (value: ValueType) => void;
+}
+
+export class Path2DModel extends AsyncValueWidgetModel<Path2D> {
   defaults() {
     return {
       ...super.defaults(),
@@ -394,14 +422,12 @@ export class Path2DModel extends WidgetModel {
     this.value = new Path2D(this.get('value'));
   }
 
-  value: Path2D;
-
   static model_name = 'Path2DModel';
   static model_module = MODULE_NAME;
   static model_module_version = MODULE_VERSION;
 }
 
-export class PatternModel extends WidgetModel {
+export class PatternModel extends AsyncValueWidgetModel<CanvasPattern> {
   defaults() {
     return {
       ...super.defaults(),
@@ -430,7 +456,7 @@ export class PatternModel extends WidgetModel {
     }
 
     if (patternSource == undefined) {
-      throw 'Could not understand the souce for the pattern';
+      throw 'Could not understand the source for the pattern';
     }
 
     const pattern = PatternModel.ctx.createPattern(
@@ -450,8 +476,6 @@ export class PatternModel extends WidgetModel {
     image: { deserialize: unpack_models as any }
   };
 
-  value: CanvasPattern;
-
   static model_name = 'PatternModel';
   static model_module = MODULE_NAME;
   static model_module_version = MODULE_VERSION;
@@ -462,7 +486,7 @@ export class PatternModel extends WidgetModel {
   );
 }
 
-class GradientModel extends WidgetModel {
+class GradientModel extends AsyncValueWidgetModel<CanvasGradient> {
   defaults() {
     return {
       ...super.defaults(),
@@ -481,8 +505,10 @@ class GradientModel extends WidgetModel {
 
     this.createGradient();
 
-    for (const colorStop of this.get('color_stops')) {
-      this.value.addColorStop(colorStop[0], colorStop[1]);
+    if (this.value) {
+      for (const colorStop of this.get('color_stops')) {
+        this.value.addColorStop(colorStop[0], colorStop[1]);
+      }
     }
   }
 
@@ -495,8 +521,6 @@ class GradientModel extends WidgetModel {
     );
   }
 
-  value: CanvasGradient;
-
   static model_module = MODULE_NAME;
   static model_module_version = MODULE_VERSION;
 
@@ -1077,11 +1101,11 @@ export class CanvasModel extends DOMWidgetModel {
 
   async setAttr(attr: number, value: any) {
     if (typeof value === 'string' && value.startsWith('IPY')) {
-      const widgetModel: GradientModel = await unpack_models(
+      const widgetModel: AsyncValueWidgetModel<any> = await unpack_models(
         value,
         this.widget_manager
       );
-      value = widgetModel.value;
+      value = await widgetModel.initialized();
     }
 
     (this.ctx as any)[CanvasModel.ATTRS[attr]] = value;