Skip to content

Commit f6fdbd4

Browse files
farfromrefugfarfromrefug
committed
feat: margin support for rectangle
1 parent d57dbb4 commit f6fdbd4

File tree

3 files changed

+71
-35
lines changed

3 files changed

+71
-35
lines changed

‎src/shapes/line.ts‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,20 @@ export default class Line extends Rectangle {
1212
drawOnCanvas(canvas: Canvas) {
1313
const availableWidth = layout.toDevicePixels(canvas.getWidth());
1414
const availableHeight = layout.toDevicePixels(canvas.getHeight());
15-
const marginLeft = this.marginLeft?layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.marginLeft, 0, availableWidth)):0;
16-
const marginTop = this.marginTop?layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.marginTop, 0, availableHeight)):0;
17-
const marginRight = this.marginRight?layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.marginRight, 0, availableWidth)):0;
18-
const marginBottom = this.marginBottom?layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.marginBottom, 0, availableHeight)):0;
15+
const marginLeft = this.marginLeft?(PercentLength.toDevicePixels(this.marginLeft, 0, availableWidth)):0;
16+
const marginTop = this.marginTop?(PercentLength.toDevicePixels(this.marginTop, 0, availableHeight)):0;
17+
const marginRight = this.marginRight?(PercentLength.toDevicePixels(this.marginRight, 0, availableWidth)):0;
18+
const marginBottom = this.marginBottom?(PercentLength.toDevicePixels(this.marginBottom, 0, availableHeight)):0;
1919
canvas.drawLine(
20-
layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.startX, 0, availableWidth)) + marginLeft,
21-
layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.startY, 0, availableHeight)) + marginTop,
22-
layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.stopX, 0, availableWidth)) - marginRight - marginLeft,
23-
layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.stopY, 0, availableHeight)) - marginBottom - marginTop,
20+
layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.startX, 0, availableWidth) + marginLeft),
21+
layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.startY, 0, availableHeight) + marginTop),
22+
layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.stopX, 0, availableWidth) - marginRight - marginLeft),
23+
layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.stopY, 0, availableHeight) - marginBottom - marginTop),
2424
this.paint
2525
);
2626
}
2727
@percentLengthProperty({ nonPaintProp: true }) startX: PercentLength = 0;
2828
@percentLengthProperty({ nonPaintProp: true }) startY: PercentLength = 0;
2929
@percentLengthProperty({ nonPaintProp: true }) stopX: PercentLength = 0;
3030
@percentLengthProperty({ nonPaintProp: true }) stopY: PercentLength = 0;
31-
32-
@percentLengthProperty({ nonPaintProp: true }) marginLeft: PercentLength;
33-
@percentLengthProperty({ nonPaintProp: true }) marginRight: PercentLength;
34-
@percentLengthProperty({ nonPaintProp: true }) marginTop: PercentLength;
35-
@percentLengthProperty({ nonPaintProp: true }) marginBottom: PercentLength;
3631
}

‎src/shapes/rectangle.ts‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,29 +17,19 @@ export default class Rectangle extends Shape {
1717
@lengthProperty left: Length = zeroLength;
1818
@lengthProperty top: Length = zeroLength;
1919
@numberProperty borderRadius: number;
20-
21-
// getRect(canvas: Canvas) {
22-
// const availableWidth = layout.toDevicePixels(canvas.getWidth());
23-
// const availableHeight = layout.toDevicePixels(canvas.getHeight());
24-
// const rect = createRect(
25-
// layout.toDeviceIndependentPixels(Length.toDevicePixels(this.left)),
26-
// layout.toDeviceIndependentPixels(Length.toDevicePixels(this.top)),
27-
// layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.width, 0, availableWidth)),
28-
// layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.height, 0, availableHeight))
29-
// );
30-
// // console.log('getRect', availableWidth, availableHeight, this.left, this.top, this.width, this.height, rect);
31-
// return rect;
32-
// }
3320
getRect(canvas: Canvas) {
3421
const availableWidth = layout.toDevicePixels(canvas.getWidth());
3522
const availableHeight = layout.toDevicePixels(canvas.getHeight());
23+
const marginLeft = this.marginLeft ? PercentLength.toDevicePixels(this.marginLeft, 0, availableWidth) : 0;
24+
const marginTop = this.marginTop ? PercentLength.toDevicePixels(this.marginTop, 0, availableHeight) : 0;
25+
const marginRight = this.marginRight ? PercentLength.toDevicePixels(this.marginRight, 0, availableWidth) : 0;
26+
const marginBottom = this.marginBottom ? PercentLength.toDevicePixels(this.marginBottom, 0, availableHeight) : 0;
3627
const rect = createRectF(
37-
layout.toDeviceIndependentPixels(Length.toDevicePixels(this.left)),
38-
layout.toDeviceIndependentPixels(Length.toDevicePixels(this.top)),
39-
layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.width, 0, availableWidth)),
40-
layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.height, 0, availableHeight))
28+
layout.toDeviceIndependentPixels(marginLeft + Length.toDevicePixels(this.left)),
29+
layout.toDeviceIndependentPixels(marginTop + Length.toDevicePixels(this.top)),
30+
layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.width, 0, availableWidth) - marginLeft - marginRight),
31+
layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.height, 0, availableHeight) - marginTop - marginBottom)
4132
);
42-
// console.log('getRect', availableWidth, availableHeight, this.left, this.top, this.width, this.height, rect);
4333
return rect;
4434
}
4535
}

‎src/shapes/shape.ts‎

Lines changed: 55 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,50 @@ import { booleanConverter } from '@nativescript/core/ui/core/view-base';
44
import { Canvas, CanvasView, Cap, Join, Paint, Style } from '../canvas';
55
import { parseCap, parseDashEffect, parseJoin, parseShadow, parseType } from '../utils';
66

7+
function parseThickness(value: string) {
8+
if (typeof value === 'string') {
9+
const arr = value.split(/[ ,]+/);
10+
11+
let top: string;
12+
let right: string;
13+
let bottom: string;
14+
let left: string;
15+
16+
if (arr.length === 1) {
17+
top = arr[0];
18+
right = arr[0];
19+
bottom = arr[0];
20+
left = arr[0];
21+
} else if (arr.length === 2) {
22+
top = arr[0];
23+
bottom = arr[0];
24+
right = arr[1];
25+
left = arr[1];
26+
} else if (arr.length === 3) {
27+
top = arr[0];
28+
right = arr[1];
29+
left = arr[1];
30+
bottom = arr[2];
31+
} else if (arr.length === 4) {
32+
top = arr[0];
33+
right = arr[1];
34+
bottom = arr[2];
35+
left = arr[3];
36+
} else {
37+
throw new Error('Expected 1, 2, 3 or 4 parameters. Actual: ' + value);
38+
}
39+
40+
return {
41+
top,
42+
right,
43+
bottom,
44+
left,
45+
};
46+
} else {
47+
return value;
48+
}
49+
}
50+
751
function createGetter(key, options: ShapePropertyOptions) {
852
const realKey = '_' + key.toString();
953
return function () {
@@ -177,11 +221,18 @@ export default abstract class Shape extends Observable {
177221

178222
@percentLengthProperty({ nonPaintProp: true }) width: PercentLength;
179223
@percentLengthProperty({ nonPaintProp: true }) height: PercentLength;
224+
225+
180226
@percentLengthProperty({ nonPaintProp: true }) paddingLeft: PercentLength;
181227
@percentLengthProperty({ nonPaintProp: true }) paddingRight: PercentLength;
182228
@percentLengthProperty({ nonPaintProp: true }) paddingBottom: PercentLength;
183229
@percentLengthProperty({ nonPaintProp: true }) paddingTop: PercentLength;
184230

231+
@percentLengthProperty({ nonPaintProp: true }) marginLeft: PercentLength;
232+
@percentLengthProperty({ nonPaintProp: true }) marginRight: PercentLength;
233+
@percentLengthProperty({ nonPaintProp: true }) marginTop: PercentLength;
234+
@percentLengthProperty({ nonPaintProp: true }) marginBottom: PercentLength;
235+
185236
protected handleAlignment = false;
186237

187238
abstract drawOnCanvas(canvas: Canvas, parent: CanvasView): void;
@@ -201,10 +252,10 @@ export default abstract class Shape extends Observable {
201252
if (!this.handleAlignment) {
202253
const availableWidth = Utils.layout.toDevicePixels(canvas.getWidth());
203254
const availableHeight = Utils.layout.toDevicePixels(canvas.getHeight());
204-
const paddingLeft = Utils.layout.toDeviceIndependentPixels(parent.effectivePaddingLeft) + Utils.layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.paddingLeft, 0, availableWidth)) + Utils.layout.toDeviceIndependentPixels(parent.effectiveBorderLeftWidth);
205-
const paddingRight = Utils.layout.toDeviceIndependentPixels(parent.effectivePaddingRight ) + Utils.layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.paddingRight, 0, availableWidth))+ Utils.layout.toDeviceIndependentPixels(parent.effectiveBorderRightWidth);
206-
const paddingTop = Utils.layout.toDeviceIndependentPixels(parent.effectivePaddingTop) + Utils.layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.paddingTop, 0, availableHeight)) + Utils.layout.toDeviceIndependentPixels(parent.effectiveBorderTopWidth);
207-
const paddingBottom = Utils.layout.toDeviceIndependentPixels(parent.effectivePaddingBottom) + Utils.layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.paddingBottom, 0, availableHeight)) + Utils.layout.toDeviceIndependentPixels(parent.effectiveBorderBottomWidth);
255+
const paddingLeft = Utils.layout.toDeviceIndependentPixels(parent.effectivePaddingLeft + PercentLength.toDevicePixels(this.paddingLeft, 0, availableWidth) + parent.effectiveBorderLeftWidth);
256+
const paddingRight = Utils.layout.toDeviceIndependentPixels(parent.effectivePaddingRight +PercentLength.toDevicePixels(this.paddingRight, 0, availableWidth)+ parent.effectiveBorderRightWidth);
257+
const paddingTop = Utils.layout.toDeviceIndependentPixels(parent.effectivePaddingTop + PercentLength.toDevicePixels(this.paddingTop, 0, availableHeight)+ parent.effectiveBorderTopWidth);
258+
const paddingBottom = Utils.layout.toDeviceIndependentPixels(parent.effectivePaddingBottom + PercentLength.toDevicePixels(this.paddingBottom, 0, availableHeight) + parent.effectiveBorderBottomWidth);
208259
canvas.save();
209260
if (paddingLeft > 0) {
210261
canvas.translate(paddingLeft, 0);

0 commit comments

Comments
 (0)