Skip to content

Commit 4ce36c2

Browse files
kseamonkseamon
committed
it works! (also in FF even)
1 parent 3d1a1f1 commit 4ce36c2

File tree

3 files changed

+130
-19
lines changed

3 files changed

+130
-19
lines changed

‎src/cdk-experimental/column-resize/resizable.ts

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,36 @@ import {ResizeStrategy} from './resize-strategy';
3535

3636
export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
3737
implements AfterViewInit, OnDestroy {
38-
minPx: number = 0;
39-
maxPx: number = Number.MAX_SAFE_INTEGER;
38+
protected minPxInternal: number = 0;
39+
protected maxPxInternal: number = Number.MAX_SAFE_INTEGER;
4040

4141
protected inlineHandle?: HTMLElement;
4242
protected overlayRef?: OverlayRef;
4343
protected readonly destroyed = new ReplaySubject<void>();
4444
protected readonly document: Document;
4545

46+
get minPx(): number {
47+
return this.minPxInternal;
48+
}
49+
set minPx(value: number) {
50+
this.minPxInternal = value;
51+
52+
if (this.elementRef.nativeElement) {
53+
this._applyMinPx();
54+
}
55+
}
56+
57+
get maxPx(): number {
58+
return this.maxPxInternal;
59+
}
60+
set maxPx(value: number) {
61+
this.maxPxInternal = value;
62+
63+
if (this.elementRef.nativeElement) {
64+
this._applyMaxPx();
65+
}
66+
}
67+
4668
constructor(
4769
protected readonly columnDef: CdkColumnDef,
4870
protected readonly columnResize: ColumnResize,
@@ -62,6 +84,7 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
6284
this._listenForRowHoverEvents();
6385
this._listenForResizeEvents();
6486
this._appendInlineHandle();
87+
this._applyMinPx();
6588
}
6689

6790
ngOnDestroy(): void {
@@ -166,6 +189,16 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
166189
this.resizeStrategy.applyColumnSize(this.columnDef.cssClassFriendlyName,
167190
this.elementRef.nativeElement!, sizeToApply);
168191
}
192+
193+
private _applyMinPx(): void {
194+
this.resizeStrategy.applyMinColumnSize(this.columnDef.cssClassFriendlyName,
195+
this.elementRef.nativeElement, this.minPx);
196+
}
197+
198+
private _applyMaxPx(): void {
199+
this.resizeStrategy.applyMaxColumnSize(this.columnDef.cssClassFriendlyName,
200+
this.elementRef.nativeElement, this.maxPx);
201+
}
169202

170203
private _appendInlineHandle(): void {
171204
this.inlineHandle = this.document.createElement('div');

‎src/cdk-experimental/column-resize/resize-strategy.ts

Lines changed: 94 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,16 @@ export abstract class ResizeStrategy {
1818
cssFriendlyColumnName: string,
1919
columnHeader: HTMLElement,
2020
sizeInPx: number): void;
21+
22+
abstract applyMinColumnSize(
23+
cssFriendlyColumnName: string,
24+
columnHeader: HTMLElement,
25+
minSizeInPx: number): void;
26+
27+
abstract applyMaxColumnSize(
28+
cssFriendlyColumnName: string,
29+
columnHeader: HTMLElement,
30+
minSizeInPx: number): void;
2131
}
2232

2333
/**
@@ -32,6 +42,15 @@ export class TableLayoutFixedResizeStrategy extends ResizeStrategy {
3242
applyColumnSize(_: string, columnHeader: HTMLElement, sizeInPx: number): void {
3343
columnHeader.style.width = coerceCssPixelValue(sizeInPx);
3444
}
45+
46+
applyMinColumnSize(_: string, columnHeader: HTMLElement, sizeInPx: number): void {
47+
columnHeader.style.minWidth = coerceCssPixelValue(sizeInPx);
48+
}
49+
50+
applyMaxColumnSize(): void {
51+
// Intentionally omitted as max-width causes strange rendering issues in Chrome.
52+
// Max size will still apply when the user is resizing this column.
53+
}
3554
}
3655

3756
/**
@@ -44,10 +63,14 @@ export class TableLayoutFixedResizeStrategy extends ResizeStrategy {
4463
export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDestroy {
4564
private readonly _document: Document;
4665
private readonly _columnIndexes = new Map<string, number>();
66+
private readonly _columnProperties = new Map<string, Map<string, string>>();
4767

4868
private _styleElement?: HTMLStyleElement;
4969
private _indexSequence = 0;
5070

71+
protected readonly defaultMinSize = 0;
72+
protected readonly defaultMaxSize = Number.MAX_SAFE_INTEGER;
73+
5174
constructor(
5275
private readonly _columnResize: ColumnResize,
5376
@Inject(DOCUMENT) document: any) {
@@ -56,40 +79,95 @@ export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDest
5679
}
5780

5881
applyColumnSize(cssFriendlyColumnName: string, _: HTMLElement, sizeInPx: number): void {
82+
const cssSize = coerceCssPixelValue(sizeInPx);
83+
84+
this._applyProperty(cssFriendlyColumnName, 'flex', `0 0.01 ${cssSize}`);
85+
}
86+
87+
applyMinColumnSize(cssFriendlyColumnName: string, _: HTMLElement, sizeInPx: number): void {
88+
const cssSize = coerceCssPixelValue(sizeInPx);
89+
90+
this._applyProperty(cssFriendlyColumnName, 'min-width', cssSize,
91+
sizeInPx !== this.defaultMinSize);
92+
}
93+
94+
applyMaxColumnSize(cssFriendlyColumnName: string, _: HTMLElement, sizeInPx: number): void {
95+
const cssSize = coerceCssPixelValue(sizeInPx);
96+
97+
this._applyProperty(cssFriendlyColumnName, 'max-width', cssSize,
98+
sizeInPx !== this.defaultMaxSize);
99+
}
100+
101+
protected getColumnCssClass(cssFriendlyColumnName: string): string {
102+
return `cdk-column-${cssFriendlyColumnName}`;
103+
}
104+
105+
ngOnDestroy() {
106+
// TODO: Use remove() once we're off IE11.
107+
if (this._styleElement && this._styleElement.parentNode) {
108+
this._styleElement.parentNode.removeChild(this._styleElement);
109+
this._styleElement = undefined;
110+
}
111+
}
112+
113+
private _applyProperty(
114+
cssFriendlyColumnName: string,
115+
key: string,
116+
value: string,
117+
enable = true): void {
118+
const properties = this._getColumnPropertiesMap(cssFriendlyColumnName);
119+
120+
if (enable) {
121+
properties.set(key, value);
122+
} else {
123+
properties.delete(key);
124+
}
125+
this._applySizeCSS(cssFriendlyColumnName);
126+
}
127+
128+
private _getStyleSheet(): CSSStyleSheet {
59129
if (!this._styleElement) {
60130
this._styleElement = this._document.createElement('style');
61131
this._styleElement.appendChild(this._document.createTextNode(''));
62132
this._document.head.appendChild(this._styleElement);
63133
}
134+
135+
return this._styleElement.sheet as CSSStyleSheet;
136+
}
137+
138+
private _getColumnPropertiesMap(cssFriendlyColumnName: string): Map<string, string> {
139+
let properties = this._columnProperties.get(cssFriendlyColumnName);
140+
if (properties === undefined) {
141+
properties = new Map<string, string>();
142+
this._columnProperties.set(cssFriendlyColumnName, properties);
143+
}
144+
return properties;
145+
}
64146

147+
private _applySizeCSS(cssFriendlyColumnName: string) {
148+
const properties = this._getColumnPropertiesMap(cssFriendlyColumnName);
149+
const propertyKeys = Array.from(properties.keys());
150+
65151
let index = this._columnIndexes.get(cssFriendlyColumnName);
66152
if (index === undefined) {
153+
if (!propertyKeys.length) {
154+
// Nothing to set or unset.
155+
return;
156+
}
157+
67158
index = this._indexSequence++;
68159
this._columnIndexes.set(cssFriendlyColumnName, index);
69160
} else {
70-
(this._styleElement.sheet as CSSStyleSheet).deleteRule(index);
161+
this._getStyleSheet().deleteRule(index);
71162
}
72163

73164
const columnClassName = this.getColumnCssClass(cssFriendlyColumnName);
74165
const tableClassName = this._columnResize.getIdClass();
75166

76167
const selector = `.${tableClassName} .${columnClassName}`;
77-
const cssSize = coerceCssPixelValue(sizeInPx);
78-
79-
(this._styleElement.sheet as CSSStyleSheet).insertRule(
80-
`${selector} {flex:0 0.01 ${cssSize}}`, index!);
81-
}
82-
83-
protected getColumnCssClass(cssFriendlyColumnName: string): string {
84-
return `cdk-column-${cssFriendlyColumnName}`;
85-
}
168+
const body = propertyKeys.map(key => `${key}:${properties.get(key)}`).join(';');
86169

87-
ngOnDestroy() {
88-
// TODO: Use remove() once we're off IE11.
89-
if (this._styleElement && this._styleElement.parentNode) {
90-
this._styleElement.parentNode.removeChild(this._styleElement);
91-
this._styleElement = undefined;
92-
}
170+
this._getStyleSheet().insertRule(`${selector} {${body}}`, index!);
93171
}
94172
}
95173

‎src/material-experimental/column-resize/resizable.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {Resizable} from '@angular/cdk-experimental/column-resize';
1313
import {MatColumnResizeOverlayHandle} from './overlay-handle';
1414

1515
export abstract class AbstractMatResizable extends Resizable<MatColumnResizeOverlayHandle> {
16-
minPx = 32;
16+
minPxInternal = 32;
1717

1818
protected getInlineHandleCssClassName(): string {
1919
return 'mat-resizable-handle';

0 commit comments

Comments
 (0)