@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/utils/hct/helper.js

@@ -0,0 +1,182 @@
+import CorePalette from './CorePalette.js';
+import Scheme from './Scheme.js';
+import { harmonize } from './blend.js';
+import * as colorUtils from './colorUtils.js';
+
+/** @typedef {import('./TonalPalette.js').default} TonalPalette */
+
+/**
+ * @param {string} value
+ * @return {number}
+ */
+function parseIntHex(value) {
+  // tslint:disable-next-line:ban
+  return Number.parseInt(value, 16);
+}
+
+/**
+ * @param {string} hex String representing color as hex code. Accepts strings with or
+ *     without leading #, and string representing the color using 3, 6, or 8
+ *     hex characters.
+ * @return {number} ARGB representation of color.
+ */
+function argbFromHex(hex) {
+  hex = hex.replace('#', '');
+  const isThree = hex.length === 3;
+  const isSix = hex.length === 6;
+  const isEight = hex.length === 8;
+  if (!isThree && !isSix && !isEight) {
+    throw new Error(`unexpected hex ${hex}`);
+  }
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (isThree) {
+    r = parseIntHex(hex.slice(0, 1).repeat(2));
+    g = parseIntHex(hex.slice(1, 2).repeat(2));
+    b = parseIntHex(hex.slice(2, 3).repeat(2));
+  } else if (isSix) {
+    r = parseIntHex(hex.slice(0, 2));
+    g = parseIntHex(hex.slice(2, 4));
+    b = parseIntHex(hex.slice(4, 6));
+  } else if (isEight) {
+    r = parseIntHex(hex.slice(2, 4));
+    g = parseIntHex(hex.slice(4, 6));
+    b = parseIntHex(hex.slice(6, 8));
+  }
+
+  return (
+    ((255 << 24) | ((r & 0x0_FF) << 16) | ((g & 0x0_FF) << 8) | (b & 0x0_FF))
+      >>> 0);
+}
+
+/**
+ * @param {number} argb ARGB representation of a color.
+ * @return {string} Hex string representing color, ex. #ff0000 for red.
+ */
+function hexFromArgb(argb) {
+  const r = colorUtils.redFromArgb(argb);
+  const g = colorUtils.greenFromArgb(argb);
+  const b = colorUtils.blueFromArgb(argb);
+  const outParts = [r.toString(16), g.toString(16), b.toString(16)];
+
+  // Pad single-digit output values
+  for (const [i, part] of outParts.entries()) {
+    if (part.length === 1) {
+      outParts[i] = `0${part}`;
+    }
+  }
+
+  return `#${outParts.join('')}`;
+}
+
+/**
+ * @param {number} argb
+ * @return {string}
+ */
+function cssVarFromArgb(argb) {
+  return [
+    colorUtils.redFromArgb(argb),
+    colorUtils.greenFromArgb(argb),
+    colorUtils.blueFromArgb(argb),
+  ].join(',');
+}
+
+/**
+ * @param {Scheme} scheme
+ * @return {string}
+ */
+function cssVariablesFromScheme(scheme) {
+  return /* css */`
+    :root {
+      --mdw-color__primary: ${cssVarFromArgb(scheme.primary)};
+      --mdw-color__on-primary: ${cssVarFromArgb(scheme.onPrimary)};
+      --mdw-color__primary-container: ${cssVarFromArgb(scheme.primaryContainer)};
+      --mdw-color__on-primary-container: ${cssVarFromArgb(scheme.onPrimaryContainer)};
+      --mdw-color__secondary: ${cssVarFromArgb(scheme.secondary)};
+      --mdw-color__on-secondary: ${cssVarFromArgb(scheme.onSecondary)};
+      --mdw-color__secondary-container: ${cssVarFromArgb(scheme.secondaryContainer)};
+      --mdw-color__on-secondary-container: ${cssVarFromArgb(scheme.onSecondaryContainer)};
+      --mdw-color__tertiary: ${cssVarFromArgb(scheme.tertiary)};
+      --mdw-color__on-tertiary: ${cssVarFromArgb(scheme.onTertiary)};
+      --mdw-color__tertiary-container: ${cssVarFromArgb(scheme.tertiaryContainer)};
+      --mdw-color__on-tertiary-container: ${cssVarFromArgb(scheme.onTertiaryContainer)};
+      --mdw-color__error: ${cssVarFromArgb(scheme.error)};
+      --mdw-color__on-error: ${cssVarFromArgb(scheme.onError)};
+      --mdw-color__error-container: ${cssVarFromArgb(scheme.errorContainer)};
+      --mdw-color__on-error-container: ${cssVarFromArgb(scheme.onErrorContainer)};
+      --mdw-color__background: ${cssVarFromArgb(scheme.background)};
+      --mdw-color__on-background: ${cssVarFromArgb(scheme.onBackground)};
+      --mdw-color__surface: ${cssVarFromArgb(scheme.surface)};
+      --mdw-color__on-surface: ${cssVarFromArgb(scheme.onSurface)};
+      --mdw-color__surface-variant: ${cssVarFromArgb(scheme.surfaceVariant)};
+      --mdw-color__on-surface-variant: ${cssVarFromArgb(scheme.onSurfaceVariant)};
+      --mdw-color__outline: ${cssVarFromArgb(scheme.outline)};
+      --mdw-color__outline-variant: ${cssVarFromArgb(scheme.outlineVariant)};
+      --mdw-color__shadow: ${cssVarFromArgb(scheme.shadow)};
+      --mdw-color__scrim: ${cssVarFromArgb(scheme.scrim)};
+      --mdw-color__inverse-surface: ${cssVarFromArgb(scheme.inverseSurface)};
+      --mdw-color__inverse-on-surface: ${cssVarFromArgb(scheme.inverseOnSurface)};
+      --mdw-color__inverse-primary: ${cssVarFromArgb(scheme.inversePrimary)};
+    }
+  `;
+}
+
+/**
+ * @param {string} name
+ * @param {TonalPalette} tonalPalette
+ * @param {boolean} [isDark]
+ */
+function cssVariablesFromCustom(name, tonalPalette, isDark) {
+  return /* css */`
+    :root {
+      --mdw-color__${name}: ${cssVarFromArgb(tonalPalette.tone(isDark ? 80 : 40))};
+      --mdw-color__on-${name}: ${cssVarFromArgb(tonalPalette.tone(isDark ? 20 : 100))};
+      --mdw-color__${name}-container: ${cssVarFromArgb(tonalPalette.tone(isDark ? 30 : 90))};
+      --mdw-color__on-${name}-container: ${cssVarFromArgb(tonalPalette.tone(isDark ? 90 : 10))};
+    }
+    .mdw-custom[color="${name}"] {
+      --mdw-bg: var(--mdw-color__${name});
+      --mdw-ink: var(--mdw-color__on-${name});
+    }
+    .mdw-custom[color="${name}-container"] {
+      --mdw-bg: var(--mdw-color__${name}-container);
+      --mdw-ink: var(--mdw-color__on-${name}-container);
+    }
+    .mdw-custom[ink="${name}"] {
+      --mdw-ink: var(--mdw-color__${name});
+    }
+    
+    
+  `;
+}
+
+/**
+ * @param {string} mainColor as hex
+ * @param {Iterable<[string,string]>} [customColors]
+ * @return {Record<string, string>}
+ */
+export function getScheme(mainColor, customColors = []) {
+  const argbColor = argbFromHex(mainColor);
+  const lightRules = [cssVariablesFromScheme(Scheme.light(argbColor))];
+  const darkRules = [cssVariablesFromScheme(Scheme.dark(argbColor))];
+  const lightContentRules = [cssVariablesFromScheme(Scheme.lightContent(argbColor))];
+  const darkContentRules = [cssVariablesFromScheme(Scheme.darkContent(argbColor))];
+  for (const [name, color] of customColors) {
+    const argbCustom = argbFromHex(color);
+    const blended = harmonize(argbCustom, argbColor);
+    const { a1: tp } = CorePalette.of(blended);
+    const { a1: ctp } = CorePalette.contentOf(blended);
+
+    lightRules.push(cssVariablesFromCustom(name, tp));
+    darkRules.push(cssVariablesFromCustom(name, tp, true));
+    lightContentRules.push(cssVariablesFromCustom(name, ctp));
+    darkContentRules.push(cssVariablesFromCustom(name, ctp, true));
+  }
+  return {
+    light: lightRules.join('\n'),
+    dark: darkRules.join('\n'),
+    lightContent: lightContentRules.join('\n'),
+    darkContent: darkContentRules.join('\n'),
+  };
+}

package/utils/hct/mathUtils.js

@@ -0,0 +1,153 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// This file is automatically generated. Do not modify it.
+
+/**
+ * Utility methods for mathematical operations.
+ */
+
+/**
+ * The signum function.
+ * @param {number} num
+ * @return {1|-1|0} 1 if num > 0, -1 if num < 0, and 0 if num = 0
+ */
+export function signum(num) {
+  if (num < 0) {
+    return -1;
+  }
+  if (num === 0) {
+    return 0;
+  }
+  return 1;
+}
+
+/**
+ * The linear interpolation function.
+ * @param {number} start
+ * @param {number} stop
+ * @param {number} amount
+ * @return {number} start if amount = 0 and stop if amount = 1
+ */
+export function lerp(start, stop, amount) {
+  return (1 - amount) * start + amount * stop;
+}
+
+/**
+ * Clamps an integer between two integers.
+ * @param {number} min
+ * @param {number} max
+ * @param {number} input
+ * @return {number} input when min <= input <= max, and either min or max
+ * otherwise.
+ */
+export function clampInt(min, max, input) {
+  if (input < min) {
+    return min;
+  } if (input > max) {
+    return max;
+  }
+
+  return input;
+}
+
+/**
+ * Clamps an integer between two floating-point numbers.
+ * @param {number} min
+ * @param {number} max
+ * @param {number} input
+ * @return {number} input when min <= input <= max, and either min or max
+ * otherwise.
+ */
+export function clampDouble(min, max, input) {
+  if (input < min) {
+    return min;
+  } if (input > max) {
+    return max;
+  }
+
+  return input;
+}
+
+/**
+ * Sanitizes a degree measure as an integer.
+ * @param {number} degrees
+ * @return {number} a degree measure between 0 (inclusive) and 360
+ * (exclusive).
+ */
+export function sanitizeDegreesInt(degrees) {
+  degrees %= 360;
+  if (degrees < 0) {
+    degrees += 360;
+  }
+  return degrees;
+}
+
+/**
+ * Sanitizes a degree measure as a floating-point number.
+ * @param {number} degrees
+ * @return {number} a degree measure between 0.0 (inclusive) and 360.0
+ * (exclusive).
+ */
+export function sanitizeDegreesDouble(degrees) {
+  degrees %= 360;
+  if (degrees < 0) {
+    degrees += 360;
+  }
+  return degrees;
+}
+
+/**
+ * Sign of direction change needed to travel from one angle to
+ * another.
+ *
+ * For angles that are 180 degrees apart from each other, both
+ * directions have the same travel distance, so either direction is
+ * shortest. The value 1.0 is returned in this case.
+ * @param {number} from The angle travel starts from, in degrees.
+ * @param {number} to The angle travel ends at, in degrees.
+ * @return {number} -1 if decreasing from leads to the shortest travel
+ * distance, 1 if increasing from leads to the shortest travel
+ * distance.
+ */
+export function rotationDirection(from, to) {
+  const increasingDifference = sanitizeDegreesDouble(to - from);
+  return increasingDifference <= 180 ? 1 : -1;
+}
+
+/**
+ * Distance of two points on a circle, represented using degrees.
+ * @param {number} a
+ * @param {number} b
+ * @return {number}
+ */
+export function differenceDegrees(a, b) {
+  return 180 - Math.abs(Math.abs(a - b) - 180);
+}
+
+/**
+ * Multiplies a 1x3 row vector with a 3x3 matrix.
+ * @param {number[]} row
+ * @param {number[][]} matrix
+ * @return {number[]}
+ */
+export function matrixMultiply(row, matrix) {
+  const a = row[0] * matrix[0][0] + row[1] * matrix[0][1] + row[2] * matrix[0][2];
+  const b = row[0] * matrix[1][0] + row[1] * matrix[1][1] + row[2] * matrix[1][2];
+  const c = row[0] * matrix[2][0] + row[1] * matrix[2][1] + row[2] * matrix[2][2];
+  return [a, b, c];
+}

package/utils/jsonMergePatch.js

@@ -0,0 +1,100 @@
+/** @link https://www.rfc-editor.org/rfc/rfc7396 */
+
+/**
+ * @template T1
+ * @template T2
+ * @param {T1} target
+ * @param {T2} patch
+ * @return {T1|T2|(T1 & T2)}
+ */
+export function applyMergePatch(target, patch) {
+  if (target === patch) return target;
+  if (patch == null || typeof patch !== 'object') return patch;
+  if (target != null && typeof target !== 'object') {
+    target = {};
+  }
+  for (const [key, value] of Object.entries(patch)) {
+    if (value == null) {
+      if (key in target) {
+        delete target[key];
+      }
+    } else {
+      target[key] = applyMergePatch(target[key], value);
+    }
+  }
+  return target;
+}
+
+/**
+ * Creates a JSON Merge patch based
+ * Allows different strategies for arrays
+ *  - `clone`: Per spec, clones all entries with no inspection.
+ *  - `object`: Convert to flattened, array-like objects. Requires
+ *    consumer of patch to be aware of the schema beforehand.
+ * @param {object|number|string|boolean} previous
+ * @param {object|number|string|boolean} current
+ * @param {'clone'|'object'} [arrayStrategy='clone']
+ * @return {any} Patch
+ */
+export function buildMergePatch(previous, current, arrayStrategy = 'clone') {
+  if (previous === current) return null;
+  if (current == null || typeof current !== 'object') return current;
+  if (previous == null || typeof previous !== 'object') {
+    return structuredClone(current);
+  }
+  const isArray = Array.isArray(current);
+  if (isArray && arrayStrategy === 'clone') {
+    return structuredClone(current);
+  }
+
+  const patch = {};
+  const previousKeys = new Set(Object.keys(previous));
+  for (const [key, value] of Object.entries(current)) {
+    previousKeys.delete(key);
+    if (value == null) {
+      console.warn('Nullish value found at', key);
+      continue;
+    }
+    const changes = buildMergePatch(previous[key], value, arrayStrategy);
+    if (changes === null) {
+      console.log('keeping', key);
+    } else {
+      patch[key] = changes;
+    }
+  }
+  for (const key of previousKeys) {
+    patch[key] = null;
+    console.log('removing', key);
+  }
+
+  if (isArray && arrayStrategy === 'object' && current.length !== previous.length) {
+    patch.length = current.length;
+  }
+
+  return patch;
+}
+
+/**
+ * Short-circuited JSON Merge Patch evaluation
+ * @template T
+ * @param {T} target
+ * @param {Partial<T>} patch
+ * @return {boolean}
+ */
+export function hasMergePatch(target, patch) {
+  if (target === patch) return false;
+  if (patch == null || typeof patch !== 'object') return true;
+  if (target != null && typeof target !== 'object') {
+    return true;
+  }
+  for (const [key, value] of Object.entries(patch)) {
+    if (value == null) {
+      if (key in target) {
+        return true;
+      }
+    } else if (hasMergePatch(target[key], value)) {
+      return true;
+    }
+  }
+  return false;
+}

package/utils/jsx-runtime.js

@@ -0,0 +1,101 @@
+/** eslint-env browser */
+
+export const Fragment = '$FRAGMENT';
+
+/**
+ * @param {string} tagName
+ * @param {Record<string, any> & { children: HTMLElement[], style:string|CSSStyleDeclaration }} attrs
+ * @return {HTMLElement|DocumentFragment}
+ */
+function createElementStatic(tagName, attrs) {
+  const { children } = attrs;
+  if (!children) throw new Error('Static elements much have children');
+
+  if (tagName === Fragment) {
+    const fragment = document.createDocumentFragment();
+    fragment.append(...children);
+    return fragment;
+  }
+
+  const element = document.createElement(tagName);
+  for (const [key, value] of Object.entries(attrs)) {
+    switch (key) {
+      case 'children':
+        element.append(...value);
+        break;
+      case 'class':
+        if (typeof value === 'string') {
+          element.classList.add(...(value.split(' ')));
+        } else {
+          element.classList.add(...value);
+        }
+        break;
+      case 'style':
+        if (typeof value === 'string') {
+          element.setAttribute('style', value);
+        } else {
+          Object.assign(element.style, value);
+        }
+        break;
+      default:
+        if (key in element) {
+          element[key] = value;
+        } else if (key.startsWith('data-')) {
+          element.dataset[key.slice('data-'.length)] = value;
+        } else {
+          element.setAttribute(key, value ?? '');
+        }
+    }
+  }
+  return element;
+}
+
+/**
+ * @param {string} tagName
+ * @param {{ children?: DocumentFragment|string }} attrs
+ * @return {HTMLElement|DocumentFragment}
+ */
+function createElementDynamic(tagName, attrs = {}) {
+  if (tagName === Fragment) {
+    const fragment = document.createDocumentFragment();
+    const { children } = attrs;
+    if (children == null) return fragment;
+    fragment.append(children);
+    return fragment;
+  }
+
+  const element = document.createElement(tagName);
+  for (const [key, value] of Object.entries(attrs)) {
+    switch (key) {
+      case 'children':
+        element.append(value);
+        break;
+      case 'class':
+        if (typeof value === 'string') {
+          element.classList.add(...(value.split(' ')));
+        } else {
+          element.classList.add(...value);
+        }
+        break;
+      case 'style':
+        if (typeof value === 'string') {
+          element.setAttribute('style', value);
+        } else {
+          Object.assign(element.style, value);
+        }
+        break;
+      default:
+        if (key in element) {
+          element[key] = value;
+        } else if (key.startsWith('data-')) {
+          element.dataset[key.slice('data-'.length)] = value;
+        } else {
+          element.setAttribute(key, value ?? '');
+        }
+    }
+  }
+  return element;
+}
+
+export const jsx = createElementDynamic;
+export const jsxs = createElementStatic;

package/utils/popup.js

@@ -0,0 +1,117 @@
+/**
+ * @typedef {Object} CanAnchorPopUpOptions
+ * @prop {Element|DOMRect} [anchor]
+ * @prop {number|'left'|'center'|'right'} [clientX]
+ * @prop {number|'top'|'center'|'bottom'} [clientY]
+ * @prop {number} [pageX]
+ * @prop {number} [pageY]
+ * @prop {Element|DOMRect} [popup]
+ * @prop {number} [width]
+ * @prop {number} [height]
+ * @prop {number} [offsetX] Offset from anchor
+ * @prop {number} [offsetY] Offset from anchor
+ * @prop {number} [margin] Margin from page
+ * @prop {'left'|'center'|'right'} [directionX='right']
+ * @prop {'up'|'center'|'down'} [directionY='down']
+ * @prop {boolean} [force=false]
+ */
+
+/** @param {CanAnchorPopUpOptions} options */
+export function canAnchorPopup(options) {
+  let { pageX, pageY, directionX, directionY } = options;
+  if (pageX == null || pageY == null) {
+    const { clientX, clientY, anchor } = options;
+    const rect = anchor instanceof Element ? anchor.getBoundingClientRect() : anchor;
+    if (pageX == null) {
+      switch (clientX) {
+        case 'left':
+        case null:
+        case undefined:
+          pageX = rect.left;
+          directionX ??= 'right';
+          break;
+        case 'center':
+          pageX = rect.left + rect.width / 2;
+          directionX ??= 'center';
+          break;
+        case 'right':
+          pageX = rect.right;
+          directionX ??= 'left';
+          break;
+        default:
+          pageX = rect.left + clientX;
+      }
+    }
+    if (pageY == null) {
+      switch (clientY) {
+        case 'top':
+          pageY = rect.top;
+          directionY ??= 'up';
+          break;
+        case 'center':
+          pageY = rect.top + rect.height / 2;
+          directionY ??= 'center';
+          break;
+        case 'bottom':
+        case null:
+        case undefined:
+          pageY = rect.bottom;
+          directionY ??= 'down';
+          break;
+        default:
+          pageY = rect.top + clientY;
+      }
+    }
+  }
+  let { width, height } = options;
+  if (width == null || height == null) {
+    const { popup } = options;
+    if (popup instanceof Element) {
+      width = popup.clientWidth;
+      height = popup.clientHeight;
+    } else {
+      width = popup.width;
+      height = popup.width;
+    }
+  }
+
+  // eslint-disable-next-line default-case
+  switch (directionX) {
+    case 'left':
+      pageX -= width;
+      break;
+    case 'center':
+      pageX -= width / 2;
+  }
+
+  // eslint-disable-next-line default-case
+  switch (directionY) {
+    case 'up':
+      pageY -= height;
+      break;
+    case 'center':
+      pageY -= height / 2;
+  }
+
+  const offsetX = options.offsetX ?? 0;
+  const offsetY = options.offsetY ?? 0;
+  pageX += offsetX;
+  pageY += offsetY;
+  const margin = options.margin ?? 0;
+  if (!options.force) {
+    if (pageX - margin < 0) return null;
+    if (pageY - margin < 0) return null;
+    if (pageX + width > (document.documentElement.clientWidth - margin)) return null;
+    if (pageY + height > (document.documentElement.clientHeight - margin)) return null;
+  }
+
+  return {
+    ...options,
+    offsetX,
+    offsetY,
+    pageX,
+    pageY,
+    transformOriginX: directionX === 'center' ? 'center' : (directionX === 'left' ? 'right' : 'left'),
+    transformOriginY: directionY === 'center' ? 'center' : (directionY === 'up' ? 'bottom' : 'top'),
+  };
+}