10000 restrict vertical resize with sizeToContent by adumesny · Pull Request #2612 · gridstack/gridstack.js · GitHub
[go: up one dir, main page]
Skip to content

restrict vertical resize with sizeToContent #2612

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 4, 2024
Merged

restrict vertical resize with sizeToContent #2612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions src/dd-gridstack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,18 @@ export class DDGridStack {
} else if (opts === 'option') {
dEl.setupResizable({ [key]: value });
} else {
const grid = dEl.el.gridstackNode.grid;
let handles = dEl.el.getAttribute('gs-resize-handles') ? dEl.el.getAttribute('gs-resize-handles') : grid.opts.resizable.handles;
let autoHide = !grid.opts.alwaysShowResizeHandle;
const n = dEl.el.gridstackNode;
const grid = n.grid;
let handles = dEl.el.getAttribute('gs-resize-handles') || grid.opts.resizable.handles || 'e,s,se';
if (handles === 'all') handles = 'n,e,s,w,se,sw,ne,nw';
// NOTE: keep the resize handles as e,w don't have enough space (10px) to show resize corners anyway. limit during drag instead
// restrict vertical resize if height is done to match content anyway... odd to have it spring back
// if (Utils.shouldSizeToContent(n)) {
// const doE = handles.indexOf('e') !== -1;
// const doW = handles.indexOf('w') !== -1;
// handles = doE ? (doW ? 'e,w' : 'e') : (doW ? 'w' : '');
// }
const autoHide = !grid.opts.alwaysShowResizeHandle;
dEl.setupResizable({
...grid.opts.resizable,
...{ handles, autoHide },
Expand Down
15 changes: 7 additions & 8 deletions src/dd-resizable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
import { DDResizableHandle } from './dd-resizable-handle';
import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
import { Utils } from './utils';
import { DDUIData, Rect, Size } from './types';
import { DDUIData, GridItemHTMLElement, Rect, Size } from './types';
import { DDManager } from './dd-manager';

// import { GridItemHTMLElement } from './types'; let count = 0; // TEST
Expand All @@ -32,7 +32,7 @@ interface RectScaleReciprocal {
export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt<DDResizableOpt> {

// have to be public else complains for HTMLElementExtendOpt ?
public el: HTMLElement;
public el: GridItemHTMLElement;
public option: DDResizableOpt;

/** @internal */
Expand All @@ -57,6 +57,8 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
protected parentOriginStylePosition: string;
/** @internal */
protected static _originStyleProp = ['width', 'height', 'position', 'left', 'top', 'opacity', 'zIndex'];
/** @internal */
protected sizeToContent: boolean;

constructor(el: HTMLElement, opts: DDResizableOpt = {}) {
super();
Expand Down Expand Up @@ -152,11 +154,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt

/** @internal */
protected _setupHandlers(): DDResizable {
let handlerDirection = this.option.handles || 'e,s,se';
8ECE if (handlerDirection === 'all') {
handlerDirection = 'n,e,s,w,se,sw,ne,nw';
}
this.handlers = handlerDirection.split(',')
this.handlers = this.option.handles.split(',')
.map(dir => dir.trim())
.map(dir => new DDResizableHandle(this.el, dir, {
start: (event: MouseEvent) => {
Expand All @@ -174,6 +172,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt

/** @internal */
protected _resizeStart(event: MouseEvent): DDResizable {
this.sizeToContent = Utils.shouldSizeToContent(this.el.gridstackNode);
this.originalRect = this.el.getBoundingClientRect();
this.scrollEl = Utils.getScrollElement(this.el);
this.scrollY = this.scrollEl.scrollTop;
Expand Down Expand Up @@ -260,7 +259,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
};

const offsetX = event.clientX - oEvent.clientX;
const offsetY = event.clientY - oEvent.clientY;
const offsetY = this.sizeToContent ? 0 : event.clientY - oEvent.clientY; // prevent vert resize

if (dir.indexOf('e') > -1) {
newRect.width += offsetX;
Expand Down
0