@breakside/jskit 2026.11.0 → 2026.26.0

package/Root/Frameworks/Foundation/JSAttributedString.js

@@ -65,6 +65,7 @@ JSClass("JSAttributedString", JSObject, {
                 case JSAttributedString.Attribute.font:
                     return JSAttributedString.AttributeDecoder.font(value);
                 case JSAttributedString.Attribute.textColor:
+                case JSAttributedString.Attribute.strokeColor:
                 case JSAttributedString.Attribute.backgroundColor:
                     return JSAttributedString.AttributeDecoder.color(value);
                 case JSAttributedString.Attribute.link:
@@ -90,6 +91,7 @@ JSClass("JSAttributedString", JSObject, {
                 case JSAttributedString.Attribute.headIndent:
                 case JSAttributedString.Attribute.tailIndent:
                 case JSAttributedString.Attribute.minimumLineHeight:
+                case JSAttributedString.Attribute.strokeWidth:
                     return JSAttributedString.AttributeDecoder.number(value);
                 case JSAttributedString.Attribute.textAlignment:
                     return JSAttributedString.AttributeDecoder.enumValue(JSTextAlignment)(value);
@@ -137,6 +139,7 @@ JSClass("JSAttributedString", JSObject, {
                 case JSAttributedString.Attribute.font:
                     return JSAttributedString.AttributeEncoder.font(value);
                 case JSAttributedString.Attribute.textColor:
+                case JSAttributedString.Attribute.strokeColor:
                 case JSAttributedString.Attribute.backgroundColor:
                     return JSAttributedString.AttributeEncoder.color(value);
                 case JSAttributedString.Attribute.link:
@@ -162,6 +165,7 @@ JSClass("JSAttributedString", JSObject, {
                 case JSAttributedString.Attribute.lineBreakMode:
                 case JSAttributedString.Attribute.maskCharacter:
                 case JSAttributedString.Attribute.paragraphStyleName:
+                case JSAttributedString.Attribute.strokeWidth:
                 default:
                     return value;
             }
@@ -680,6 +684,7 @@ JSClass("JSAttributedString", JSObject, {
 JSAttributedString.Attribute = {
     font: "font",
     textColor: "textColor",
+    strokeColor: "strokeColor",
     backgroundColor: "backgroundColor",
     bold: "bold",
     italic: "italic",
@@ -689,6 +694,7 @@ JSAttributedString.Attribute = {
     maskCharacter: "maskCharacter",
     cursor: "cursor",
     link: "link",
+    strokeWidth: "strokeWidth",
 
     // Paragraph
     paragraphStyleName: "paragraphStyleName",
@@ -745,7 +751,13 @@ JSAttributedString.AttributeDecoder = {
     dataBase64URL: function(value){ return value.dataByDecodingBase64URL(); },
     dataHex: function(value){ return value.dataByDecodingHex(); },
     url: function(value){ return JSURL.initWithString(value); },
-    font: function(value){ return JSFont.initFromDictionary(value); },
+    font: function(value){
+        var font = JSFont.initFromDictionary(value);
+        if (font === null){
+            font = JSFont.initWithDescriptor(JSFontDescriptor.system, value.size);
+        }
+        return font;
+    },
     color: function(value){ return JSColor.initFromDictionary(value); },
     boolean: function(value){ return typeof(value) === "boolean" ? value : undefined; },
     number: function(value){ return typeof(value) === "number" ? value : undefined; },

package/Root/Frameworks/Foundation/JSContext.js

@@ -88,8 +88,7 @@ JSClass("JSContext", JSObject, {
 
     addQuadraticCurveToPoint: function(point, control){
         this.beginPathIfNeeded();
-        // FIXME: not exactly a quadradic
-        this.path.addCurveToPoint(point, control, point, this.state.transform);
+        this.path.addQuadraticCurveToPoint(point, control, this.state.transform);
     },
 
     addEllipseInRect: function(rect){
@@ -100,21 +99,17 @@ JSClass("JSContext", JSObject, {
     addPath: function(path){
         this.beginPathIfNeeded();
         var i, l;
-        var j, k;
-        var subpath;
-        var segment;
-        for (i = 0, l = path.subpaths.length; i < l; ++i){
-            subpath = path.subpaths[i];
-            this.moveToPoint(subpath.firstPoint.x, subpath.firstPoint.y);
-            for (j = 0, k = subpath.segments.length; j < k; ++j){
-                segment = subpath.segments[j];
-                if (segment.type === JSPath.SegmentType.line){
-                    this.addLineToPoint(segment.end.x, segment.end.y);
-                }else if (segment.type === JSPath.SegmentType.curve){
-                    this.addCurveToPoint(segment.curve.p2, segment.curve.cp1, segment.curve.cp2);
-                }
-            }
-            if (subpath.closed){
+        var elements = path.elements;
+        var element;
+        for (i = 0, l = elements.length; i < l; ++i){
+            element = elements[i];
+            if (element.type === JSPathElement.Type.move){
+                this.moveToPoint(element.point.x, element.point.y);
+            }else if (element.type === JSPathElement.Type.line){
+                this.addLineToPoint(element.point.x, element.point.y);
+            }else if (element.type === JSPathElement.Type.cubicCurve){
+                this.addCurveToPoint(element.curve.p2, element.curve.cp1, element.curve.cp2);
+            }else if (element.type === JSPathElement.Type.close){
                 this.closePath();
             }
         }
@@ -212,6 +207,12 @@ JSClass("JSContext", JSObject, {
     drawRadialGradient: function(gradient, rect){
     },
 
+    drawMaskedLinearGradient: function(gradient, rect, maskImage){
+    },
+
+    drawMaskedRadialGradient: function(gradient, rect, maskImage){
+    },
+
     drawLinearGradientStroke: function(gradient, path){
         // FIXME: gradient should be aligned to original path rect
         var strokePath = path.pathThatFillsStroke(this.state.lineWidth, this.state.lineCap, this.state.lineJoin, this.state.miterLimit);
@@ -282,6 +283,30 @@ JSClass("JSContext", JSObject, {
         this.state.shadowColor = color;
     },
 
+    // ----------------------------------------------------------------------
+    // MARK: - Transparency Layers
+
+    beginTransparencyLayer: function(){
+        this.save();
+        this.state.transparencyLayer = this.createTransparencyLayer();
+        this.setAlpha(1);
+        this.setShadow(JSPoint.Zero, 0, null);
+    },
+
+    endTransparencyLayer: function(){
+        if (this.state.transparencyLayer === null){
+            return;
+        }
+        this.drawTransparencyLayer(this.state.transparencyLayer);
+        this.restore();
+    },
+
+    createTransparencyLayer: function(){
+    },
+
+    drawTransparencyLayer: function(transparencyLayer){
+    },
+
     // ----------------------------------------------------------------------
     // MARK: - Clipping
 
@@ -411,6 +436,8 @@ JSContext.State = {
     characterSpacing: 0,
     textDrawingMode: JSContext.TextDrawingMode.fill,
 
+    transparencyLayer: null
+
 };
 
 })();

package/Root/Frameworks/Foundation/JSCubicBezier.js

@@ -19,6 +19,9 @@
 
 JSGlobalObject.JSCubicBezier = function(p1, cp1, cp2, p2){
     if (this === undefined){
+        if (p1 === null){
+            return null;
+        }
         return new JSCubicBezier(p1, cp1, cp2, p2);
     }
     if (p1 instanceof JSCubicBezier){
@@ -126,6 +129,56 @@ JSCubicBezier.prototype = {
             points.push(this.pointAtInterval(t[1]));
         }
         return points;
+    },
+
+    curvesBySplittingAtInterval: function(t){
+        var q0 = this.p1.interpolation(this.cp1, t);
+        var q1 = this.cp1.interpolation(this.cp2, t);
+        var q2 = this.cp2.interpolation(this.p2, t);
+        var r0 = q0.interpolation(q1, t);
+        var r1 = q1.interpolation(q2, t);
+        var p = r0.interpolation(r1, t);
+        var cp1 = this.p1.interpolation(this.cp1, t);
+        var cp2 = this.p2.interpolation(this.cp2, (1 - t));
+        return [
+            JSCubicBezier(this.p1, cp1, r0, p),
+            JSCubicBezier(p, r1, cp2, this.p2)
+        ];
+    },
+
+    pointsWithFlatness: function(flatness){
+        var points = [JSPoint(this.p1)];
+        var dt = 0.1;
+        var t = 0;
+        var p0 = this.p1;
+        var p;
+        var q;
+        var mid;
+        var delta;
+        var iterationCount = 0;
+        var acceptable;
+        while (t < 1 && iterationCount < 1000){
+            p = this.pointAtInterval(t + dt);
+            q = this.pointAtInterval(t + dt / 2);
+            mid = p0.interpolation(p, 0.5);
+            acceptable = q.distanceToPoint(mid) <= flatness;
+            if (acceptable){
+                points.push(p);
+                t += dt;
+                dt = Math.min(dt * 2, 1 - t);
+                p0 = p;
+            }else{
+                dt /= 2;
+            }
+            ++iterationCount;
+        }
+        return points;
     }
 
-};
+};
+
+JSCubicBezier.fromQuadradicBezier = function(p1, cp, p2){
+    var cp1 = p1.interpolation(cp, 2/3);
+    var cp2 = p2.interpolation(cp, 2/3);
+    return JSCubicBezier(p1, cp1, cp2, p2);
+};

package/Root/Frameworks/Foundation/JSFont.js

@@ -88,12 +88,6 @@ JSClass("JSFont", JSObject, {
 
     initFromDictionary: function(dictionary){
         var descriptor = JSFontDescriptor.descriptorWithFamily(dictionary.family, dictionary.weight, dictionary.style);
-        if (descriptor === null){
-            if (dictionary.url){
-                descriptor = JSURLFontDescriptor.initWithURL(JSURL.initWithString(dictionary.url), dictionary.family, dictionary.weight, dictionary.style);
-                JSFontDescriptor.registerDescriptor(descriptor);
-            }
-        }
         if (descriptor !== null){
             return JSFont.initWithDescriptor(descriptor, dictionary.size);
         }
@@ -102,7 +96,6 @@ JSClass("JSFont", JSObject, {
 
     dictionaryRepresentation: function(){
         return {
-            url: this.descriptor instanceof JSURLFontDescriptor ? this._descriptor.url : undefined,
             family: this._descriptor.family,
             weight: this._descriptor.weight,
             style: this._descriptor.style,
@@ -164,8 +157,14 @@ JSClass("JSFont", JSObject, {
     },
 
     _calculateDisplayMetrics: function(){
-        this._displayAscender = Math.round(this._ascender);
-        this._displayDescender = Math.round(this._descender);
+        // Math.round always rounds towards +Infinity when a given number
+        // has a fractional part exactly equal to 0.5.
+        // So, 2.5 rounds to 3 but -2.5 rounds to -2.
+        //
+        // For the purposes of this calculation, we want negative
+        // values like -2.5 to round to -3.
+        this._displayAscender = this._ascender < 0 ? -Math.round(-this._ascender) : Math.round(this._ascender);
+        this._displayDescender = this._descender < 0 ? -Math.round(-this._descender) : Math.round(this._descender);
         this._displayLineHeight = this._displayAscender - this._displayDescender;
     },
 

package/Root/Frameworks/Foundation/JSGradient.js

@@ -142,7 +142,17 @@ JSClass('JSGradient', JSObject, {
     },
 
     addStop: function(position, color){
-        this.stops.push({position: position, color: color});
+        var l = this.stops.length;
+        var stop = {position: position, color: color};
+        var i = l - 1;
+        for (; i >= 0; --i){
+            if (this.stops[i].position <= position){
+                break;
+            }
+        }
+        i++;
+        this.stops.splice(i, 0, stop);
+        return i;
     },
 
     cssString: function(size){
@@ -167,6 +177,19 @@ JSClass('JSGradient', JSObject, {
         return 'linear-gradient(%fdeg, %s)'.sprintf(angle, cssStops.join(', '));
     },
 
+    radialCSSString: function(size){
+        var cssStops = [];
+        var stop;
+        for (var i = 0, l = this.stops.length; i < l; ++i){
+            stop = this.stops[i];
+            cssStops.push('%s %f%%'.sprintf(stop.color.cssString(), stop.position * 100));
+        }
+        var start = JSPoint(this.start.x * size.width, this.start.y * size.height);
+        var end = JSPoint(this.end.x * size.width, this.end.y * size.height);
+        var d = start.distanceToPoint(end);
+        return 'radial-gradient(%fpx at %f%% %f%%, %s)'.sprintf(d, this.start.x * 100, this.start.y * 100, cssStops.join(', '));
+    },
+
     colorAtPosition: function(position){
         if (position <= this.stops[0].position){
             return this.stops[0].color;
@@ -229,7 +252,10 @@ JSClass('JSGradient', JSObject, {
         var gradient = JSGradient.init();
         gradient.start = transform.convertPointFromTransform(this.start);
         gradient.end = transform.convertPointFromTransform(this.end);
-        gradient.stops = JSCopy(this.stops);
+        var i, l;
+        for (i = 0, l = this.stops.length; i < l; ++i){
+            gradient.addStop(this.stops[i].position, this.stops[i].color);
+        }
         return gradient;
     }
 

package/Root/Frameworks/Foundation/JSImage+HTML.js

@@ -32,4 +32,30 @@ _JSURLImage.definePropertiesFromExtensions({
     htmlURLString: function(){
         return this.url.encodedString;
     }
-});
+});
+
+JSImage.definePropertiesFromExtensions({
+
+    _htmlImage: null,
+    _htmlImagePromise: null,
+
+    preloadForHTMLContexts: function(){
+        if (this._htmlImagePromise === null){
+            var image = this;
+            this._htmlImagePromise = new Promise(function(resolve, reject){
+                var htmlImage = new JSGlobalObject.Image();
+                htmlImage.src = image.htmlURLString();
+                htmlImage.onload = function(){
+                    resolve(htmlImage);
+                };
+                htmlImage.onerror = function(){
+                    reject(new Error("failed to load image"));
+                };
+            }).then(function(htmlImage){
+                image._htmlImage = htmlImage;
+            });
+        }
+        return this._htmlImagePromise;
+    }
+
+});

package/Root/Frameworks/Foundation/JSNumberFormatter.js

@@ -560,6 +560,8 @@ JSClass("JSNumberFormatter", JSObject, {
         var canSeePercent = false;
         var canSeeGroup = false;
         var seenDigit = false;
+        var prefix = "";
+        var suffix = "";
         var stringMatches = function(substr){
             if (substr.length === 0){
                 return false;
@@ -588,6 +590,7 @@ JSClass("JSNumberFormatter", JSObject, {
                 sign = -1;
                 canSeeSign = false;
                 i += this.minusSign.length;
+                prefix += this.minusSign;
             }else if (canSeeSign && stringMatches(this.plusSign)){
                 canSeeSign = false;
                 i += this.plusSign.length;
@@ -625,8 +628,12 @@ JSClass("JSNumberFormatter", JSObject, {
                 i += this.groupingSeparator.length;
             }else if (c == 0x20){
                 ++i;
+            }else if (!seenDigit){
+                prefix += string[i];
+                ++i;
             }else{
-                return null;
+                suffix += string[i];
+                ++i;
             }
         }
         if (!seenDigit){
@@ -639,6 +646,21 @@ JSClass("JSNumberFormatter", JSObject, {
         if (sign < 0){
             n = -n;
         }
+        if (n >= 0){
+            if (prefix !== "" && prefix !== this.positivePrefix){
+                return null;
+            }
+            if (suffix !== "" && suffix !== this.positiveSuffix){
+                return null;
+            }
+        }else{
+            if (prefix !== "" && prefix !== this.negativePrefix){
+                return null;
+            }
+            if (suffix !== "" && suffix !== this.negativeSuffix){
+                return null;
+            }
+        }
         return n;
     },
 

package/Root/Frameworks/Foundation/JSPath.js

@@ -53,6 +53,40 @@ JSClass("JSPath", JSObject, {
         return true;
     },
 
+    elements: JSReadOnlyProperty(),
+
+    _elements: null,
+
+    _invalidateElements: function(){
+        this._elements = null;
+    },
+
+    getElements: function(){
+        if (this._elements === null){
+            this._elements = [];
+            var i, l, j, k;
+            var subpath, segment;
+            for (i = 0, l = this.subpaths.length; i < l; ++i){
+                subpath = this.subpaths[i];
+                this._elements.push(JSPathElement(JSPathElement.Type.move, subpath.firstPoint));
+                if (subpath.segments.length > 0){
+                    for (j = 0, k = subpath.segments.length; j < k; ++j){
+                        segment = subpath.segments[j];
+                        if (segment.type == JSPath.SegmentType.line){
+                            this._elements.push(JSPathElement(JSPathElement.Type.line, segment.end));
+                        }else if (segment.type == JSPath.SegmentType.curve){
+                            this._elements.push(JSPathElement(JSPathElement.Type.cubicCurve, segment.curve.p2, segment.curve.p1, segment.curve.cp1, segment.curve.cp2));
+                        }
+                    }
+                }
+                if (subpath.closed){
+                    this._elements.push(JSPathElement(JSPathElement.Type.close));
+                }
+            }
+        }
+        return this._elements;
+    },
+
     subpaths: null,
     currentPoint: JSReadOnlyProperty('_currentPoint', null),
     currentSubpath: null,
@@ -68,6 +102,7 @@ JSClass("JSPath", JSObject, {
         this.subpaths.push(this.currentSubpath);
         this._currentPoint = point;
         this._invalidateBoundingRect();
+        this._invalidateElements();
     },
 
     addLineToPoint: function(point, transform){
@@ -80,6 +115,7 @@ JSClass("JSPath", JSObject, {
         this.currentSubpath.segments.push({type: JSPath.SegmentType.line, end: point});
         this._currentPoint = point;
         this._invalidateBoundingRect();
+        this._invalidateElements();
     },
 
     addCurveToPoint: function(point, control1, control2, transform){
@@ -93,6 +129,15 @@ JSClass("JSPath", JSObject, {
         this.currentSubpath.segments.push({type: JSPath.SegmentType.curve, curve: curve});
         this._currentPoint = point;
         this._invalidateBoundingRect();
+        this._invalidateElements();
+    },
+
+    addQuadraticCurveToPoint: function(point, control, transform){
+        if (transform !== undefined){
+            point = transform.convertPointFromTransform(point);
+            control = transform.convertPointFromTransform(control);
+        }
+        this.addCurveToPoint(point, this._currentPoint.interpolation(control, 2/3), point.interpolation(control, 2/3));
     },
 
     addRect: function(rect, transform){
@@ -328,7 +373,9 @@ JSClass("JSPath", JSObject, {
         if (this.subpaths.length === 0){
             this.moveToPoint(p1, transform);
         }else{
-            this.addLineToPoint(p1, transform);
+            if (Math.abs(p1.x - this._currentPoint.x) > 0.00001 || Math.abs(p1.y - this._currentPoint.y) > 0.00001){
+                this.addLineToPoint(p1, transform);
+            }
         }
 
         // If there's no radius, then there's nothing left to do
@@ -512,10 +559,10 @@ JSClass("JSPath", JSObject, {
         // distance is clockwise or counter clockwise.
         // Note: we could swap the angles and always arc in a fixed direction,
         // but I think it makes more sense to always arc from p0 to p2.
-        if (startAngle < 0){
+        if (startAngle <= 0){
             startAngle += TWO_PI;
         }
-        if (endAngle < 0){
+        if (endAngle <= 0){
             endAngle += TWO_PI;
         }
         var clockwise;
@@ -524,7 +571,9 @@ JSClass("JSPath", JSObject, {
         }else{
             clockwise = endAngle - startAngle <= Math.PI;
         }
-        this.moveToPoint(t1);
+        if (Math.abs(t1.x - this._currentPoint.x) > 0.00001 || Math.abs(t1.y - this._currentPoint.y) > 0.00001){
+            this.moveToPoint(t1);
+        }
         this.addArc(center, radius, startAngle, endAngle, clockwise);
     },
 
@@ -533,6 +582,25 @@ JSClass("JSPath", JSObject, {
             this._currentPoint = this.currentSubpath.firstPoint;
             this.currentSubpath.closed = true;
             this.currentSubpath = null;
+            this._invalidateElements();
+        }
+    },
+
+    addPath: function(path, transform){
+        var i, l;
+        var elements = path.elements;
+        var element;
+        for (i = 0, l = elements.length; i < l; ++i){
+            element = elements[i];
+            if (element.type === JSPathElement.Type.move){
+                this.moveToPoint(element.point, transform);
+            }else if (element.type === JSPathElement.Type.line){
+                this.addLineToPoint(element.point, transform);
+            }else if (element.type === JSPathElement.Type.cubicCurve){
+                this.addCurveToPoint(element.curve.p2, element.curve.cp1, element.curve.cp2, transform);
+            }else if (element.type === JSPathElement.Type.close){
+                this.closeSubpath();
+            }
         }
     },
 
@@ -841,6 +909,9 @@ JSClass("JSPath", JSObject, {
     intersectsPath: function(other, fillRule){
         var boundingRect = this.boundingRect;
         // no need to check if bounding rect don't intersect
+        if (boundingRect === null){
+            return false;
+        }
         if (!boundingRect.intersectsRect(other.boundingRect)){
             return false;
         }
@@ -989,8 +1060,59 @@ JSClass("JSPath", JSObject, {
         return path;
     },
 
+    pathWithFlatness: function(flatness){
+        var path = JSPath.init();
+        var i, l, j, k;
+        var element;
+        var elements = this.elements;
+        var points;
+        for (i = 0, l = elements.length; i < l; ++i){
+            element = elements[i];
+            if (element.type === JSPathElement.Type.move){
+                path.moveToPoint(element.point);
+            }else if (element.type === JSPathElement.Type.line){
+                path.addLineToPoint(element.point);
+            }else if (element.type === JSPathElement.Type.cubicCurve){
+                points = element.curve.pointsWithFlatness(flatness);
+                for (j = 1, k = points.length; j < k; ++j){
+                    path.addLineToPoint(points[j]);
+                }
+            }else if (element.type === JSPathElement.Type.close){
+                path.closeSubpath();
+            }
+        }
+        return path;
+    },
+
+    outlineContainsPoint: function(point, tolerance){
+        // Only works on an already flattened path (we don't check curves)
+        var firstPoint = JSPoint.Zero;
+        var currentPoint = JSPoint.firstPoint;
+        var elements = this.elements;
+        var element;
+        var i, l;
+        for (i = 0, l = elements.length; i < l; ++i){
+            element = elements[i];
+            if (element.type === JSPathElement.Type.move){
+                firstPoint = element.point;
+                currentPoint = firstPoint;
+            }else if (element.type === JSPathElement.Type.line){
+                if (currentPoint.lineToPointContainsPoint(element.point, point, tolerance)){
+                    return true;
+                }
+                currentPoint = element.point;
+            }else if (element.type === JSPathElement.Type.close){
+                if (currentPoint.lineToPointContainsPoint(firstPoint, point, tolerance)){
+                    return true;
+                }
+                currentPoint = firstPoint;
+            }
+        }
+        return false;
+    },
+
     initWithSVGPathData: function(svgPathData){
-        // TODO: Q, q, T, t, A, a
+        // TODO: T, t, A, a
         //
         // - All instructions are expressed as one character (e.g., a moveto
         //   is expressed as an M).
@@ -1161,7 +1283,7 @@ JSClass("JSPath", JSObject, {
                     break;
                 }
                 if (point !== null){
-                    point = point.adding(JSPoint(command.values[0], command.values[1]))
+                    point = point.adding(JSPoint(command.values[0], command.values[1]));
                 }else{
                     point = JSPoint(command.values[0], command.values[1]);
                 }
@@ -1291,6 +1413,42 @@ JSClass("JSPath", JSObject, {
                     subpath.segments.push(segment);
                     point = curve.p2;
                 }
+            }else if (command.name === "Q"){
+                if (command.values.length < 4){
+                    break;
+                }
+                if (subpath === null){
+                    subpath = Subpath(point);
+                    this.subpaths.push(subpath);
+                }
+                for (v = 0; v < command.values.length - 3; v += 4){
+                    curve = JSCubicBezier.fromQuadradicBezier(
+                        point,
+                        JSPoint(command.values[v], command.values[v + 1]),
+                        JSPoint(command.values[v + 2], command.values[v + 3])
+                    );
+                    segment = {type: JSPath.SegmentType.curve, curve: curve};
+                    subpath.segments.push(segment);
+                    point = curve.p2;
+                }
+            }else if (command.name === "q"){
+                if (command.values.length < 4){
+                    break;
+                }
+                if (subpath === null){
+                    subpath = Subpath(point);
+                    this.subpaths.push(subpath);
+                }
+                for (v = 0; v < command.values.length - 3; v += 4){
+                    curve = JSCubicBezier.fromQuadradicBezier(
+                        point,
+                        point.adding(JSPoint(command.values[v], command.values[v + 1])),
+                        point.adding(JSPoint(command.values[v + 2], command.values[v + 3]))
+                    );
+                    segment = {type: JSPath.SegmentType.curve, curve: curve};
+                    subpath.segments.push(segment);
+                    point = curve.p2;
+                }
             }else if (command.name === "S"){
                 if (command.values.length < 4){
                     break;
@@ -1502,6 +1660,34 @@ JSPath.Sides = {
     }
 };
 
+JSGlobalObject.JSPathElement = function(type, point, point1, point2, point3){
+    if (this === undefined){
+        if (type === null){
+            return null;
+        }
+        return new JSPathElement(type, point, point1, point2, point3);
+    }
+    if (type instanceof JSPathElement){
+        this.type = type.type;
+        this.point = JSPoint(type.point);
+        this.curve = JSCubicBezier(type.curve);
+    }else{
+        this.type = type;
+        this.point = JSPoint(point || null);
+        if (type === JSPathElement.Type.cubicCurve){
+            this.curve = JSCubicBezier(point1, point2, point3, point);
+        }
+    }
+};
+
+JSPathElement.Type = {
+    move: 1,
+    line: 2,
+    cubicCurve: 3,
+    close: 4
+};
+
+
 JSPath.Sides.minYmaxY = JSPath.Sides.minY | JSPath.Sides.maxY;
 JSPath.Sides.minXmaxX = JSPath.Sides.minX | JSPath.Sides.maxX;