Merge pull request #7 from sourcetoad/position-calculation-man-made

Calculates badge position for circle and square android icons

Author: erik-perri

samples/output/ic_launcher-mdpi.png

@@ -0,0 +1,6 @@
+import { Point } from '@imagemagick/magick-wasm';
+
+export default interface BadgePosition {
+  point: Point;
+  rotation: number;
+}

samples/output/ic_launcher-xxxhdpi-dark-transparent.png

@@ -0,0 +1,4 @@
+export default interface Rectangle {
+  height: number;
+  width: number;
+}

samples/output/ic_launcher-xxxhdpi-north.png

@@ -47,7 +47,6 @@ export default function addBadgeOverlay(
       badgeWithShadow,
       badgeGravity,
       insetWidth,
-      badge.width,
     );
 
     composite.quality = 80;

samples/output/ic_launcher-xxxhdpi-northeast.png

@@ -4,38 +4,17 @@ import {
   IMagickImage,
   MagickColors,
   MagickImage,
-  Point,
 } from '@imagemagick/magick-wasm';
 
-import BadgeGravity, {
-  getGravityFromBadgeGravity,
-} from '../types/BadgeGravity';
-import getInsetAtGravity from './getInsetAtGravity';
-
-function getCornerOffset(
-  insetWidth: number,
-  finalBadgeWidth: number,
-  finalBadgeHeight: number,
-): number {
-  // TODO Figure out a better way to calculate this that doesn't rely on magic
-  //      numbers.
-  return Math.round(insetWidth / 2 - finalBadgeWidth + finalBadgeHeight * 0.2);
-}
-
-function isEqualWithinThreshold(
-  insetX: number,
-  insetY: number,
-  threshold = 15,
-): boolean {
-  return Math.abs(((insetY - insetX) * 100) / insetX) <= threshold;
-}
+import BadgeGravity from '../types/BadgeGravity';
+import getCircularBadgePosition from './getCircularBadgePosition';
+import getUnequalBadgePosition from './getUnequalBadgePosition';
 
 export default function createImageBadgeComposite(
   image: IMagickImage,
   badge: IMagickImage,
   gravity: BadgeGravity,
   insetWidth: number,
-  badgeWidth: number,
 ): IMagickImage {
   const composite = MagickImage.create();
   composite.read(MagickColors.Transparent, image.width, image.height);
@@ -44,97 +23,19 @@ export default function createImageBadgeComposite(
   // We need to set a background before rotating, or it may fill it with white.
   badge.backgroundColor = MagickColors.None;
 
-  switch (gravity) {
-    case BadgeGravity.Northwest:
-    case BadgeGravity.Southeast:
-      badge.rotate(-45);
-      break;
-    case BadgeGravity.Northeast:
-    case BadgeGravity.Southwest:
-      badge.rotate(45);
-      break;
-  }
-
-  const edgeScale = 1.1;
-  const offset = new Point(0, 0);
-
-  switch (gravity) {
-    case BadgeGravity.Northwest:
-    case BadgeGravity.Northeast: {
-      const xInset = getInsetAtGravity(
-        composite,
-        gravity === BadgeGravity.Northwest ? Gravity.West : Gravity.East,
-      );
-      const yInset = getInsetAtGravity(composite, Gravity.North);
-
-      if (isEqualWithinThreshold(xInset, yInset)) {
-        const cornerOffset = getInsetAtGravity(
-          composite,
-          Gravity.North,
-          getCornerOffset(insetWidth, badge.width, badge.height),
-        );
-        offset.x = cornerOffset;
-        offset.y = cornerOffset;
-      } else {
-        offset.x = xInset;
-        offset.y = yInset;
-      }
-      break;
-    }
-
-    case BadgeGravity.North:
-      offset.x = 0;
-      offset.y = Math.round(
-        edgeScale *
-          getInsetAtGravity(
-            composite,
-            Gravity.North,
-            Math.round(badgeWidth / 2),
-          ),
-      );
-      break;
-
-    case BadgeGravity.Southwest:
-    case BadgeGravity.Southeast: {
-      const xInset = getInsetAtGravity(
-        composite,
-        gravity === BadgeGravity.Southwest ? Gravity.West : Gravity.East,
-      );
-      const yInset = getInsetAtGravity(composite, Gravity.South);
-
-      if (isEqualWithinThreshold(xInset, yInset)) {
-        const cornerOffset = getInsetAtGravity(
-          composite,
-          Gravity.South,
-          getCornerOffset(insetWidth, badge.width, badge.height),
-        );
-        offset.x = cornerOffset;
-        offset.y = cornerOffset;
-      } else {
-        offset.x = xInset;
-        offset.y = yInset;
-      }
-      break;
-    }
+  const { rotation, point } =
+    getUnequalBadgePosition(composite, badge, gravity) ??
+    getCircularBadgePosition(composite, badge, insetWidth / 2, gravity);
 
-    case BadgeGravity.South:
-      offset.x = 0;
-      offset.y = Math.round(
-        edgeScale *
-          getInsetAtGravity(
-            composite,
-            Gravity.South,
-            Math.round(badgeWidth / 2),
-          ),
-      );
-      break;
+  if (rotation) {
+    badge.rotate(rotation);
   }
 
   composite.compositeGravity(
     badge,
-    getGravityFromBadgeGravity(gravity),
+    Gravity.Northwest,
     CompositeOperator.Over,
-    offset,
+    point,
   );
 
   return composite;

samples/output/ic_launcher-xxxhdpi-northwest.png

@@ -0,0 +1,45 @@
+import { Point } from '@imagemagick/magick-wasm';
+
+import BadgeGravity from '../types/BadgeGravity';
+import BadgePosition from '../types/BadgePosition';
+import Rectangle from '../types/Rectangle';
+import getRotatedBadgeInfo from './getRotatedBadgeInfo';
+
+/**
+ * Returns the position and rotation of the badge assuming the badge is circular
+ * with equal insets.
+ */
+export default function getCircularBadgePosition(
+  container: Rectangle,
+  badge: Rectangle,
+  circleRadius: number,
+  gravity: BadgeGravity,
+): BadgePosition {
+  const { angle, rotation, rotatedWidth, rotatedHeight } = getRotatedBadgeInfo(
+    badge,
+    gravity,
+  );
+
+  // Calculate the distance from the center of the container to the bottom-center of
+  // the badge.
+  const distance = Math.sqrt(
+    Math.pow(circleRadius, 2) - Math.pow(badge.width / 2, 2),
+  );
+
+  const trigAngle = ((angle - 90) * Math.PI) / 180;
+
+  const x =
+    container.width / 2 -
+    (distance - badge.height / 2) * Math.cos(trigAngle) +
+    -rotatedWidth / 2;
+
+  const y =
+    container.height / 2 +
+    (-distance + badge.height / 2) * Math.sin(trigAngle) +
+    -rotatedHeight / 2;
+
+  return {
+    point: new Point(x, y),
+    rotation,
+  };
+}

samples/output/ic_launcher-xxxhdpi-south.png

@@ -0,0 +1,42 @@
+import BadgeGravity from '../types/BadgeGravity';
+import Rectangle from '../types/Rectangle';
+
+const badgeGravityAngles: Record<BadgeGravity, number> = {
+  [BadgeGravity.North]: 180,
+  [BadgeGravity.Northeast]: -135,
+  [BadgeGravity.Northwest]: 135,
+  [BadgeGravity.South]: 0,
+  [BadgeGravity.Southeast]: -45,
+  [BadgeGravity.Southwest]: 45,
+};
+
+const badgeRotationDegrees: Record<BadgeGravity, number> = {
+  [BadgeGravity.North]: 0,
+  [BadgeGravity.Northeast]: 45,
+  [BadgeGravity.Northwest]: -45,
+  [BadgeGravity.South]: 0,
+  [BadgeGravity.Southeast]: -45,
+  [BadgeGravity.Southwest]: 45,
+};
+
+export default function getRotatedBadgeInfo(
+  badge: Rectangle,
+  gravity: BadgeGravity,
+) {
+  const angle = badgeGravityAngles[gravity];
+  const radianAngle = (angle * Math.PI) / 180;
+
+  const rotatedWidth =
+    badge.width * Math.abs(Math.cos(radianAngle)) +
+    badge.height * Math.abs(Math.sin(radianAngle));
+  const rotatedHeight =
+    badge.width * Math.abs(Math.sin(radianAngle)) +
+    badge.height * Math.abs(Math.cos(radianAngle));
+
+  return {
+    angle,
+    rotation: badgeRotationDegrees[gravity],
+    rotatedHeight,
+    rotatedWidth,
+  };
+}

samples/output/ic_launcher-xxxhdpi-southwest.png

@@ -0,0 +1,81 @@
+import { Gravity, IMagickImage, Point } from '@imagemagick/magick-wasm';
+
+import BadgeGravity from '../types/BadgeGravity';
+import BadgePosition from '../types/BadgePosition';
+import getInsetAtGravity from './getInsetAtGravity';
+import getRotatedBadgeInfo from './getRotatedBadgeInfo';
+
+function isEqualWithinThreshold(
+  insetX: number,
+  insetY: number,
+  threshold = 15,
+): boolean {
+  const percentageDifference = Math.abs(((insetY - insetX) * 100) / insetX);
+
+  return percentageDifference <= threshold;
+}
+
+/**
+ * Returns the position and rotation of the badge if the image is found to have
+ * non-equal insets.
+ *
+ * Only supports northeast, northwest, southeast, and southwest.
+ */
+export default function getUnequalBadgePosition(
+  container: IMagickImage,
+  badge: IMagickImage,
+  gravity: BadgeGravity,
+): BadgePosition | undefined {
+  if (gravity === BadgeGravity.North || gravity === BadgeGravity.South) {
+    return undefined;
+  }
+
+  const xInset = getInsetAtGravity(
+    container,
+    [BadgeGravity.Northwest, BadgeGravity.Southwest].includes(gravity)
+      ? Gravity.West
+      : Gravity.East,
+  );
+  const yInset = getInsetAtGravity(
+    container,
+    [BadgeGravity.Northwest, BadgeGravity.Northeast].includes(gravity)
+      ? Gravity.North
+      : Gravity.South,
+  );
+  if (isEqualWithinThreshold(xInset, yInset)) {
+    return undefined;
+  }
+
+  const { rotation, rotatedWidth, rotatedHeight } = getRotatedBadgeInfo(
+    badge,
+    gravity,
+  );
+
+  switch (gravity) {
+    case BadgeGravity.Northwest:
+      return {
+        point: new Point(xInset, yInset),
+        rotation,
+      };
+    case BadgeGravity.Northeast:
+      return {
+        point: new Point(container.width - xInset - rotatedWidth, yInset),
+        rotation,
+      };
+    case BadgeGravity.Southwest:
+      return {
+        point: new Point(xInset, container.height - yInset - rotatedHeight),
+        rotation,
+      };
+    case BadgeGravity.Southeast:
+      return {
+        point: new Point(
+          container.width - xInset - rotatedWidth,
+          container.height - yInset - rotatedHeight,
+        ),
+        rotation,
+      };
+  }
+
+  return undefined;
+}