@meursyphus/flitter 2.0.1 → 2.0.2

package/index.js

@@ -13082,6 +13082,30 @@ var rose = {
   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 {
@@ -14002,10 +14026,10 @@ var RenderObject = class {
   dispose() {
     this.renderOwner.disposeRenderObject(this);
   }
-  getIntrinsicWidth(_height) {
+  getIntrinsicWidth(_height2) {
     return 0;
   }
-  getIntrinsicHeight(_width) {
+  getIntrinsicHeight(_width2) {
     return 0;
   }
   /*
@@ -20642,6 +20666,360 @@ dispatch_fn = function(type, event) {
   (_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);
 export {
   Align_default as Align,
   alignment_default as Alignment,
@@ -20709,6 +21087,7 @@ export {
   GestureDetector_default as GestureDetector,
   Globalkey_default as GlobalKey,
   Grid_default as Grid,
+  Image_default as Image,
   ImplicitlyAnimatedWidget,
   ImplicitlyAnimatedWidgetState,
   IndexedStack2 as IndexedStack,
@@ -20722,6 +21101,8 @@ export {
   matrix4_default as Matrix4,
   MultiChildRenderObject_default as MultiChildRenderObject,
   MultiChildRenderObjectWidget_default as MultiChildRenderObjectWidget,
+  ObjectFit,
+  ObjectPosition,
   offset_default as Offset,
   Opacity_default as Opacity,
   OverflowBox_default as OverflowBox,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meursyphus/flitter",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A declarative, widget-based library built on SVG for simplifying data visualization with a Flutter-like syntax.",
   "keywords": [
     "flitter",