unit.gl 0.0.40 → 0.1.1

package/ts/Rectangle.ts

@@ -1,15 +1,38 @@
-class Rectangle {
+// ============================================================================
+// Import
+// ============================================================================
+
+import Position from "./Position";
+import Size from "./Size";
+
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+export default class Rectangle {
+
+    // Parameters
+    // ========================================================================
+
     position: Position;
     size: Size;
 
+    // Constructor
+    // ========================================================================
+
     constructor(position: Position, size: Size) {
         if (position.x.unit !== size.width.unit || position.y.unit !== size.height.unit) {
-            throw new Error('Position and Size units must match');
+            throw new Error("Position and Size units must match");
         }
         this.position = position;
         this.size = size;
     }
 
+
+    // Methods
+    // ========================================================================
+
     move(newPosition: Position): Rectangle {
         return new Rectangle(newPosition, this.size);
     }
@@ -25,4 +48,4 @@ class Rectangle {
     toString(): string {
         return `Rectangle: Position(${this.position.toString()}), Size(${this.size.toString()})`;
     }
-}
+}

package/ts/ResponsiveImage.ts

@@ -1,18 +1,37 @@
-class ResponsiveImage {
+// ============================================================================
+// Import
+// ============================================================================
+
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+export default class ResponsiveImage {
+
+    // Parameters
+    // ========================================================================
+
     sources: Map<number, string>; // Map of breakpoint to image URL
     altText: string;
 
+    // Constructor
+    // ========================================================================
+
     constructor(altText: string) {
         this.sources = new Map<number, string>();
         this.altText = altText;
     }
 
+    // Methods
+    // ========================================================================
+
     addSource(breakpoint: number, url: string): void {
         this.sources.set(breakpoint, url);
     }
 
     getSource(viewportWidth: number): string {
-        let selectedSource = '';
+        let selectedSource = "";
         this.sources.forEach((url, breakpoint) => {
             if (viewportWidth >= breakpoint) {
                 selectedSource = url;
@@ -25,4 +44,4 @@ class ResponsiveImage {
         const source = this.getSource(viewportWidth);
         return `<img src="${source}" alt="${this.altText}" />`;
     }
-}
+}

package/ts/ResponsiveScale.ts

@@ -1,14 +1,37 @@
-class ResponsiveScale {
+// ============================================================================
+// Import
+// ============================================================================
+
+import Unit from "./Unit";
+import Viewport from "./Viewport";
+
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+export default class ResponsiveScale {
+
+    // Parameters
+    // ========================================================================
+
     viewport: Viewport;
     baseSize: Unit;
     scaleFactor: number;
 
+    // Constructor
+    // ========================================================================
+
     constructor(viewport: Viewport, baseSize: Unit, scaleFactor: number) {
         this.viewport = viewport;
         this.baseSize = baseSize;
         this.scaleFactor = scaleFactor;
     }
 
+
+    // Methods
+    // ========================================================================
+
     calculateResponsiveSize(): Unit {
         const ratio = this.viewport.width.value / 1920; // Assuming 1920px is the base
         const scaledValue = this.baseSize.value * Math.pow(this.scaleFactor, ratio);
@@ -18,4 +41,4 @@ class ResponsiveScale {
     toString(): string {
         return `ResponsiveScale: Base(${this.baseSize.toString()}) ScaleFactor(${this.scaleFactor}) Viewport(${this.viewport.toString()})`;
     }
-}
+}

package/ts/Size.ts

@@ -1,15 +1,36 @@
-class Size {
+// ============================================================================
+// Import
+// ============================================================================
+
+import Unit from "./Unit";
+
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+export default class Size {
+
+    // Parameters
+    // ========================================================================
+
     width: Unit;
     height: Unit;
 
+    // Constructor
+    // ========================================================================
+
     constructor(width: Unit, height: Unit) {
         if (width.unit !== height.unit) {
-            throw new Error('Width and height must have the same unit');
+            throw new Error("Width and height must have the same unit");
         }
         this.width = width;
         this.height = height;
     }
 
+    // Methods
+    // ========================================================================
+
     add(other: Size): Size {
         return new Size(this.width.add(other.width), this.height.add(other.height));
     }
@@ -29,4 +50,5 @@ class Size {
     toString(): string {
         return `Size: ${this.width.toString()} x ${this.height.toString()}`;
     }
-}
+
+}

package/ts/Spacing.ts

@@ -1,12 +1,37 @@
-class Spacing {
+// ============================================================================
+// Import
+// ============================================================================
+
+import { default as Unit, default as UnitType } from "./Unit";
+
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+export default class Spacing {
+
+    // Parameters
+    // ========================================================================
+
     top: Unit;
     right: Unit;
     bottom: Unit;
     left: Unit;
 
-    constructor(top: Unit, right: Unit, bottom: Unit, left: Unit) {
-        if (top.unit !== right.unit || top.unit !== bottom.unit || top.unit !== left.unit) {
-            throw new Error('All sides must have the same unit');
+    // Constructor
+    // ========================================================================
+
+    constructor(
+        top: Unit,
+        right: Unit,
+        bottom: Unit,
+        left: Unit
+    ) {
+        if (
+            top.unit !== right.unit || top.unit !== bottom.unit || top.unit !== left.unit
+        ) {
+            throw new Error("All sides must have the same unit");
         }
         this.top = top;
         this.right = right;
@@ -14,6 +39,9 @@ class Spacing {
         this.left = left;
     }
 
+    // Methods
+    // ========================================================================
+
     add(other: Spacing): Spacing {
         return new Spacing(
             this.top.add(other.top),
@@ -56,13 +84,23 @@ class Spacing {
 }
 
 class Margin extends Spacing {
-    constructor(top: Unit, right: Unit, bottom: Unit, left: Unit) {
+    constructor(
+        top: Unit,
+        right: Unit,
+        bottom: Unit,
+        left: Unit,
+    ) {
         super(top, right, bottom, left);
     }
 }
 
 class Padding extends Spacing {
-    constructor(top: Unit, right: Unit, bottom: Unit, left: Unit) {
+    constructor(
+        top: Unit,
+        right: Unit,
+        bottom: Unit,
+        left: Unit,
+    ) {
         super(top, right, bottom, left);
     }
-}
+}

package/ts/Transform.ts

@@ -1,6 +1,26 @@
-type AngleUnit = 'deg' | 'rad';
+// ============================================================================
+// Import
+// ============================================================================
+
+import Unit from "./Unit";
+
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type AngleUnit = "deg" | "rad";
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+
+export default class Transform {
+
+    // Parameters
+    // ========================================================================
 
-class Transform {
     translateX: Unit;
     translateY: Unit;
     rotate: number;
@@ -8,7 +28,17 @@ class Transform {
     scaleX: number;
     scaleY: number;
 
-    constructor(translateX: Unit, translateY: Unit, rotate: number, rotateUnit: AngleUnit, scaleX: number, scaleY: number) {
+    // Constructor
+    // ========================================================================
+
+    constructor(
+        translateX: Unit,
+        translateY: Unit,
+        rotate: number,
+        rotateUnit: AngleUnit,
+        scaleX: number,
+        scaleY: number
+    ) {
         this.translateX = translateX;
         this.translateY = translateY;
         this.rotate = rotate;
@@ -17,6 +47,9 @@ class Transform {
         this.scaleY = scaleY;
     }
 
+    // Methods
+    // ========================================================================
+
     setTranslation(translateX: Unit, translateY: Unit): void {
         this.translateX = translateX;
         this.translateY = translateY;
@@ -35,4 +68,4 @@ class Transform {
     toString(): string {
         return `Transform: translate(${this.translateX.toString()}, ${this.translateY.toString()}) rotate(${this.rotate}${this.rotateUnit}) scale(${this.scaleX}, ${this.scaleY})`;
     }
-}
+}

package/ts/Typography.ts

@@ -1,13 +1,42 @@
-type FontWeight = 'normal' | 'bold' | number;
+// ============================================================================
+// Import
+// ============================================================================
+
+import Unit from "./Unit";
+
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type FontWeight = "normal" | "bold" | number;
+
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+export default class Typography {
+
+    // Parameters
+    // ========================================================================
 
-class Typography {
     fontSize: Unit;
     fontWeight: FontWeight;
     lineHeight: Unit;
     letterSpacing: Unit;
-    textAlign: 'left' | 'right' | 'center' | 'justify';
+    textAlign: "left" | "right" | "center" | "justify";
+
+    // Constructor
+    // ========================================================================
 
-    constructor(fontSize: Unit, fontWeight: FontWeight = 'normal', lineHeight: Unit, letterSpacing: Unit, textAlign: 'left' | 'right' | 'center' | 'justify' = 'left') {
+    constructor(
+        fontSize: Unit,
+        fontWeight: FontWeight = "normal",
+        lineHeight: Unit,
+        letterSpacing: Unit,
+        textAlign: "left" | "right" | "center" | "justify" = "left"
+    ) {
         this.fontSize = fontSize;
         this.fontWeight = fontWeight;
         this.lineHeight = lineHeight;
@@ -15,6 +44,10 @@ class Typography {
         this.textAlign = textAlign;
     }
 
+
+    // Methods
+    // ========================================================================
+
     setFontSize(fontSize: Unit): void {
         this.fontSize = fontSize;
     }
@@ -31,11 +64,12 @@ class Typography {
         this.letterSpacing = letterSpacing;
     }
 
-    setTextAlign(textAlign: 'left' | 'right' | 'center' | 'justify'): void {
+    setTextAlign(textAlign: "left" | "right" | "center" | "justify"): void {
         this.textAlign = textAlign;
     }
 
     toString(): string {
         return `Typography: font-size ${this.fontSize.toString()}, weight ${this.fontWeight}, line-height ${this.lineHeight.toString()}, letter-spacing ${this.letterSpacing.toString()}, text-align ${this.textAlign}`;
     }
-}
+
+}

package/ts/Unit.ts

@@ -1,14 +1,38 @@
-type UnitType = 'px' | 'em' | '%' | 'rem' | 'mm' | 'cm' | 'in';
+// ============================================================================
+// Import
+// ============================================================================
+
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type UnitType = "px" | "em" | "%" | "rem" | "mm" | "cm" | "in";
+
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+export default class Unit {
+
+    // Parameters
+    // ========================================================================
 
-class Unit {
     value: number;
     unit: UnitType;
 
+    // Constructor
+    // ========================================================================
+
     constructor(value: number, unit: UnitType) {
         this.value = value;
         this.unit = unit;
     }
 
+    // Methods
+    // ========================================================================
+
     add(other: Unit): Unit {
         if (this.unit !== other.unit) {
             throw new Error(`Cannot add units of different types: ${this.unit} and ${other.unit}`);
@@ -34,13 +58,13 @@ class Unit {
     convert(toUnit: UnitType): Unit {
         // Example conversion: assumes 1in = 96px, 1cm = 37.7953px, etc.
         const conversionRates: { [key in UnitType]?: number } = {
-            'px': 1,
-            'em': 16,
-            'rem': 16,
-            'in': 96,
-            'cm': 37.7953,
-            'mm': 3.77953,
-            '%': 1 // Conversion for percentages might be contextual
+            "px": 1,
+            "em": 16,
+            "rem": 16,
+            "in": 96,
+            "cm": 37.7953,
+            "mm": 3.77953,
+            "%": 1 // Conversion for percentages might be contextual
         };
 
         if (!conversionRates[this.unit] || !conversionRates[toUnit]) {
@@ -54,4 +78,4 @@ class Unit {
     toString(): string {
         return `${this.value}${this.unit}`;
     }
-}
+}

package/ts/Viewport.ts

@@ -1,14 +1,41 @@
-class Viewport {
+// ============================================================================
+// Import
+// ============================================================================
+
+import Unit from "./Unit";
+
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+export default class Viewport {
+
+    // Parameters
+    // ========================================================================
+
     width: Unit;
     height: Unit;
     pixelRatio: number;
 
-    constructor(width: Unit, height: Unit, pixelRatio: number = 1) {
+
+    // Constructor
+    // ========================================================================
+
+    constructor(
+        width: Unit,
+        height: Unit,
+        pixelRatio: number = 1,
+    ) {
         this.width = width;
         this.height = height;
         this.pixelRatio = pixelRatio;
     }
 
+
+    // Methods
+    // ========================================================================
+
     resize(newWidth: Unit, newHeight: Unit): void {
         this.width = newWidth;
         this.height = newHeight;
@@ -21,4 +48,5 @@ class Viewport {
     toString(): string {
         return `Viewport: ${this.width.toString()} x ${this.height.toString()} @ ${this.pixelRatio}x pixel ratio`;
     }
-}
+
+}

package/ts/index.ts

@@ -1,16 +1 @@
-// Copyright 2020 Scape Agency BV
-
-// 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.
-
-
-export {};
+export { };

package/scss/utilities/_guides.scss

@@ -1,103 +0,0 @@
-@use "../dev" as *;
-@use "../variables" as *;
-@use "../mixins" as *;
-
-
-// ============================================================================
-// Utilities | Guides
-// ============================================================================
-
-
-.guide { @include guide; }
-
-@mixin guide_graph {
-    @include guide;
-    background-size: 4*$q 4*$q;
-    background-image:
-        repeating-linear-gradient(rgb(66, 61, 61) 0 1px, transparent 1px 100%),
-        repeating-linear-gradient(90deg,rgb(66, 61, 61) 0 1px, transparent 1px 100%);
-}
-
-.guide_graph { @include guide_graph; }
-
-@mixin guide_baseline {
-    @include guide;
-    // background: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
-    // background: repeating-linear-gradient(transparent, transparent 20px, transparent 20px, transparent 25px);
-    // background-repeat: repeat-y;
-    background-repeat: repeat;
-
-    background-size: map-get($baseline, 4) map-get($baseline, 4);
-    @include guide;
-    background-image:
-        repeating-linear-gradient(cyan 0 1px, transparent 1px 100%);
-}
-
-.guide_baseline { @include guide_baseline; }
-
-
-.baseline-grid {
-    @include guide;
-
-        background-image:
-    // -webkit-linear-gradient(0deg, rgba(200,0,0,.2) 40px, transparent 40px),
-    -webkit-linear-gradient(top, rgba(0,0,0,0) 95%, rgba(56,255,255,.8) 100%);
-
-
-        background-image:
-        // -moz-linear-gradient(0deg, rgba(200,0,0,.2) 40px, transparent 40px),
-        -moz-linear-gradient(top, rgba(0,0,0,0) 95%, rgba(56,255,255,.8) 100%);
-        background-image:
-        // -o-linear-gradient(0deg, rgba(200,0,0,.2) 40px, transparent 40px),
-        -o-linear-gradient(top, rgba(0,0,0,0) 95%, rgba(56,255,255,.8) 100%);
-
-        background-size: 100% 100%, 100% 100%;
-        // background-size: 60px 100%, 100% 22px;
-        // background-position: 10px 0px;
-}
-
-
-
-// .guide_graph {
-//   @include guide;
-//   background-image:
-//     repeating-linear-gradient(#ccc 0 1px, transparent 1px 100%),
-//     repeating-linear-gradient(90deg, #ccc 0 1px, transparent 1px 100%);
-//   }
-
-// .guide_baseline {
-//   @include guide;
-//   background-image:
-//     repeating-linear-gradient(cyan 0 2px, transparent 2px 100%);
-// }
-
-.page {
-    border: $q*2 solid red;
-}
-
-
-$body-width: 960px;
-$baseline: 22px;
-@mixin baseline-grid {
-	$columns: 16;
-	$column-color: rgba(200,0,0,.2);
-	$baseline-color: rgba(56,255,255,.8);
-	
-	// These are all automatically calculated
-	$gutter-width: 20px;  // Change if you like
-	$gutters: ($columns - 1);
-	$column-width: calc($body-width / $columns);
-	
-	background-image: -webkit-linear-gradient(0deg, $column-color $column-width, transparent $gutter-width),
-							-webkit-linear-gradient(top, rgba(0,0,0,0) 95%, $baseline-color 100%);
-	background-image: -moz-linear-gradient(0deg, $column-color $column-width, transparent $gutter-width),
-							-moz-linear-gradient(top, rgba(0,0,0,0) 95%, $baseline-color 100%);
-	background-image: -o-linear-gradient(0deg, $column-color $column-width, transparent $gutter-width),
-							-o-linear-gradient(top, rgba(0,0,0,0) 95%, $baseline-color 100%);
-	background-size: ($column-width + $gutter-width) 100%, 100% $baseline;
-	background-position: 10px 0px; // Use to offset and center your grid
-}
-
-// Example call
-.baseline-grid {
-}

package/scss/utilities/_index.scss

@@ -1,6 +0,0 @@
-// ============================================================================
-// Utilities | Main
-// ============================================================================
-
-
-// @forward "guides";