basalt-appkit 0.0.0-rc5

package/native/appkit/RnTextLayout.h

@@ -0,0 +1,38 @@
+// A laid-out paragraph, and nothing that knows what React Native is.
+//
+// Deliberately separate from CoreTextLayout.h, which builds one of these out of
+// an AttributedString. The view layer draws paragraphs and must not gain a
+// React Native dependency to do it -- basalt_appkit_view builds and is tested
+// on a Mac with nothing else installed, and that is worth keeping.
+
+#pragma once
+
+#ifdef __OBJC__
+#import <Cocoa/Cocoa.h>
+
+@interface RnTextLayout : NSObject
+
+@property(nonatomic, readonly) NSAttributedString *attributedString;
+// 0 means no limit, matching ParagraphAttributes::maximumNumberOfLines.
+@property(nonatomic, readonly) NSInteger maximumNumberOfLines;
+@property(nonatomic, readonly) CTLineTruncationType truncationType;
+@property(nonatomic, readonly) BOOL truncates;
+
++ (instancetype)layoutWithAttributedString:(NSAttributedString *)attributedString
+                      maximumNumberOfLines:(NSInteger)maximumNumberOfLines
+                            truncationType:(CTLineTruncationType)truncationType
+                                 truncates:(BOOL)truncates;
+
+// The size this paragraph needs at `maxWidth`. Pass a negative width for
+// unconstrained. In React Native's logical points, like everything else here.
+//
+// Width is not baked in: a PangoLayout has to be built against a width and
+// rebuilt when it changes, and a Core Text framesetter does not. One of the few
+// places the two platforms differ in shape rather than in spelling.
+- (CGSize)sizeForWidth:(CGFloat)maxWidth;
+
+// Draws into `context`, top-left origin, in a box `size` wide and tall.
+- (void)drawInContext:(CGContextRef)context size:(CGSize)size;
+
+@end
+#endif

package/native/appkit/RnTextLayout.mm

@@ -0,0 +1,168 @@
+#import "RnTextLayout.h"
+
+#include <cmath>
+
+@implementation RnTextLayout {
+  CTFramesetterRef _framesetter;
+}
+
++ (instancetype)layoutWithAttributedString:(NSAttributedString *)attributedString
+                      maximumNumberOfLines:(NSInteger)maximumNumberOfLines
+                            truncationType:(CTLineTruncationType)truncationType
+                                 truncates:(BOOL)truncates {
+  RnTextLayout *layout = [[RnTextLayout alloc] init];
+  layout->_attributedString = attributedString;
+  layout->_maximumNumberOfLines = maximumNumberOfLines;
+  layout->_truncationType = truncationType;
+  layout->_truncates = truncates;
+  layout->_framesetter =
+      CTFramesetterCreateWithAttributedString((__bridge CFAttributedStringRef)attributedString);
+  return layout;
+}
+
+- (void)dealloc {
+  if (_framesetter != nullptr) {
+    CFRelease(_framesetter);
+  }
+}
+
+// The lines this paragraph breaks into at `maxWidth`, already limited to
+// maximumNumberOfLines and with the last one truncated if it had to be.
+//
+// Core Text has no "maximum number of lines": a framesetter breaks as many
+// lines as the text needs and a frame holds as many as fit in its path. So the
+// limit is applied here, by asking for an unbounded frame and keeping the first
+// N -- which is also the only way to put the ellipsis in the right place, since
+// the line that gets truncated is the last one *kept*, not the last one there
+// is.
+- (NSArray *)linesForWidth:(CGFloat)maxWidth outLines:(NSMutableArray *)collected {
+  const CGFloat width = maxWidth < 0 ? CGFLOAT_MAX : maxWidth;
+
+  CGMutablePathRef path = CGPathCreateMutable();
+  CGPathAddRect(path, nullptr, CGRectMake(0, 0, width, CGFLOAT_MAX));
+  CTFrameRef frame = CTFramesetterCreateFrame(_framesetter, CFRangeMake(0, 0), path, nullptr);
+  CGPathRelease(path);
+  if (frame == nullptr) {
+    return collected;
+  }
+
+  NSArray *lines = (__bridge NSArray *)CTFrameGetLines(frame);
+  const NSInteger limit =
+      _maximumNumberOfLines > 0 ? MIN(_maximumNumberOfLines, (NSInteger)lines.count)
+                                : (NSInteger)lines.count;
+
+  for (NSInteger i = 0; i < limit; i++) {
+    CTLineRef line = (__bridge CTLineRef)lines[(NSUInteger)i];
+    const BOOL isLastKept = (i == limit - 1);
+    const BOOL droppedSomething = limit < (NSInteger)lines.count;
+
+    if (_truncates && isLastKept && droppedSomething && width != CGFLOAT_MAX) {
+      // The truncated line has to be built from everything that would have
+      // followed, not from this line alone -- otherwise the ellipsis lands
+      // after text that already fit and nothing looks omitted.
+      const CFRange lineRange = CTLineGetStringRange(line);
+      const CFIndex from = lineRange.location;
+      NSAttributedString *rest =
+          [_attributedString attributedSubstringFromRange:NSMakeRange(
+              (NSUInteger)from, _attributedString.length - (NSUInteger)from)];
+
+      // The token inherits the attributes of the text it replaces, so an
+      // ellipsis in 40pt bold does not come out 14pt regular.
+      NSDictionary *attributes = _attributedString.length > 0
+          ? [_attributedString attributesAtIndex:(NSUInteger)MAX((CFIndex)0, from) effectiveRange:nullptr]
+          : @{};
+      NSAttributedString *ellipsis = [[NSAttributedString alloc] initWithString:@"…"
+                                                                    attributes:attributes];
+      CTLineRef token = CTLineCreateWithAttributedString((__bridge CFAttributedStringRef)ellipsis);
+      CTLineRef full = CTLineCreateWithAttributedString((__bridge CFAttributedStringRef)rest);
+      CTLineRef truncated = CTLineCreateTruncatedLine(full, width, _truncationType, token);
+      CFRelease(token);
+      CFRelease(full);
+      if (truncated != nullptr) {
+        [collected addObject:(__bridge_transfer id)truncated];
+        continue;
+      }
+    }
+
+    [collected addObject:(__bridge id)line];
+  }
+
+  CFRelease(frame);
+  return collected;
+}
+
+// Line metrics, summed. Not CTFramesetterSuggestFrameSizeWithConstraints: that
+// measures the whole text and cannot be told about a line limit, so a
+// numberOfLines={2} paragraph would be laid out two lines tall and measured
+// twelve.
+- (CGSize)sizeForWidth:(CGFloat)maxWidth {
+  NSMutableArray *lines = [NSMutableArray array];
+  [self linesForWidth:maxWidth outLines:lines];
+
+  CGFloat width = 0;
+  CGFloat height = 0;
+  for (id item in lines) {
+    CTLineRef line = (__bridge CTLineRef)item;
+    CGFloat ascent = 0, descent = 0, leading = 0;
+    const double lineWidth = CTLineGetTypographicBounds(line, &ascent, &descent, &leading);
+    width = MAX(width, (CGFloat)lineWidth);
+    height += std::ceil(ascent + descent + leading);
+  }
+  return CGSizeMake(std::ceil(width), height);
+}
+
+// How far along the line the text sits: 0 left, 0.5 centred, 1 right.
+//
+// Taken from the first fragment, because React Native resolves alignment onto
+// every fragment from the <Text> that owns them -- the Pango side reads it the
+// same way. Core Text puts alignment in the *frame*, and this draws lines one
+// at a time so it can honour numberOfLines, so the frame's own alignment never
+// applies and the offset has to be computed here. Without this every paragraph
+// draws flush left and `textAlign` silently does nothing.
+- (CGFloat)flushFactor {
+  if (_attributedString.length == 0) {
+    return 0;
+  }
+  NSParagraphStyle *style = [_attributedString attribute:NSParagraphStyleAttributeName
+                                                 atIndex:0
+                                          effectiveRange:nullptr];
+  switch (style.alignment) {
+    case NSTextAlignmentCenter:
+      return 0.5;
+    case NSTextAlignmentRight:
+      return 1.0;
+    default:
+      return 0;
+  }
+}
+
+- (void)drawInContext:(CGContextRef)context size:(CGSize)size {
+  NSMutableArray *lines = [NSMutableArray array];
+  [self linesForWidth:size.width outLines:lines];
+
+  const CGFloat flush = [self flushFactor];
+
+  CGContextSaveGState(context);
+  // Core Text draws with the origin at the baseline and y increasing upward.
+  // The view above is flipped, so the context arrives y-down; this puts it back
+  // for the duration of the draw and leaves it as it was found.
+  CGContextTranslateCTM(context, 0, size.height);
+  CGContextScaleCTM(context, 1, -1);
+  CGContextSetTextMatrix(context, CGAffineTransformIdentity);
+
+  CGFloat y = size.height;
+  for (id item in lines) {
+    CTLineRef line = (__bridge CTLineRef)item;
+    CGFloat ascent = 0, descent = 0, leading = 0;
+    CTLineGetTypographicBounds(line, &ascent, &descent, &leading);
+
+    y -= std::ceil(ascent + descent + leading);
+    const CGFloat x = flush == 0 ? 0 : (CGFloat)CTLineGetPenOffsetForFlush(line, flush, size.width);
+    CGContextSetTextPosition(context, x, y + std::ceil(descent + leading));
+    CTLineDraw(line, context);
+  }
+
+  CGContextRestoreGState(context);
+}
+
+@end

package/native/appkit/demo_layout_appkit.mm

@@ -0,0 +1,93 @@
+// The macOS view layer, driven by hand-written frames.
+//
+// The same standing-in-for-Fabric exercise as gtk/demo_layout_gtk.cpp, with the
+// same boxes at the same coordinates, so the two platforms can be compared
+// directly rather than by eye. Builds and runs without React Native's C++ core,
+// which keeps the paint and placement path verifiable on its own.
+//
+// Three modes. BASALT_DUMP_TREE prints the tree and exits. BASALT_SNAPSHOT=<png>
+// renders the hierarchy offscreen and writes it, which is the mode that proves
+// anything: the tree dump would look identical whether the flip works or not,
+// because it prints the frames that were set rather than where they landed.
+// Neither needs a window. Without either, it opens one.
+
+#import "AppKitSnapshot.h"
+#import "RnAppKitView.h"
+
+#include <cstdio>
+#include <cstdlib>
+
+static RnAppKitView *makeBox(NSInteger tag,
+                          CGFloat x,
+                          CGFloat y,
+                          CGFloat w,
+                          CGFloat h,
+                          CGFloat r,
+                          CGFloat g,
+                          CGFloat b,
+                          CGFloat a) {
+  RnAppKitView *view = [RnAppKitView viewWithTag:tag];
+  [view setRnFrameX:x y:y width:w height:h];
+  [view setRnBackgroundColorRed:r green:g blue:b alpha:a hasColor:YES];
+  return view;
+}
+
+static RnAppKitView *buildTree(void) {
+  RnAppKitView *root = makeBox(1, 0, 0, 640, 420, 0.12, 0.13, 0.16, 1.0);
+
+  // A row of children, absolutely placed the way Yoga would have resolved them.
+  RnAppKitView *a = makeBox(2, 32, 32, 240, 160, 0.30, 0.55, 0.95, 1.0);
+  RnAppKitView *b = makeBox(3, 296, 32, 240, 160, 0.95, 0.45, 0.35, 1.0);
+  RnAppKitView *c = makeBox(4, 32, 224, 504, 140, 0.35, 0.80, 0.55, 1.0);
+
+  [root insertRnChild:a atIndex:0];
+  [root insertRnChild:b atIndex:1];
+  [root insertRnChild:c atIndex:2];
+
+  // Nested child, to prove coordinates are parent-relative. On a flipped view
+  // this lands 24pt below `a`'s top edge; on an unflipped one it would land
+  // 24pt above its bottom, which is the bug the flip exists to prevent.
+  RnAppKitView *nested = makeBox(5, 24, 24, 120, 90, 1.0, 1.0, 1.0, 0.85);
+  [a insertRnChild:nested atIndex:0];
+
+  // Half-opacity child, to prove the opacity layer. Distinct from the alpha
+  // above: that one is a translucent colour, this one is a translucent view.
+  RnAppKitView *faded = makeBox(6, 24, 24, 160, 90, 0.1, 0.1, 0.1, 1.0);
+  [faded setRnOpacity:0.4];
+  [c insertRnChild:faded atIndex:0];
+
+  return root;
+}
+
+int main(int argc, const char *argv[]) {
+  (void)argc;
+  (void)argv;
+  @autoreleasepool {
+    RnAppKitView *root = buildTree();
+
+    if (getenv("BASALT_DUMP_TREE") != nullptr) {
+      std::fputs([[root describeTree] UTF8String], stdout);
+      return 0;
+    }
+
+    if (const char *snapshotPath = getenv("BASALT_SNAPSHOT")) {
+      return RnAppKitWriteSnapshot(root, [NSString stringWithUTF8String:snapshotPath]) ? 0 : 1;
+    }
+
+    [NSApplication sharedApplication];
+    [NSApp setActivationPolicy:NSApplicationActivationPolicyRegular];
+
+    NSWindow *window =
+        [[NSWindow alloc] initWithContentRect:NSMakeRect(0, 0, 640, 420)
+                                    styleMask:NSWindowStyleMaskTitled | NSWindowStyleMaskClosable
+                                      backing:NSBackingStoreBuffered
+                                        defer:NO];
+    window.title = @"basalt-core — macOS mounting skeleton";
+    window.contentView = root;
+    [window center];
+    [window makeKeyAndOrderFront:nil];
+    [NSApp activateIgnoringOtherApps:YES];
+    [NSApp run];
+  }
+  return 0;
+}