@breakside/jskit 2022.22.2 → 2022.24.0

package/Root/Frameworks/UIKit/UIHTMLTextFrame.js

@@ -26,40 +26,15 @@
 JSClass("UIHTMLTextFrame", JSTextFrame, {
 
     element: null,
-    attachments: null,
+    attachmentRuns: null,
 
-    initWithElement: function(element, lines, size, attributes){
+    initWithElement: function(element, lines, size){
         this.element = element;
-        this.attachments = [];
+        this.attachmentRuns = [];
         var line;
         var i, l;
         var j, k;
 
-        // If our element is not in the document, we need to add it so calls
-        // to getBoundingClientRect() will work.
-        // The HTML framesetter always adds a newly created frame to the document,
-        // but it's possible to be removed from the document if we're reusing a
-        // frame that's in a view that itself has been removed from the document.
-        // After we're done making calls, we'll add it back to the original parent
-        // in its original location.
-        //
-        // UPDATE 2020-07-26 - When text frames are drawn inside a scaled or rotated
-        // view, the getBoundingClientRect() based calculations return transformed
-        // values, which we don't want.  The quickest fix is to ALWAYS remove the
-        // frame element from its parent and attach it to the document body so
-        // it will be untransformed.  This doesn't appear to be a major performance
-        // issue, but it would be nice to find another way around.  For now, I'm
-        // preserving the original code with the addition of `true || ` to always
-        // enter the conditional.
-        var originalParent = null;
-        var originalSibling = null;
-        if (true || !this.element.isConnected){
-            originalParent = this.element.parentNode;
-            originalSibling = this.element.nextSibling;
-            this.element.ownerDocument.body.appendChild(this.element);
-            this.element.style.visibility = 'hidden';
-        }
-
         // add all the lines to our element
         for (i = 0, l = lines.length; i < l; ++i){
             line = lines[i];
@@ -69,38 +44,15 @@ JSClass("UIHTMLTextFrame", JSTextFrame, {
             }
         }
 
-        // set the size of all the lines and runs
-        // NOTE: this could be a job for the typesetter, but doing so incrementally
-        // as runs/lines are created would force a extra layouts that aren't necessary.
-        // So we try to force only one layout here and then grab all the metrics
-        var origin = JSPoint(0, 0);
-        for (i = 0, l = lines.length; i < l; ++i){
-            line = lines[i];
-            line.recalculateSize();
-            line.recalculateTrailingWhitespace();
-            line._origin = JSPoint(origin);
-            origin.y += line._size.height;
-        }
-
-        var attachmentInfo;
+        var run;
         for (i = 0, l = lines.length; i < l; ++i){
             line = lines[i];
-            for (j = 0, k = line.attachments.length; j < k; ++j){
-                attachmentInfo = line.attachments[j];
-                if (attachmentInfo.attachment.isKindOfClass(UITextAttachmentView)){
-                    // attachmentInfo.attachment.view.frame = JSRect(
-                    //     JSPoint(line.origin.x + attachmentInfo.run.origin.x, line.origin.y + attachmentInfo.run.origin.y),
-                    //     attachmentInfo.attachment.view.frame.size
-                    // );
-                }
-                this.attachments.push(attachmentInfo);
+            for (j = 0, k = line.attachmentRuns.length; j < k; ++j){
+                run = line.attachmentRuns[j];
+                this.attachmentRuns.push(run);
             }
         }
 
-        if (originalParent !== null){
-            originalParent.insertBefore(this.element, originalSibling);
-        }
-
         if (size.width === 0 || size.width === Number.MAX_VALUE){
             this._widthMatchesUsedWidth = true;
         }
@@ -108,53 +60,30 @@ JSClass("UIHTMLTextFrame", JSTextFrame, {
             this._heightMatchesUsedHeight = true;
         }
 
-        // Superclass init will adjust origins according to text alignment, but
-        // we must have properly set the line size and trailingWhitespaceWidth first
-        UIHTMLTextFrame.$super.initWithLines.call(this, lines, size, attributes);
-        this._updateSizesAndPositions();
+        UIHTMLTextFrame.$super.initWithLines.call(this, lines, size);
         this.element.dataset.rangeLocation = this._range.location;
         this.element.dataset.rangeLength = this._range.length;
         this.element.dataset.jstext = "frame";
     },
 
-    adjustSize: function(newSize){
-        UIHTMLTextFrame.$super.adjustSize.call(this, newSize);
-        this._updateSizesAndPositions();
-    },
-
-    _updateSizesAndPositions: function(){
-        var i, l;
-        var line;
-
-        // set our size
-        this.element.style.width = '%dpx'.sprintf(this.size.width);
-        this.element.style.height = '%dpx'.sprintf(this.size.height);
-
-        // position the lines
-        for (i = 0, l = this.lines.length; i < l; ++i){
-            line = this.lines[i];
-            line.element.style.height = '%dpx'.sprintf(line.size.height);
-            line.element.style.left = '%dpx'.sprintf(line.origin.x);
-            line.element.style.top = '%dpx'.sprintf(line.origin.y);
-        }
-    },
-
     drawInContextAtPoint: function(context, point){
         if (context.isKindOfClass(UIHTMLDisplayServerCanvasContext)){
             if (this.element.style.visibility == 'hidden'){
                 this.element.style.visibility = '';
             }
             context.addExternalElementInRect(this.element, JSRect(point, this.size));
-            var attachmentInfo;
-            for (var i = 0, l = this.attachments.length; i < l; ++i){
-                attachmentInfo = this.attachments[i];
-                if (attachmentInfo.context.element.parentNode !== attachmentInfo.run.element){
-                    attachmentInfo.run.element.appendChild(attachmentInfo.context.element);
+            var run;
+            var attachmentContext;
+            for (var i = 0, l = this.attachmentRuns.length; i < l; ++i){
+                run = this.attachmentRuns[i];
+                attachmentContext = context.displayServer.contextForAttachment(run.attachment);
+                if (attachmentContext.element.parentNode !== run.element){
+                    run.element.appendChild(attachmentContext.element);
                 }
-                attachmentInfo.context.save();
-                attachmentInfo.context.setFillColor(attachmentInfo.run.attributes.textColor);
-                attachmentInfo.attachment.drawInContextAtPoint(attachmentInfo.context, JSPoint.Zero);
-                attachmentInfo.context.restore();
+                attachmentContext.save();
+                attachmentContext.setFillColor(run.attributes.textColor);
+                run.attachment.drawInContextAtPoint(attachmentContext, JSPoint.Zero);
+                attachmentContext.restore();
             }
         }else{
             UIHTMLTextFrame.$super.drawInContextAtPoint.call(this, context, point);
@@ -219,7 +148,6 @@ JSClass("UIHTMLTextFrame", JSTextFrame, {
         if (this._heightMatchesUsedHeight){
             this._size = JSSize(this._size.width, this._usedSize.height);
         }
-        this._updateSizesAndPositions();
     }
 
 });

package/Root/Frameworks/UIKit/UIHTMLTextFramesetter.js

@@ -26,29 +26,50 @@
 JSClass("UIHTMLTextFramesetter", UITextFramesetter, {
 
     _domDocument: null,
+    _htmlDisplayServer: null,
     _htmlTypesetter: null,
     _frameElement: null,
-    _frame: null,
+    _attachments: null,
 
     initWithDocument: function(domDocument, htmlDisplayServer){
-        this._htmlTypesetter = UIHTMLTextTypesetter.initWithDocument(domDocument, htmlDisplayServer);
-        UIHTMLTextFramesetter.$super.initWithTypesetter.call(this, this._htmlTypesetter);
         this._domDocument = domDocument;
+        this._htmlDisplayServer = htmlDisplayServer;
+        this._htmlTypesetter = UIHTMLTextTypesetter.initWithDocument(domDocument);
+        this._attachments = [];
+        UIHTMLTextFramesetter.$super.initWithTypesetter.call(this, this._htmlTypesetter);
     },
 
     createFrame: function(size, range, maximumLines){
-        this._creatingFrame = true;
         this._createFrameElementIfNeeded();
-        var lineBreakMode = this.effectiveLineBreakMode(this.attributes.lineBreakMode, 1, maximumLines);
         this._enqueueElements();
-        this._htmlTypesetter.layoutRange(range, size, lineBreakMode);
+        var attachmentsByObjectID = {};
+        var attachment;
+        var i, l;
+        for (i = 0, l = this._attachments.length; i < l; ++i){
+            attachment = this._attachments[i];
+            attachmentsByObjectID[attachment.objectID] = attachment;
+        }
         var frame = UIHTMLTextFramesetter.$super.createFrame.call(this, size, range, maximumLines);
+        this._attachments = [];
+        for (i = 0, l = frame.attachmentRuns.length; i < l; ++i){
+            attachment = frame.attachmentRuns[i].attachment;
+            this._attachments.push(attachment);
+            if (attachment.objectID in attachmentsByObjectID){
+                delete attachmentsByObjectID[attachment.objectID];
+            }else{
+                this._htmlDisplayServer.attachmentInserted(attachment);
+            }
+        }
+        for (i in attachmentsByObjectID){
+            attachment = attachmentsByObjectID[i];
+            this._htmlDisplayServer.attachmentRemoved(attachment);
+        }
         this._removeQueuedElements();
         return frame;
     },
 
-    constructFrame: function(lines, size, attributes){
-        return UIHTMLTextFrame.initWithElement(this._frameElement, lines, size, attributes);
+    constructFrame: function(lines, size){
+        return UIHTMLTextFrame.initWithElement(this._frameElement, lines, size);
     },
 
     _createFrameElementIfNeeded: function(){
@@ -114,7 +135,29 @@ JSClass("UIHTMLTextFramesetter", UITextFramesetter, {
             }
             element = this._htmlTypesetter.dequeueRunElement();
         }
-    }
+    },
+
+    _alignLinesInFrame: function(frame){
+        UIHTMLTextFramesetter.$super._alignLinesInFrame.call(this, frame);
+        this._updateSizesAndPositionsOfLinesInFrame(frame);
+    },
+
+    _updateSizesAndPositionsOfLinesInFrame: function(frame){
+        var i, l;
+        var line;
+
+        // set our size
+        frame.element.style.width = '%dpx'.sprintf(frame.size.width);
+        frame.element.style.height = '%dpx'.sprintf(frame.size.height);
+
+        // position the lines
+        for (i = 0, l = frame.lines.length; i < l; ++i){
+            line = frame.lines[i];
+            line.element.style.height = '%dpx'.sprintf(line.size.height);
+            line.element.style.left = '%dpx'.sprintf(line.origin.x);
+            line.element.style.top = '%dpx'.sprintf(line.origin.y);
+        }
+    },
 
 });
 

package/Root/Frameworks/UIKit/UIHTMLTextLine.js

@@ -24,28 +24,29 @@ JSClass("UIHTMLTextLine", JSTextLine, {
 
     element: null,
     emptyTextNode: null,
-    attachments: null,
-    overflowed: false,
+    attachmentRuns: null,
     fontLineHeight: 0,
+    canvasContext: null,
 
-    initWithElementAndFont: function(element, font, height, location){
+    initWithElementAndFont: function(element, font, height, location, canvasContext){
         UIHTMLTextLine.$super.initWithHeight.call(this, height, -font.displayDescender, location);
         this.element = element;
         element.style.font = font.cssString(height);
         this.emptyTextNode = element.appendChild(element.ownerDocument.createTextNode('\u200B'));
         this.fontLineHeight = font.displayLineHeight;
-        this.attachments = [];
+        this.attachmentRuns = [];
         this.element.dataset.rangeLocation = location;
         this.element.dataset.rangeLength = 0;
         this.element.dataset.jstext = "line";
+        this.canvasContext = canvasContext;
     },
 
-    initWithElement: function(element, runs, trailingWhitespaceWidth, attachments){
+    initWithElement: function(element, runs, trailingWhitespaceWidth, attachmentRuns, canvasContext){
         // constructing this.element before super init because super init calls
         // this.align, which neesd to use this.element
         UIHTMLTextLine.$super.initWithRuns.call(this, runs, trailingWhitespaceWidth);
         this.element = element;
-        this.attachments = attachments || [];
+        this.attachmentRuns = attachmentRuns || [];
         var run;
         for (var i = 0, l = runs.length; i < l; ++i){
             run = this.runs[i];
@@ -56,6 +57,7 @@ JSClass("UIHTMLTextLine", JSTextLine, {
         this.element.dataset.rangeLocation = this._range.location;
         this.element.dataset.rangeLength = this._range.length;
         this.element.dataset.jstext = "line";
+        this.canvasContext = canvasContext;
     },
 
     // verticallyAlignRuns: function(){
@@ -63,39 +65,102 @@ JSClass("UIHTMLTextLine", JSTextLine, {
     // },
 
     truncatedLine: function(width, token){
-        if (!this.overflowed || width === Number.MAX_VALUE || width === 0){
+        if (width + 0.1 >= this._size.width){
             return this;
         }
 
         if (token === undefined){
-            token = '\u2026';
+            token = "\u2026";
+        }
+        var line = this.copy();
+
+        // get rid of any runs that put us over the limit
+        var runIndex = line.runs.length - 1;
+        while (runIndex > 0 && line.size.width - line.runs[runIndex].size.width >= width){
+            line.size.width -= line.runs[runIndex].size.width;
+            line.range.length -= line.runs[runIndex].range.length;
+            line.element.removeChild(line.runs[runIndex].element);
+            line.runs.pop();
+            --runIndex;
         }
 
-        this.element.style.maxWidth = '%dpx'.sprintf(width);
-        this.element.style.overflow = 'hidden';
-        // only firefox supports an arbitrary string as the token, so for now
-        // we'll just hard code ellipsis
-        this.element.style.textOverflow = 'ellipsis';
-
-        // Adopt relevant styles from the final run, otherwise the ellipis will
-        // use the style of the line div.  Currently this only adopts text color,
-        // and font, taking care to keep our line height 0;
-        if (this._runs.length > 0){
-            var lastRun = this._runs[this._runs.length - 1];
-            this.element.style.color = lastRun.element.style.color;
-            this.element.style.font = lastRun.element.style.font;
-            this.element.style.lineHeight = '0';
+        // Find the run that has space for ellipis
+        var run;
+        var metrics = null;
+        do {
+            run = line.runs[runIndex];
+            if (!run.attachment){
+                this.canvasContext.font = run.font.cssString();
+                metrics = this.canvasContext.measureText(token);
+                if (line.size.width - run.size.width + metrics.width <= width){
+                    break;
+                }
+            }
+            line.element.removeChild(run.element);
+            line.runs.pop();
+            line.size.width -= run.size.width;
+            line.range.length -= run.range.length;
+            --runIndex;
+        }while (runIndex >= 0);
+
+        // Bail if there's no room for even the token
+        if (runIndex < 0){
+            return line;
         }
 
-        // Add an ellipsis...if it fits, great!  If not, we'll get the html generated ellipis
-        this.element.appendChild(this.element.ownerDocument.createTextNode(token));
+        if (metrics !== null){
+            var span = this.element.ownerDocument.createElement("span");
+            span.setAttribute("style", run.element.getAttribute("style"));
+            span.appendChild(this.element.ownerDocument.createTextNode(token));
+            var tokenRun = UIHTMLTextRun.initWithElement(span, run.font, run.attributes, JSRange.Zero);
+            tokenRun.size.width = metrics.width;
+            line.runs.push(tokenRun);
+            line.element.appendChild(tokenRun.element);
+            line.size.width += tokenRun.size.width;
+
+            var iterator = run.textNode.nodeValue.userPerceivedCharacterIterator(run.textNode.nodeValue.length - 1);
+            while (iterator.character !== null && iterator.isMandatoryLineBreak){
+                iterator.decrement();
+                run.range.length -= iterator.range.length;
+                line.range.length -= iterator.range.length;
+            }
+            while (iterator.character !== null && line.size.width > width){
+                metrics = this.canvasContext.measureText(iterator.utf16);
+                run.size.width -= metrics.width;
+                run.range.length -= iterator.range.length;
+                line.size.width -= metrics.width;
+                line.range.length -= iterator.range.length;
+                run.textNode.nodeValue = run.textNode.nodeValue.substr(0, run.textNode.nodeValue.length - iterator.range.length);
+                iterator.decrement();
+            }
+
+            if (run.range.length === 0){
+                line.element.removeChild(line.runs[line.runs.length - 2].element);
+                line.runs.splice(line.runs.length - 2, 1);
+            }
 
-        // TODO: add JSTextRun with ellipsis (in case this line is drawn to a non-html context, and so .runs is consistent)
-        // but this would also possibly require backing up 1+ characters to make enough room for the ellipis
+            tokenRun.origin.x = line.size.width - tokenRun.size.width;
 
-        // This should perhaps return a copy, but for our current use cases,
-        // there's no need to copy since the original line gets abandoned.
-        return this;
+            line.verticallyAlignRuns();
+        }
+
+        return line;
+    },
+
+    copy: function(){
+        var line = UIHTMLTextLine.$super.copy.call(this);
+        line.element = this.element.cloneNode();
+        if (this.emptyTextNode !== null){
+            line.emptyTextNode = this.emptyTextNode.cloneNode();
+            line.element.appendChild(line.emptyTextNode);
+        }
+        for (var i = 0, l = line.runs.length; i < l; ++i){
+            line.element.appendChild(line.runs[i].element);
+        }
+        line.attachmentRuns = JSCopy(this.attachmentRuns);
+        line.fontLineHeight = this.fontLineHeight;
+        this.canvasContext = this.canvasContext;
+        return line;
     },
 
     rectForEmptyCharacter: function(){
@@ -179,7 +244,7 @@ JSClass("UIHTMLTextLine", JSTextLine, {
         this.element.dataset.rangeLocation = this._range.location;
         this.element.dataset.rangeLength = this._range.length;
         return diff;
-    }
+    },
 
 });
 

package/Root/Frameworks/UIKit/UIHTMLTextRun.js

@@ -39,6 +39,7 @@ JSClass("UIHTMLTextRun", JSTextRun, {
         // Only the UIHTMLTextFrame does the final measuring.
         if (!this.attachment){
             this._size.height = font.displayLineHeight;
+            this.baseline = -font.displayDescender;
         }
         if (element.childNodes.length > 0 && element.firstChild.nodeType === element.TEXT_NODE){
             this.textNode = element.firstChild;
@@ -59,7 +60,6 @@ JSClass("UIHTMLTextRun", JSTextRun, {
         if (mask){
             this._maskFactor = mask.length;
         }
-        this.baseline = -font.displayDescender;
         this.element.dataset.rangeLocation = this._range.location;
         this.element.dataset.rangeLength = this._range.length;
         this.element.dataset.jstext = "run";
@@ -118,8 +118,8 @@ JSClass("UIHTMLTextRun", JSTextRun, {
     },
 
     characterIndexAtPoint: function(point){
-        var min = 0;
-        var max = this.range.length;
+        var min = this.range.location;
+        var max = this.range.end;
         var mid;
         var rect;
         var i = 0;
@@ -145,7 +145,7 @@ JSClass("UIHTMLTextRun", JSTextRun, {
                 }
             }
         }
-        return this.range.location + min;
+        return min;
     },
 
     _textFrameConstructionWidthOfRange: function(range){
@@ -169,17 +169,17 @@ JSClass("UIHTMLTextRun", JSTextRun, {
     rectForCharacterAtIndex: function(index){
         // attachment run
         if (this.textNode === null){
-            if (index === 0){
+            if (index === this.range.location){
                 return JSRect(0, 0, this.size.width, this.size.height);
             }
-            if (index === 1){
+            if (index === this.range.end){
                 return JSRect(this.size.width, 0, 0, this.size.height);
             }
             return JSRect.Zero;
         }
 
         // at end, which we know without measuring
-        if (index >= this.range.length){
+        if (index >= this.range.end){
             return JSRect(this.size.width, 0, 0, this.size.height);
         }
 
@@ -190,8 +190,9 @@ JSClass("UIHTMLTextRun", JSTextRun, {
         // Create a DOM range for the character in the span because the DOM range can
         // report its size and coordinates
         var rect;
-        index *= this._maskFactor;
-        var iterator = sharedElementForSizing.firstChild.nodeValue.userPerceivedCharacterIterator(index);
+        var localIndex = index - this.range.location;
+        localIndex *= this._maskFactor;
+        var iterator = sharedElementForSizing.firstChild.nodeValue.userPerceivedCharacterIterator(localIndex);
         sharedDomRange.setStart(sharedElementForSizing.firstChild, iterator.range.location);
         sharedDomRange.setEnd(sharedElementForSizing.firstChild, iterator.range.end);
         var clientRect = this._pickCorrectClientRectFromRects(sharedDomRange.getClientRects());
@@ -210,6 +211,7 @@ JSClass("UIHTMLTextRun", JSTextRun, {
             sharedElementForSizing.style.position = "absolute";
             sharedElementForSizing.style.zIndex = -100;
             sharedElementForSizing.style.right = "0";
+            sharedElementForSizing.style.whiteSpace = "pre";
             sharedElementForSizing.ownerDocument.body.appendChild(sharedElementForSizing);
         }
         sharedElementForSizing.style.font = this.element.style.font;
@@ -256,6 +258,17 @@ JSClass("UIHTMLTextRun", JSTextRun, {
         return diff;
     },
 
+    copy: function(){
+        var run = UIHTMLTextRun.$super.copy.call(this);
+        run.element = this.element.cloneNode();
+        if (this.textNode !== null){
+            run.textNode = this.textNode.cloneNode();
+            run.element.appendChild(run.textNode);
+        }
+        run._maskFactor = this._maskFactor;
+        return run;
+    }
+
 });
 
 var sharedElementForSizing = null;