Add maxSizes attribute

README.md

@@ -37,6 +37,7 @@ Use the `split-me` tag anywhere you like. Set the number of slots in the splitte
 - `fixed : boolean` Prevent slots from being resized.
 - `sizes : string` Set the initial size of the slots by passing a comma separated array with percentages or fractions. For example: `sizes="0.33, 0.67"` or `sizes="50%, 25%, 25%"`
 - `minSizes : string` Set the minimum size of the slots by passing a comma separated array with percentages or fractions.
+- `maxSizes : string` Set the maximum size of the slots by passing a comma separated array with percentages or fractions.
 - `throttle : number` Set the minimum time (in ms) that has to pass between resize events while dragging. Defaults to `0`
 
 ### Events:

src/components.d.ts

@@ -32,6 +32,7 @@ declare global {
     interface SplitMe {
       'd': 'horizontal' | 'vertical';
       'fixed': boolean;
+      'maxSizes': string;
       'minSizes': string;
       'n': number;
       'sizes': string;
@@ -60,6 +61,7 @@ declare global {
     export interface SplitMeAttributes extends HTMLAttributes {
       'd'?: 'horizontal' | 'vertical';
       'fixed'?: boolean;
+      'maxSizes'?: string;
       'minSizes'?: string;
       'n'?: number;
       'onSlotResized'?: (event: CustomEvent) => void;

src/components/split-me/split-me.tsx

@@ -17,6 +17,7 @@ export class SplitMe {
   @Prop() fixed: boolean = false;
   @Prop() sizes: string = '';
   @Prop() minSizes: string = '';
+  @Prop() maxSizes: string = '';
   @Prop() throttle: number = 0;
 
   @State() slotEnd: number[];
@@ -38,6 +39,11 @@ export class SplitMe {
     this.minSizesChanged = true;
   }
 
+  @Watch('maxSizes')
+  watchMaxSizes() {
+    this.maxSizesChanged = true;
+  }
+
   @Watch('throttle')
   watchThrottle(curr: number) {
     this.throttledResize = throttle(this.resize.bind(this), curr);
@@ -46,9 +52,11 @@ export class SplitMe {
   throttledResize: Function & Cancelable;
 
   minSizesArr: number[];
+  maxSizesArr: number[];
   nChanged: boolean = false;
   sizesChanged: boolean = false;
   minSizesChanged: boolean = false;
+  maxSizesChanged: boolean = false;
 
   componentWillLoad() {
     this.throttledResize = throttle(this.resize.bind(this), this.throttle);
@@ -66,6 +74,13 @@ export class SplitMe {
     } else {
       this.minSizesArr = this.defaultMinSizes(this.n);
     }
+    // Validate the maxSize attribute
+    let maxSizes: number[] = this.parseSizes(this.maxSizes);
+    if (maxSizes.length === this.n) {
+      this.maxSizesArr = maxSizes;
+    } else {
+      this.maxSizesArr = this.defaultMaxSizes(this.n);
+    }
   }
 
   componentWillUpdate() {
@@ -79,24 +94,34 @@ export class SplitMe {
     }
 
     if (this.sizesChanged) {
+      // If both sizes and n changed, size takes precedence to resize the splitter
       this.slotEnd = this.assignedSlotEnd(sizes);
+      this.nChanged = false;
+      this.sizesChanged = false;
     } else if (this.nChanged) {
       this.slotEnd = this.rescaleSlotEnd(this.n, this.slotEnd);
+      this.nChanged = false;
     }
 
-
     if (this.minSizesChanged) {
       let minSizes: number[] = this.parseSizes(this.minSizes);
       if (minSizes.length === this.n) {
         this.minSizesArr = minSizes;
       } else {
         this.minSizesArr = this.defaultMinSizes(this.n);
       }
+      this.minSizesChanged = false;
     }
 
-    this.nChanged = false;
-    this.sizesChanged = false;
-    this.minSizesChanged = false;
+    if (this.maxSizesChanged) {
+      let maxSizes: number[] = this.parseSizes(this.minSizes);
+      if (maxSizes.length === this.n) {
+        this.maxSizesArr = maxSizes;
+      } else {
+        this.maxSizesArr = this.defaultMaxSizes(this.n);
+      }
+      this.maxSizesChanged = false;
+    }
   }
 
   defaultSlotEnd(n: number) : number[] {
@@ -140,6 +165,14 @@ export class SplitMe {
     return minSizes;
   }
 
+  defaultMaxSizes(n: number) : number[] {
+    let maxSizes: number[] = [];
+    for (let i = 0; i < n; ++i) {
+      maxSizes.push(1);
+    }
+    return maxSizes;
+  }
+
   parseSizes(sizesStr: string) : number[] {
     if (!sizesStr) {
       return [];
@@ -180,25 +213,30 @@ export class SplitMe {
 
   onTouchMove = (event: TouchEvent, i: number) => {
     // Resize on mobile
+    // Avoid scrolling the page
     event.preventDefault();
     if (event.touches.length > 0) {
-      // Avoid scrolling the page
       this.throttledResize(event.touches[0].clientX, event.touches[0].clientY, i);
     }
   }
 
   resize(x: number, y: number, i: number) {
-    let min = i > 0 ? this.slotEnd[i - 1] : 0;
-    min += this.minSizesArr[i];
+    let start = i > 0 ? this.slotEnd[i - 1] : 0;
+    let min = start + this.minSizesArr[i];
+    min = Math.max(min, this.slotEnd[i + 1] - this.maxSizesArr[i + 1]);
+
     let max = i < this.n - 1 ? this.slotEnd[i + 1] : 1;
     max -= this.minSizesArr[i + 1];
+    max = Math.min(max, start + this.maxSizesArr[i]);
+
     let frac: number;
     let rect = this.el.getBoundingClientRect();
     if (this.d === 'vertical') {
       frac = (y - rect.top ) / rect.height;
     } else {
       frac = (x - rect.left ) / rect.width;
     }
+
     if (frac > min && frac < max) {
       this.slotEnd = [...this.slotEnd.slice(0, i), frac, ...this.slotEnd.slice(i + 1) ];
       this.slotResized.emit(i);
@@ -217,7 +255,7 @@ export class SplitMe {
     if (!this.slotEnd || this.slotEnd.length === 0) {
       return null;
     }
-
+    
     let slotContainers = [];
     let slotDividers = [];
     let phantomDividers = [];

src/index.html

@@ -27,10 +27,10 @@
 
   <div style="height: 5rem"></div> -->
 
-    <split-me slot="0" d="vertical" id="splitter" n="3" sizes="0.3, 0.3, 0.4" min-sizes="0.2, 0.1, 0.3" throttle=200>
+    <split-me slot="0" d="verticall" id="splitter" n="2" sizes="0.5, 0.5" throttle=0>
       <div slot="0" class="fill" style="background-color: red;"></div>
       <div slot="1" class="fill" style="background-color: green;"></div>
-      <div slot="2" class="fill" style="background-color: blue;"></div>
+      <!-- <div slot="2" class="fill" style="background-color: blue;"></div> -->
     </split-me>
 
 </body>
@@ -50,10 +50,8 @@
   }
 
   split-me {
-    --divider-length: 50%;
-    --divider-color: rgba(0,0,0);
-    --divider-shadow: 0 0 0.3rem black;
-    --divider-thickness: 1rem;
+    --divider-thickness: 0.75rem;
+    --divider-color: yellow;
   }
 </style>