8000 feat(core): style properties module improvements and organization (#1… · NativeScript/NativeScript@3a7206f · GitHub
[go: up one dir, main page]
Skip to content

Commit 3a7206f

Browse files
CatchABusCatchABus
authored
feat(core): style properties module improvements and organization (#10685)
1 parent 56af0b2 commit 3a7206f

File tree

13 files changed

+525
-469
lines changed

13 files changed

+525
-469
lines changed

‎packages/core/core-types/index.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,9 @@ export namespace CoreTypes {
2929
export type LengthPxUnit = { readonly unit: 'px'; readonly value: px };
3030
export type LengthPercentUnit = { readonly unit: '%'; readonly value: percent };
3131

32-
export type LengthType = 'auto' | dip | LengthDipUnit | LengthPxUnit;
33-
export type PercentLengthType = 'auto' | dip | LengthDipUnit | LengthPxUnit | LengthPercentUnit;
32+
export type FixedLengthType = dip | LengthDipUnit | LengthPxUnit;
33+
export type LengthType = 'auto' | FixedLengthType;
34+
export type PercentLengthType = 'auto' | FixedLengthType | LengthPercentUnit;
3435

3536
export const zeroLength: LengthType = {
3637
value: 0,

‎packages/core/ui/animation/animation-interfaces.ts

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,19 @@ export type Transformation = {
88
value: TransformationValue;
99
};
1010

11-
export type TransformationType = 'rotate' | 'translate' | 'translateX' | 'translateY' | 'scale' | 'scaleX' | 'scaleY';
11+
export type TransformationType = 'rotate' | 'rotate3d' | 'rotateX' | 'rotateY' | 'translate' | 'translate3d' | 'translateX' | 'translateY' | 'scale' | 'scale3d' | 'scaleX' | 'scaleY';
1212

13-
export type TransformationValue = Pair | number;
13+
export type TransformationValue = Point3D | Pair | number;
14+
15+
export interface Point3D {
16+
x: number;
17+
y: number;
18+
z: number;
19+
}
1420

1521
export type TransformFunctionsInfo = {
1622
translate: Pair;
17-
rotate: number;
23+
rotate: Point3D;
1824
scale: Pair;
1925
};
2026

@@ -55,7 +61,7 @@ export interface AnimationDefinition {
5561
scale?: Pair;
5662
height?: CoreTypes.PercentLengthType | string;
5763
width?: CoreTypes.PercentLengthType | string;
58-
rotate?: number;
64+
rotate?: Point3D;
5965
duration?: number;
6066
delay?: number;
6167
iterations?: number;

‎packages/core/ui/animation/index.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export type Transformation = {
8383
/**
8484
* Defines possible css transformations
8585
*/
86-
export type TransformationType = 'rotate' | 'rotateX' | 'rotateY' | 'translate' | 'translateX' | 'translateY' | 'scale' | 'scaleX' | 'scaleY';
86+
export F438 type TransformationType = 'rotate' | 'rotate3d' | 'rotateX' | 'rotateY' | 'translate' | 'translate3d' | 'translateX' | 'translateY' | 'scale' | 'scale3d' | 'scaleX' | 'scaleY';
8787

8888
/**
8989
* Defines possible css transformation values

‎packages/core/ui/styling/background-common.ts

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { LinearGradient } from './linear-gradient';
33
// Types.
44
import { Color } from '../../color';
55
import { BoxShadow } from './box-shadow';
6+
import { ClipPathFunction } from './clip-path-function';
67

78
/**
89
* Flags used to hint the background handler if it has to clear a specific property
@@ -39,7 +40,7 @@ export class Background {
3940
public borderTopRightRadius = 0;
4041
public borderBottomLeftRadius = 0;
4142
public borderBottomRightRadius = 0;
42-
public clipPath: string;
43+
public clipPath: string | ClipPathFunction;
4344
public boxShadow: BoxShadow;
4445
public clearFlags: number = BackgroundClearFlags.NONE;
4546

@@ -192,7 +193,7 @@ export class Background {
192193
return clone;
193194
}
194195

195-
public withClipPath(value: string): Background {
196+
public withClipPath(value: string | ClipPathFunction): Background {
196197
const clone = this.clone();
197198
clone.clipPath = value;
198199

@@ -224,16 +225,23 @@ export class Background {
224225
return false;
225226
}
226227

227-
let imagesEqual = false;
228+
let isImageEqual = false;
228229
if (value1 instanceof LinearGradient && value2 instanceof LinearGradient) {
229-
imagesEqual = LinearGradient.equals(value1, value2);
230+
isImageEqual = LinearGradient.equals(value1, value2);
230231
} else {
231-
imagesEqual = value1.image === value2.image;
232+
isImageEqual = value1.image === value2.image;
233+
}
234+
235+
let isClipPathEqual = false;
236+
if (value1.clipPath instanceof ClipPathFunction && value2.clipPath instanceof ClipPathFunction) {
237+
isClipPathEqual = ClipPathFunction.equals(value1.clipPath, value2.clipPath);
238+
} else {
239+
isClipPathEqual = value1.clipPath === value2.clipPath;
232240
}
233241

234242
return (
235243
Color.equals(value1.color, value2.color) &&
236-
imagesEqual &&
244+
isImageEqual &&
237245
value1.position === value2.position &&
238246
value1.repeat === value2.repeat &&
239247
value1.size === value2.size &&
@@ -249,7 +257,7 @@ export class Background {
249257
value1.borderTopRightRadius === value2.borderTopRightRadius &&
250258
value1.borderBottomRightRadius === value2.borderBottomRightRadius &&
251259
value1.borderBottomLeftRadius === value2.borderBottomLeftRadius &&
252-
value1.clipPath === value2.clipPath
260+
isClipPathEqual
253261
// && value1.clearFlags === value2.clearFlags
254262
);
255263
}

‎packages/core/ui/styling/background.android.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { View } from '../core/view';
22
import { LinearGradient } from './linear-gradient';
3+
import { ClipPathFunction } from './clip-path-function';
34
import { isDataURI, isFileOrResourcePath, RESOURCE_PREFIX, FILE_PREFIX } from '../../utils';
45
import { parse } from '../../css-value';
56
import { path, knownFolders } from '../../file-system';
@@ -92,7 +93,7 @@ export function refreshBorderDrawable(view: View, borderDrawable: org.nativescri
9293
background.borderBottomRightRadius,
9394
background.borderBottomLeftRadius,
9495

95-
background.clipPath,
96+
background.clipPath instanceof ClipPathFunction ? background.clipPath.toString() : background.clipPath,
9697

9798
background.color ? background.color.android : 0,
9899
imageUri,
@@ -103,7 +104,7 @@ export function refreshBorderDrawable(view: View, borderDrawable: org.nativescri
103104
background.position,
104105
backgroundPositionParsedCSSValues,
105106
background.size,
106-
backgroundSizeParsedCSSValues
107+
backgroundSizeParsedCSSValues,
107108
);
108109
//console.log(`>>> ${borderDrawable.toDebugString()}`);
109110
}

‎packages/core/ui/styling/background.d.ts

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { Color } from '../../color';
22
import { View } from '../core/view';
33
import { BackgroundRepeat } from '../../css/parser';
4-
import { LinearGradient } from '../styling/linear-gradient';
4+
import { LinearGradient } from './linear-gradient';
5+
import { ClipPathFunction } from './clip-path-function';
56
import { BoxShadow } from './box-shadow';
67
import { Background as BackgroundDefinition } from './background-common';
78

@@ -32,7 +33,7 @@ export enum CacheMode {
3233
// public borderTopRightRadius: number;
3334
// public borderBottomRightRadius: number;
3435
// public borderBottomLeftRadius: number;
35-
// public clipPath: string;
36+
// public clipPath: string | ClipPathFunction;
3637
// public boxShadow: string | BoxShadow;
3738
// public clearFlags: number;
3839

@@ -80,12 +81,12 @@ export namespace ios {
8081
export function drawBackgroundVisualEffects(view: View): void;
8182
export function clearBackgroundVisualEffects(view: View): void;
8283
export function createUIImageFromURI(view: View, imageURI: string, flip: boolean, callback: (image: any) => void): void;
83-
export function generateClipPath(view: View, bounds: CGRect): any;
84-
export function generateShadowLayerPaths(view: View, bounds: CGRect): { maskPath: any; shadowPath: any };
85-
export function getUniformBorderRadius(view: View, bounds: CGRect): number;
86-
export function generateNonUniformBorderInnerClipRoundedPath(view: View, bounds: CGRect): any;
87-
export function generateNonUniformBorderOuterClipRoundedPath(view: View, bounds: CGRect): any;
88-
export function generateNonUniformMultiColorBorderRoundedPaths(view: View, bounds: CGRect): Array<any>;
84+
export function generateClipPath(view: View, bounds: any /* CGRect */): any;
85+
export function generateShadowLayerPaths(view: View, bounds: any /* CGRect */): { maskPath: any; shadowPath: any };
86+
export function getUniformBorderRadius(view: View, bounds: any /* CGRect */): number;
87+
export function generateNonUniformBorderInnerClipRoundedPath(view: View, bounds: any /* CGRect */): any;
88+
export function generateNonUniformBorderOuterClipRoundedPath(view: View, bounds: any /* CGRect */): any;
89+
export function generateNonUniformMultiColorBorderRoundedPaths(view: View, bounds: any /* CGRect */): Array<any>;
8990
}
9091

9192
export namespace ad {

‎packages/core/ui/styling/background.ios.ts

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { parse as cssParse } from '../../css-value/reworkcss-value.js';
1111
import { BoxShadow } from './box-shadow';
1212
import { Length } from './style-properties';
1313
import { BackgroundClearFlags } from './background-common';
14+
import { ClipPathFunction } from './clip-path-function';
1415

1516
export * from './background-common';
1617

@@ -303,30 +304,28 @@ export namespace ios {
303304
let path: UIBezierPath;
304305
const clipPath = background.clipPath;
305306

306-
const functionName: string = clipPath.substring(0, clipPath.indexOf('('));
307-
const value: string = clipPath.replace(`${functionName}(`, '').replace(')', '');
308-
309-
switch (functionName) {
310-
case 'rect':
311-
path = rectPath(value, position);
312-
break;
313-
314-
case 'inset':
315-
path = insetPath(value, position);
316-
break;
317-
318-
case 'circle':
319-
path = circlePath(value, position);
320-
break;
321-
322-
case 'ellipse':
323-
path = ellipsePath(value, position);
324-
break;
325-
326-
case 'polygon':
327-
path = polygonPath(value, position);
328-
break;
307+
if (clipPath instanceof ClipPathFunction) {
308+
switch (clipPath.shape) {
309+
case 'rect':
310+
path = rectPath(clipPath.rule, position);
311+
break;
312+
case 'inset':
313+
path = insetPath(clipPath.rule, position);
314+
break;
315+
case 'circle':
316+
path = circlePath(clipPath.rule, position);
317+
break;
318+
case 'ellipse':
319+
path = ellipsePath(clipPath.rule, position);
320+
break;
321+
case 'polygon':
322+
path = polygonPath(clipPath.rule, position);
323+
break;
324+
}
325+
} else {
326+
path = null;
329327
}
328+
330329
return path;
331330
}
332331

‎packages/core/ui/styling/clip-path-function.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
type ClipPathShape = 'rect' | 'circle' | 'ellipse' | 'polygon' | 'inset';
2+
3+
interface IClipPathFunction {
4+
shape: ClipPathShape;
5+
rule: string;
6+
}
7+
8+
export class ClipPathFunction implements IClipPathFunction {
9+
private readonly _shape: ClipPathShape;
10+
private readonly _rule: string;
11+
12+
constructor(shape: ClipPathShape, rule: string) {
13+
this._shape = shape;
14+
this._rule = rule;
15+
}
16+
17+
get shape(): ClipPathShape {
18+
return this._shape;
19+
}
20+
21+
get rule(): string {
22+
return this._rule;
23+
}
24+
25+
public static equals(value1: ClipPathFunction, value2: ClipPathFunction): boolean {
26+
return value1.shape === value2.shape && value1.rule === value2.rule;
27+
}
28+
29+
toJSON(): IClipPathFunction {
30+
return {
31+
shape: this._shape,
32+
rule: this._rule,
33+
};
34+
}
35+
36+
toString(): string {
37+
return `${this._shape}(${this._rule})`;
38+
}
39+
}

‎packages/core/ui/styling/css-animation-parser.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { CssAnimationProperty } from '../core/properties';
33
import { KeyframeAnimationInfo, KeyframeDeclaration, KeyframeInfo, UnparsedKeyframe } from '../animation/keyframe-animation';
44
import { timeConverter, animationTimingFunctionConverter } from '../styling/converters';
55

6-
import { transformConverter } from '../styling/style-properties';
6+
import { transformConverter } from '../styling/css-transform';
77
import { cleanupImportantFlags } from './css-utils';
88

99
const ANIMATION_PROPERTY_HANDLERS = Object.freeze({

0 commit comments

Comments
 (0)
0