@shortfuse/materialdesignweb 0.8.0 → 0.9.1

package/utils/pixelmatch.js

@@ -0,0 +1,363 @@
+/**
+ * @license ISC License
+ * Copyright (c) 2019, Mapbox
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any purpose
+ * with or without fee is hereby granted, provided that the above copyright notice
+ * and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+ * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+ * FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+ * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+ * OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+ * TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+ * THIS SOFTWARE.
+ */
+
+/** @enum {Object} */
+const DEFAULT_OPTIONS = {
+  /* matching threshold (0 to 1); smaller is more sensitive */
+  threshold: 0.1,
+  /* whether to skip anti-aliasing detection */
+  includeAA: false,
+  /** opacity of original image in diff output */
+  alpha: 0.1,
+  /* color of anti-aliased pixels in diff output */
+  /** @type {[number,number,number]} */
+  aaColor: [255, 255, 0],
+  /** @type {[number,number,number]} */
+  diffColor: [255, 0, 0], // color of different pixels in diff output
+  /**
+   * whether to detect dark on light differences between img1 and img2 and set
+   * an alternative color to differentiate between the two
+   * @type {[number,number,number]}
+   */
+  diffColorAlt: null,
+  /** draw the diff over a transparent background (a mask) */
+  diffMask: false,
+};
+
+/**
+ * @param {ArrayBufferView} arr
+ */
+function isPixelData(arr) {
+  // work around instanceof Uint8Array not working properly in some Jest environments
+  // @ts-ignore Bad typings
+  return ArrayBuffer.isView(arr) && (arr).constructor.BYTES_PER_ELEMENT === 1;
+}
+
+/**
+ * Check if a pixel has 3+ adjacent pixels of the same color.
+ * @param {ArrayLike<number>} img
+ * @param {number} x1
+ * @param {number} y1
+ * @param {number} width
+ * @param {number} height
+ */
+function hasManySiblings(img, x1, y1, width, height) {
+  const x0 = Math.max(x1 - 1, 0);
+  const y0 = Math.max(y1 - 1, 0);
+  const x2 = Math.min(x1 + 1, width - 1);
+  const y2 = Math.min(y1 + 1, height - 1);
+  const pos = (y1 * width + x1) * 4;
+  let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
+
+  // go through 8 adjacent pixels
+  for (let x = x0; x <= x2; x++) {
+    for (let y = y0; y <= y2; y++) {
+      if (x === x1 && y === y1) continue;
+
+      const pos2 = 4 * (y * width + x);
+      if (img[pos] === img[pos2]
+                && img[pos + 1] === img[pos2 + 1]
+                && img[pos + 2] === img[pos2 + 2]
+                && img[pos + 3] === img[pos2 + 3]) zeroes++;
+
+      if (zeroes > 2) return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * blend semi-transparent color with white
+ * @param {number} color
+ * @param {number} alpha
+ */
+function blend(color, alpha) {
+  return 255 + (color - 255) * alpha;
+}
+
+/**
+ * Returns Y from RGB=>YIQ
+ * @param {number} red
+ * @param {number} green
+ * @param {number} blue
+ */
+function yFromRGBToYIQ(red, green, blue) {
+  return (0.298_895_31 * red) + (0.586_622_47 * green) + (0.114_482_23 * blue);
+}
+
+/**
+ * Returns I from RGB=>YIQ
+ * @param {number} red
+ * @param {number} green
+ * @param {number} blue
+ */
+function iFromRGBToYIQ(red, green, blue) {
+  return (0.595_977_99 * red) + (-0.274_176_1 * green) + (-0.321_801_89 * blue);
+}
+
+/**
+ * Returns Q from RGB=>YIQ
+ * @param {number} red
+ * @param {number} green
+ * @param {number} blue
+ * @return {number}
+ */
+function qFromRGBToYIQ(red, green, blue) {
+  return (0.211_470_17 * red) + (-0.522_617_11 * green) + (0.311_146_94 * blue);
+}
+
+/**
+ * Returns YIQ from RGB
+ * @param {number} red
+ * @param {number} green
+ * @param {number} blue
+ * @return {{y:number, i:number, q:number}}
+ */
+function yiqFromRGB(red, green, blue) {
+  return {
+    y: yFromRGBToYIQ(red, green, blue),
+    i: iFromRGBToYIQ(red, green, blue),
+    q: qFromRGBToYIQ(red, green, blue),
+  };
+}
+
+/**
+ * calculate color difference according to the paper "Measuring perceived color
+ * difference using YIQ NTSC transmission color space in mobile applications"
+ * by Y. Kotsarenko and F. Ramos
+ * @param {ArrayLike<number>} img1
+ * @param {ArrayLike<number>} img2
+ * @param {number} k
+ * @param {number} m
+ * @param {boolean} [yOnly]
+ * @return {number}
+ */
+function colorDelta(img1, img2, k, m, yOnly) {
+  let r1 = img1[k + 0];
+  let g1 = img1[k + 1];
+  let b1 = img1[k + 2];
+  let a1 = img1[k + 3];
+
+  let r2 = img2[m + 0];
+  let g2 = img2[m + 1];
+  let b2 = img2[m + 2];
+  let a2 = img2[m + 3];
+
+  if (a1 === a2 && r1 === r2 && g1 === g2 && b1 === b2) return 0;
+
+  if (a1 < 255) {
+    a1 /= 255;
+    r1 = blend(r1, a1);
+    g1 = blend(g1, a1);
+    b1 = blend(b1, a1);
+  }
+
+  if (a2 < 255) {
+    a2 /= 255;
+    r2 = blend(r2, a2);
+    g2 = blend(g2, a2);
+    b2 = blend(b2, a2);
+  }
+
+  if (yOnly) {
+    return yFromRGBToYIQ(r1, g1, b1) - yFromRGBToYIQ(r2, g2, b2);
+  }
+
+  const { y: y1, i: i1, q: q1 } = yiqFromRGB(r1, g1, b1);
+  const { y: y2, i: i2, q: q2 } = yiqFromRGB(r2, g2, b2);
+
+  const y = y1 - y2;
+  const i = i1 - i2;
+  const q = q1 - q2;
+
+  const delta = (0.5053 * y * y) + (0.299 * i * i) + (0.1957 * q * q);
+
+  // encode whether the pixel lightens or darkens in the sign
+  return y1 > y2 ? -delta : delta;
+}
+
+/**
+ * @param {Uint8Array|Uint8ClampedArray} destination
+ * @param {number} index
+ * @param {number} red
+ * @param {number} green
+ * @param {number} blue
+ * @return {void}
+ */
+function drawPixel(destination, index, red, green, blue) {
+  destination[index + 0] = red;
+  destination[index + 1] = green;
+  destination[index + 2] = blue;
+  destination[index + 3] = 255;
+}
+
+/**
+ * @param {Uint8Array|Uint8ClampedArray} source
+ * @param {number} index
+ * @param {number} alpha
+ * @param {Uint8Array|Uint8ClampedArray} destination
+ */
+function drawGrayPixel(source, index, alpha, destination) {
+  const red = source[index + 0];
+  const green = source[index + 1];
+  const blue = source[index + 2];
+  const val = blend(yFromRGBToYIQ(red, green, blue), (alpha * source[index + 3]) / 255);
+  drawPixel(destination, index, val, val, val);
+}
+
+/**
+ * Check if a pixel is likely a part of anti-aliasing;
+ *
+ * Based on "Anti-aliased Pixel and Intensity Slope Detector" paper by V.
+ * Vysniauskas, 2009
+ * @param {ArrayLike<number>} img
+ * @param {number} x1
+ * @param {number} y1
+ * @param {number} width
+ * @param {number} height
+ * @param {ArrayLike<number>} img2
+ */
+function antialiased(img, x1, y1, width, height, img2) {
+  const x0 = Math.max(x1 - 1, 0);
+  const y0 = Math.max(y1 - 1, 0);
+  const x2 = Math.min(x1 + 1, width - 1);
+  const y2 = Math.min(y1 + 1, height - 1);
+  const pos = (y1 * width + x1) * 4;
+  let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
+  let min = 0;
+  let max = 0;
+  let minX; let minY; let maxX; let
+    maxY;
+
+  // go through 8 adjacent pixels
+  for (let x = x0; x <= x2; x++) {
+    for (let y = y0; y <= y2; y++) {
+      if (x === x1 && y === y1) continue;
+
+      // brightness delta between the center pixel and adjacent one
+      const delta = colorDelta(img, img, pos, (y * width + x) * 4, true);
+
+      // count the number of equal, darker and brighter adjacent pixels
+      if (delta === 0) {
+        zeroes++;
+        // if found more than 2 equal siblings, it's definitely not anti-aliasing
+        if (zeroes > 2) return false;
+
+        // remember the darkest pixel
+      } else if (delta < min) {
+        min = delta;
+        minX = x;
+        minY = y;
+
+        // remember the brightest pixel
+      } else if (delta > max) {
+        max = delta;
+        maxX = x;
+        maxY = y;
+      }
+    }
+  }
+
+  // if there are no both darker and brighter pixels among siblings, it's not anti-aliasing
+  if (min === 0 || max === 0) return false;
+
+  // if either the darkest or the brightest pixel has 3+ equal siblings in both images
+  // (definitely not anti-aliased), this pixel is anti-aliased
+  return (hasManySiblings(img, minX, minY, width, height)
+            && hasManySiblings(img2, minX, minY, width, height))
+      || (hasManySiblings(img, maxX, maxY, width, height)
+        && hasManySiblings(img2, maxX, maxY, width, height));
+}
+
+/**
+ * @param {Uint8Array|Uint8ClampedArray} img1
+ * @param {Uint8Array|Uint8ClampedArray} img2
+ * @param {Uint8Array|Uint8ClampedArray} output
+ * @param {number} width
+ * @param {number} height
+ * @param {typeof DEFAULT_OPTIONS} [options]
+ * @return {number}
+ */
+export function pixelmatch(img1, img2, output, width, height, options) {
+  if (!isPixelData(img1) || !isPixelData(img2) || (output && !isPixelData(output))) {
+    throw new Error('Image data: Uint8Array, Uint8ClampedArray or Buffer expected.');
+  }
+
+  if (img1.length !== img2.length || (output && output.length !== img1.length)) {
+    // throw new Error('Image sizes do not match.');
+    return Number.POSITIVE_INFINITY;
+  }
+
+  if (img1.length !== width * height * 4) {
+    // throw new Error('Image data size does not match width/height.');
+    return Number.POSITIVE_INFINITY;
+  }
+  options = { ...DEFAULT_OPTIONS, ...options };
+
+  // check if images are identical
+  const len = width * height;
+  const a32 = new Uint32Array(img1.buffer, img1.byteOffset, len);
+  const b32 = new Uint32Array(img2.buffer, img2.byteOffset, len);
+  let identical = true;
+
+  for (let i = 0; i < len; i++) {
+    if (a32[i] !== b32[i]) { identical = false; break; }
+  }
+  if (identical) { // fast path if identical
+    if (output && !options.diffMask) {
+      for (let i = 0; i < len; i++) drawGrayPixel(img1, 4 * i, options.alpha, output);
+    }
+    return 0;
+  }
+
+  // maximum acceptable square distance between two colors;
+  // 35215 is the maximum possible value for the YIQ difference metric
+  const maxDelta = 35_215 * options.threshold * options.threshold;
+  let diff = 0;
+
+  // compare each pixel of one image against the other one
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const pos = (y * width + x) * 4;
+
+      // squared YUV distance between colors at this pixel position, negative if the img2 pixel is darker
+      const delta = colorDelta(img1, img2, pos, pos);
+
+      // the color difference is above the threshold
+      if (Math.abs(delta) > maxDelta) {
+        // check it's a real rendering difference or just anti-aliasing
+        if (!options.includeAA && (antialiased(img1, x, y, width, height, img2)
+                                           || antialiased(img2, x, y, width, height, img1))) {
+          // one of the pixels is anti-aliasing; draw as yellow and do not count as difference
+          // note that we do not include such pixels in a mask
+          if (output && !options.diffMask) drawPixel(output, pos, ...options.aaColor);
+        } else {
+          // found substantial difference not caused by anti-aliasing; draw it as such
+          if (output) {
+            drawPixel(output, pos, ...(delta < 0 && (options.diffColorAlt || options.diffColor)));
+          }
+          diff++;
+        }
+      } else if (output // pixels are similar; draw background as grayscale image blended with white
+                && !options.diffMask) drawGrayPixel(img1, pos, options.alpha, output);
+    }
+  }
+
+  // return the number of different pixels
+  return diff;
+}

package/utils/popup.js

@@ -1,11 +1,21 @@
+/**
+ * @typedef {Object} DOMRectLike
+ * @prop {number} left
+ * @prop {number} right
+ * @prop {number} top
+ * @prop {number} bottom
+ * @prop {number} width
+ * @prop {number} height
+ */
+
 /**
  * @typedef {Object} CanAnchorPopUpOptions
- * @prop {Element|DOMRect} [anchor]
+ * @prop {Element|DOMRectLike} [anchor]
  * @prop {number|'left'|'center'|'right'} [clientX]
  * @prop {number|'top'|'center'|'bottom'} [clientY]
  * @prop {number} [pageX]
  * @prop {number} [pageY]
- * @prop {Element|DOMRect} [popup]
+ * @prop {Element|{width:number, height:number}} [popup]
  * @prop {number} [width]
  * @prop {number} [height]
  * @prop {number} [offsetX] Offset from anchor
@@ -19,9 +29,24 @@
 /** @param {CanAnchorPopUpOptions} options */
 export function canAnchorPopup(options) {
   let { pageX, pageY, directionX, directionY } = options;
+  const pageWidth = document.documentElement.clientWidth;
+  const pageHeight = document.documentElement.clientHeight;
   if (pageX == null || pageY == null) {
     const { clientX, clientY, anchor } = options;
-    const rect = anchor instanceof Element ? anchor.getBoundingClientRect() : anchor;
+    let rect;
+    if (anchor) {
+      rect = anchor instanceof Element ? anchor.getBoundingClientRect() : anchor;
+    } else {
+      rect = {
+        left: 0,
+        width: pageWidth,
+        right: pageWidth,
+        top: 0,
+        bottom: pageHeight,
+        height: pageHeight,
+      };
+    }
+
     if (pageX == null) {
       switch (clientX) {
         case 'left':
@@ -72,7 +97,7 @@ export function canAnchorPopup(options) {
       height = popup.clientHeight;
     } else {
       width = popup.width;
-      height = popup.width;
+      height = popup.height;
     }
   }
 
@@ -81,42 +106,84 @@ export function canAnchorPopup(options) {
   let bottom;
   let left;
   const margin = options.margin ?? 0;
-  const pageTop = margin;
-  const pageBottom = document.documentElement.clientHeight - margin;
-  const pageRight = document.documentElement.clientWidth - margin;
-  const pageLeft = margin;
+
+  let pageTop = margin;
+  let pageBottom = -margin;
+  let pageLeft = margin;
+  let pageRight = -margin;
+
+  if (window.visualViewport) {
+    pageTop += window.visualViewport.offsetTop;
+    pageBottom += window.visualViewport.offsetTop + window.visualViewport.height;
+    pageLeft += window.visualViewport.offsetLeft;
+    pageRight += window.visualViewport.offsetLeft + window.visualViewport.width;
+  } else {
+    pageBottom += pageHeight;
+    pageRight += pageWidth;
+  }
 
   const offsetX = options.offsetX ?? 0;
   const offsetY = options.offsetY ?? 0;
   pageX += offsetX;
   pageY += offsetY;
 
+  let cssTop = 'auto';
+  let cssRight = 'auto';
+  let cssBottom = 'auto';
+  let cssLeft = 'auto';
+  let maxHeight = null;
+  let maxWidth = null;
+
   switch (directionY) {
     case 'up':
       bottom = Math.min(pageY, pageBottom);
       top = Math.max(bottom - height, pageTop);
+      cssBottom = `${pageHeight - bottom}px`;
+      if (top === pageTop) {
+        maxHeight = `${bottom - pageTop}px`;
+      }
       break;
     case 'center':
       top = Math.max(pageY - height / 2, pageTop);
       bottom = Math.min(pageY + height / 2, pageBottom);
+      cssTop = `${top}px`;
+      if (bottom === pageBottom) {
+        maxHeight = `${pageBottom - pageTop}px`;
+      }
       break;
     default:
       top = Math.max(pageY, pageTop);
       bottom = Math.min(top + height, pageBottom);
+      cssTop = `${top}px`;
+      if (bottom === pageBottom) {
+        maxHeight = `${pageBottom - top}px`;
+      }
   }
 
   switch (directionX) {
     case 'left':
       right = Math.min(pageX, pageRight);
       left = Math.max(right - width, pageLeft);
+      cssRight = `${pageWidth - right}px`;
+      if (left === pageLeft) {
+        maxWidth = `${right - pageLeft}px`;
+      }
       break;
     case 'center':
       left = Math.max(pageX - width / 2, pageLeft);
       right = Math.min(pageX + width / 2, pageRight);
+      cssLeft = `${left}px`;
+      if (right === pageRight) {
+        maxWidth = `${pageRight - pageLeft}px`;
+      }
       break;
     default:
       left = Math.max(pageX, pageLeft);
       right = Math.min(left + width, pageRight);
+      cssLeft = `${left}px`;
+      if (right === pageRight) {
+        maxWidth = `${pageRight - left}px`;
+      }
   }
 
   // compute area
@@ -125,6 +192,8 @@ export function canAnchorPopup(options) {
 
   const visibility = realSize / fullSize;
 
+  const transformOriginX = directionX === 'center' ? 'center' : (directionX === 'left' ? 'right' : 'left');
+  const transformOriginY = directionY === 'center' ? 'center' : (directionY === 'up' ? 'bottom' : 'top');
   return {
     ...options,
     top,
@@ -132,7 +201,14 @@ export function canAnchorPopup(options) {
     bottom,
     left,
     visibility,
-    transformOriginX: directionX === 'center' ? 'center' : (directionX === 'left' ? 'right' : 'left'),
-    transformOriginY: directionY === 'center' ? 'center' : (directionY === 'up' ? 'bottom' : 'top'),
+    styles: {
+      top: cssTop,
+      bottom: cssBottom,
+      left: cssLeft,
+      right: cssRight,
+      maxWidth,
+      maxHeight,
+      transformOrigin: `${transformOriginY} ${transformOriginX}`,
+    },
   };
 }

package/utils/searchParams.js

@@ -0,0 +1,22 @@
+/** @type {URLSearchParams} */
+let currentSearchParams = null;
+
+/** @return {URLSearchParams} */
+export function getCurrentSearchParams() {
+  if (!currentSearchParams) {
+    let url;
+    try {
+      url = import.meta.url;
+    } catch {}
+    if (!url) {
+      try {
+        url = /** @type {HTMLScriptElement} */ (document.currentScript).src;
+      } catch {}
+    }
+    if (!url) {
+      return new URLSearchParams();
+    }
+    currentSearchParams = new URL(url).searchParams;
+  }
+  return currentSearchParams;
+}

package/components/Button.md

@@ -1,61 +0,0 @@
-# Syntax
-
-
-## Elevated
-```html
-  <mdw-button elevated>Elevated</mdw-button>
-  <mdw-button disabled elevated>Elevated (disabled)</mdw-button>
-  <mdw-button elevated icon=search>Elevated icon</mdw-button>
-  <mdw-button elevated color=surface ink=tertiary>Elevated Surface-Tertiary</mdw-button>
-```
-
-## Filled
-```html
-  <mdw-button filled>Filled button</mdw-button>
-  <mdw-button disabled filled>Filled button (Disabled)</mdw-button>
-```
-
-## Filled Tonal
-```html
-  <mdw-button filled=tonal>Filled tonal button</mdw-button>
-  <mdw-button disabled filled=tonal>Filled tonal button (Disabled)</mdw-button>
-  <mdw-button filled=tonal icon=search>Filled tonal button</mdw-button>
-```
-
-## Outlined
-```html
-  <mdw-button outlined>Outlined</mdw-button>
-  <mdw-button outlined icon=add>Outlined icon</mdw-button>
-  <mdw-button outlinedsurface icon=add>Outlined surface icon</mdw-button>
-  <mdw-button disabled outlined>Outlined (Disabled)</mdw-button>
-  <mdw-button disabled outlined icon=add>Outlined icon (Disabled)</mdw-button>
-```
-
-## Text
-```html
-  <mdw-button>Text</mdw-button>
-  <mdw-button ink=tertiary icon=add>Tertiary</mdw-button>
-  <mdw-button ink=tertiary disabled>Text (Disabled)</mdw-button>
-  <mdw-button ink=primary disabled icon=add>Icon text (Disabled)</mdw-button>
-```
-
-## Custom
-```html
-  <mdw-button ink=yellow>Custom text</mdw-button>
-  <mdw-button elevated ink=yellow>Custom elevated</mdw-button>
-  <mdw-button filled color=yellow>Custom filled</mdw-button>
-  <mdw-button filled=tonal icon=add color=yellow-container>Custom tonal</mdw-button>
-  <mdw-button outlined ink=yellow>Custom outlined</mdw-button>
-  <mdw-button disabled outlined>Outlined (Disabled)</mdw-button>
-  <mdw-button disabled outlined icon=add>Outlined icon (Disabled)</mdw-button>
-  <mdw-button disabled ink=yellow>Custom text</mdw-button>
-  <mdw-button disabled elevated=yellow>Custom elevated</mdw-button>
-  <mdw-button disabled filled color=yellow>Custom filled</mdw-button>
-  <mdw-button disabled filled=tonal icon=add color=yellow-container>Custom tonal</mdw-button>
-```
-
-```js
-  import Button from "components/Button.js";
-
-  Button.register()
-```

package/components/ExtendedFab.js

@@ -1,32 +0,0 @@
-import Button from './Button.js';
-
-export default Button
-  .extend()
-  .css`
-    /* https://m3.material.io/components/extended-fab/specs */
-
-    :host {
-      --mdw-bg: var(--mdw-color__surface-container-high);
-      --mdw-ink: var(--mdw-color__primary);
-      --mdw-shape__size: 16px;
-      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__3);
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__4);
-      min-inline-size: 48px;
-      padding: calc(16px + (var(--mdw-density) * 2px));
-    }
-
-    #icon {
-      font-size: 24px;
-    }
-
-    :host(:where([lowered])) {
-      --mdw-bg: var(--mdw-color__surface-container-low);
-      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
-    }
-  `
-  .observe({
-    filled: { empty: 'tonal' },
-    elevated: { type: 'boolean', empty: true },
-  })
-  .autoRegister('mdw-extended-fab');