feat: 🎸 Add new default measure feature, keep old as slim.

BREAKING CHANGE: 🧨 While setting a new default feature seems appropriate, it does not come without consequence. This is a breaking change, since the default of the API has changed. Please use the `slim` version if you want that instead of the new version. ✅ Closes: #124
phun-ky · Aug 28, 2024 · 7c74c5e · 7c74c5e
1 parent 367f4b8
commit 7c74c5e
Show file tree

Hide file tree

Showing 9 changed files with 356 additions and 125 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@
   - [Features](#features)
     - [Element spacing](#element-spacing)
     - [Element dimensions](#element-dimensions)
-      - [Subtle measure](#subtle-measure)
+      - [Slim measure](#slim-measure)
     - [Pin element to highlight the anatomy](#pin-element-to-highlight-the-anatomy)
       - [Align with parent container](#align-with-parent-container)
       - [Custom literals](#custom-literals)
@@ -224,14 +224,26 @@ Display dimensions with:
 
 Where `height` and `width` comes with placement flags. Default for `height` is `left`, default for `width` is `top`.
 
-#### Subtle measure
+#### Slim measure
+
+![Image of slim option for measure](./public/slim-measure.png)
+
+Use a slim style:
+
+```html
+<div data-speccer="measure slim height left" class="..."></div>
+```
+
+This will give a slimmer look and feel.
+
+##### Subtle slim measure
 
 ![Image of subtle option for measure](./public/subtle-measure.png)
 
 Use a subtle style:
 
 ```html
-<div data-speccer="measure height left subtle" class="..."></div>
+<div data-speccer="measure slim height left subtle" class="..."></div>
 ```
 
 This will give a dashed border.
@@ -531,6 +543,8 @@ Allthough the styling works nicely with dark mode, you can use the provided CSS
   --ph-speccer-mark-border-width: 1px;
   --ph-speccer-mark-border-style: solid;
   --ph-speccer-measure-color: var(--ph-speccer-color-red);
+  --ph-speccer-measure-line-width: 1.5px;
+  --ph-speccer-measure-border-style: dotted;
   --ph-speccer-measure-size: 8px;
   --ph-speccer-a11y-color-background: var(--ph-speccer-color-beautifulBlue);
   --ph-speccer-a11y-landmark-color-background: var(

diff --git a/src/features/measure/index.ts b/src/features/measure/index.ts
@@ -1,4 +1,5 @@
 /* eslint no-console:0 */
+import { MeasureAreaEnum } from '../../types/enums/area';
 import {
   isBottomArea,
   isHeightArea,
@@ -42,7 +43,7 @@ export const create = (
 };
 
 /**
- * Create a measurement element and add it to the body with styles matching a specified target element.
+ * Create a measurement element and add it to the body with styles matching a specified target element based on the attribute values from `data-speccer`.
  *
  * ![measure](https://github.com/phun-ky/speccer/blob/main/public/measure.png?raw=true)
  *
@@ -67,7 +68,10 @@ export const element = async (targetElement: HTMLElement): Promise<void> => {
 
   await waitForFrame();
 
+  const isSlim  = _areas_string?.includes(MeasureAreaEnum.Slim);
   const _target_rect = targetElement.getBoundingClientRect();
+  const widthModifier = !isSlim ? 48 : 0;
+  const heightModifier = !isSlim ? 96 : 0;
 
   if (isWidthArea(_areas_string)) {
     if (isBottomArea(_areas_string)) {
@@ -76,30 +80,58 @@ export const element = async (targetElement: HTMLElement): Promise<void> => {
       document.body.appendChild(_measure_el);
 
       const _positional_styles = await getRec(_measure_el, targetElement);
-      const { left, top, width } = _positional_styles.fromBottom({
-        center: false
-      });
-
-      await addStyles(_measure_el, {
-        left: `${left}px`,
-        top: `${top}px`,
-        width: `${width}px`
-      });
+
+      if(isSlim){
+        const { left, top, width } = _positional_styles.fromBottom({
+          center: false
+        });
+
+        await addStyles(_measure_el, {
+          left: `${left}px`,
+          top: `${top}px`,
+          width: `${width}px`
+        });
+      } else {
+        const { left, top, width,height } = _positional_styles.absolute({
+          center: false
+        });
+
+        await addStyles(_measure_el, {
+          left: `${left}px`,
+          top: `${top}px`,
+          width: `${width}px`,
+          height: `${height + widthModifier}px`
+        });
+      }
     } else {
       const _measure_el = create(_target_rect.width, _areas_string);
 
       document.body.appendChild(_measure_el);
 
       const _positional_styles = await getRec(_measure_el, targetElement);
-      const { left, top, width } = _positional_styles.fromTop({
-        center: false
-      });
-
-      await addStyles(_measure_el, {
-        left: `${left}px`,
-        top: `${top}px`,
-        width: `${width}px`
-      });
+
+      if(isSlim){
+        const { left, top, width } = _positional_styles.fromTop({
+          center: false
+        });
+
+        await addStyles(_measure_el, {
+          left: `${left}px`,
+          top: `${top}px`,
+          width: `${width}px`
+        });
+      } else{
+        const { left, top, width, height } = _positional_styles.absolute({
+          center: false
+        });
+
+        await addStyles(_measure_el, {
+          left: `${left}px`,
+          top: `${top -widthModifier}px`,
+          width: `${width}px`,
+          height: `${height + widthModifier}px`
+        });
+      }
     }
   } else if (isHeightArea(_areas_string)) {
     if (isRightArea(_areas_string)) {
@@ -108,30 +140,58 @@ export const element = async (targetElement: HTMLElement): Promise<void> => {
       document.body.appendChild(_measure_el);
 
       const _positional_styles = await getRec(_measure_el, targetElement);
-      const { left, top, height } = _positional_styles.fromRight({
-        center: false
-      });
-
-      await addStyles(_measure_el, {
-        left: `${left}px`,
-        top: `${top}px`,
-        height: `${height}px`
-      });
+
+      if(isSlim){
+        const { left, top, height} = _positional_styles.fromRight({
+          center: false
+        });
+
+        await addStyles(_measure_el, {
+          left: `${left}px`,
+          top: `${top}px`,
+          height: `${height}px`
+        });
+      } else {
+        const { left, top, height, width} = _positional_styles.absolute({
+          center: false
+        });
+
+        await addStyles(_measure_el, {
+          left: `${left}px`,
+          top: `${top}px`,
+          height: `${height}px`,
+          width: `${width + heightModifier}px`
+        });
+      }
     } else {
       const _measure_el = create(_target_rect.height, _areas_string);
 
       document.body.appendChild(_measure_el);
 
       const _positional_styles = await getRec(_measure_el, targetElement);
-      const { left, top, height } = _positional_styles.fromLeft({
-        center: false
-      });
-
-      await addStyles(_measure_el, {
-        left: `${left}px`,
-        top: `${top}px`,
-        height: `${height}px`
-      });
+
+      if(isSlim){
+        const { left, top, height } = _positional_styles.fromLeft({
+          center: false
+        });
+
+        await addStyles(_measure_el, {
+          left: `${left}px`,
+          top: `${top}px`,
+          height: `${height}px`
+        });
+      } else {
+        const { left, top, height, width } = _positional_styles.absolute({
+          center: false
+        });
+
+        await addStyles(_measure_el, {
+          left: `${left - heightModifier}px`,
+          top: `${top}px`,
+          height: `${height}px`,
+          width: `${width + heightModifier}px`
+        });
+      }
     }
   }
 };
diff --git a/src/features/measure/styles/height.styl b/src/features/measure/styles/height.styl
@@ -0,0 +1,63 @@
+.ph-speccer.speccer.measure
+  &.height
+    color var(--ph-speccer-measure-color)
+    border-top var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style)
+    border-bottom var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style)
+
+.ph-speccer.speccer.measure
+  &.height
+    &.left
+      &::before
+        content ''
+        display block
+        height calc(100% + var(--ph-speccer-measure-line-width))
+        background transparent
+        position absolute
+        left calc(64px - 5px)
+        width 10px
+        border-top var(--ph-speccer-measure-line-width) solid
+        border-bottom var(--ph-speccer-measure-line-width) solid
+
+.ph-speccer.speccer.measure
+  &.height
+    &.left
+      &::after
+        position static
+        content attr(data-measure)
+        display flex
+        width 64px
+        height 100%
+        line-height 100%
+        margin-right auto
+        border-right var(--ph-speccer-measure-line-width) solid
+        justify-content flex-end
+        padding-right 8px
+
+.ph-speccer.speccer.measure
+  &.height
+    &.right
+      &::before
+        content ''
+        display block
+        height calc(100% + var(--ph-speccer-measure-line-width))
+        background transparent
+        position absolute
+        left calc(100% - 64px - 5px)
+        width 10px
+        border-top var(--ph-speccer-measure-line-width) solid
+        border-bottom var(--ph-speccer-measure-line-width) solid
+
+.ph-speccer.speccer.measure
+  &.height
+    &.right
+      &::after
+        position static
+        content attr(data-measure)
+        display flex
+        width 64px
+        height 100%
+        line-height 100%
+        margin-left auto
+        border-left var(--ph-speccer-measure-line-width) solid
+        justify-content flex-start
+        padding-left 8px
diff --git a/src/features/measure/styles/index.styl b/src/features/measure/styles/index.styl
@@ -1,84 +1,7 @@
 .ph-speccer.speccer.measure
   display flex
 
-.ph-speccer.speccer.measure
-  &.width
-    color var(--ph-speccer-measure-color)
-    border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
-    border-bottom none
-    height var(--ph-speccer-measure-size)
-
-.ph-speccer.speccer.measure
-  &.width
-    &::after
-      content attr(data-measure)
-      position absolute
-      top calc(-100% - 10px)
-
-.ph-speccer.speccer.measure
-  &.width
-    &.bottom
-      color var(--ph-speccer-measure-color)
-      border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
-      border-top none
-
-.ph-speccer.speccer.measure
-  &.width
-    &.bottom
-      &::after
-        content attr(data-measure)
-        position absolute
-        top calc(100% + 5px)
-
-.ph-speccer.speccer.measure
-  &.width
-    &.top
-      color var(--ph-speccer-measure-color)
-      border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
-      border-bottom none
-
-.ph-speccer.speccer.measure
-  &.width
-    &.top
-      &::after
-        content attr(data-measure)
-        position absolute
-        bottom calc(100% + 5px)
-
-.ph-speccer.speccer.measure
-  &.height
-    &.left
-      color var(--ph-speccer-measure-color)
-      border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
-      border-right none
-      width var(--ph-speccer-measure-size)
-
-.ph-speccer.speccer.measure
-  &.height
-    &.left
-      &::after
-        content attr(data-measure)
-        position absolute
-        top 50%
-        left calc(-100% - 20px - var(--ph-speccer-line-width))
-        transform translateY(-50%) rotate(-90deg)
-
-.ph-speccer.speccer.measure
-  &.height
-    &.right
-      color var(--ph-speccer-measure-color)
-      border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
-      border-left none
-      width var(--ph-speccer-measure-size)
-
-.ph-speccer.speccer.measure
-  &.height
-    &.right
-      &::after
-        content attr(data-measure)
-        position absolute
-        top 50%
-        left calc(100% - var(--ph-speccer-measure-size))
-        transform translateY(-50%) rotate(90deg)
-
+@require './height.styl'
+@require './width.styl'
+@require './slim.styl'
 @require './subtle.styl'