From 0a986ca92353323eb478b8b07a605802cd2dce43 Mon Sep 17 00:00:00 2001 From: Matt Karl Date: Mon, 18 Jul 2022 17:12:34 -0400 Subject: [PATCH] Remove nextRoundedRectBehavior and nextLineHeightBehavior (#8501) --- packages/graphics/src/Graphics.ts | 6 - .../src/utils/buildRoundedRectangle.ts | 157 +----------------- packages/text/src/Text.ts | 10 +- 3 files changed, 3 insertions(+), 170 deletions(-) diff --git a/packages/graphics/src/Graphics.ts b/packages/graphics/src/Graphics.ts index 68e3372e4f..8ce2911562 100644 --- a/packages/graphics/src/Graphics.ts +++ b/packages/graphics/src/Graphics.ts @@ -83,12 +83,6 @@ export interface Graphics extends GlobalMixins.Graphics, Container {} */ export class Graphics extends Container { - /** - * New rendering behavior for rounded rectangles: circular arcs instead of quadratic bezier curves. - * In the next major release, we'll enable this by default. - */ - public static nextRoundedRectBehavior = false; - /** * Temporary point to use for containsPoint. * @private diff --git a/packages/graphics/src/utils/buildRoundedRectangle.ts b/packages/graphics/src/utils/buildRoundedRectangle.ts index e624f6aa96..f209ee51a7 100644 --- a/packages/graphics/src/utils/buildRoundedRectangle.ts +++ b/packages/graphics/src/utils/buildRoundedRectangle.ts @@ -1,87 +1,7 @@ -import { earcut } from '@pixi/utils'; - // for type only import type { IShapeBuildCommand } from './IShapeBuildCommand'; -import type { RoundedRectangle } from '@pixi/math'; -import { Graphics } from '../Graphics'; import { buildCircle } from './buildCircle'; -/** - * Calculate a single point for a quadratic bezier curve. - * Utility function used by quadraticBezierCurve. - * Ignored from docs since it is not directly exposed. - * @ignore - * @private - * @param {number} n1 - first number - * @param {number} n2 - second number - * @param {number} perc - percentage - * @returns {number} the result - */ -function getPt(n1: number, n2: number, perc: number): number -{ - const diff = n2 - n1; - - return n1 + (diff * perc); -} - -/** - * Calculate the points for a quadratic bezier curve. (helper function..) - * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c - * - * Ignored from docs since it is not directly exposed. - * @ignore - * @private - * @param {number} fromX - Origin point x - * @param {number} fromY - Origin point x - * @param {number} cpX - Control point x - * @param {number} cpY - Control point y - * @param {number} toX - Destination point x - * @param {number} toY - Destination point y - * @param {number[]} [out=[]] - The output array to add points into. If not passed, a new array is created. - * @returns {number[]} an array of points - */ -function quadraticBezierCurve( - fromX: number, fromY: number, - cpX: number, cpY: number, - toX: number, toY: number, - out: Array = []): Array -{ - const n = 20; - const points = out; - - let xa = 0; - let ya = 0; - let xb = 0; - let yb = 0; - let x = 0; - let y = 0; - - for (let i = 0, j = 0; i <= n; ++i) - { - j = i / n; - - // The Green Line - xa = getPt(fromX, cpX, j); - ya = getPt(fromY, cpY, j); - xb = getPt(cpX, toX, j); - yb = getPt(cpY, toY, j); - - // The Black Dot - x = getPt(xa, xb, j); - y = getPt(ya, yb, j); - - // Handle case when first curve points overlaps and earcut fails to triangulate - if (i === 0 && points[points.length - 2] === x && points[points.length - 1] === y) - { - continue; - } - - points.push(x, y); - } - - return points; -} - /** * Builds a rounded rectangle to draw * @@ -96,84 +16,11 @@ export const buildRoundedRectangle: IShapeBuildCommand = { build(graphicsData) { - if (Graphics.nextRoundedRectBehavior) - { - buildCircle.build(graphicsData); - - return; - } - - const rrectData = graphicsData.shape as RoundedRectangle; - const points = graphicsData.points; - const x = rrectData.x; - const y = rrectData.y; - const width = rrectData.width; - const height = rrectData.height; - - // Don't allow negative radius or greater than half the smallest width - const radius = Math.max(0, Math.min(rrectData.radius, Math.min(width, height) / 2)); - - points.length = 0; - - // No radius, do a simple rectangle - if (!radius) - { - points.push(x, y, - x + width, y, - x + width, y + height, - x, y + height); - } - else - { - quadraticBezierCurve(x, y + radius, - x, y, - x + radius, y, - points); - quadraticBezierCurve(x + width - radius, - y, x + width, y, - x + width, y + radius, - points); - quadraticBezierCurve(x + width, y + height - radius, - x + width, y + height, - x + width - radius, y + height, - points); - quadraticBezierCurve(x + radius, y + height, - x, y + height, - x, y + height - radius, - points); - } + buildCircle.build(graphicsData); }, triangulate(graphicsData, graphicsGeometry) { - if (Graphics.nextRoundedRectBehavior) - { - buildCircle.triangulate(graphicsData, graphicsGeometry); - - return; - } - - const points = graphicsData.points; - - const verts = graphicsGeometry.points; - const indices = graphicsGeometry.indices; - - const vecPos = verts.length / 2; - - const triangles = earcut(points, null, 2); - - for (let i = 0, j = triangles.length; i < j; i += 3) - { - indices.push(triangles[i] + vecPos); - // indices.push(triangles[i] + vecPos); - indices.push(triangles[i + 1] + vecPos); - // indices.push(triangles[i + 2] + vecPos); - indices.push(triangles[i + 2] + vecPos); - } - - for (let i = 0, j = points.length; i < j; i++) - { - verts.push(points[i], points[++i]); - } + buildCircle.triangulate(graphicsData, graphicsGeometry); }, }; diff --git a/packages/text/src/Text.ts b/packages/text/src/Text.ts index f185264fa4..3d8568a023 100644 --- a/packages/text/src/Text.ts +++ b/packages/text/src/Text.ts @@ -50,14 +50,6 @@ interface ModernContext2D extends CanvasRenderingContext2D */ export class Text extends Sprite { - /** - * New behavior for `lineHeight` that's meant to mimic HTML text. A value of `true` will - * make sure the first baseline is offset by the `lineHeight` value if it is greater than `fontSize`. - * A value of `false` will use the legacy behavior and not change the baseline of the first line. - * In the next major release, we'll enable this by default. - */ - public static nextLineHeightBehavior = false; - /** * New rendering behavior for letter-spacing which uses Chrome's new native API. This will * lead to more accurate letter-spacing results because it does not try to manually draw @@ -263,7 +255,7 @@ export class Text extends Sprite let linePositionYShift = (lineHeight - fontProperties.fontSize) / 2; - if (!Text.nextLineHeightBehavior || lineHeight - fontProperties.fontSize < 0) + if (lineHeight - fontProperties.fontSize < 0) { linePositionYShift = 0; }