fix: lint, improve types compatibility with web, more properties in t…

…extmetrics

native/CMakeLists.txt

@@ -1,4 +1,4 @@
-cmake_minimum_required(VERSION 3.0.0)
+cmake_minimum_required(VERSION 3.10.0)
 project(native_canvas VERSION 0.1.0)
 
 set (CMAKE_CXX_STANDARD 17)

native/include/canvas.hpp

@@ -4,14 +4,11 @@
 #include "include/core/SkCanvas.h"
 #include "include/core/SkSurface.h"
 #include "include/core/SkData.h"
-#include "include/core/SkImageInfo.h"
 #include "include/core/SkImageFilter.h"
 #include "include/common.hpp"
 #include "include/effects/SkImageFilters.h"
 #define SK_GL
-#include "include/gpu/GrBackendSurface.h"
 #include "include/gpu/GrDirectContext.h"
-#include "include/gpu/gl/GrGLInterface.h"
 
 typedef enum sk_canvas_backend {
   kBackendCPU,

native/include/common.hpp

@@ -114,6 +114,9 @@ typedef struct sk_line_metrics {
   float width;
   float font_ascent;
   float font_descent;
+  float alphabetic_baseline;
+  float ideographic_baseline;
+  float hanging_baseline;
 } sk_line_metrics;
 
 #define DEGREES(radians) ((radians) * 180.0 / M_PI)

native/include/context2d.hpp

@@ -1,36 +1,11 @@
 #pragma once
 
-#include <iostream>
-#include <vector>
 #include "include/core/SkCanvas.h"
-#include "include/core/SkEncodedImageFormat.h"
-#include "include/core/SkPath.h"
-#include "include/utils/SkParsePath.h"
-#include "include/core/SkMatrix.h"
-#include "include/core/SkPaint.h"
-#include "include/core/SkBitmap.h"
 #include "include/core/SkFont.h"
-#include "include/core/SkFontMgr.h"
-#include "include/core/SkColorSpace.h"
-#include "include/core/SkBlurTypes.h"
-#include "modules/skparagraph/include/FontCollection.h"
-#include "modules/skparagraph/include/TypefaceFontProvider.h"
-#include "modules/skparagraph/include/ParagraphStyle.h"
-#include "modules/skparagraph/include/ParagraphBuilder.h"
-#include "modules/skparagraph/src/ParagraphBuilderImpl.h"
-#include "modules/skparagraph/src/ParagraphImpl.h"
-#include "include/effects/SkColorMatrix.h"
-#include "include/effects/SkDashPathEffect.h"
-#include "include/effects/SkImageFilters.h"
-#include "include/effects/SkTableColorFilter.h"
-#include "include/effects/SkTrimPathEffect.h"
-#include "include/core/SkPathEffect.h"
-#include "include/core/SkMaskFilter.h"
-#include "deps/csscolorparser.hpp"
+#include "include/core/SkPath.h"
 #include "include/common.hpp"
-#include "include/font.hpp"
+#include "include/core/SkPathEffect.h"
 #include "include/canvas.hpp"
-#include "include/path2d.hpp"
 #include "include/gradient.hpp"
 #include "include/pattern.hpp"
 

native/include/pdfdocument.hpp

@@ -1,5 +1,6 @@
 #include "include/common.hpp"
 #include "include/context2d.hpp"
+#include "include/core/SkStream.h"
 #include "include/docs/SkPDFDocument.h"
 
 typedef struct sk_pdf_document {

native/src/canvas.cpp

@@ -1,5 +1,9 @@
 #include "include/canvas.hpp"
 #include "include/context2d.hpp"
+#include "include/core/SkImageInfo.h"
+#include "include/core/SkStream.h"
+#include "include/gpu/GrBackendSurface.h"
+#include "include/gpu/gl/GrGLInterface.h"
 
 extern "C" {
   void sk_init() {

native/src/context2d.cpp

@@ -1,4 +1,24 @@
 #include "include/context2d.hpp"
+#include "include/utils/SkParsePath.h"
+#include "include/core/SkMatrix.h"
+#include "include/core/SkPaint.h"
+#include "include/core/SkBitmap.h"
+#include <iostream>
+#include <vector>
+#include "include/core/SkFontMgr.h"
+#include "include/core/SkColorSpace.h"
+#include "include/core/SkBlurTypes.h"
+#include "modules/skparagraph/include/FontCollection.h"
+#include "modules/skparagraph/include/ParagraphStyle.h"
+#include "modules/skparagraph/include/ParagraphBuilder.h"
+#include "modules/skparagraph/src/ParagraphBuilderImpl.h"
+#include "modules/skparagraph/src/ParagraphImpl.h"
+#include "include/effects/SkColorMatrix.h"
+#include "include/effects/SkDashPathEffect.h"
+#include "include/effects/SkImageFilters.h"
+#include "include/path2d.hpp"
+#include "include/core/SkMaskFilter.h"
+#include "deps/csscolorparser.hpp"
 
 #ifndef _USE_MATH_DEFINES
 #define _USE_MATH_DEFINES
@@ -435,6 +455,9 @@ extern "C" {
       out_metrics->width = lineWidth;
       out_metrics->font_ascent = -font_metrics.fAscent + offset;
       out_metrics->font_descent = font_metrics.fDescent + offset;
+      out_metrics->alphabetic_baseline = -font_metrics.fAscent + offset;
+      out_metrics->ideographic_baseline = -paragraph->getIdeographicBaseline() + offset;
+      out_metrics->hanging_baseline = -paragraph->getAlphabeticBaseline() + offset;
     } else {
       auto needScale = lineWidth > maxWidth;
       auto ratio = needScale ? maxWidth / lineWidth : 1.0;
@@ -499,9 +522,9 @@ extern "C" {
     return res;
   }
 
-  // Context.fillText() implementation in JS using sk_context_test
-  // Context.strokeText() implementation in JS using sk_context_test
-  // Context.measureText() implementation in JS using sk_context_test
+  // Context.fillText() implementation in JS using sk_context_text
+  // Context.strokeText() implementation in JS using sk_context_text
+  // Context.measureText() implementation in JS using sk_context_text
 
   /// Line styles
 

native/src/font.cpp

@@ -1,5 +1,4 @@
 #include "include/font.hpp"
-#include "include/common.hpp"
 
 int systemFontsLoaded = -1;
 sk_sp<SkFontMgr> fontMgr = nullptr;

native/src/gradient.cpp

@@ -1,5 +1,4 @@
 #include "include/gradient.hpp"
-#include <iostream>
 
 extern "C" {
   sk_gradient* sk_gradient_create_linear(float startX, float startY, float endX, float endY) {

native/src/image.cpp

@@ -1,5 +1,4 @@
 #include "include/image.hpp"
-#include "include/common.hpp"
 
 extern "C" {
   SkImage* sk_image_from_encoded(void* data, size_t length) {

src/canvas.ts

@@ -1,6 +1,6 @@
 import { CanvasRenderingContext2D } from "./context2d.ts";
 import ffi, { cstr, encodeBase64, getBuffer } from "./ffi.ts";
-import { ColorSpace } from "./image.ts";
+import type { ColorSpace } from "./image.ts";
 
 const {
   sk_canvas_create,

src/context2d.ts

@@ -5,11 +5,11 @@ import { FilterType, parseFilterString } from "./filter.ts";
 import { CanvasGradient } from "./gradient.ts";
 import { Image, ImageData } from "./image.ts";
 import { parseFont } from "./parse_font.ts";
-import { Path2D, RoundRectRadii, roundRectRadiiArg } from "./path2d.ts";
+import { Path2D, type RoundRectRadii, roundRectRadiiArg } from "./path2d.ts";
 import {
   CanvasPattern,
-  CanvasPatternImage,
-  CanvasPatternRepeat,
+  type CanvasPatternImage,
+  type CanvasPatternRepeat,
 } from "./pattern.ts";
 
 const {
@@ -187,7 +187,7 @@ export type CanvasImageSource = Canvas | Image;
 export type GlobalCompositeOperation = keyof typeof CGlobalCompositeOperation;
 export type ImageSmoothingQuality = keyof typeof CImageSmoothingQuality;
 
-const METRICS = new Float32Array(7);
+const METRICS = new Float32Array(10);
 const METRICS_PTR = Deno.UnsafePointer.of(METRICS);
 
 export interface TextMetrics {
@@ -201,6 +201,8 @@ export interface TextMetrics {
   alphabeticBaseline: number;
   emHeightAscent: number;
   emHeightDescent: number;
+  hangingBaseline: number;
+  ideographicBaseline: number;
 }
 
 export type Style = string | CanvasGradient | CanvasPattern;
@@ -233,6 +235,12 @@ const CFontVariantCaps = {
 
 export type FontStretch = keyof typeof CFontStretch;
 export type FontVariantCaps = keyof typeof CFontVariantCaps;
+export type FontKerning = "auto" | "none" | "normal";
+export type TextRendering =
+  | "auto"
+  | "geometricPrecision"
+  | "optimizeLegibility"
+  | "optimizeSpeed";
 
 const _canvas = Symbol("[[canvas]]");
 const _ptr = Symbol("[[ptr]]");
@@ -353,6 +361,8 @@ export class CanvasRenderingContext2D {
         alphabeticBaseline: 0,
         emHeightAscent: 0,
         emHeightDescent: 0,
+        ideographicBaseline: 0,
+        hangingBaseline: 0,
       };
     }
     const encoded = new TextEncoder().encode(text);
@@ -378,9 +388,11 @@ export class CanvasRenderingContext2D {
       actualBoundingBoxDescent: METRICS[1],
       fontBoundingBoxAscent: METRICS[5],
       fontBoundingBoxDescent: METRICS[6],
-      alphabeticBaseline: METRICS[5],
+      alphabeticBaseline: METRICS[7],
       emHeightAscent: METRICS[5],
       emHeightDescent: METRICS[6],
+      ideographicBaseline: METRICS[8],
+      hangingBaseline: METRICS[9],
     };
   }
 
@@ -490,27 +502,33 @@ export class CanvasRenderingContext2D {
     sk_context_set_text_direction(this[_ptr], CTextDirection[value]);
   }
 
-  get letterSpacing(): number {
-    return sk_context_get_letter_spacing(this[_ptr]);
+  get letterSpacing(): string {
+    return sk_context_get_letter_spacing(this[_ptr]) + "px";
   }
 
-  set letterSpacing(value: number) {
-    sk_context_set_letter_spacing(this[_ptr], value);
+  set letterSpacing(value: number | string) {
+    sk_context_set_letter_spacing(
+      this[_ptr],
+      typeof value === "number" ? value : parseFloat(value),
+    );
   }
 
-  get wordSpacing(): number {
-    return sk_context_get_word_spacing(this[_ptr]);
+  get wordSpacing(): string {
+    return sk_context_get_word_spacing(this[_ptr]) + "px";
   }
 
-  set wordSpacing(value: number) {
-    sk_context_set_word_spacing(this[_ptr], value);
+  set wordSpacing(value: number | string) {
+    sk_context_set_word_spacing(
+      this[_ptr],
+      typeof value === "number" ? value : parseFloat(value),
+    );
   }
 
-  get fontKerning(): string {
+  get fontKerning(): FontKerning {
     return "auto";
   }
 
-  set fontKerning(value: "auto") {
+  set fontKerning(value: FontKerning) {
     if (value !== "auto") {
       throw new Error("fontKerning only supports 'auto'");
     }
@@ -542,11 +560,11 @@ export class CanvasRenderingContext2D {
     sk_context_set_font_variant_caps(this[_ptr], c);
   }
 
-  get textRendering(): string {
+  get textRendering(): TextRendering {
     return "auto";
   }
 
-  set textRendering(value: "auto") {
+  set textRendering(value: TextRendering) {
     if (value !== "auto") {
       throw new Error("textRendering only supports 'auto'");
     }

src/ffi.ts

@@ -5,7 +5,7 @@ import {
   ensureCacheLocation,
   ensureDir,
   extname,
-  FetchOptions,
+  type FetchOptions,
   isFile,
   join,
   urlToFilename,

src/path2d.ts

@@ -1,5 +1,5 @@
-import { FillRule } from "./context2d.ts";
-import { DOMMatrix } from "./dommatrix.ts";
+import type { FillRule } from "./context2d.ts";
+import type { DOMMatrix } from "./dommatrix.ts";
 import ffi, { cstr } from "./ffi.ts";
 
 const {

src/pattern.ts

@@ -1,6 +1,6 @@
-import { DOMMatrix } from "./dommatrix.ts";
+import type { DOMMatrix } from "./dommatrix.ts";
 import ffi from "./ffi.ts";
-import { Image } from "./image.ts";
+import type { Image } from "./image.ts";
 
 const {
   sk_pattern_new_image,