1"use strict";(globalThis.webpackChunkwebsite_2=globalThis.webpackChunkwebsite_2||[]).push([[7606],{7911:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>r,contentTitle:()=>d,default:()=>b,frontMatter:()=>i,metadata:()=>l,toc:()=>c});const l=JSON.parse('{"id":"apps/edges/edge-labels","title":"Edge Labels","description":"","source":"@site/react-docs/apps/edges/edge-labels.mdx","sourceDirName":"apps/edges","slug":"/apps/edges/edge-labels","permalink":"/react/docs/apps/edges/edge-labels","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Edge Labels","keywords":["edge","connector","svg","path","jointjs","gojs","label","react flow"]},"sidebar":"docsSidebar","previous":{"title":"Overlays","permalink":"/react/docs/apps/edges/overlays"},"next":{"title":"Property Mapping","permalink":"/react/docs/apps/edges/property-mapping"}}');var o=a(74848),s=a(28453),n=a(84439);const i={title:"Edge Labels",keywords:["edge","connector","svg","path","jointjs","gojs","label","react flow"]},d=void 0,r={},c=[...n.toc];function p(e){const{FlavaSetter:t}={...(0,s.R)(),...e.components};return t||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("FlavaSetter",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t,{lib:"react"}),"\n",(0,o.jsx)(n.default,{type:"apps",lib:"react"})]})}function b(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},28453:(e,t,a)=>{a.d(t,{R:()=>n,x:()=>i});var l=a(96540);const o={},s=l.createContext(o);function n(e){const t=l.useContext(s);return l.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:n(e.components),l.createElement(s.Provider,{value:t},e.children)}},84439:(e,t,a)=>{a.r(t),a.d(t,{contentTitle:()=>n,default:()=>r,frontMatter:()=>s,toc:()=>i});var l=a(74848),o=a(28453);const s={},n=void 0,i=[{value:"Static labels",id:"static-labels",level:2},{value:"Rotating labels",id:"rotating-labels",level:2},{value:"Strict rotation",id:"strict-rotation",level:3},{value:"Dynamic labels",id:"dynamic-labels",level:2},{value:"Custom CSS class",id:"custom-css-class",level:2},{value:"Label location",id:"label-location",level:2}];function d(e){const t={code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,o.R)(),...e.components},{InlineExampleWithCode:a,RenderExample:s}=t;return a||c("InlineExampleWithCode",!0),s||c("RenderExample",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(t.p,{children:"There are several properties on an edge mapping that you can use to configure labels for your edges."}),"\n",(0,l.jsx)(t.h2,{id:"static-labels",children:"Static labels"}),"\n",(0,l.jsx)(t.p,{children:"Here, we hardcode a label for every edge by setting it as a string on the default edge type:"}),"\n",(0,l.jsx)(a,{type:e.type,lib:e.lib,viewOptions:{edges:{default:{label:"Edge"}}},exampleViewOptions:{edges:{default:{label:"Edge"}}},data:{nodes:[{id:"1",left:50,top:50},{id:"2",left:250,top:50}],edges:[{source:"1",target:"2"}]}}),"\n",(0,l.jsx)(t.h2,{id:"rotating-labels",children:"Rotating labels"}),"\n",(0,l.jsxs)(t.p,{children:["By default, an edge label will be drawn horizontally. You can instruct VisuallyJs to rotate edge labels so that they match the angle of the connector at the point at which they are located via the ",(0,l.jsx)(t.code,{children:"labelsRotatable"})," flag:"]}),"\n",(0,l.jsx)(a,{type:e.type,lib:e.lib,viewOptions:{edges:{default:{label:"Edge",labelsRotatable:!0,targetMarker:"PlainArrow"}}},exampleViewOptions:{edges:{default:{label:"Edge",labelsRotatable:!0,targetMarker:"PlainArrow"}}},data:{nodes:[{id:"1",left:250,top:50,type:"diamond"},{id:"2",left:50,top:150,type:"rectangle"}],edges:[{source:"1",target:"2",data:{label:"A Label"}}]}}),"\n",(0,l.jsx)(t.h3,{id:"strict-rotation",children:"Strict rotation"}),"\n",(0,l.jsxs)(t.p,{children:["In the above example, the edge's source is to the right of the target, and so, strictly speaking, if the label were rotated to match the slope of the connector, it would be flipped. Since this is not easy to read for a user, by default we rotate labels in ",(0,l.jsx)(t.code,{children:'"legible"'})," mode - when the angle of rotation lies between 90 and 270 degrees, we flip it."]}),"\n",(0,l.jsxs)(t.p,{children:["If you want VisuallyJs to strictly honour the slope of the connector, you can set ",(0,l.jsx)(t.code,{children:"strict"})," for ",(0,l.jsx)(t.code,{children:"labelsRotatable"}),":"]}),"\n",(0,l.jsx)(a,{type:e.type,lib:e.lib,viewOptions:{edges:{default:{label:"Edge",labelsRotatable:"strict",targetMarker:"PlainArrow"}}},exampleViewOptions:{edges:{default:{label:"Edge",labelsRotatable:"strict",targetMarker:"PlainArrow"}}},data:{nodes:[{id:"1",left:250,top:50,type:"diamond"},{id:"2",left:50,top:150,type:"rectangle"}],edges:[{source:"1",target:"2",data:{label:"A Label"}}]}}),"\n",(0,l.jsx)(t.h2,{id:"dynamic-labels",children:"Dynamic labels"}),"\n",(0,l.jsxs)(t.p,{children:["You can extract the value of each edge's ",(0,l.jsx)(t.code,{children:"label"})," from the edge's backing data:"]}),"\n",(0,l.jsx)(a,{type:e.type,lib:e.lib,viewOptions:{edges:{default:{label:"{{label}}"}}},exampleViewOptions:{edges:{default:{label:"{{label}}"}}},data:{nodes:[{id:"1",left:50,top:50,type:"diamond"},{id:"2",left:250,top:50,type:"rectangle"}],edges:[{source:"1",target:"2",data:{label:"A Label"}}]}}),"\n",(0,l.jsx)(t.h2,{id:"custom-css-class",children:"Custom CSS class"}),"\n",(0,l.jsx)(t.p,{children:"You can provide your own class/classes to set on the element VisuallyJs uses for the edge label:"}),"\n",(0,l.jsx)(s,{lib:e.lib,viewOptions:{edges:{default:{label:"{{label}}",labelClass:"myLabel"}}}}),"\n",(0,l.jsx)(t.p,{children:"Provide a space-separated list if you wish to provide more than one class."}),"\n",(0,l.jsx)(t.h2,{id:"label-location",children:"Label location"}),"\n",(0,l.jsxs)(t.p,{children:["By default, an edge label will be assigned a location of ",(0,l.jsx)(t.code,{children:"0.5"})," - meaning it will be halfway along the edge path. You can change this by providing a ",(0,l.jsx)(t.code,{children:"labelLocation"})," in your edge data:"]}),"\n",(0,l.jsx)(a,{type:e.type,lib:e.lib,viewOptions:{edges:{default:{label:"{{label}}",labelLocation:.25}}},exampleViewOptions:{edges:{default:{label:"{{label}}",labelLocation:.25}}},data:{nodes:[{id:"1",left:50,top:50,type:"diamond"},{id:"2",left:250,top:50,type:"rectangle"}],edges:[{source:"1",target:"2",data:{label:"label"}}]}}),"\n",(0,l.jsx)("p",{className:"mt-1",children:(0,l.jsxs)(t.p,{children:["You can also control this via a ",(0,l.jsx)(t.code,{children:"labelLocation"}
1)," value in your edge's backing data. For example, this edge:"]})}),"\n",(0,l.jsx)(t.pre,{children:(0,l.jsx)(t.code,{className:"language-javascript",children:'{\n source:"someNode",\n target:"someOtherNode",\n data:{\n labelLocation:0.25\n }\n}\n'})}),"\n",(0,l.jsx)(a,{type:e.type,lib:e.lib,viewOptions:{edges:{default:{label:"{{label}}"}}},exampleViewOptions:{edges:{default:{label:"{{label}}"}}},data:{nodes:[{id:"1",left:50,top:50,type:"diamond"},{id:"2",left:250,top:50,type:"rectangle"}],edges:[{source:"1",target:"2",data:{label:"label",labelLocation:.25}}]}}),"\n",(0,l.jsx)("p",{className:"mt-1",children:(0,l.jsxs)(t.p,{children:["instructed VisuallyJs to put the label at 0.25, and we did not need to set ",(0,l.jsx)(t.code,{children:"labelLocation"})," in the edge mapping in the view."]})})]})}function r(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,l.jsx)(t,{...e,children:(0,l.jsx)(d,{...e})}):d(e)}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.