From ffd89d3049d3a01259becb6a72641f21bb207af5 Mon Sep 17 00:00:00 2001 From: Samuel Scheit Date: Wed, 30 Oct 2024 22:50:22 +0000 Subject: [PATCH 1/2] fix: web paragraph styles not working --- .../skia/src/skia/web/JsiSkParagraphStyle.ts | 134 +++++++++++------- 1 file changed, 80 insertions(+), 54 deletions(-) diff --git a/packages/skia/src/skia/web/JsiSkParagraphStyle.ts b/packages/skia/src/skia/web/JsiSkParagraphStyle.ts index f4483f3992..8f404bcf3f 100644 --- a/packages/skia/src/skia/web/JsiSkParagraphStyle.ts +++ b/packages/skia/src/skia/web/JsiSkParagraphStyle.ts @@ -4,63 +4,89 @@ import { TextDirection } from "../types"; import type { SkParagraphStyle } from "../types"; export class JsiSkParagraphStyle { - static toParagraphStyle( - ck: CanvasKit, - value: SkParagraphStyle - ): ParagraphStyle { - // Seems like we need to provide the textStyle.color value, otherwise - // the constructor crashes. - const ps = new ck.ParagraphStyle({ textStyle: { color: ck.BLACK } }); + static toParagraphStyle( + ck: CanvasKit, + value: SkParagraphStyle + ): ParagraphStyle { + // Seems like we need to provide the textStyle.color value, otherwise + // the constructor crashes. + const ps = new ck.ParagraphStyle({ textStyle: { color: ck.BLACK } }); - ps.disableHinting = value.disableHinting ?? ps.disableHinting; - ps.ellipsis = value.ellipsis ?? ps.ellipsis; - ps.heightMultiplier = value.heightMultiplier ?? ps.heightMultiplier; - ps.maxLines = value.maxLines ?? ps.maxLines; - ps.replaceTabCharacters = - value.replaceTabCharacters ?? ps.replaceTabCharacters; - ps.textAlign = - value.textAlign !== undefined - ? { value: value.textAlign } - : undefined ?? ps.textAlign; - ps.textDirection = - value.textDirection !== undefined - ? { value: value.textDirection === TextDirection.LTR ? 1 : 0 } - : ps.textDirection; - ps.textHeightBehavior = - value.textHeightBehavior !== undefined - ? { value: value.textHeightBehavior } - : ps.textHeightBehavior; + ps.disableHinting = value.disableHinting ?? ps.disableHinting; + ps.ellipsis = value.ellipsis ?? ps.ellipsis; + ps.heightMultiplier = value.heightMultiplier ?? ps.heightMultiplier; + ps.maxLines = value.maxLines ?? ps.maxLines; + ps.replaceTabCharacters = + value.replaceTabCharacters ?? ps.replaceTabCharacters; + ps.textAlign = + value.textAlign !== undefined ? { value: value.textAlign } : ps.textAlign; + ps.textDirection = + value.textDirection !== undefined + ? { value: value.textDirection === TextDirection.LTR ? 1 : 0 } + : ps.textDirection; + ps.textHeightBehavior = + value.textHeightBehavior !== undefined + ? { value: value.textHeightBehavior } + : ps.textHeightBehavior; - ps.strutStyle = ps.strutStyle ?? {}; - ps.strutStyle.fontFamilies = - value.strutStyle?.fontFamilies ?? ps.strutStyle.fontFamilies; - ps.strutStyle.fontSize = - value.strutStyle?.fontSize ?? ps.strutStyle.fontSize; - ps.strutStyle.heightMultiplier = - value.strutStyle?.heightMultiplier ?? ps.strutStyle.heightMultiplier; - ps.strutStyle.leading = value.strutStyle?.leading ?? ps.strutStyle.leading; - ps.strutStyle.forceStrutHeight = - value.strutStyle?.forceStrutHeight ?? ps.strutStyle.forceStrutHeight; + ps.strutStyle = ps.strutStyle ?? {}; + ps.textStyle = ps.textStyle ?? {}; + ps.textStyle.color = value.textStyle?.color ?? ps.textStyle.color; + ps.textStyle.backgroundColor = + value.textStyle?.backgroundColor ?? ps.textStyle.backgroundColor; + ps.textStyle.foregroundColor = + value.textStyle?.foregroundColor ?? ps.textStyle.foregroundColor; + ps.textStyle.decoration = + value.textStyle?.decoration ?? ps.textStyle.decoration; + ps.textStyle.decorationColor = + value.textStyle?.decorationColor ?? ps.textStyle.decorationColor; + ps.textStyle.decorationStyle = + value.textStyle?.decorationStyle !== undefined + ? { value: value.textStyle.decorationStyle } + : ps.textStyle.decorationStyle; + ps.textStyle.letterSpacing = + value.textStyle?.letterSpacing ?? ps.textStyle.letterSpacing; + ps.textStyle.decorationThickness = + value.textStyle?.decorationThickness ?? ps.textStyle.decorationThickness; + ps.textStyle.fontFamilies = ps.textStyle.fontFamilies = + value.textStyle?.fontFamilies ?? ps.textStyle.fontFamilies; + ps.textStyle.fontSize = value.textStyle?.fontSize ?? ps.textStyle.fontSize; + ps.textStyle.heightMultiplier = + value.textStyle?.heightMultiplier ?? ps.textStyle.heightMultiplier; + ps.strutStyle.leading = value.strutStyle?.leading ?? ps.strutStyle.leading; + ps.strutStyle.forceStrutHeight = + value.strutStyle?.forceStrutHeight ?? ps.strutStyle.forceStrutHeight; - ps.strutStyle.fontStyle = ps.strutStyle.fontStyle ?? {}; + ps.textStyle.fontStyle = ps.textStyle.fontStyle ?? {}; - ps.strutStyle.fontStyle.slant = - value.strutStyle?.fontStyle?.slant !== undefined - ? { value: value.strutStyle.fontStyle.slant } - : ps.strutStyle.fontStyle.slant; - ps.strutStyle.fontStyle.width = - value.strutStyle?.fontStyle?.width !== undefined - ? { value: value.strutStyle.fontStyle.width } - : ps.strutStyle.fontStyle.width; - ps.strutStyle.fontStyle.weight = - value.strutStyle?.fontStyle?.weight !== undefined - ? { value: value.strutStyle.fontStyle.weight } - : ps.strutStyle.fontStyle.weight; - ps.strutStyle.halfLeading = - value.strutStyle?.halfLeading ?? ps.strutStyle.halfLeading; - ps.strutStyle.strutEnabled = - value.strutStyle?.strutEnabled ?? ps.strutStyle.strutEnabled; + ps.textStyle.fontStyle.slant = + value.textStyle?.fontStyle?.slant !== undefined + ? { value: value.textStyle.fontStyle.slant } + : ps.textStyle.fontStyle.slant; + ps.textStyle.fontStyle.width = + value.textStyle?.fontStyle?.width !== undefined + ? { value: value.textStyle.fontStyle.width } + : ps.textStyle.fontStyle.width; + ps.textStyle.fontStyle.weight = + value.textStyle?.fontStyle?.weight !== undefined + ? { value: value.textStyle.fontStyle.weight } + : ps.textStyle.fontStyle.weight; + ps.textStyle.halfLeading = + value.textStyle?.halfLeading ?? ps.textStyle.halfLeading; + ps.strutStyle.strutEnabled = + value.strutStyle?.strutEnabled ?? ps.strutStyle.strutEnabled; + ps.textStyle.shadows = + value.textStyle?.shadows?.map(shadow => { + return { + color: shadow.color, + offset: shadow.offset ? [shadow.offset.x, shadow.offset.y] : [0, 0], + blurRadius: shadow.blurRadius + }; + }) ?? ps.textStyle.shadows; + ps.textStyle.textBaseline = value.textStyle?.textBaseline + ? { value: value.textStyle.textBaseline } + : ps.textStyle.textBaseline; - return ps; - } + return ps; + } } From 602647b0f75daae5561e4ed9ca05e6c2b926556b Mon Sep 17 00:00:00 2001 From: Samuel Scheit Date: Thu, 31 Oct 2024 00:07:43 +0100 Subject: [PATCH 2/2] fix: web paragraph styles not working --- .../skia/src/skia/web/JsiSkParagraphStyle.ts | 160 +++++++++--------- 1 file changed, 80 insertions(+), 80 deletions(-) diff --git a/packages/skia/src/skia/web/JsiSkParagraphStyle.ts b/packages/skia/src/skia/web/JsiSkParagraphStyle.ts index 8f404bcf3f..8dc0b73c0d 100644 --- a/packages/skia/src/skia/web/JsiSkParagraphStyle.ts +++ b/packages/skia/src/skia/web/JsiSkParagraphStyle.ts @@ -4,89 +4,89 @@ import { TextDirection } from "../types"; import type { SkParagraphStyle } from "../types"; export class JsiSkParagraphStyle { - static toParagraphStyle( - ck: CanvasKit, - value: SkParagraphStyle - ): ParagraphStyle { - // Seems like we need to provide the textStyle.color value, otherwise - // the constructor crashes. - const ps = new ck.ParagraphStyle({ textStyle: { color: ck.BLACK } }); + static toParagraphStyle( + ck: CanvasKit, + value: SkParagraphStyle + ): ParagraphStyle { + // Seems like we need to provide the textStyle.color value, otherwise + // the constructor crashes. + const ps = new ck.ParagraphStyle({ textStyle: { color: ck.BLACK } }); - ps.disableHinting = value.disableHinting ?? ps.disableHinting; - ps.ellipsis = value.ellipsis ?? ps.ellipsis; - ps.heightMultiplier = value.heightMultiplier ?? ps.heightMultiplier; - ps.maxLines = value.maxLines ?? ps.maxLines; - ps.replaceTabCharacters = - value.replaceTabCharacters ?? ps.replaceTabCharacters; - ps.textAlign = - value.textAlign !== undefined ? { value: value.textAlign } : ps.textAlign; - ps.textDirection = - value.textDirection !== undefined - ? { value: value.textDirection === TextDirection.LTR ? 1 : 0 } - : ps.textDirection; - ps.textHeightBehavior = - value.textHeightBehavior !== undefined - ? { value: value.textHeightBehavior } - : ps.textHeightBehavior; + ps.disableHinting = value.disableHinting ?? ps.disableHinting; + ps.ellipsis = value.ellipsis ?? ps.ellipsis; + ps.heightMultiplier = value.heightMultiplier ?? ps.heightMultiplier; + ps.maxLines = value.maxLines ?? ps.maxLines; + ps.replaceTabCharacters = + value.replaceTabCharacters ?? ps.replaceTabCharacters; + ps.textAlign = + value.textAlign !== undefined ? { value: value.textAlign } : ps.textAlign; + ps.textDirection = + value.textDirection !== undefined + ? { value: value.textDirection === TextDirection.LTR ? 1 : 0 } + : ps.textDirection; + ps.textHeightBehavior = + value.textHeightBehavior !== undefined + ? { value: value.textHeightBehavior } + : ps.textHeightBehavior; - ps.strutStyle = ps.strutStyle ?? {}; - ps.textStyle = ps.textStyle ?? {}; - ps.textStyle.color = value.textStyle?.color ?? ps.textStyle.color; - ps.textStyle.backgroundColor = - value.textStyle?.backgroundColor ?? ps.textStyle.backgroundColor; - ps.textStyle.foregroundColor = - value.textStyle?.foregroundColor ?? ps.textStyle.foregroundColor; - ps.textStyle.decoration = - value.textStyle?.decoration ?? ps.textStyle.decoration; - ps.textStyle.decorationColor = - value.textStyle?.decorationColor ?? ps.textStyle.decorationColor; - ps.textStyle.decorationStyle = - value.textStyle?.decorationStyle !== undefined - ? { value: value.textStyle.decorationStyle } - : ps.textStyle.decorationStyle; - ps.textStyle.letterSpacing = - value.textStyle?.letterSpacing ?? ps.textStyle.letterSpacing; - ps.textStyle.decorationThickness = - value.textStyle?.decorationThickness ?? ps.textStyle.decorationThickness; - ps.textStyle.fontFamilies = ps.textStyle.fontFamilies = - value.textStyle?.fontFamilies ?? ps.textStyle.fontFamilies; - ps.textStyle.fontSize = value.textStyle?.fontSize ?? ps.textStyle.fontSize; - ps.textStyle.heightMultiplier = - value.textStyle?.heightMultiplier ?? ps.textStyle.heightMultiplier; - ps.strutStyle.leading = value.strutStyle?.leading ?? ps.strutStyle.leading; - ps.strutStyle.forceStrutHeight = - value.strutStyle?.forceStrutHeight ?? ps.strutStyle.forceStrutHeight; + ps.strutStyle = ps.strutStyle ?? {}; + ps.textStyle = ps.textStyle ?? {}; + ps.textStyle.color = value.textStyle?.color ?? ps.textStyle.color; + ps.textStyle.backgroundColor = + value.textStyle?.backgroundColor ?? ps.textStyle.backgroundColor; + ps.textStyle.foregroundColor = + value.textStyle?.foregroundColor ?? ps.textStyle.foregroundColor; + ps.textStyle.decoration = + value.textStyle?.decoration ?? ps.textStyle.decoration; + ps.textStyle.decorationColor = + value.textStyle?.decorationColor ?? ps.textStyle.decorationColor; + ps.textStyle.decorationStyle = + value.textStyle?.decorationStyle !== undefined + ? { value: value.textStyle.decorationStyle } + : ps.textStyle.decorationStyle; + ps.textStyle.letterSpacing = + value.textStyle?.letterSpacing ?? ps.textStyle.letterSpacing; + ps.textStyle.decorationThickness = + value.textStyle?.decorationThickness ?? ps.textStyle.decorationThickness; + ps.textStyle.fontFamilies = ps.textStyle.fontFamilies = + value.textStyle?.fontFamilies ?? ps.textStyle.fontFamilies; + ps.textStyle.fontSize = value.textStyle?.fontSize ?? ps.textStyle.fontSize; + ps.textStyle.heightMultiplier = + value.textStyle?.heightMultiplier ?? ps.textStyle.heightMultiplier; + ps.strutStyle.leading = value.strutStyle?.leading ?? ps.strutStyle.leading; + ps.strutStyle.forceStrutHeight = + value.strutStyle?.forceStrutHeight ?? ps.strutStyle.forceStrutHeight; - ps.textStyle.fontStyle = ps.textStyle.fontStyle ?? {}; + ps.textStyle.fontStyle = ps.textStyle.fontStyle ?? {}; - ps.textStyle.fontStyle.slant = - value.textStyle?.fontStyle?.slant !== undefined - ? { value: value.textStyle.fontStyle.slant } - : ps.textStyle.fontStyle.slant; - ps.textStyle.fontStyle.width = - value.textStyle?.fontStyle?.width !== undefined - ? { value: value.textStyle.fontStyle.width } - : ps.textStyle.fontStyle.width; - ps.textStyle.fontStyle.weight = - value.textStyle?.fontStyle?.weight !== undefined - ? { value: value.textStyle.fontStyle.weight } - : ps.textStyle.fontStyle.weight; - ps.textStyle.halfLeading = - value.textStyle?.halfLeading ?? ps.textStyle.halfLeading; - ps.strutStyle.strutEnabled = - value.strutStyle?.strutEnabled ?? ps.strutStyle.strutEnabled; - ps.textStyle.shadows = - value.textStyle?.shadows?.map(shadow => { - return { - color: shadow.color, - offset: shadow.offset ? [shadow.offset.x, shadow.offset.y] : [0, 0], - blurRadius: shadow.blurRadius - }; - }) ?? ps.textStyle.shadows; - ps.textStyle.textBaseline = value.textStyle?.textBaseline - ? { value: value.textStyle.textBaseline } - : ps.textStyle.textBaseline; + ps.textStyle.fontStyle.slant = + value.textStyle?.fontStyle?.slant !== undefined + ? { value: value.textStyle.fontStyle.slant } + : ps.textStyle.fontStyle.slant; + ps.textStyle.fontStyle.width = + value.textStyle?.fontStyle?.width !== undefined + ? { value: value.textStyle.fontStyle.width } + : ps.textStyle.fontStyle.width; + ps.textStyle.fontStyle.weight = + value.textStyle?.fontStyle?.weight !== undefined + ? { value: value.textStyle.fontStyle.weight } + : ps.textStyle.fontStyle.weight; + ps.textStyle.halfLeading = + value.textStyle?.halfLeading ?? ps.textStyle.halfLeading; + ps.strutStyle.strutEnabled = + value.strutStyle?.strutEnabled ?? ps.strutStyle.strutEnabled; + ps.textStyle.shadows = + value.textStyle?.shadows?.map(shadow => { + return { + color: shadow.color, + offset: shadow.offset ? [shadow.offset.x, shadow.offset.y] : [0, 0], + blurRadius: shadow.blurRadius + }; + }) ?? ps.textStyle.shadows; + ps.textStyle.textBaseline = value.textStyle?.textBaseline + ? { value: value.textStyle.textBaseline } + : ps.textStyle.textBaseline; - return ps; - } + return ps; + } }