diff --git a/apps/site/components/editor/completions.ts b/apps/site/components/editor/completions.ts index fba45e99f..7365636ed 100644 --- a/apps/site/components/editor/completions.ts +++ b/apps/site/components/editor/completions.ts @@ -26,6 +26,7 @@ const COMPONENTS = [ 'Stop', 'Defs', 'ClipPath', + 'Marker', 'LinearGradient', 'RadialGradient', 'TextInput', @@ -55,6 +56,9 @@ const PROPS = [ 'bookmark', 'cache', 'minPresenceAhead', + 'markerStart', + 'markerMid', + 'markerEnd', 'hyphenationCallback', 'orphans', 'widows', diff --git a/apps/site/components/section-index/v4-splits.ts b/apps/site/components/section-index/v4-splits.ts index 635f7c54b..e952b027c 100644 --- a/apps/site/components/section-index/v4-splits.ts +++ b/apps/site/components/section-index/v4-splits.ts @@ -145,6 +145,10 @@ export const splits = { slug: 'clip-path', title: 'ClipPath', }, + { + slug: 'marker', + title: 'Marker', + }, { slug: 'linear-gradient', title: 'LinearGradient', diff --git a/apps/site/content/docs/v4/components/canvas.mdx b/apps/site/content/docs/v4/components/canvas.mdx index a25f87921..21b415916 100644 --- a/apps/site/content/docs/v4/components/canvas.mdx +++ b/apps/site/content/docs/v4/components/canvas.mdx @@ -14,6 +14,8 @@ A React component for freely drawing any content on the page. | paint | Painter function | _Function_ | _undefined_ | | debug | Enables debug mode on view bounding box. [See more](/docs/v4/advanced/debugging) | _Boolean_ | _false_ | | fixed | Renders component in all wrapped pages. [See more](/docs/v4/advanced/page-wrapping) | _Boolean_ | _false_ | +| break | Forces the wrapping algorithm to start a new page when rendering this element. [See more](/docs/v4/advanced/page-wrapping#page-breaks) | _Boolean_ | _false_ | +| minPresenceAhead | Hint that no page wrapping should occur between all sibling elements following the element within _n_ points. [See more](/docs/v4/advanced/orphans-and-widows) | _Number_ | _0_ | | bookmark | Attach bookmark to element. [See more](/docs/v4/advanced/document-navigation#bookmarks-v220) | _String_ or [Bookmark](/docs/v4/advanced/document-navigation#bookmark-type) | _undefined_ | React-pdf does not check how much space your drawing takes, so make sure you always define a `width` and `height` on the `style` prop. diff --git a/apps/site/content/docs/v4/components/image-background.mdx b/apps/site/content/docs/v4/components/image-background.mdx index 1fbd94ba4..8539bb969 100644 --- a/apps/site/content/docs/v4/components/image-background.mdx +++ b/apps/site/content/docs/v4/components/image-background.mdx @@ -16,6 +16,8 @@ A React component for displaying an image behind child content. It works like `I | imageStyle | Defines styles applied to the background image | _Object_, _Array_ | _undefined_ | | debug | Enables debug mode on view bounding box. [See more](/docs/v4/advanced/debugging) | _Boolean_ | _false_ | | fixed | Renders component in all wrapped pages. [See more](/docs/v4/advanced/page-wrapping) | _Boolean_ | _false_ | +| break | Forces the wrapping algorithm to start a new page when rendering this element. [See more](/docs/v4/advanced/page-wrapping#page-breaks) | _Boolean_ | _false_ | +| minPresenceAhead | Hint that no page wrapping should occur between all sibling elements following the element within _n_ points. [See more](/docs/v4/advanced/orphans-and-widows) | _Number_ | _0_ | | cache | Enables image caching between consecutive renders | _Boolean_ | _true_ | | srcSet | Responsive image sources for resolution-based selection | _String_ | _undefined_ | | sizes | Display width used for `srcSet` source selection | _String_, _Number_ | _undefined_ | diff --git a/apps/site/content/docs/v4/components/image.mdx b/apps/site/content/docs/v4/components/image.mdx index 356102f86..9647ebcbb 100644 --- a/apps/site/content/docs/v4/components/image.mdx +++ b/apps/site/content/docs/v4/components/image.mdx @@ -15,6 +15,8 @@ A React component for displaying network or local (Node only) JPG or PNG images, | style | Defines view styles. [See more](/docs/v4/styling) | _Object_, _Array_ | _undefined_ | | debug | Enables debug mode on view bounding box. [See more](/docs/v4/advanced/debugging) | _Boolean_ | _false_ | | fixed | Renders component in all wrapped pages. [See more](/docs/v4/advanced/page-wrapping) | _Boolean_ | _false_ | +| break | Forces the wrapping algorithm to start a new page when rendering this element. [See more](/docs/v4/advanced/page-wrapping#page-breaks) | _Boolean_ | _false_ | +| minPresenceAhead | Hint that no page wrapping should occur between all sibling elements following the element within _n_ points. [See more](/docs/v4/advanced/orphans-and-widows) | _Number_ | _0_ | | cache | Enables image caching between consecutive renders | _Boolean_ | _true_ | | srcSet | Responsive image sources for resolution-based selection. E.g. `"small.jpg 300w, medium.jpg 600w"` | _String_ | _undefined_ | | sizes | Display width used for `srcSet` source selection | _String_, _Number_ | _undefined_ | diff --git a/apps/site/content/docs/v4/components/link.mdx b/apps/site/content/docs/v4/components/link.mdx index f6c95e946..0d55932c8 100644 --- a/apps/site/content/docs/v4/components/link.mdx +++ b/apps/site/content/docs/v4/components/link.mdx @@ -16,5 +16,7 @@ A React component for displaying an hyperlink. Link’s can be nested inside a T | style | Defines view styles. [See more](/docs/v4/styling) | _Object_, _Array_ | _undefined_ | | debug | Enables debug mode on view bounding box. [See more](/docs/v4/advanced/debugging) | _Boolean_ | _false_ | | fixed | Render component in all wrapped pages. [See more](/docs/v4/advanced/page-wrapping) | _Boolean_ | _false_ | +| break | Forces the wrapping algorithm to start a new page when rendering this element. [See more](/docs/v4/advanced/page-wrapping#page-breaks) | _Boolean_ | _false_ | +| minPresenceAhead | Hint that no page wrapping should occur between all sibling elements following the element within _n_ points. [See more](/docs/v4/advanced/orphans-and-widows) | _Number_ | _0_ | | hitSlop | Expands the clickable area beyond the visible bounds of the link | _Number_ or _Object_ `{ top, bottom, left, right }` | _undefined_ | | bookmark | Attach bookmark to element. [See more](/docs/v4/advanced/document-navigation#bookmarks-v220) | _String_ or [Bookmark](/docs/v4/advanced/document-navigation#bookmark-type) | _undefined_ | diff --git a/apps/site/content/docs/v4/components/note.mdx b/apps/site/content/docs/v4/components/note.mdx index 71484e9cf..791813468 100644 --- a/apps/site/content/docs/v4/components/note.mdx +++ b/apps/site/content/docs/v4/components/note.mdx @@ -13,3 +13,5 @@ A React component for displaying a note annotation inside the document. | style | Defines view styles. [See more](/docs/v4/styling) | _Object_, _Array_ | _undefined_ | | children | Note string content | _String_ | _undefined_ | | fixed | Renders component in all wrapped pages. [See more](/docs/v4/advanced/page-wrapping) | _Boolean_ | _false_ | +| break | Forces the wrapping algorithm to start a new page when rendering this element. [See more](/docs/v4/advanced/page-wrapping#page-breaks) | _Boolean_ | _false_ | +| minPresenceAhead | Hint that no page wrapping should occur between all sibling elements following the element within _n_ points. [See more](/docs/v4/advanced/orphans-and-widows) | _Number_ | _0_ | diff --git a/apps/site/content/docs/v4/components/text.mdx b/apps/site/content/docs/v4/components/text.mdx index f51aafc82..b9548a8a6 100644 --- a/apps/site/content/docs/v4/components/text.mdx +++ b/apps/site/content/docs/v4/components/text.mdx @@ -15,6 +15,8 @@ A React component for displaying text. Text supports nesting of other Text or Li | style | Defines view styles. [See more](/docs/v4/styling) | _Object_, _Array_ | _undefined_ | | debug | Enables debug mode on view bounding box. [See more](/docs/v4/advanced/debugging) | _Boolean_ | _false_ | | fixed | Renders component in all wrapped pages. [See more](/docs/v4/advanced/page-wrapping) | _Boolean_ | _false_ | +| break | Forces the wrapping algorithm to start a new page when rendering this element. [See more](/docs/v4/advanced/page-wrapping#page-breaks) | _Boolean_ | _false_ | +| minPresenceAhead | Hint that no page wrapping should occur between all sibling elements following the element within _n_ points. [See more](/docs/v4/advanced/orphans-and-widows) | _Number_ | _0_ | | hyphenationCallback | Specify hyphenation callback at a text level. See [hypthenation](/docs/v4/advanced/hyphenation) | _Function_ | _undefined_ | | hyphenationPenalty | Specify at what level words are hyphenated. [See more](/docs/v4/fonts#hyphenationpenalty) | _Number_ | _undefined_ | | id | Destination ID to be linked to. [See more](/docs/v4/advanced/document-navigation#destinations-v200) | _String_ | _undefined_ | diff --git a/apps/site/content/docs/v4/components/view.mdx b/apps/site/content/docs/v4/components/view.mdx index b4fa025df..fd9a58fa2 100644 --- a/apps/site/content/docs/v4/components/view.mdx +++ b/apps/site/content/docs/v4/components/view.mdx @@ -15,5 +15,7 @@ The most fundamental component for building a UI and is designed to be nested in | render | Render dynamic content based on context. [See more](/docs/v4/advanced/dynamic-content) | _Function_ | _undefined_ | | debug | Enables debug mode on view bounding box. [See more](/docs/v4/advanced/debugging) | _Boolean_ | _false_ | | fixed | Render component in all wrapped pages. [See more](/docs/v4/advanced/page-wrapping) | _Boolean_ | _false_ | +| break | Forces the wrapping algorithm to start a new page when rendering this element. [See more](/docs/v4/advanced/page-wrapping#page-breaks) | _Boolean_ | _false_ | +| minPresenceAhead | Hint that no page wrapping should occur between all sibling elements following the element within _n_ points. [See more](/docs/v4/advanced/orphans-and-widows) | _Number_ | _0_ | | id | Destination ID to be linked to. [See more](/docs/v4/advanced/document-navigation#destinations-v200) | _String_ | _undefined_ | | bookmark | Attach bookmark to element. [See more](/docs/v4/advanced/document-navigation#bookmarks-v220) | _String_ or [Bookmark](/docs/v4/advanced/document-navigation#bookmark-type) | _undefined_ | diff --git a/apps/site/content/docs/v4/meta.json b/apps/site/content/docs/v4/meta.json index f212da148..3e6a5b2ae 100644 --- a/apps/site/content/docs/v4/meta.json +++ b/apps/site/content/docs/v4/meta.json @@ -40,6 +40,7 @@ "svg/stop", "svg/defs", "svg/clip-path", + "svg/marker", "svg/linear-gradient", "svg/radial-gradient", "svg/presentation-attributes", diff --git a/apps/site/content/docs/v4/svg/marker.mdx b/apps/site/content/docs/v4/svg/marker.mdx new file mode 100644 index 000000000..0d46b480c --- /dev/null +++ b/apps/site/content/docs/v4/svg/marker.mdx @@ -0,0 +1,24 @@ +--- +title: "Marker" +--- + +The `` element defines a graphic drawn on the vertices of a ``, ``, `` or ``, typically an arrowhead or a data point. + +Declare it inside a `` element and reference it from the shape through the `markerStart`, `markerMid` and `markerEnd` attributes, which paint it on the first vertex, every intermediate vertex and the last vertex respectively. + + + +## Valid props + +| Prop name | Description | Type | Default | +| ------------ | :---------------------------------------------------------------------------------------------------: | -----------------: | --------------: | +| id | Unique identifier used to reference the marker from a shape. | _String_ | _undefined_ | +| viewBox | Defines the coordinate system of the marker contents, as `"minX minY maxX maxY"`. | _String_ | _undefined_ | +| markerWidth | Width of the marker viewport. Only applied when `viewBox` is present. | _String_, _Number_ | _3_ | +| markerHeight | Height of the marker viewport. Only applied when `viewBox` is present. | _String_, _Number_ | _3_ | +| refX | Position of the marker point on its x-axis, aligned to the vertex. | _String_, _Number_ | _0_ | +| refY | Position of the marker point on its y-axis, aligned to the vertex. | _String_, _Number_ | _0_ | +| orient | Rotation applied to the marker. `auto` follows the direction of the shape, `auto-start-reverse` also flips the start marker, and a number sets a fixed angle in degrees. | _String_, _Number_ | _0_ | +| markerUnits | Coordinate system for the marker. `strokeWidth` scales it with the shape's `strokeWidth`, `userSpaceOnUse` keeps its size constant. | _String_ | _strokeWidth_ | + +See also [Presentation Attributes](/docs/v4/svg/presentation-attributes) diff --git a/apps/site/content/docs/v4/svg/marker.usage.jsx b/apps/site/content/docs/v4/svg/marker.usage.jsx new file mode 100644 index 000000000..9cf4f73b9 --- /dev/null +++ b/apps/site/content/docs/v4/svg/marker.usage.jsx @@ -0,0 +1,63 @@ +import { + Svg, + Defs, + Marker, + Path, + Circle, + Line, + Polyline, +} from '@react-pdf/renderer'; + +const Flow = () => ( + + + + + + + + + + + + +); + +ReactPDF.render( + + + + + , +); diff --git a/apps/site/content/docs/v4/svg/presentation-attributes.mdx b/apps/site/content/docs/v4/svg/presentation-attributes.mdx index 46a5f48f8..5227b521e 100644 --- a/apps/site/content/docs/v4/svg/presentation-attributes.mdx +++ b/apps/site/content/docs/v4/svg/presentation-attributes.mdx @@ -25,3 +25,7 @@ SVG presentation attributes are CSS properties that can be used as attributes on | transform | Defines a list of transform definitions that are applied to an element and the element's children. | _String_ | _undefined_ | | textAnchor | Defines the horizontal alignment of a string of text. | _String_ | _undefined_ | | visibility | Lets you control the visibility of graphical elements. | _String_ | _visible_ | +| clipPath | References a [ClipPath](/docs/v4/svg/clip-path) restricting where paint is applied. | _String_ | _undefined_ | +| markerStart | References a [Marker](/docs/v4/svg/marker) drawn on the first vertex of the shape. | _String_ | _undefined_ | +| markerMid | References a [Marker](/docs/v4/svg/marker) drawn on every intermediate vertex of the shape. | _String_ | _undefined_ | +| markerEnd | References a [Marker](/docs/v4/svg/marker) drawn on the last vertex of the shape. | _String_ | _undefined_ |