@meursyphus/flitter 2.0.0 → 2.0.2

package/index.global.js

@@ -37,6 +37,10 @@
   var __commonJS = (cb2, mod) => function __require() {
     return mod || (0, cb2[__getOwnPropNames(cb2)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
   };
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
   var __copyProps = (to, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
       for (let key of __getOwnPropNames(from))
@@ -12473,8 +12477,8 @@
       this.decoration = decoration;
     }
     paint(ctx, rect) {
-      this.paintBackgroundColor(ctx, rect);
-      this.paintShadows(ctx, rect);
+      const backgroundPath = this.paintBackgroundColor(ctx, rect);
+      this.paintShadows(ctx, backgroundPath);
       if (this.decoration.border != null) {
         this.decoration.border.createCanvasPainter().paint(ctx, {
           rect,
@@ -12483,7 +12487,7 @@
         });
       }
     }
-    paintShadows(ctx, rect) {
+    paintShadows(ctx, backgroundPath) {
       if (this.decoration.boxShadow == null || this.decoration.boxShadow.length === 0) {
         return;
       }
@@ -12493,22 +12497,23 @@
         ctx.shadowOffsetY = shadow.offset.y;
         ctx.shadowBlur = shadow.blurRadius;
         ctx.shadowColor = shadow.color.value;
-        ctx.fill(new path_default().addRect(rect).toCanvasPath());
+        ctx.fill(backgroundPath.toCanvasPath());
         ctx.restore();
       });
     }
     paintBackgroundColor(ctx, rect) {
       ctx.fillStyle = this.decoration.color.value || "none";
+      const path = new path_default();
       if (this.decoration.shape == "circle") {
-        ctx.fill(new path_default().addOval(rect).toCanvasPath());
-        return;
+        ctx.fill(path.addOval(rect).toCanvasPath());
+        return path;
       }
       if (this.decoration.borderRadius == null) {
-        ctx.fill(new path_default().addRect(rect).toCanvasPath());
-        return;
+        ctx.fill(path.addRect(rect).toCanvasPath());
+        return path;
       }
       ctx.fill(
-        new path_default().addRRect(
+        path.addRRect(
           r_rect_default.fromRectAndCorners({
             rect,
             topLeft: this.decoration.borderRadius.topLeft,
@@ -12518,6 +12523,7 @@
           })
         ).toCanvasPath()
       );
+      return path;
     }
   };
 
@@ -12560,7 +12566,7 @@
   // src/type/_types/text-style.ts
   var TextStyle = class _TextStyle {
     constructor({
-      inherit = true,
+      inherit: inherit2 = true,
       color: color2,
       fontSize,
       fontWeight,
@@ -12584,7 +12590,7 @@
       /// multiple of [fontSize] and be exactly `fontSize * height` logical pixels
       /// tall.
       __publicField(this, "height");
-      this.inherit = inherit;
+      this.inherit = inherit2;
       this.color = color2;
       this.fontSize = fontSize;
       this.fontWeight = fontWeight;
@@ -12599,7 +12605,7 @@
       return this.inherit === other.inherit && this.color === other.color && this.fontSize === other.fontSize && this.fontWeight === other.fontWeight && this.fontFamily === other.fontFamily && this.textBaseline === other.textBaseline && this.fontStyle === other.fontStyle;
     }
     copyWidth({
-      inherit = this.inherit,
+      inherit: inherit2 = this.inherit,
       color: color2 = this.color,
       fontSize = this.fontSize,
       fontWeight = this.fontWeight,
@@ -12609,7 +12615,7 @@
       height = this.height
     }) {
       return new _TextStyle({
-        inherit,
+        inherit: inherit2,
         color: color2,
         fontFamily,
         fontSize,
@@ -13134,6 +13140,351 @@
     }
   };
 
+  // src/type/colors.ts
+  var colors_exports = {};
+  __export(colors_exports, {
+    amber: () => amber,
+    black: () => black,
+    blue: () => blue,
+    cyan: () => cyan,
+    emerald: () => emerald,
+    fuchsia: () => fuchsia,
+    gray: () => gray,
+    green: () => green,
+    indigo: () => indigo,
+    inherit: () => inherit,
+    lime: () => lime,
+    neutral: () => neutral,
+    orange: () => orange,
+    pink: () => pink,
+    purple: () => purple,
+    red: () => red,
+    rose: () => rose,
+    sky: () => sky,
+    slate: () => slate,
+    stone: () => stone,
+    teal: () => teal,
+    transparent: () => transparent,
+    violet: () => violet,
+    white: () => white,
+    yellow: () => yellow,
+    zinc: () => zinc
+  });
+  var inherit = "inherit";
+  var transparent = "transparent";
+  var black = "#000";
+  var white = "#fff";
+  var slate = {
+    50: "#f8fafc",
+    100: "#f1f5f9",
+    200: "#e2e8f0",
+    300: "#cbd5e1",
+    400: "#94a3b8",
+    500: "#64748b",
+    600: "#475569",
+    700: "#334155",
+    800: "#1e293b",
+    900: "#0f172a",
+    950: "#020617"
+  };
+  var gray = {
+    50: "#f9fafb",
+    100: "#f3f4f6",
+    200: "#e5e7eb",
+    300: "#d1d5db",
+    400: "#9ca3af",
+    500: "#6b7280",
+    600: "#4b5563",
+    700: "#374151",
+    800: "#1f2937",
+    900: "#111827",
+    950: "#030712"
+  };
+  var zinc = {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#a1a1aa",
+    500: "#71717a",
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b",
+    950: "#09090b"
+  };
+  var neutral = {
+    50: "#fafafa",
+    100: "#f5f5f5",
+    200: "#e5e5e5",
+    300: "#d4d4d4",
+    400: "#a3a3a3",
+    500: "#737373",
+    600: "#525252",
+    700: "#404040",
+    800: "#262626",
+    900: "#171717",
+    950: "#0a0a0a"
+  };
+  var stone = {
+    50: "#fafaf9",
+    100: "#f5f5f4",
+    200: "#e7e5e4",
+    300: "#d6d3d1",
+    400: "#a8a29e",
+    500: "#78716c",
+    600: "#57534e",
+    700: "#44403c",
+    800: "#292524",
+    900: "#1c1917",
+    950: "#0c0a09"
+  };
+  var red = {
+    50: "#fef2f2",
+    100: "#fee2e2",
+    200: "#fecaca",
+    300: "#fca5a5",
+    400: "#f87171",
+    500: "#ef4444",
+    600: "#dc2626",
+    700: "#b91c1c",
+    800: "#991b1b",
+    900: "#7f1d1d",
+    950: "#450a0a"
+  };
+  var orange = {
+    50: "#fff7ed",
+    100: "#ffedd5",
+    200: "#fed7aa",
+    300: "#fdba74",
+    400: "#fb923c",
+    500: "#f97316",
+    600: "#ea580c",
+    700: "#c2410c",
+    800: "#9a3412",
+    900: "#7c2d12",
+    950: "#431407"
+  };
+  var amber = {
+    50: "#fffbeb",
+    100: "#fef3c7",
+    200: "#fde68a",
+    300: "#fcd34d",
+    400: "#fbbf24",
+    500: "#f59e0b",
+    600: "#d97706",
+    700: "#b45309",
+    800: "#92400e",
+    900: "#78350f",
+    950: "#451a03"
+  };
+  var yellow = {
+    50: "#fefce8",
+    100: "#fef9c3",
+    200: "#fef08a",
+    300: "#fde047",
+    400: "#facc15",
+    500: "#eab308",
+    600: "#ca8a04",
+    700: "#a16207",
+    800: "#854d0e",
+    900: "#713f12",
+    950: "#422006"
+  };
+  var lime = {
+    50: "#f7fee7",
+    100: "#ecfccb",
+    200: "#d9f99d",
+    300: "#bef264",
+    400: "#a3e635",
+    500: "#84cc16",
+    600: "#65a30d",
+    700: "#4d7c0f",
+    800: "#3f6212",
+    900: "#365314",
+    950: "#1a2e05"
+  };
+  var green = {
+    50: "#f0fdf4",
+    100: "#dcfce7",
+    200: "#bbf7d0",
+    300: "#86efac",
+    400: "#4ade80",
+    500: "#22c55e",
+    600: "#16a34a",
+    700: "#15803d",
+    800: "#166534",
+    900: "#14532d",
+    950: "#052e16"
+  };
+  var emerald = {
+    50: "#ecfdf5",
+    100: "#d1fae5",
+    200: "#a7f3d0",
+    300: "#6ee7b7",
+    400: "#34d399",
+    500: "#10b981",
+    600: "#059669",
+    700: "#047857",
+    800: "#065f46",
+    900: "#064e3b",
+    950: "#022c22"
+  };
+  var teal = {
+    50: "#f0fdfa",
+    100: "#ccfbf1",
+    200: "#99f6e4",
+    300: "#5eead4",
+    400: "#2dd4bf",
+    500: "#14b8a6",
+    600: "#0d9488",
+    700: "#0f766e",
+    800: "#115e59",
+    900: "#134e4a",
+    950: "#042f2e"
+  };
+  var cyan = {
+    50: "#ecfeff",
+    100: "#cffafe",
+    200: "#a5f3fc",
+    300: "#67e8f9",
+    400: "#22d3ee",
+    500: "#06b6d4",
+    600: "#0891b2",
+    700: "#0e7490",
+    800: "#155e75",
+    900: "#164e63",
+    950: "#083344"
+  };
+  var sky = {
+    50: "#f0f9ff",
+    100: "#e0f2fe",
+    200: "#bae6fd",
+    300: "#7dd3fc",
+    400: "#38bdf8",
+    500: "#0ea5e9",
+    600: "#0284c7",
+    700: "#0369a1",
+    800: "#075985",
+    900: "#0c4a6e",
+    950: "#082f49"
+  };
+  var blue = {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554"
+  };
+  var indigo = {
+    50: "#eef2ff",
+    100: "#e0e7ff",
+    200: "#c7d2fe",
+    300: "#a5b4fc",
+    400: "#818cf8",
+    500: "#6366f1",
+    600: "#4f46e5",
+    700: "#4338ca",
+    800: "#3730a3",
+    900: "#312e81",
+    950: "#1e1b4b"
+  };
+  var violet = {
+    50: "#f5f3ff",
+    100: "#ede9fe",
+    200: "#ddd6fe",
+    300: "#c4b5fd",
+    400: "#a78bfa",
+    500: "#8b5cf6",
+    600: "#7c3aed",
+    700: "#6d28d9",
+    800: "#5b21b6",
+    900: "#4c1d95",
+    950: "#2e1065"
+  };
+  var purple = {
+    50: "#faf5ff",
+    100: "#f3e8ff",
+    200: "#e9d5ff",
+    300: "#d8b4fe",
+    400: "#c084fc",
+    500: "#a855f7",
+    600: "#9333ea",
+    700: "#7e22ce",
+    800: "#6b21a8",
+    900: "#581c87",
+    950: "#3b0764"
+  };
+  var fuchsia = {
+    50: "#fdf4ff",
+    100: "#fae8ff",
+    200: "#f5d0fe",
+    300: "#f0abfc",
+    400: "#e879f9",
+    500: "#d946ef",
+    600: "#c026d3",
+    700: "#a21caf",
+    800: "#86198f",
+    900: "#701a75",
+    950: "#4a044e"
+  };
+  var pink = {
+    50: "#fdf2f8",
+    100: "#fce7f3",
+    200: "#fbcfe8",
+    300: "#f9a8d4",
+    400: "#f472b6",
+    500: "#ec4899",
+    600: "#db2777",
+    700: "#be185d",
+    800: "#9d174d",
+    900: "#831843",
+    950: "#500724"
+  };
+  var rose = {
+    50: "#fff1f2",
+    100: "#ffe4e6",
+    200: "#fecdd3",
+    300: "#fda4af",
+    400: "#fb7185",
+    500: "#f43f5e",
+    600: "#e11d48",
+    700: "#be123c",
+    800: "#9f1239",
+    900: "#881337",
+    950: "#4c0519"
+  };
+
+  // src/type/_types/object-fit.ts
+  var ObjectFit = /* @__PURE__ */ ((ObjectFit2) => {
+    ObjectFit2["fill"] = "fill";
+    ObjectFit2["contain"] = "contain";
+    ObjectFit2["cover"] = "cover";
+    ObjectFit2["none"] = "none";
+    ObjectFit2["scaleDown"] = "scale-down";
+    return ObjectFit2;
+  })(ObjectFit || {});
+
+  // src/type/_types/object-position.ts
+  var ObjectPosition = /* @__PURE__ */ ((ObjectPosition2) => {
+    ObjectPosition2["center"] = "center";
+    ObjectPosition2["top"] = "top";
+    ObjectPosition2["right"] = "right";
+    ObjectPosition2["bottom"] = "bottom";
+    ObjectPosition2["left"] = "left";
+    ObjectPosition2["topLeft"] = "top left";
+    ObjectPosition2["topRight"] = "top right";
+    ObjectPosition2["bottomLeft"] = "bottom left";
+    ObjectPosition2["bottomRight"] = "bottom right";
+    return ObjectPosition2;
+  })(ObjectPosition || {});
+
   // src/framework/renderer/renderer.ts
   var _resizeHandlers;
   var RenderContext = class {
@@ -13160,6 +13511,10 @@
         this.viewSize = new size_default(viewSize);
       }
     }
+    /**
+     * @deprecated
+     * This method is deprecated and will be removed in future versions.
+     */
     setViewport({
       translation,
       scale: scale2
@@ -14050,10 +14405,10 @@
     dispose() {
       this.renderOwner.disposeRenderObject(this);
     }
-    getIntrinsicWidth(_height) {
+    getIntrinsicWidth(_height2) {
       return 0;
     }
-    getIntrinsicHeight(_width) {
+    getIntrinsicHeight(_width2) {
       return 0;
     }
     /*
@@ -14471,7 +14826,7 @@
         this.hitTest(e, "onMouseUp");
       });
       __privateAdd(this, _handleMouseWheel, (e) => {
-        this.hitTest(e, "onMouseWheel");
+        this.hitTest(e, "onWheel");
         e.isPropagationStopped = false;
         for (const detector of __privateGet(this, _detectors)) {
           if (e.isPropagationStopped)
@@ -14498,7 +14853,7 @@
             return;
           if (!detector.hitTest({ globalPoint: __privateGet(this, _hitPosition) }))
             continue;
-          detector[type](e);
+          detector.invokeCallback(type, e);
         }
       });
       __privateAdd(this, _wrapEvent, (callback) => (e) => {
@@ -15191,7 +15546,7 @@
   var rgba2 = {
     test: isColorString("rgb", "red"),
     parse: splitColor("red", "green", "blue"),
-    transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" + rgbUnit.transform(red) + ", " + rgbUnit.transform(green) + ", " + rgbUnit.transform(blue) + ", " + sanitize(alpha.transform(alpha$1)) + ")"
+    transform: ({ red: red2, green: green2, blue: blue2, alpha: alpha$1 = 1 }) => "rgba(" + rgbUnit.transform(red2) + ", " + rgbUnit.transform(green2) + ", " + rgbUnit.transform(blue2) + ", " + sanitize(alpha.transform(alpha$1)) + ")"
   };
 
   // ../../node_modules/style-value-types/dist/es/color/hex.mjs
@@ -15310,22 +15665,22 @@
     hue /= 360;
     saturation /= 100;
     lightness /= 100;
-    let red = 0;
-    let green = 0;
-    let blue = 0;
+    let red2 = 0;
+    let green2 = 0;
+    let blue2 = 0;
     if (!saturation) {
-      red = green = blue = lightness;
+      red2 = green2 = blue2 = lightness;
     } else {
       const q = lightness < 0.5 ? lightness * (1 + saturation) : lightness + saturation - lightness * saturation;
       const p = 2 * lightness - q;
-      red = hueToRgb(p, q, hue + 1 / 3);
-      green = hueToRgb(p, q, hue);
-      blue = hueToRgb(p, q, hue - 1 / 3);
+      red2 = hueToRgb(p, q, hue + 1 / 3);
+      green2 = hueToRgb(p, q, hue);
+      blue2 = hueToRgb(p, q, hue - 1 / 3);
     }
     return {
-      red: Math.round(red * 255),
-      green: Math.round(green * 255),
-      blue: Math.round(blue * 255),
+      red: Math.round(red2 * 255),
+      green: Math.round(green2 * 255),
+      blue: Math.round(blue2 * 255),
       alpha: alpha2
     };
   }
@@ -19980,6 +20335,9 @@
     accept(visitor) {
       visitor.visitGestureDetector(this);
     }
+    invokeCallback(type, e) {
+      this[type](e);
+    }
   };
   function emptyCallback(_arg) {
   }
@@ -21566,4 +21924,358 @@
     (_a = __privateGet(this, _listeners)[type]) == null ? void 0 : _a.forEach((listener) => listener(event));
   };
   var TextField_default = classToFunction_default(TextField);
+
+  // src/component/base/base-image/calculatePosition.ts
+  var objectPositionMap = {
+    center: { x: 0.5, y: 0.5 },
+    top: { x: 0.5, y: 0 },
+    right: { x: 1, y: 0.5 },
+    bottom: { x: 0.5, y: 1 },
+    left: { x: 0, y: 0.5 },
+    "top left": { x: 0, y: 0 },
+    "top right": { x: 1, y: 0 },
+    "bottom left": { x: 0, y: 1 },
+    "bottom right": { x: 1, y: 1 }
+  };
+  function calcSize(sourceSize, containerSize, imageSize, positionPercent) {
+    if (imageSize > containerSize) {
+      const ratio = sourceSize / imageSize;
+      const sSize = Math.min(sourceSize, containerSize * ratio);
+      const s = (sourceSize - sSize) * positionPercent;
+      return {
+        s: Math.max(0, Math.min(s, sourceSize - sSize)),
+        sSize,
+        d: 0,
+        dSize: containerSize
+      };
+    } else {
+      const d = (containerSize - imageSize) * positionPercent;
+      return {
+        s: 0,
+        sSize: sourceSize,
+        d,
+        dSize: imageSize
+      };
+    }
+  }
+  function calculateImageRendering(sourceImageSize, calcImageSizeResult, objectPosition = "center") {
+    const {
+      container: { width: containerWidth, height: containerHeight },
+      image: { width: imageWidth, height: imageHeight }
+    } = calcImageSizeResult;
+    const { x: xPercent, y: yPercent } = objectPositionMap[objectPosition];
+    const horizontalResult = calcSize(
+      sourceImageSize.width,
+      containerWidth,
+      imageWidth,
+      xPercent
+    );
+    const verticalResult = calcSize(
+      sourceImageSize.height,
+      containerHeight,
+      imageHeight,
+      yPercent
+    );
+    return {
+      sx: Math.round(horizontalResult.s),
+      sy: Math.round(verticalResult.s),
+      sWidth: Math.round(horizontalResult.sSize),
+      sHeight: Math.round(verticalResult.sSize),
+      dx: Math.round(horizontalResult.d),
+      dy: Math.round(verticalResult.d),
+      dWidth: Math.round(horizontalResult.dSize),
+      dHeight: Math.round(verticalResult.dSize)
+    };
+  }
+
+  // src/component/base/base-image/calculateSize.ts
+  function calculateSize(source, container, objectFit = "none") {
+    var _a, _b;
+    const aspectRatio = source.width / source.height;
+    let containerWidth = (_a = container.width) != null ? _a : source.width;
+    let containerHeight = (_b = container.height) != null ? _b : source.height;
+    if (container.width != null && container.height == null) {
+      containerHeight = Math.round(container.width / aspectRatio);
+    } else if (container.width == null && container.height != null) {
+      containerWidth = Math.round(container.height * aspectRatio);
+    }
+    const imageSize = fitFunctions[objectFit](source, {
+      width: containerWidth,
+      height: containerHeight
+    });
+    return {
+      width: Math.round(containerWidth),
+      height: Math.round(containerHeight),
+      image: {
+        width: Math.round(imageSize.width),
+        height: Math.round(imageSize.height)
+      }
+    };
+  }
+  var fitFunctions = {
+    fill: fillFit,
+    contain: containFit,
+    cover: coverFit,
+    none: noneFit,
+    "scale-down": scaleDownFit
+  };
+  function fillFit(source, container) {
+    return { width: container.width, height: container.height };
+  }
+  function containFit(source, result) {
+    const aspectRatio = source.width / source.height;
+    if (result.width / result.height > aspectRatio) {
+      return { width: result.height * aspectRatio, height: result.height };
+    } else {
+      return { width: result.width, height: result.width / aspectRatio };
+    }
+  }
+  function coverFit(source, container) {
+    const aspectRatio = source.width / source.height;
+    if (container.width / container.height > aspectRatio) {
+      return { width: container.width, height: container.width / aspectRatio };
+    } else {
+      return { width: container.height * aspectRatio, height: container.height };
+    }
+  }
+  function noneFit(source, _) {
+    return { width: source.width, height: source.height };
+  }
+  function scaleDownFit(source, container) {
+    const containSize = containFit(source, container);
+    if (containSize.width > source.width || containSize.height > source.height) {
+      return { width: source.width, height: source.height };
+    }
+    return containSize;
+  }
+
+  // src/component/base/base-image/BaseImage.ts
+  var _Image = class extends SingleChildRenderObjectWidget_default {
+    constructor({
+      key,
+      src,
+      objectFit: fit,
+      width,
+      height,
+      objectPosition: position
+    }) {
+      super(key);
+      __publicField(this, "_src");
+      __publicField(this, "_fit");
+      __publicField(this, "_width");
+      __publicField(this, "_height");
+      __publicField(this, "_position");
+      this._src = src;
+      this._fit = fit;
+      this._width = width;
+      this._height = height;
+      this._position = position;
+    }
+    createRenderObject() {
+      return new RenderImage({
+        src: this._src,
+        objectFit: this._fit,
+        width: this._width,
+        height: this._height,
+        objectPosition: this._position
+      });
+    }
+    updateRenderObject(renderObject) {
+      renderObject.src = this._src;
+      renderObject.fit = this._fit;
+      renderObject.width = this._width;
+      renderObject.height = this._height;
+      renderObject.position = this._position;
+    }
+  };
+  var _src, _fit, _width, _height, _position, _mounted;
+  var RenderImage = class extends SingleChildRenderObject_default {
+    constructor({
+      src,
+      objectFit,
+      width,
+      height,
+      objectPosition
+    }) {
+      super({ isPainter: true });
+      __privateAdd(this, _src, void 0);
+      __privateAdd(this, _fit, void 0);
+      __privateAdd(this, _width, void 0);
+      __privateAdd(this, _height, void 0);
+      __privateAdd(this, _position, void 0);
+      __publicField(this, "image");
+      __publicField(this, "imageLoaded", false);
+      __publicField(this, "calculatedImageSize");
+      __privateAdd(this, _mounted, false);
+      __privateSet(this, _src, src);
+      __privateSet(this, _fit, objectFit);
+      __privateSet(this, _width, width);
+      __privateSet(this, _height, height);
+      __privateSet(this, _position, objectPosition);
+      if (browser) {
+        this.image = new Image();
+        this.image.onload = () => {
+          this.imageLoaded = true;
+          if (!__privateGet(this, _mounted))
+            return;
+          this.markNeedsLayout();
+        };
+        this.image.src = src;
+      }
+    }
+    get src() {
+      return __privateGet(this, _src);
+    }
+    set src(value) {
+      if (__privateGet(this, _src) === value)
+        return;
+      __privateSet(this, _src, value);
+      if (this.image != null) {
+        this.image.src = value;
+      }
+      this.markNeedsLayout();
+    }
+    get fit() {
+      return __privateGet(this, _fit);
+    }
+    set fit(value) {
+      if (__privateGet(this, _fit) === value)
+        return;
+      __privateSet(this, _fit, value);
+      this.markNeedsLayout();
+    }
+    get width() {
+      return __privateGet(this, _width);
+    }
+    set width(value) {
+      if (__privateGet(this, _width) === value)
+        return;
+      __privateSet(this, _width, value);
+      this.markNeedsLayout();
+    }
+    get height() {
+      return __privateGet(this, _height);
+    }
+    set height(value) {
+      if (__privateGet(this, _height) === value)
+        return;
+      __privateSet(this, _height, value);
+      this.markNeedsLayout();
+    }
+    get position() {
+      return __privateGet(this, _position);
+    }
+    set position(value) {
+      if (__privateGet(this, _position) === value)
+        return;
+      __privateSet(this, _position, value);
+      this.markNeedsLayout();
+    }
+    getIntrinsicWidth() {
+      if (this.width != null)
+        return this.width;
+      return 0;
+    }
+    getIntrinsicHeight() {
+      if (this.height != null)
+        return this.height;
+      return 0;
+    }
+    preformLayout() {
+      var _a, _b;
+      __privateSet(this, _mounted, true);
+      if (!this.imageLoaded) {
+        this.size = this.constraints.constrain(
+          new size_default({
+            width: (_a = this.width) != null ? _a : 0,
+            height: (_b = this.height) != null ? _b : 0
+          })
+        );
+        return;
+      }
+      assert(this.image != null);
+      const sourceSize = { width: this.image.width, height: this.image.height };
+      const { width, height } = calculateSize(
+        sourceSize,
+        {
+          width: this.width && this.constraints.constrainWidth(this.width),
+          height: this.height && this.constraints.constrainHeight(this.height)
+        },
+        this.fit
+      );
+      const size = new size_default({ width, height });
+      this.size = this.constraints.constrain(size);
+      this.calculatedImageSize = calculateSize(
+        sourceSize,
+        {
+          width: this.size.width,
+          height: this.size.height
+        },
+        this.fit
+      ).image;
+    }
+    createCanvasPainter() {
+      return new ImageCanvasPatiner(this);
+    }
+    createSvgPainter() {
+      return new ImageSvgPainter(this);
+    }
+  };
+  _src = new WeakMap();
+  _fit = new WeakMap();
+  _width = new WeakMap();
+  _height = new WeakMap();
+  _position = new WeakMap();
+  _mounted = new WeakMap();
+  var ImageCanvasPatiner = class extends CanvasPainter {
+    performPaint(context, offset) {
+      const {
+        size,
+        image,
+        imageLoaded,
+        calculatedImageSize: imageSize,
+        position = "center"
+      } = this.renderObject;
+      if (!image)
+        return;
+      if (!imageLoaded)
+        return;
+      assert(imageSize != null);
+      const { sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight } = calculateImageRendering(
+        { width: image.width, height: image.height },
+        {
+          container: size,
+          image: { width: imageSize.width, height: imageSize.height }
+        },
+        position
+      );
+      context.canvas.drawImage(
+        image,
+        sx,
+        sy,
+        sWidth,
+        sHeight,
+        offset.x + dx,
+        offset.y + dy,
+        dWidth,
+        dHeight
+      );
+    }
+  };
+  var ImageSvgPainter = class extends SvgPainter {
+    createDefaultSvgEl(context) {
+      return {
+        img: context.createSvgEl("image")
+      };
+    }
+    performPaint({ img }) {
+      const { src } = this.renderObject;
+      img.setAttribute("href", src);
+      console.warn("not implemented svg painter on image widget");
+    }
+  };
+  var BaseImage_default = _Image;
+
+  // src/component/Image.ts
+  var Image_default = classToFunction_default(BaseImage_default);
 })();