Skip to content

Commit

Permalink
add features for border-style dashed, dotted, double. (#2531)
Browse files Browse the repository at this point in the history
  • Loading branch information
@flyskyko
flyskyko authored Jul 4, 2021
1 parent 2a013e2 commit 72cd528
Show file tree
Hide file tree
Showing 7 changed files with 434 additions and 27 deletions.
11 changes: 10 additions & 1 deletion src/css/property-descriptors/border-style.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
export enum BORDER_STYLE {
NONE = 0,
SOLID = 1
SOLID = 1,
DASHED = 2,
DOTTED = 3,
DOUBLE = 4
}

const borderStyleForSide = (side: string): IPropertyIdentValueDescriptor<BORDER_STYLE> => ({
Expand All @@ -13,6 +16,12 @@ const borderStyleForSide = (side: string): IPropertyIdentValueDescriptor<BORDER_
switch (style) {
case 'none':
return BORDER_STYLE.NONE;
case 'dashed':
return BORDER_STYLE.DASHED;
case 'dotted':
return BORDER_STYLE.DOTTED;
case 'double':
return BORDER_STYLE.DOUBLE;
}
return BORDER_STYLE.SOLID;
}
Expand Down
1 change: 1 addition & 0 deletions src/css/property-descriptors/display.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export const display: IPropertyListDescriptor<Display> = {
const parseDisplayValue = (display: string): Display => {
switch (display) {
case 'block':
case '-webkit-box':
return DISPLAY.BLOCK;
case 'inline':
return DISPLAY.INLINE;
Expand Down
6 changes: 3 additions & 3 deletions src/global.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
interface CSSStyleDeclaration {
textDecorationColor: string | null;
textDecorationLine: string | null;
overflowWrap: string | null;
textDecorationColor: string;
textDecorationLine: string;
overflowWrap: string;
}

interface DocumentType extends Node, ChildNode {
Expand Down
99 changes: 99 additions & 0 deletions src/render/border.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,105 @@ export const parsePathForBorder = (curves: BoundCurves, borderSide: number): Pat
}
};

export const parsePathForBorderDoubleOuter = (curves: BoundCurves, borderSide: number): Path[] => {
switch (borderSide) {
case 0:
return createPathFromCurves(
curves.topLeftBorderBox,
curves.topLeftBorderDoubleOuterBox,
curves.topRightBorderBox,
curves.topRightBorderDoubleOuterBox
);
case 1:
return createPathFromCurves(
curves.topRightBorderBox,
curves.topRightBorderDoubleOuterBox,
curves.bottomRightBorderBox,
curves.bottomRightBorderDoubleOuterBox
);
case 2:
return createPathFromCurves(
curves.bottomRightBorderBox,
curves.bottomRightBorderDoubleOuterBox,
curves.bottomLeftBorderBox,
curves.bottomLeftBorderDoubleOuterBox
);
case 3:
default:
return createPathFromCurves(
curves.bottomLeftBorderBox,
curves.bottomLeftBorderDoubleOuterBox,
curves.topLeftBorderBox,
curves.topLeftBorderDoubleOuterBox
);
}
};

export const parsePathForBorderDoubleInner = (curves: BoundCurves, borderSide: number): Path[] => {
switch (borderSide) {
case 0:
return createPathFromCurves(
curves.topLeftBorderDoubleInnerBox,
curves.topLeftPaddingBox,
curves.topRightBorderDoubleInnerBox,
curves.topRightPaddingBox
);
case 1:
return createPathFromCurves(
curves.topRightBorderDoubleInnerBox,
curves.topRightPaddingBox,
curves.bottomRightBorderDoubleInnerBox,
curves.bottomRightPaddingBox
);
case 2:
return createPathFromCurves(
curves.bottomRightBorderDoubleInnerBox,
curves.bottomRightPaddingBox,
curves.bottomLeftBorderDoubleInnerBox,
curves.bottomLeftPaddingBox
);
case 3:
default:
return createPathFromCurves(
curves.bottomLeftBorderDoubleInnerBox,
curves.bottomLeftPaddingBox,
curves.topLeftBorderDoubleInnerBox,
curves.topLeftPaddingBox
);
}
};

export const parsePathForBorderStroke = (curves: BoundCurves, borderSide: number): Path[] => {
switch (borderSide) {
case 0:
return createStrokePathFromCurves(curves.topLeftBorderStroke, curves.topRightBorderStroke);
case 1:
return createStrokePathFromCurves(curves.topRightBorderStroke, curves.bottomRightBorderStroke);
case 2:
return createStrokePathFromCurves(curves.bottomRightBorderStroke, curves.bottomLeftBorderStroke);
case 3:
default:
return createStrokePathFromCurves(curves.bottomLeftBorderStroke, curves.topLeftBorderStroke);
}
};

const createStrokePathFromCurves = (outer1: Path, outer2: Path): Path[] => {
const path = [];
if (isBezierCurve(outer1)) {
path.push(outer1.subdivide(0.5, false));
} else {
path.push(outer1);
}

if (isBezierCurve(outer2)) {
path.push(outer2.subdivide(0.5, true));
} else {
path.push(outer2);
}

return path;
};

const createPathFromCurves = (outer1: Path, inner1: Path, outer2: Path, inner2: Path): Path[] => {
const path = [];
if (isBezierCurve(outer1)) {
Expand Down
161 changes: 154 additions & 7 deletions src/render/bound-curves.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,18 @@ import {BezierCurve} from './bezier-curve';
import {Path} from './path';

export class BoundCurves {
readonly topLeftBorderDoubleOuterBox: Path;
readonly topRightBorderDoubleOuterBox: Path;
readonly bottomRightBorderDoubleOuterBox: Path;
readonly bottomLeftBorderDoubleOuterBox: Path;
readonly topLeftBorderDoubleInnerBox: Path;
readonly topRightBorderDoubleInnerBox: Path;
readonly bottomRightBorderDoubleInnerBox: Path;
readonly bottomLeftBorderDoubleInnerBox: Path;
readonly topLeftBorderStroke: Path;
readonly topRightBorderStroke: Path;
readonly bottomRightBorderStroke: Path;
readonly bottomLeftBorderStroke: Path;
readonly topLeftBorderBox: Path;
readonly topRightBorderBox: Path;
readonly bottomRightBorderBox: Path;
Expand Down Expand Up @@ -60,6 +72,141 @@ export class BoundCurves {
const paddingBottom = getAbsoluteValue(styles.paddingBottom, element.bounds.width);
const paddingLeft = getAbsoluteValue(styles.paddingLeft, element.bounds.width);

this.topLeftBorderDoubleOuterBox =
tlh > 0 || tlv > 0
? getCurvePoints(
bounds.left + borderLeftWidth / 3,
bounds.top + borderTopWidth / 3,
tlh - borderLeftWidth / 3,
tlv - borderTopWidth / 3,
CORNER.TOP_LEFT
)
: new Vector(bounds.left + borderLeftWidth / 3, bounds.top + borderTopWidth / 3);
this.topRightBorderDoubleOuterBox =
tlh > 0 || tlv > 0
? getCurvePoints(
bounds.left + topWidth,
bounds.top + borderTopWidth / 3,
trh - borderRightWidth / 3,
trv - borderTopWidth / 3,
CORNER.TOP_RIGHT
)
: new Vector(bounds.left + bounds.width - borderRightWidth / 3, bounds.top + borderTopWidth / 3);
this.bottomRightBorderDoubleOuterBox =
brh > 0 || brv > 0
? getCurvePoints(
bounds.left + bottomWidth,
bounds.top + rightHeight,
brh - borderRightWidth / 3,
brv - borderBottomWidth / 3,
CORNER.BOTTOM_RIGHT
)
: new Vector(
bounds.left + bounds.width - borderRightWidth / 3,
bounds.top + bounds.height - borderBottomWidth / 3
);
this.bottomLeftBorderDoubleOuterBox =
blh > 0 || blv > 0
? getCurvePoints(
bounds.left + borderLeftWidth / 3,
bounds.top + leftHeight,
blh - borderLeftWidth / 3,
blv - borderBottomWidth / 3,
CORNER.BOTTOM_LEFT
)
: new Vector(bounds.left + borderLeftWidth / 3, bounds.top + bounds.height - borderBottomWidth / 3);
this.topLeftBorderDoubleInnerBox =
tlh > 0 || tlv > 0
? getCurvePoints(
bounds.left + (borderLeftWidth * 2) / 3,
bounds.top + (borderTopWidth * 2) / 3,
tlh - (borderLeftWidth * 2) / 3,
tlv - (borderTopWidth * 2) / 3,
CORNER.TOP_LEFT
)
: new Vector(bounds.left + (borderLeftWidth * 2) / 3, bounds.top + (borderTopWidth * 2) / 3);
this.topRightBorderDoubleInnerBox =
tlh > 0 || tlv > 0
? getCurvePoints(
bounds.left + topWidth,
bounds.top + (borderTopWidth * 2) / 3,
trh - (borderRightWidth * 2) / 3,
trv - (borderTopWidth * 2) / 3,
CORNER.TOP_RIGHT
)
: new Vector(
bounds.left + bounds.width - (borderRightWidth * 2) / 3,
bounds.top + (borderTopWidth * 2) / 3
);
this.bottomRightBorderDoubleInnerBox =
brh > 0 || brv > 0
? getCurvePoints(
bounds.left + bottomWidth,
bounds.top + rightHeight,
brh - (borderRightWidth * 2) / 3,
brv - (borderBottomWidth * 2) / 3,
CORNER.BOTTOM_RIGHT
)
: new Vector(
bounds.left + bounds.width - (borderRightWidth * 2) / 3,
bounds.top + bounds.height - (borderBottomWidth * 2) / 3
);
this.bottomLeftBorderDoubleInnerBox =
blh > 0 || blv > 0
? getCurvePoints(
bounds.left + (borderLeftWidth * 2) / 3,
bounds.top + leftHeight,
blh - (borderLeftWidth * 2) / 3,
blv - (borderBottomWidth * 2) / 3,
CORNER.BOTTOM_LEFT
)
: new Vector(
bounds.left + (borderLeftWidth * 2) / 3,
bounds.top + bounds.height - (borderBottomWidth * 2) / 3
);
this.topLeftBorderStroke =
tlh > 0 || tlv > 0
? getCurvePoints(
bounds.left + borderLeftWidth / 2,
bounds.top + borderTopWidth / 2,
tlh - borderLeftWidth / 2,
tlv - borderTopWidth / 2,
CORNER.TOP_LEFT
)
: new Vector(bounds.left + borderLeftWidth / 2, bounds.top + borderTopWidth / 2);
this.topRightBorderStroke =
tlh > 0 || tlv > 0
? getCurvePoints(
bounds.left + topWidth,
bounds.top + borderTopWidth / 2,
trh - borderRightWidth / 2,
trv - borderTopWidth / 2,
CORNER.TOP_RIGHT
)
: new Vector(bounds.left + bounds.width - borderRightWidth / 2, bounds.top + borderTopWidth / 2);
this.bottomRightBorderStroke =
brh > 0 || brv > 0
? getCurvePoints(
bounds.left + bottomWidth,
bounds.top + rightHeight,
brh - borderRightWidth / 2,
brv - borderBottomWidth / 2,
CORNER.BOTTOM_RIGHT
)
: new Vector(
bounds.left + bounds.width - borderRightWidth / 2,
bounds.top + bounds.height - borderBottomWidth / 2
);
this.bottomLeftBorderStroke =
blh > 0 || blv > 0
? getCurvePoints(
bounds.left + borderLeftWidth / 2,
bounds.top + leftHeight,
blh - borderLeftWidth / 2,
blv - borderBottomWidth / 2,
CORNER.BOTTOM_LEFT
)
: new Vector(bounds.left + borderLeftWidth / 2, bounds.top + bounds.height - borderBottomWidth / 2);
this.topLeftBorderBox =
tlh > 0 || tlv > 0
? getCurvePoints(bounds.left, bounds.top, tlh, tlv, CORNER.TOP_LEFT)
Expand Down Expand Up @@ -89,20 +236,20 @@ export class BoundCurves {
this.topRightPaddingBox =
trh > 0 || trv > 0
? getCurvePoints(
bounds.left + Math.min(topWidth, bounds.width + borderLeftWidth),
bounds.left + Math.min(topWidth, bounds.width - borderRightWidth),
bounds.top + borderTopWidth,
topWidth > bounds.width + borderRightWidth ? 0 : trh - borderRightWidth,
trv - borderTopWidth,
topWidth > bounds.width + borderRightWidth ? 0 : Math.max(0, trh - borderRightWidth),
Math.max(0, trv - borderTopWidth),
CORNER.TOP_RIGHT
)
: new Vector(bounds.left + bounds.width - borderRightWidth, bounds.top + borderTopWidth);
this.bottomRightPaddingBox =
brh > 0 || brv > 0
? getCurvePoints(
bounds.left + Math.min(bottomWidth, bounds.width - borderLeftWidth),
bounds.top + Math.min(rightHeight, bounds.height + borderTopWidth),
bounds.top + Math.min(rightHeight, bounds.height - borderBottomWidth),
Math.max(0, brh - borderRightWidth),
brv - borderBottomWidth,
Math.max(0, brv - borderBottomWidth),
CORNER.BOTTOM_RIGHT
)
: new Vector(
Expand All @@ -113,9 +260,9 @@ export class BoundCurves {
blh > 0 || blv > 0
? getCurvePoints(
bounds.left + borderLeftWidth,
bounds.top + leftHeight,
bounds.top + Math.min(leftHeight, bounds.height - borderBottomWidth),
Math.max(0, blh - borderLeftWidth),
blv - borderBottomWidth,
Math.max(0, blv - borderBottomWidth),
CORNER.BOTTOM_LEFT
)
: new Vector(bounds.left + borderLeftWidth, bounds.top + bounds.height - borderBottomWidth);
Expand Down
Loading

0 comments on commit 72cd528

Please sign in to comment.