goblin-gadgets 3.2.2 → 3.2.3

package/widgets/retro-gear/helpers.js

@@ -1,156 +1,156 @@
-import {ColorManipulator} from 'goblin-theme';
-import svg from '../helpers/svg-helpers';
-import geom from '../helpers/geom-helpers';
-import {Unit} from 'goblin-theme';
-
-/******************************************************************************/
-
-function _getRadius(r, toothThickness) {
-  return {
-    r1: r * 0.1, // axe
-    r2: r * 0.15,
-    r3: r - toothThickness,
-    r4: r - toothThickness / 1.5,
-    r5: r - 1, // outside
-  };
-}
-
-/******************************************************************************/
-
-// Outer teeth and axis.
-function _getGearLightPath(cx, cy, r, toothThickness, toothCount) {
-  cx = Unit.toInt(cx);
-  cy = Unit.toInt(cy);
-  r = Unit.toInt(r);
-  r = _getRadius(r, toothThickness);
-  const rs = r.r4 + (r.r5 - r.r4) * 0.4;
-
-  const path = svg.createPath();
-
-  const a1 = 180 / toothCount;
-  const a2 = a1 / 5;
-  const a3 = a1 / 10;
-  let a = 0;
-  for (let i = 0; i < toothCount * 2; i++) {
-    const r1 = i % 2 === 0 ? r.r5 : r.r4;
-    const r2 = i % 2 !== 0 ? r.r5 : r.r4;
-    const as = i % 2 === 0 ? a2 : -a2;
-    const p1 = geom.rotatePointDeg({x: cx, y: cy}, a - a2, {x: cx + r1, y: cy});
-    const s1 = geom.rotatePointDeg({x: cx, y: cy}, a + as, {x: cx + rs, y: cy});
-    const p2 = geom.rotatePointDeg({x: cx, y: cy}, a + a2, {x: cx + r2, y: cy});
-    if (i === 0) {
-      svg.ma(path, p1.x, p1.y);
-    } else {
-      svg.la(path, p1.x, p1.y);
-    }
-    svg.ba(path, s1.x, s1.y, p2.x, p2.y, p2.x, p2.y);
-    a += a1 + (i % 2 === 0 ? a3 : -a3);
-  }
-  svg.close(path);
-
-  svg.circle(path, cx, cy, r.r3);
-
-  svg.circle(path, cx, cy, r.r2);
-  svg.circle(path, cx, cy, r.r1);
-
-  return svg.getPath(path);
-}
-
-function _getMagicAdjust(r1, r2, a) {
-  // Thank you Anne for this magic formula!
-  a = geom.degToRad(a);
-  return geom.radToDeg(Math.asin((r2 * Math.sin(a)) / r1) - a);
-}
-
-function _getGearDarkHolePath(path, cx, cy, r, type) {
-  if (type === 'watch-gear') {
-    const branchCount = 5;
-    const b = 360 / branchCount;
-    const c = b / 1.1;
-    const r1 = r.r2 + (r.r3 - r.r2) * 0.05;
-    const r2 = r.r2 + (r.r3 - r.r2) * 0.9;
-    const m = _getMagicAdjust(r1, r2, (b - c) / 2);
-    // prettier-ignore
-    for (let a = 0; a < 360; a += b) {
-      const p1 = geom.rotatePointDeg({x: cx, y: cy}, a + m, {x: cx + r1, y: cy});
-      const p2 = geom.rotatePointDeg({x: cx, y: cy}, a, {x: cx + r2, y: cy});
-      const p3 = geom.rotatePointDeg({x: cx, y: cy}, a + c - m, {x: cx + r1, y: cy});
-      const p4 = geom.rotatePointDeg({x: cx, y: cy}, a + c, {x: cx + r2, y: cy});
-      svg.ma(path, p1.x, p1.y);
-      svg.la(path, p2.x, p2.y);
-      svg.aa(path, r2, p4.x, p4.y, 1);
-      svg.la(path, p3.x, p3.y);
-      svg.aa(path, r1, p1.x, p1.y, 0);
-      svg.close(path);
-    }
-  } else {
-    const holeCount = 6;
-    const b = 360 / holeCount;
-    const x = (r.r2 + r.r3) / 2;
-    const rr = (r.r3 - r.r2) * 0.3;
-    for (let a = 0; a < 360; a += b) {
-      const c = geom.rotatePointDeg({x: cx, y: cy}, a, {x: cx + x, y: cy});
-      svg.circle(path, c.x, c.y, rr);
-    }
-  }
-}
-
-// Openwork interior.
-function _getGearDarkPath(cx, cy, r, type, toothThickness) {
-  cx = Unit.toInt(cx);
-  cy = Unit.toInt(cy);
-  r = Unit.toInt(r);
-  r = _getRadius(r, toothThickness);
-
-  const path = svg.createPath();
-
-  svg.circle(path, cx, cy, r.r3);
-  svg.circle(path, cx, cy, r.r2);
-  svg.circle(path, cx, cy, r.r1);
-
-  _getGearDarkHolePath(path, cx, cy, r, type);
-
-  return svg.getPath(path);
-}
-
-/******************************************************************************/
-
-function getElements(
-  cx,
-  cy,
-  r,
-  type,
-  toothThickness = 60,
-  toothCount = 36,
-  color
-) {
-  const elements = svg.createElements();
-
-  const path1 = _getGearDarkPath(cx, cy, r, type, toothThickness);
-  const path2 = _getGearLightPath(cx, cy, r, toothThickness, toothCount);
-
-  const props1 = {
-    stroke: ColorManipulator.darken(color, 0.8),
-    strokeWidth: '1px',
-    strokeLinecap: 'round',
-    strokeLinejoin: 'round',
-    fill: color,
-    fillRule: 'evenodd',
-  };
-
-  const props2 = {
-    ...props1,
-    fill: ColorManipulator.darken(color, 0.1),
-  };
-
-  svg.pushPath(elements, path1, props1);
-  svg.pushPath(elements, path2, props2);
-
-  return elements;
-}
-
-/******************************************************************************/
-
-export default {
-  getElements,
-};
+import {ColorManipulator} from 'goblin-theme';
+import svg from '../helpers/svg-helpers';
+import geom from '../helpers/geom-helpers';
+import {Unit} from 'goblin-theme';
+
+/******************************************************************************/
+
+function _getRadius(r, toothThickness) {
+  return {
+    r1: r * 0.1, // axe
+    r2: r * 0.15,
+    r3: r - toothThickness,
+    r4: r - toothThickness / 1.5,
+    r5: r - 1, // outside
+  };
+}
+
+/******************************************************************************/
+
+// Outer teeth and axis.
+function _getGearLightPath(cx, cy, r, toothThickness, toothCount) {
+  cx = Unit.toInt(cx);
+  cy = Unit.toInt(cy);
+  r = Unit.toInt(r);
+  r = _getRadius(r, toothThickness);
+  const rs = r.r4 + (r.r5 - r.r4) * 0.4;
+
+  const path = svg.createPath();
+
+  const a1 = 180 / toothCount;
+  const a2 = a1 / 5;
+  const a3 = a1 / 10;
+  let a = 0;
+  for (let i = 0; i < toothCount * 2; i++) {
+    const r1 = i % 2 === 0 ? r.r5 : r.r4;
+    const r2 = i % 2 !== 0 ? r.r5 : r.r4;
+    const as = i % 2 === 0 ? a2 : -a2;
+    const p1 = geom.rotatePointDeg({x: cx, y: cy}, a - a2, {x: cx + r1, y: cy});
+    const s1 = geom.rotatePointDeg({x: cx, y: cy}, a + as, {x: cx + rs, y: cy});
+    const p2 = geom.rotatePointDeg({x: cx, y: cy}, a + a2, {x: cx + r2, y: cy});
+    if (i === 0) {
+      svg.ma(path, p1.x, p1.y);
+    } else {
+      svg.la(path, p1.x, p1.y);
+    }
+    svg.ba(path, s1.x, s1.y, p2.x, p2.y, p2.x, p2.y);
+    a += a1 + (i % 2 === 0 ? a3 : -a3);
+  }
+  svg.close(path);
+
+  svg.circle(path, cx, cy, r.r3);
+
+  svg.circle(path, cx, cy, r.r2);
+  svg.circle(path, cx, cy, r.r1);
+
+  return svg.getPath(path);
+}
+
+function _getMagicAdjust(r1, r2, a) {
+  // Thank you Anne for this magic formula!
+  a = geom.degToRad(a);
+  return geom.radToDeg(Math.asin((r2 * Math.sin(a)) / r1) - a);
+}
+
+function _getGearDarkHolePath(path, cx, cy, r, type) {
+  if (type === 'watch-gear') {
+    const branchCount = 5;
+    const b = 360 / branchCount;
+    const c = b / 1.1;
+    const r1 = r.r2 + (r.r3 - r.r2) * 0.05;
+    const r2 = r.r2 + (r.r3 - r.r2) * 0.9;
+    const m = _getMagicAdjust(r1, r2, (b - c) / 2);
+    // prettier-ignore
+    for (let a = 0; a < 360; a += b) {
+      const p1 = geom.rotatePointDeg({x: cx, y: cy}, a + m, {x: cx + r1, y: cy});
+      const p2 = geom.rotatePointDeg({x: cx, y: cy}, a, {x: cx + r2, y: cy});
+      const p3 = geom.rotatePointDeg({x: cx, y: cy}, a + c - m, {x: cx + r1, y: cy});
+      const p4 = geom.rotatePointDeg({x: cx, y: cy}, a + c, {x: cx + r2, y: cy});
+      svg.ma(path, p1.x, p1.y);
+      svg.la(path, p2.x, p2.y);
+      svg.aa(path, r2, p4.x, p4.y, 1);
+      svg.la(path, p3.x, p3.y);
+      svg.aa(path, r1, p1.x, p1.y, 0);
+      svg.close(path);
+    }
+  } else {
+    const holeCount = 6;
+    const b = 360 / holeCount;
+    const x = (r.r2 + r.r3) / 2;
+    const rr = (r.r3 - r.r2) * 0.3;
+    for (let a = 0; a < 360; a += b) {
+      const c = geom.rotatePointDeg({x: cx, y: cy}, a, {x: cx + x, y: cy});
+      svg.circle(path, c.x, c.y, rr);
+    }
+  }
+}
+
+// Openwork interior.
+function _getGearDarkPath(cx, cy, r, type, toothThickness) {
+  cx = Unit.toInt(cx);
+  cy = Unit.toInt(cy);
+  r = Unit.toInt(r);
+  r = _getRadius(r, toothThickness);
+
+  const path = svg.createPath();
+
+  svg.circle(path, cx, cy, r.r3);
+  svg.circle(path, cx, cy, r.r2);
+  svg.circle(path, cx, cy, r.r1);
+
+  _getGearDarkHolePath(path, cx, cy, r, type);
+
+  return svg.getPath(path);
+}
+
+/******************************************************************************/
+
+function getElements(
+  cx,
+  cy,
+  r,
+  type,
+  toothThickness = 60,
+  toothCount = 36,
+  color
+) {
+  const elements = svg.createElements();
+
+  const path1 = _getGearDarkPath(cx, cy, r, type, toothThickness);
+  const path2 = _getGearLightPath(cx, cy, r, toothThickness, toothCount);
+
+  const props1 = {
+    stroke: ColorManipulator.darken(color, 0.8),
+    strokeWidth: '1px',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    fill: color,
+    fillRule: 'evenodd',
+  };
+
+  const props2 = {
+    ...props1,
+    fill: ColorManipulator.darken(color, 0.1),
+  };
+
+  svg.pushPath(elements, path1, props1);
+  svg.pushPath(elements, path2, props2);
+
+  return elements;
+}
+
+/******************************************************************************/
+
+export default {
+  getElements,
+};

package/widgets/retro-gear/styles.js

@@ -1,130 +1,130 @@
-import {Unit} from 'goblin-theme';
-const px = Unit.toPx;
-
-export const propNames = [
-  'top',
-  'bottom',
-  'left',
-  'right',
-  'radius',
-  'toothThickness',
-  'toothCount',
-  'angle',
-  'rotationDuration',
-  'rotationDirection',
-  'rotationMovement',
-];
-
-/******************************************************************************/
-
-function getStepsKeyFrames(toothCount, rotationDirection) {
-  const keyFrames = {};
-  const cw = rotationDirection === 'cw';
-
-  for (let i = 0; i < toothCount; i++) {
-    const progress = (i * 100) / toothCount;
-    const angle = (360 / toothCount) * i;
-    keyFrames[progress + '%'] = {
-      transform: `rotate(${cw ? angle : -angle}deg)`,
-    };
-  }
-
-  const last = cw ? 'rotate(359.999deg)' : 'rotate(-359.999deg)';
-  keyFrames['100%'] = {transform: last};
-
-  return keyFrames;
-}
-
-/******************************************************************************/
-
-export default function styles(theme, props) {
-  const {
-    top,
-    bottom,
-    left,
-    right,
-    radius = '100px',
-    toothThickness = 60,
-    toothCount,
-    angle = '0deg',
-    rotationDuration,
-    rotationDirection = 'cw',
-    rotationMovement = 'continuous',
-  } = props;
-
-  const size = Unit.multiply(radius, 2);
-  const steps = rotationMovement === 'steps';
-
-  const keyframes = {
-    from: {
-      transform: 'rotate(0deg)',
-    },
-    to: {
-      transform:
-        rotationDirection === 'cw'
-          ? 'rotate(359.999deg)'
-          : 'rotate(-359.999deg)',
-    },
-  };
-
-  const gear = {
-    position: 'absolute',
-    top: top ? Unit.sub(top, radius) : null,
-    bottom: bottom ? Unit.sub(bottom, radius) : null,
-    left: left ? Unit.sub(left, radius) : null,
-    right: right ? Unit.sub(right, radius) : null,
-    width: size,
-    height: size,
-    transform: rotationDuration ? 'rotate(0deg)' : `rotate(${angle})`,
-
-    animation: rotationDuration ? `${rotationDuration} infinite linear` : null,
-    animationName: rotationDuration
-      ? steps
-        ? getStepsKeyFrames(toothCount, rotationDirection)
-        : keyframes
-      : null,
-    animationTimingFunction: steps ? 'cubic-bezier(0.5, 0.5, 0, 1)' : null,
-  };
-
-  const shadowRadius = Unit.sub(radius, px(toothThickness));
-  const shadowSize = Unit.multiply(shadowRadius, 2);
-
-  const shadow1 = {
-    position: 'absolute',
-    top: top ? Unit.sub(top, shadowRadius) : null,
-    bottom: bottom ? Unit.sub(bottom, shadowRadius) : null,
-    left: left ? Unit.sub(left, shadowRadius) : null,
-    right: right ? Unit.sub(right, shadowRadius) : null,
-    width: shadowSize,
-    height: shadowSize,
-    borderRadius: shadowSize,
-    boxShadow: `black 0px 0px 150px ${Unit.multiply(radius, 0.08)}`,
-  };
-
-  const shadow2 = {
-    ...shadow1,
-    boxShadow: `inset black 0px 0px ${Unit.multiply(
-      radius,
-      0.4
-    )} ${Unit.multiply(radius, 0.24)}`,
-  };
-
-  const shadow3 = {
-    ...shadow1,
-    boxShadow: `inset black ${Unit.multiply(radius, 0.01)} ${Unit.multiply(
-      radius,
-      0.01
-    )} ${Unit.multiply(radius, 0.2)} 0px`,
-  };
-
-  /******************************************************************************/
-
-  return {
-    gear,
-    shadow1,
-    shadow2,
-    shadow3,
-  };
-}
-
-/******************************************************************************/
+import {Unit} from 'goblin-theme';
+const px = Unit.toPx;
+
+export const propNames = [
+  'top',
+  'bottom',
+  'left',
+  'right',
+  'radius',
+  'toothThickness',
+  'toothCount',
+  'angle',
+  'rotationDuration',
+  'rotationDirection',
+  'rotationMovement',
+];
+
+/******************************************************************************/
+
+function getStepsKeyFrames(toothCount, rotationDirection) {
+  const keyFrames = {};
+  const cw = rotationDirection === 'cw';
+
+  for (let i = 0; i < toothCount; i++) {
+    const progress = (i * 100) / toothCount;
+    const angle = (360 / toothCount) * i;
+    keyFrames[progress + '%'] = {
+      transform: `rotate(${cw ? angle : -angle}deg)`,
+    };
+  }
+
+  const last = cw ? 'rotate(359.999deg)' : 'rotate(-359.999deg)';
+  keyFrames['100%'] = {transform: last};
+
+  return keyFrames;
+}
+
+/******************************************************************************/
+
+export default function styles(theme, props) {
+  const {
+    top,
+    bottom,
+    left,
+    right,
+    radius = '100px',
+    toothThickness = 60,
+    toothCount,
+    angle = '0deg',
+    rotationDuration,
+    rotationDirection = 'cw',
+    rotationMovement = 'continuous',
+  } = props;
+
+  const size = Unit.multiply(radius, 2);
+  const steps = rotationMovement === 'steps';
+
+  const keyframes = {
+    from: {
+      transform: 'rotate(0deg)',
+    },
+    to: {
+      transform:
+        rotationDirection === 'cw'
+          ? 'rotate(359.999deg)'
+          : 'rotate(-359.999deg)',
+    },
+  };
+
+  const gear = {
+    position: 'absolute',
+    top: top ? Unit.sub(top, radius) : null,
+    bottom: bottom ? Unit.sub(bottom, radius) : null,
+    left: left ? Unit.sub(left, radius) : null,
+    right: right ? Unit.sub(right, radius) : null,
+    width: size,
+    height: size,
+    transform: rotationDuration ? 'rotate(0deg)' : `rotate(${angle})`,
+
+    animation: rotationDuration ? `${rotationDuration} infinite linear` : null,
+    animationName: rotationDuration
+      ? steps
+        ? getStepsKeyFrames(toothCount, rotationDirection)
+        : keyframes
+      : null,
+    animationTimingFunction: steps ? 'cubic-bezier(0.5, 0.5, 0, 1)' : null,
+  };
+
+  const shadowRadius = Unit.sub(radius, px(toothThickness));
+  const shadowSize = Unit.multiply(shadowRadius, 2);
+
+  const shadow1 = {
+    position: 'absolute',
+    top: top ? Unit.sub(top, shadowRadius) : null,
+    bottom: bottom ? Unit.sub(bottom, shadowRadius) : null,
+    left: left ? Unit.sub(left, shadowRadius) : null,
+    right: right ? Unit.sub(right, shadowRadius) : null,
+    width: shadowSize,
+    height: shadowSize,
+    borderRadius: shadowSize,
+    boxShadow: `black 0px 0px 150px ${Unit.multiply(radius, 0.08)}`,
+  };
+
+  const shadow2 = {
+    ...shadow1,
+    boxShadow: `inset black 0px 0px ${Unit.multiply(
+      radius,
+      0.4
+    )} ${Unit.multiply(radius, 0.24)}`,
+  };
+
+  const shadow3 = {
+    ...shadow1,
+    boxShadow: `inset black ${Unit.multiply(radius, 0.01)} ${Unit.multiply(
+      radius,
+      0.01
+    )} ${Unit.multiply(radius, 0.2)} 0px`,
+  };
+
+  /******************************************************************************/
+
+  return {
+    gear,
+    shadow1,
+    shadow2,
+    shadow3,
+  };
+}
+
+/******************************************************************************/

package/widgets/retro-gear/widget.js

@@ -1,51 +1,51 @@
-import React from 'react';
-import Widget from 'goblin-laboratory/widgets/widget';
-import helpers from './helpers';
-import svg from '../helpers/svg-helpers';
-
-/******************************************************************************/
-
-export default class RetroGear extends Widget {
-  constructor() {
-    super(...arguments);
-  }
-
-  render() {
-    if (
-      !this.props.force &&
-      !this.context.theme.look.accessories.includes('gears')
-    ) {
-      return null;
-    }
-
-    let type = this.props.type;
-    if (!type && this.context.theme.look.homeGadget === 'clock-gears') {
-      type = 'watch-gear';
-    }
-
-    const elements = helpers.getElements(
-      this.props.radius,
-      this.props.radius,
-      this.props.radius,
-      type,
-      this.props.toothThickness,
-      this.props.toothCount,
-      this.props.color
-    );
-
-    if (this.props.shadow === 'no') {
-      return svg.renderElements(this.styles.classNames.gear, elements);
-    } else {
-      return (
-        <>
-          <div className={this.styles.classNames.shadow1} />
-          <div className={this.styles.classNames.shadow2} />
-          {svg.renderElements(this.styles.classNames.gear, elements)}
-          <div className={this.styles.classNames.shadow3} />
-        </>
-      );
-    }
-  }
-}
-
-/******************************************************************************/
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import helpers from './helpers';
+import svg from '../helpers/svg-helpers';
+
+/******************************************************************************/
+
+export default class RetroGear extends Widget {
+  constructor() {
+    super(...arguments);
+  }
+
+  render() {
+    if (
+      !this.props.force &&
+      !this.context.theme.look.accessories.includes('gears')
+    ) {
+      return null;
+    }
+
+    let type = this.props.type;
+    if (!type && this.context.theme.look.homeGadget === 'clock-gears') {
+      type = 'watch-gear';
+    }
+
+    const elements = helpers.getElements(
+      this.props.radius,
+      this.props.radius,
+      this.props.radius,
+      type,
+      this.props.toothThickness,
+      this.props.toothCount,
+      this.props.color
+    );
+
+    if (this.props.shadow === 'no') {
+      return svg.renderElements(this.styles.classNames.gear, elements);
+    } else {
+      return (
+        <>
+          <div className={this.styles.classNames.shadow1} />
+          <div className={this.styles.classNames.shadow2} />
+          {svg.renderElements(this.styles.classNames.gear, elements)}
+          <div className={this.styles.classNames.shadow3} />
+        </>
+      );
+    }
+  }
+}
+
+/******************************************************************************/