Make it possible to update the PNG file on a PNG element

src/png.toit

@@ -35,7 +35,7 @@ Only PNGs with up to 8 bits per pixel are supported.  They can be
   transparent, and the opaque colors fully opaque.
 */
 class Png extends CustomElement:
-  png_/png-reader.AbstractPng
+  png_/png-reader.AbstractPng? := null
   last-palette_/ByteArray? := null
   last-alpha-palette_/ByteArray? := null
   last-transformed-palette_/ByteArray? := null
@@ -57,29 +57,36 @@ class Png extends CustomElement:
       --id/string?=null
       --background=null
       --border/Border?=null
-      --png-file/ByteArray
+      --png-file/ByteArray?=null
       --color/int?=null
       --palette-transformer/PaletteTransformer?=null:
     palette-transformer_ = palette-transformer
-    info := png-reader.PngInfo png-file
-    if info.uncompressed-random-access:
-      png_ = png-reader.PngRandomAccess png-file
-    else:
-      png_ = png-reader.Png png-file
-    if png_.bit-depth > 8: throw "UNSUPPORTED"
-    if png_.color-type == png-reader.COLOR-TYPE-TRUECOLOR or png_.color-type == png-reader.COLOR-TYPE-TRUECOLOR-ALPHA: throw "UNSUPPORTED"
+    png/png-reader.AbstractPng? := create-png_ png-file
     super
         --x = x
         --y = y
-        --w = png_.width
-        --h = png_.height
+        --w = png ? png.width : 0
+        --h = png ? png.height : 0
         --style = style
         --classes = classes
         --id = id
         --background = background
         --border = border
+    png_ = png
     if color: this.color = color
 
+  static create-png_ png-file/ByteArray? -> png-reader.AbstractPng?:
+    if not png-file: return null
+    info := png-reader.PngInfo png-file
+    png/png-reader.AbstractPng := ?
+    if info.uncompressed-random-access:
+      png = png-reader.PngRandomAccess png-file
+    else:
+      png = png-reader.Png png-file
+    if png.bit-depth > 8: throw "UNSUPPORTED"
+    if png.color-type == png-reader.COLOR-TYPE-TRUECOLOR or png.color-type == png-reader.COLOR-TYPE-TRUECOLOR-ALPHA: throw "UNSUPPORTED"
+    return png
+
   /**
   Causes the PNG to be redrawn with new values from the palette transformer.
   */
@@ -93,15 +100,30 @@ class Png extends CustomElement:
     be drawn with the given color.  Alpha (transparency) will be
     unchanged.
   */
-  color= value/int -> none:
+  color= value/int? -> none:
     invalidate-palette-transformer
-    palette-transformer_ = SingleColorPaletteTransformer_ value
+    if value:
+      palette-transformer_ = SingleColorPaletteTransformer_ value
+    else:
+      palette-transformer_ = null
+
+  png-file= value/ByteArray? -> none:
+    invalidate
+    png_ = null  // Reduce peak memory use.
+    png_ = create-png_ value
+    if png_:
+      set-size png_.width png_.height  // Also invalidates if the size changes.
+    else:
+      set-size 0 0
 
   set-attribute_ key/string value -> none:
     if key == "color":
       color = value
+    else if key == "png-file":
+      png-file = value
     else:
       super key value
+
   /**
   The $palette-transformer is an optional PaletteTransformer that transforms
     the colors in the PNG.  This can be used for example if you have a PNG
@@ -121,6 +143,7 @@ class Png extends CustomElement:
 
   // Redraw routine.
   custom-draw canvas/Canvas:
+    if not png_: return
     y2 := 0
     while y2 < h and (canvas.bounds-analysis 0 y2 w (h - y2)) != Canvas.DISJOINT:
       png_.get-indexed-image-data y2 h

tests/three-color-bitmap-2-visualized.toit

@@ -37,12 +37,20 @@ main args:
   heater-white-bg-uncompressed := file.read-content "tests/third_party/pictogrammers/heater-white-bg-uncompressed.png"
 
   display.add (Png --x=100 --y=32 --png-file=heater-red)
-  display.add (Png --x=184 --y=32 --png-file=heater-2-bit)
+  display.add (Png --x=184 --y=32 --png-file=heater-red --id="2-bit")
   display.add (Png --x=268 --y=32 --png-file=heater-bw)
   display.add (Png --x=352 --y=32 --png-file=heater-white-bg)
-  display.add (Png --x=436 --y=32 --png-file=heater-bw --color=0xff0000)
+  display.add (Png --x=436 --y=32 --id="updated-later")
   display.add (Png --x=520 --y=32 --png-file=heater-2-bit --palette-transformer=SwapRedAndBlack)
 
+  display.draw
+
+  updated-later := display.get-element-by-id "updated-later"
+  updated-later.png-file = heater-bw
+  updated-later.color = 0xff0000
+
+  (display.get-element-by-id "2-bit").png-file = heater-2-bit
+
   display.add (Png --x=100 --y=120 --png-file=heater-red-uncompressed)
   display.add (Png --x=184 --y=120 --png-file=heater-2-bit-uncompressed)
   display.add (Png --x=268 --y=120 --png-file=heater-bw-uncompressed)