Skip to content

Commit

Permalink
add max size option for split-grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@nathancahill
nathancahill committed Apr 9, 2021
1 parent 7784180 commit 8c40c84
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 14 deletions.
29 changes: 28 additions & 1 deletion packages/split-generator/src/SplitGridGenerator.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@
import Copy from './icons/Copy.svelte'
import Copied from './icons/Copied.svelte'
let mounted = false
let split = null
let mode = 'vanilla'
// Split.js options
const defaultRows = 1
const defaultColumns = 2
const defaultMinSize = 0
const defaultMaxSize = 100000
const defaultSnapOffset = 30
const defaultDragInterval = 1
Expand All @@ -30,6 +30,9 @@
let minSize = parsedQuery.minSize
? parseInt(parsedQuery.minSize, 10)
: defaultMinSize
let maxSize = parsedQuery.maxSize
? parseInt(parsedQuery.maxSize, 10)
: defaultMaxSize
let snapOffset = parsedQuery.snapOffset
? parseInt(parsedQuery.snapOffset, 10)
: defaultSnapOffset
Expand All @@ -41,6 +44,7 @@
...(rows !== defaultRows && { rows }),
...(columns !== defaultColumns && { columns }),
...(minSize !== defaultMinSize && { minSize }),
...(maxSize !== defaultMaxSize && { maxSize }),
...(snapOffset !== defaultSnapOffset && { snapOffset }),
...(dragInterval !== defaultDragInterval && { dragInterval }),
}
Expand All @@ -58,6 +62,7 @@
$: hasCodeChanges =
minSize !== defaultMinSize ||
maxSize !== defaultMaxSize ||
snapOffset !== defaultSnapOffset ||
dragInterval !== defaultDragInterval
Expand Down Expand Up @@ -113,6 +118,7 @@ Split({${
hasCodeChanges
? `\n${[
minSize !== defaultMinSize ? ` minSize: ${minSize},` : '',
maxSize !== defaultMaxSize ? ` maxSize: ${maxSize},` : '',
snapOffset !== defaultSnapOffset
? ` snapOffset: ${snapOffset},`
: '',
Expand Down Expand Up @@ -161,6 +167,7 @@ import Split from 'react-split-grid'
? `
${[
minSize !== defaultMinSize ? ` minSize={${minSize}}` : '',
maxSize !== defaultMaxSize ? ` maxSize={${maxSize}}` : '',
snapOffset !== defaultSnapOffset ? ` snapOffset={${snapOffset}}` : '',
dragInterval !== defaultDragInterval
? ` dragInterval={${dragInterval}}`
Expand Down Expand Up @@ -289,6 +296,10 @@ ${rowObjs
}
return Split({
minSize,
maxSize,
snapOffset,
dragInterval,
columnGutters: colObjs
.filter(col => col.track !== undefined)
.map(col => ({
Expand Down Expand Up @@ -471,6 +482,22 @@ ${rowObjs
/>
</div>

<div>
<label
for="company_website"
class="block text-sm font-medium text-gray-700 mb-1"
>
Maximum Size
</label>
<Stepper
bind:value="{maxSize}"
default="{defaultMaxSize}"
step="{50}"
min="{0}"
max="{1000}"
/>
</div>

<div>
<label
for="company_website"
Expand Down
28 changes: 27 additions & 1 deletion packages/split-grid/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,10 @@ is positioned on. These must match.

The minimum size in pixels for all tracks. Default: `0`

##### `maxSize: number`

The maximum size in pixels for all tracks. Default: `Infinity`

##### `columnMinSize: number`

The minimum size in pixels for all tracks. Default: `options.minSize`
Expand All @@ -118,10 +122,18 @@ The minimum size in pixels for all tracks. Default: `options.minSize`

The minimum size in pixels for all tracks. Default: `options.minSize`

##### `columnMaxSize: number`

The maximum size in pixels for all tracks. Default: `options.maxSize`

##### `rowMaxSize: number`

The maximum size in pixels for all tracks. Default: `options.maxSize`

##### `columnMinSizes: { [track: number]: number }`

An object keyed by `track` index, with values set to the minimum size in pixels for the
track at that index. Allows individual minSizes to be specified by track.
track at that index. Allows individual minSizes to be specified by track.
Note this option is plural with an `s`, while the two fallback options are singular.
Default: `options.columnMinSize`

Expand All @@ -132,6 +144,20 @@ track at that index. Allows individual minSizes to be specified by track.
Note this option is plural with an `s`, while the two fallback options are singular.
Default: `options.rowMinSize`

##### `columnMaxSizes: { [track: number]: number }`

An object keyed by `track` index, with values set to the maximum size in pixels for the
track at that index. Allows individual maxSizes to be specified by track.
Note this option is plural with an `s`, while the two fallback options are singular.
Default: `options.columnMaxSize`

##### `rowMaxSizes: { [track: number]: number }`

An object keyed by `track` index, with values set to the maximum size in pixels for the
track at that index. Allows individual maxSizes to be specified by track.
Note this option is plural with an `s`, while the two fallback options are singular.
Default: `options.rowMaxSize`

##### `snapOffset: number`

Snap to minimum size at this offset in pixels. Set to `0` to disable snap. Default: `30`
Expand Down
23 changes: 19 additions & 4 deletions packages/split-grid/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,29 @@ declare module 'split-grid' {
rowGutters?: Gutter[];
// The minimum size in pixels for all tracks. Default: `0`
minSize?: number;
// The maximum size in pixels for all tracks. Default: `Infinity`
maxSize?: number;

// The minimum size in pixels for all tracks. Default: `options.minSize`
columnMinSize?: number;
// The minimum size in pixels for all tracks. Default: `options.minSize`
rowMinSize?: number;

// The maximum size in pixels for all tracks. Default: `options.maxSize`
columnMaxSize?: number;
// The maximum size in pixels for all tracks. Default: `options.maxSize`
rowMaxSize?: number;

// An object keyed by `track` index, with values set to the minimum size in pixels for the track at that index. Allows individual minSizes to be specified by track. Note this option is plural with an `s`, while the two fallback options are singular. Default: `options.columnMinSize`
columnMinSizes?: MinSizes;
columnMinSizes?: Sizes;
// An object keyed by `track` index, with values set to the minimum size in pixels for the track at that index. Allows individual minSizes to be specified by track. Note this option is plural with an `s`, while the two fallback options are singular. Default: `options.rowMinSize`
rowMinSizes?: MinSizes;
rowMinSizes?: Sizes;

// An object keyed by `track` index, with values set to the maximum size in pixels for the track at that index. Allows individual maxSizes to be specified by track. Note this option is plural with an `s`, while the two fallback options are singular. Default: `options.columnMaxSize`
columnMaxSizes?: Sizes;
// An object keyed by `track` index, with values set to the maximum size in pixels for the track at that index. Allows individual maxSizes to be specified by track. Note this option is plural with an `s`, while the two fallback options are singular. Default: `options.rowMaxSize`
rowMaxSizes?: Sizes;

// Snap to minimum size at this offset in pixels. Set to `0` to disable snap. Default: `30`
snapOffset?: number;
// Snap to minimum size at this offset in pixels. Set to `0` to disable snap. Default: `options.snapOffset`
Expand Down Expand Up @@ -64,11 +79,11 @@ declare module 'split-grid' {
track: number;
};

export type MinSizes = { [track: number]: number };
export type Sizes = { [track: number]: number };

export type Direction = 'row' | 'column';

export type GridTemplateProperty = 'grid-template-column' | 'grid-template-row';

export default function Split(options: SplitOptions): SplitInstance;
}
}
28 changes: 20 additions & 8 deletions packages/split-grid/src/Gutter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,8 @@ class Gutter {

this.minSizeStart = options.minSizeStart
this.minSizeEnd = options.minSizeEnd
this.maxSizeStart = options.maxSizeStart
this.maxSizeEnd = options.maxSizeEnd

if (options.element) {
this.element.addEventListener('mousedown', this.startDragging)
Expand Down Expand Up @@ -292,16 +294,26 @@ class Gutter {
let mousePosition = this.getMousePosition(e)

const gutterSize = this.getSizeOfTrack(this.track)
const minMousePosition =
const minMousePosition = Math.max(
this.aTrackStart +
this.minSizeStart +
this.dragStartOffset +
this.computedGapPixels
const maxMousePosition =
this.minSizeStart +
this.dragStartOffset +
this.computedGapPixels,
this.bTrackEnd -
this.maxSizeEnd -
this.computedGapPixels -
(gutterSize - this.dragStartOffset),
)
const maxMousePosition = Math.min(
this.bTrackEnd -
this.minSizeEnd -
this.computedGapPixels -
(gutterSize - this.dragStartOffset)
this.minSizeEnd -
this.computedGapPixels -
(gutterSize - this.dragStartOffset),
this.aTrackStart +
this.maxSizeStart +
this.dragStartOffset +
this.computedGapPixels,
)
const minMousePositionOffset = minMousePosition + this.snapOffset
const maxMousePositionOffset = maxMousePosition - this.snapOffset

Expand Down
25 changes: 25 additions & 0 deletions packages/split-grid/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,12 @@ const createGutter = (direction, options) => gutterOptions => {
direction === 'column'
? options.columnMinSizes || {}
: options.rowMinSizes || {}
const trackMaxSizes =
direction === 'column'
? options.columnMaxSizes || {}
: options.rowMaxSizes || {}
const trackMinSize = direction === 'column' ? 'columnMinSize' : 'rowMinSize'
const trackMaxSize = direction === 'column' ? 'columnMaxSize' : 'rowMaxSize'

return new Gutter(
direction,
Expand All @@ -43,6 +48,24 @@ const createGutter = (direction, options) => gutterOptions => {
getOption(options, 'minSize', 0),
),
),
maxSizeStart: getTrackOption(
trackMaxSizes,
gutterOptions.track - 1,
getOption(
options,
trackMaxSize,
getOption(options, 'maxSize', Infinity),
),
),
maxSizeEnd: getTrackOption(
trackMaxSizes,
gutterOptions.track + 1,
getOption(
options,
trackMaxSize,
getOption(options, 'maxSize', Infinity),
),
),
...gutterOptions,
},
options,
Expand All @@ -59,6 +82,8 @@ class Grid {
rowGutters: options.rowGutters || [],
columnMinSizes: options.columnMinSizes || {},
rowMinSizes: options.rowMinSizes || {},
columnMaxSizes: options.columnMaxSizes || {},
rowMaxSizes: options.rowMaxSizes || {},
...options,
}

Expand Down

0 comments on commit 8c40c84

Please sign in to comment.