p1

Author: chearon

examples/images-1.ts

@@ -40,7 +40,7 @@ const rootElement = flow.dom(
   flow.h('html', {style: rootStyle, attrs: {'x-dropflow-log': 'true'}}, [
     flow.h('img', {
       style: image1Style,
-      attrs: {src: 'https://chearon.github.io/dropflow/assets/images/frogmage.gif'}
+      attrs: {id: 'img', src: 'file:///Users/caleb/Code/dropflow/assets/images/frogmage.gif'}
     }),
     flow.h('p', `
       Dropflow now supports images! These are loaded by calling flow.load()
@@ -57,7 +57,7 @@ const rootElement = flow.dom(
       of Ada Lovelace, the well-tempered Great Pyrenees mix as an inline image: `,
       flow.h('img', {
         style: image2Style,
-        attrs: {src: 'https://chearon.github.io/dropflow/assets/images/ada.png'}
+        attrs: {src: 'file:///Users/caleb/Code/dropflow/assets/images/ada.png'}
       }),
       ' after'
     ]),
@@ -66,12 +66,11 @@ const rootElement = flow.dom(
     `),
     flow.h('img', {
       style: image3Style,
-      attrs: {src: 'https://chearon.github.io/dropflow/assets/images/tiramisu.jpeg'}
+      attrs: {src: 'file:///Users/caleb/Code/dropflow/assets/images/tiramisu.jpeg'}
     })
   ])
 );
 
-
 // Normal layout, logging
 await flow.load(rootElement);
 const layout = flow.layout(rootElement);

src/layout-flow.ts

@@ -10,7 +10,6 @@ import {
   getIfcContribution,
   createIfcShapedItems,
   createIfcLineboxes,
-  positionIfcItems,
   sliceIfcRenderText,
   collapseWhitespace
 } from './layout-text.ts';
@@ -832,16 +831,14 @@ export class BlockContainerOfInlines extends BlockContainerBase {
   text: string;
   buffer: AllocatedUint16Array;
   items: ShapedItem[];
-  lineboxes: Linebox[];
-  fragments: Map<Inline, InlineFragment[]>;
+  fragments: InlineFragment[];
 
   constructor(style: Style, attrs: number) {
     super(style, attrs);
     this.text = '';
     this.buffer = EmptyBuffer;
     this.items = [];
-    this.lineboxes = [];
-    this.fragments = new Map();
+    this.fragments = [];
   }
 
   prelayoutPostorder(layout: Layout, ctx: PrelayoutContext) {
@@ -851,12 +848,12 @@ export class BlockContainerOfInlines extends BlockContainerBase {
       this.buffer.destroy();
       this.buffer = createIfcBuffer(this.text);
       this.items = createIfcShapedItems(layout, this, inline);
-      this.fragments.clear();
+      this.fragments = [];
     }
   }
 
   positionItemsPostlayout(layout: Layout) {
-    const inlineShifts: Map<Inline, {dx: number; dy: number}> = new Map();
+    const inlineShifts: Map<number, {dx: number; dy: number}> = new Map();
     const parents: Inline[] = [];
     const contentArea = this.getContentArea();
     const rootInline = layout.tree[this.treeStart + 1];
@@ -876,7 +873,7 @@ export class BlockContainerOfInlines extends BlockContainerBase {
           dy += box.getRelativeVerticalShift(containingBlock);
         }
 
-        inlineShifts.set(box, {dx, dy});
+        inlineShifts.set(box.treeStart, {dx, dy});
         parents.push(box);
       } else {
         if (box.isBox()) i = box.treeFinal;
@@ -912,14 +909,11 @@ export class BlockContainerOfInlines extends BlockContainerBase {
       }
     }
 
-    for (const [inline, fragments] of this.fragments) {
-      const {dx, dy} = inlineShifts.get(inline)!;
-
-      for (const fragment of fragments) {
-        fragment.blockOffset += contentArea.y + dy;
-        fragment.start += contentArea.x + dx;
-        fragment.end += contentArea.x + dx;
-      }
+    for (const fragment of this.fragments) {
+      const {dx, dy} = inlineShifts.get(fragment.treeIndex)!;
+      fragment.blockOffset += contentArea.y + dy;
+      fragment.left += contentArea.x + dx;
+      fragment.right += contentArea.x + dx;
     }
   }
 
@@ -960,6 +954,7 @@ export class BlockContainerOfInlines extends BlockContainerBase {
         let ml = i;
         let mr = i;
 
+        // TODO this is wrong!
         while (mr < r && !layout.tree[mr].isRun() && !layout.tree[mr].isInline()) mr++;
         while (ml > l && !layout.tree[ml].isRun() && !layout.tree[ml].isInline()) ml--;
 
@@ -981,15 +976,6 @@ export class BlockContainerOfInlines extends BlockContainerBase {
     return sliceIfcRenderText(layout, this, item, start, end);
   }
 
-  getLineboxHeight() {
-    if (this.lineboxes.length) {
-      const line = this.lineboxes.at(-1)!;
-      return line.blockOffset + line.height();
-    } else {
-      return 0;
-    }
-  }
-
   shouldLayoutContent(layout: Layout) {
     const inline = layout.tree[this.treeStart + 1];
     if (!inline.isInline()) throw new Error('Assertion failed');
@@ -1003,11 +989,11 @@ export class BlockContainerOfInlines extends BlockContainerBase {
     const containingBlock = this.getContainingBlock();
     const blockSize = this.style.getBlockSize(containingBlock);
     if (this.shouldLayoutContent(layout)) {
-      this.lineboxes = createIfcLineboxes(layout, this, ctx);
-      positionIfcItems(layout, this);
-    }
-    if (blockSize === 'auto') {
-      this.setBlockSize(containingBlock, this.getLineboxHeight());
+      const ifc = createIfcLineboxes(layout, this, ctx);
+      if (blockSize === 'auto' && ifc.lines.length) {
+        const line = ifc.lines[ifc.lines.length - 1];
+        this.setBlockSize(containingBlock, line.blockOffset + line.height());
+      }
     }
   }
 }
@@ -1398,22 +1384,20 @@ export class Inline extends Box {
     return this.style.hasLineRightGap(containingBlock);
   }
 
-  getInlineSideSize(containingBlock: BoxArea, side: 'pre' | 'post') {
+  getInlineStartSize(containingBlock: BoxArea) {
     const direction = this.getDirectionAsParticipant(containingBlock);
-    if (
-      direction === 'ltr' && side === 'pre' ||
-      direction === 'rtl' && side === 'post'
-    ) {
-      const marginLineLeft = this.style.getMarginLineLeft(containingBlock);
-      return (marginLineLeft === 'auto' ? 0 : marginLineLeft)
-        + this.style.getBorderLineLeftWidth(containingBlock)
-        + this.style.getPaddingLineLeft(containingBlock);
-    } else {
-      const marginLineRight = this.style.getMarginLineRight(containingBlock);
-      return (marginLineRight === 'auto' ? 0 : marginLineRight)
-        + this.style.getBorderLineRightWidth(containingBlock)
-        + this.style.getPaddingLineRight(containingBlock);
-    }
+    const marginStart = this.style.getMarginInlineStart(containingBlock, direction);
+    return (marginStart === 'auto' ? 0 : marginStart)
+      + this.style.getBorderInlineStartWidth(containingBlock, direction)
+      + this.style.getPaddingInlineStart(containingBlock, direction);
+  }
+
+  getInlineEndSize(containingBlock: BoxArea) {
+    const direction = this.getDirectionAsParticipant(containingBlock);
+    const marginEnd = this.style.getMarginInlineEnd(containingBlock, direction);
+    return (marginEnd === 'auto' ? 0 : marginEnd)
+      + this.style.getBorderInlineEndWidth(containingBlock, direction)
+      + this.style.getPaddingInlineEnd(containingBlock, direction);
   }
 
   isInline(): this is Inline {
@@ -1476,9 +1460,12 @@ export class ReplacedBox extends FormattingBox {
   }
 
   getLogSymbol() {
-    return "◼️";
+    if (this.isFloat()) {
+      return '●';
+    } else {
+      return '◼️';
+    }
   }
-
   hasBackground() {
     return this.style.hasPaint();
   }
@@ -1543,9 +1530,9 @@ export class ReplacedBox extends FormattingBox {
 export type InlineLevel = Inline | Run | Break | BlockContainer | ReplacedBox;
 
 type InlineIteratorBuffered = {state: 'pre' | 'post', item: Inline}
-  | {state: 'text', item: Run}
+  | {state: 'text', item: Run, index: number}
   | {state: 'box', item: BlockLevel}
-  | {state: 'break'}
+  | {state: 'break', index: number}
   | {state: 'breakop'};
 
 type InlineIteratorValue = InlineIteratorBuffered | {state: 'breakspot'};
@@ -1588,6 +1575,9 @@ export function inlineIteratorStateNext(state: InlineIteratorState) {
     state.breakspotIndex = 0;
     state.isInlineBlock = false;
 
+    // This body of this loop consumes (pre | post)* atomic? post*,
+    // where atomic is a <br>, an inline-block, or a float, and pre/post
+    // are sides of an inline.
     while (state.index <= state.block.treeFinal && !foundAtomic) {
       const item = state.layout.tree[state.index];
 
@@ -1599,9 +1589,9 @@ export function inlineIteratorStateNext(state: InlineIteratorState) {
         state.minlevel = state.parents.length;
 
         if (item.isRun()) {
-          state.buffered.push({state: 'text', item});
+          state.buffered.push({state: 'text', item, index: state.index});
         } else if (item.isBreak()) {
-          state.buffered.push({state: 'break'});
+          state.buffered.push({state: 'break', index: state.index});
         } else {
           if (item.isFloat()) {
             state.buffered.push({state: 'box', item});