exyte/Macaw
1
1
Fork 0
mirror of https://github.com/exyte/Macaw.git synced 2024-09-17 16:07:44 +03:00
Code Issues Projects Releases Wiki Activity

Fix box units calculating

Browse Source
This commit is contained in:
Alisa Mylnikova 2018-06-09 17:46:27 +07:00
parent 364dd14b10
commit 4287c5ee1d
6 changed files with 291 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Macaw.xcodeproj/project.pbxproj
View File

@ -444,6 +444,8 @@
5B6E194220AC58F900454E7E /* Color.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5B6E191F20AC58F900454E7E /* Color.swift */; };
5B6E194320AC58F900454E7E /* Gradient.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5B6E192020AC58F900454E7E /* Gradient.swift */; };
5B6E194420AC58F900454E7E /* Gradient.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5B6E192020AC58F900454E7E /* Gradient.swift */; };
5B7E79CE20CBE69700C50BCF /* masking-path-02-b-manual.reference in Resources */ = {isa = PBXBuildFile; fileRef = 5B7E79CC20CBE69600C50BCF /* masking-path-02-b-manual.reference */; };
5B7E79CF20CBE69700C50BCF /* masking-path-02-b-manual.svg in Resources */ = {isa = PBXBuildFile; fileRef = 5B7E79CD20CBE69700C50BCF /* masking-path-02-b-manual.svg */; };
5BAE201F208E1211006BF277 /* SVGCanvas.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5BAE201E208E1211006BF277 /* SVGCanvas.swift */; };
5BAE2038208E163D006BF277 /* polyline.reference in Resources */ = {isa = PBXBuildFile; fileRef = 5BAE2022208E1637006BF277 /* polyline.reference */; };
5BAE2039208E163D006BF277 /* polygon.reference in Resources */ = {isa = PBXBuildFile; fileRef = 5BAE2023208E1637006BF277 /* polygon.reference */; };
@ -844,6 +846,8 @@
5B6E191E20AC58F900454E7E /* Stroke.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Stroke.swift; sourceTree = "<group>"; };
5B6E191F20AC58F900454E7E /* Color.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Color.swift; sourceTree = "<group>"; };
5B6E192020AC58F900454E7E /* Gradient.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Gradient.swift; sourceTree = "<group>"; };
5B7E79CC20CBE69600C50BCF /* masking-path-02-b-manual.reference */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = "masking-path-02-b-manual.reference"; sourceTree = "<group>"; };
5B7E79CD20CBE69700C50BCF /* masking-path-02-b-manual.svg */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = "masking-path-02-b-manual.svg"; sourceTree = "<group>"; };
5BAE201E208E1211006BF277 /* SVGCanvas.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = SVGCanvas.swift; sourceTree = "<group>"; };
5BAE2022208E1637006BF277 /* polyline.reference */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = polyline.reference; sourceTree = "<group>"; };
5BAE2023208E1637006BF277 /* polygon.reference */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = polygon.reference; sourceTree = "<group>"; };
@ -1345,6 +1349,8 @@
5B1AE1D320B6A669007EECCB /* coords-transformattr-04-f-manual.svg */,
5B1AE22F20B6A669007EECCB /* coords-transformattr-05-f-manual.reference */,
5B1AE1B120B6A669007EECCB /* coords-transformattr-05-f-manual.svg */,
5B7E79CC20CBE69600C50BCF /* masking-path-02-b-manual.reference */,
5B7E79CD20CBE69700C50BCF /* masking-path-02-b-manual.svg */,
5B1AE19E20B6A669007EECCB /* metadata-example-01-t-manual.reference */,
5B1AE22A20B6A669007EECCB /* metadata-example-01-t-manual.svg */,
5B1AE20C20B6A669007EECCB /* painting-control-01-f-manual.reference */,
@ -1690,6 +1696,7 @@
5BAE2048208E163D006BF277 /* line.reference in Resources */,
5B1AE2A420B6A669007EECCB /* paths-data-12-t-manual.reference in Resources */,
57CAB1361D7832E000FD8E47 /* triangle.svg in Resources */,
5B7E79CF20CBE69700C50BCF /* masking-path-02-b-manual.svg in Resources */,
5BFEF5D620BC1C1F008DAC11 /* paths-data-18-f-manual.svg in Resources */,
5B1AE23620B6A669007EECCB /* paths-data-07-t-manual.svg in Resources */,
C43B06691F99FC2300787A35 /* pathbounds4.svg in Resources */,
@ -1759,6 +1766,7 @@
5BAE203E208E163D006BF277 /* circle.reference in Resources */,
C410148E1F834D290022EE44 /* style.svg in Resources */,
5B1AE26E20B6A669007EECCB /* struct-frag-01-t-manual.svg in Resources */,
5B7E79CE20CBE69700C50BCF /* masking-path-02-b-manual.reference in Resources */,
5B1AE2B420B6A669007EECCB /* shapes-ellipse-02-t-manual.svg in Resources */,
5B1AE2A120B6A669007EECCB /* paths-data-02-t-manual.reference in Resources */,
5B37139B20BE95D7004BB6EE /* pservers-grad-07-b-manual.svg in Resources */,

4
MacawTests/MacawSVGTests.swift
View File

@ -564,4 +564,8 @@ class MacawSVGTests: XCTestCase {
func testShapesGrammar01() {
validateJSON("shapes-grammar-01-f-manual")
}
func testMaskingPath02() {
createJSON("masking-path-02-b-manual")
}
}

2
MacawTests/w3c-test-suite.md
View File

@ -123,7 +123,7 @@ Status of each test:
|[masking-mask-02-f-manual](w3cSVGTests/masking-mask-02-f-manual.svg) | [#393](https://github.com/exyte/Macaw/issues/393) |
|[masking-opacity-01-b-manual](w3cSVGTests/masking-opacity-01-b-manual.svg) | [#393](https://github.com/exyte/Macaw/issues/393) |
|[masking-path-01-b-manual](w3cSVGTests/masking-path-01-b-manual.svg) | [#393](https://github.com/exyte/Macaw/issues/393) |
|[masking-path-02-b-manual](w3cSVGTests/masking-path-02-b-manual.svg) | [#393](https://github.com/exyte/Macaw/issues/393) |
|[masking-path-02-b-manual](w3cSVGTests/masking-path-02-b-manual.svg) | ✅ |
|[masking-path-03-b-manual](w3cSVGTests/masking-path-03-b-manual.svg) | [#393](https://github.com/exyte/Macaw/issues/393) |
|[masking-path-04-b-manual](w3cSVGTests/masking-path-04-b-manual.svg) | [#393](https://github.com/exyte/Macaw/issues/393) |
|[masking-path-05-f-manual](w3cSVGTests/masking-path-05-f-manual.svg) | [#393](https://github.com/exyte/Macaw/issues/393) |

187
MacawTests/w3cSVGTests/masking-path-02-b-manual.reference Normal file
View File

@ -0,0 +1,187 @@
{
"layout" : {
"yAligningMode" : "mid",
"scalingMode" : "meet",
"svgSize" : {
"height" : "100.0%",
"width" : "100.0%"
},
"xAligningMode" : "mid",
"viewBox" : {
"x" : 0,
"w" : 480,
"type" : "Rect",
"y" : 0,
"h" : 360
}
},
"contents" : [
{
"contents" : [
{
"contents" : [
{
"fill" : {
"type" : "Color",
"val" : 16711816
},
"form" : {
"x" : 10,
"w" : 430,
"type" : "Rect",
"y" : 10,
"h" : 80
},
"node" : "Shape"
},
{
"stroke" : {
"join" : "miter",
"cap" : "butt",
"fill" : {
"type" : "Color",
"val" : 0
},
"dashes" : [
],
"width" : 4
},
"form" : {
"x" : 117,
"w" : 258,
"type" : "Rect",
"y" : 50,
"h" : 40
},
"node" : "Shape"
},
{
"baseline" : "bottom",
"fill" : {
"type" : "Color",
"val" : 0
},
"node" : "Text",
"align" : "min",
"text" : "clipPathUnits=objectBoundingBox",
"place" : "1, 0, 0, 1, 20, 130",
"font" : {
"name" : "SVGFreeSansASCII,sans-serif",
"size" : 30,
"weight" : "normal"
}
},
{
"place" : ".707107, -.707107, .707107, .707107, 100, 200",
"form" : {
"x" : 0,
"w" : 120,
"type" : "Rect",
"y" : 0,
"h" : 120
},
"node" : "Shape",
"fill" : {
"type" : "Color",
"val" : 255
},
"clip" : {
"x" : 60,
"w" : 80,
"type" : "Rect",
"y" : 60,
"h" : 80
}
},
{
"place" : ".707107, -.707107, .707107, .707107, 100, 200",
"form" : {
"x" : 60,
"w" : 60,
"type" : "Rect",
"y" : 60,
"h" : 60
},
"node" : "Shape",
"stroke" : {
"join" : "miter",
"cap" : "butt",
"fill" : {
"type" : "Color",
"val" : 0
},
"dashes" : [
],
"width" : 4
}
},
{
"baseline" : "bottom",
"fill" : {
"type" : "Color",
"val" : 0
},
"node" : "Text",
"align" : "min",
"text" : "clipPathUnits=userSpaceOnUse",
"place" : "1, 0, 0, 1, 20, 280",
"font" : {
"name" : "SVGFreeSansASCII,sans-serif",
"size" : 30,
"weight" : "normal"
}
}
],
"node" : "Group"
}
],
"node" : "Group"
},
{
"contents" : [
{
"baseline" : "bottom",
"fill" : {
"type" : "Color",
"val" : 0
},
"node" : "Text",
"align" : "min",
"text" : "$Revision: 1.8 $",
"place" : "1, 0, 0, 1, 10, 340",
"font" : {
"name" : "SVGFreeSansASCII,sans-serif",
"size" : 32,
"weight" : "normal"
}
}
],
"node" : "Group"
},
{
"stroke" : {
"join" : "miter",
"cap" : "butt",
"fill" : {
"type" : "Color",
"val" : 0
},
"dashes" : [
],
"width" : 1
},
"form" : {
"x" : 1,
"w" : 478,
"type" : "Rect",
"y" : 1,
"h" : 358
},
"node" : "Shape"
}
],
"node" : "Canvas"
}

84
MacawTests/w3cSVGTests/masking-path-02-b-manual.svg Executable file
View File

@ -0,0 +1,84 @@
<svg version="1.1" baseProfile="basic" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= SVG 1.1 2nd Edition Test Case =-->
<!--======================================================================-->
<!--= Copyright 2009 World Wide Web Consortium, (Massachusetts =-->
<!--= Institute of Technology, European Research Consortium for =-->
<!--= Informatics and Mathematics (ERCIM), Keio University). =-->
<!--= All Rights Reserved. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="SVGWG" author="Haroon Sheikh" status="accepted"
version="$Revision: 1.8 $" testname="$RCSfile: masking-path-02-b.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/masking.html#ClippingPaths">
<p>
Test to see if clipPathUnits attribute is handled properly on a
clipPath element. Only tests the userSpaceOnUse and
objectBoundingBox items of the clipPathUnits. userSpace has been
tested by the previous test as it is the default.
</p>
<p>
The test at the top shows a pink rectangle that has been clipped by a
rectangular clipping path. The clipping path is defined using clipPathUnits=objectBoundingBox.
</p>
<p>
The example at the bottom a rotated blue rectangle that has been clipped by a
rectangular clipping path. The clipping path is defined using clipPathUnits=userSpaceOnUse.
</p>
<p>
The rendered picture should match the reference image exactly, except for possible
variations in the labelling text (per CSS2 rules).
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test passes if the pink rectangle and blue diamond do not have any
color painted outside of their black borders.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: masking-path-02-b.svg,v $</title>
<defs>
<font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F">
<font-face-src>
<font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/>
</font-face-src>
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<g shape-rendering="geometricPrecision">
<clipPath id="clip1" clipPathUnits="objectBoundingBox">
<rect x=".25" y=".5" width=".6" height="1"/>
</clipPath>
<rect x="10" y="10" width="430" height="80" fill="#F08" clip-path="url(#clip1)"/>
<rect x="117" y="50" width="258" height="40" fill="none" stroke="black" stroke-width="4"/>
<text font-size="30" x="20" y="130">clipPathUnits=objectBoundingBox</text>
<clipPath id="clip2" clipPathUnits="userSpaceOnUse">
<rect x="60" y="60" width="80" height="80"/>
</clipPath>
<rect transform="translate(100 200) rotate(-45)" x="0" y="0" width="120" height="120" fill="blue" clip-path="url(#clip2)"/>
<rect transform="translate(100 200) rotate(-45)" x="60" y="60" width="60" height="60" fill="none" stroke="black" stroke-width="4"/>
<text font-size="30" x="20" y="280">clipPathUnits=userSpaceOnUse</text>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.8 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
<!-- comment out this watermark once the test is approved -->
<!--<g id="draft-watermark">
<rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/>
<text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240"
text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
</g>-->
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

10
Source/svg/SVGParser.swift
View File

@ -1027,7 +1027,7 @@ open class SVGParser {
if clip.children.isEmpty {
return .none
}
if clip.children.count == 1 {
let shape = parseNode(clip.children.first!) as! Shape
return UserSpaceLocus(locus: shape.form, userSpace: userSpace)
@ -1433,8 +1433,12 @@ open class SVGParser {
if let clipPath = attributes["clip-path"], let id = parseIdFromUrl(clipPath), let locus = locus {
if let userSpaceLocus = defClip[id] {
if !userSpaceLocus.userSpace {
let boundingBox = locus.bounds()
let transform = ContentLayout.of(contentMode: .scaleAspectFit).layout(size: Size(w: 1, h: 1), into: boundingBox.size()).move(dx: boundingBox.x / boundingBox.w, dy: boundingBox.y / boundingBox.h)
let absoluteBounds = locus.bounds()
let respectiveBounds = userSpaceLocus.locus.bounds()
let finalSize = Size(w: absoluteBounds.w * respectiveBounds.w,
h: absoluteBounds.h * respectiveBounds.h)
let scale = ContentLayout.of(contentMode: .scaleToFill).layout(size: respectiveBounds.size(), into: finalSize)
let transform = Transform.identity.move(dx: absoluteBounds.x, dy: absoluteBounds.y).scale(sx: scale.m11, sy: scale.m22)
return TransformedLocus(locus: userSpaceLocus.locus, transform: transform)
}
return userSpaceLocus.locus