Merge pull request #1642 from ZakarFin/add-linejoin

Separate line and area linejoin styling in StyleEditor
oskariorg · Sep 16, 2021 · bf52475 · bf52475
2 parents ca60bce + a78d7df
commit bf52475
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 7 deletions.
diff --git a/bundles/framework/oskariui/resources/locale/en.js b/bundles/framework/oskariui/resources/locale/en.js
@@ -28,6 +28,7 @@ Oskari.registerLocalization({
                 color: 'Colour',
                 lineCap: 'Endings',
                 lineDash: 'Dash',
+                lineJoin: 'Corners',
                 width: 'Width',
                 area: {
                     color: 'Colour',

diff --git a/bundles/framework/oskariui/resources/locale/fi.js b/bundles/framework/oskariui/resources/locale/fi.js
@@ -29,6 +29,7 @@ Oskari.registerLocalization({
                 color: 'Väri',
                 lineCap: 'Päädyt',
                 lineDash: 'Tyyli',
+                lineJoin: 'Kulmat',
                 width: 'Leveys',
                 area: {
                     color: 'Väri',

diff --git a/bundles/framework/oskariui/resources/locale/sv.js b/bundles/framework/oskariui/resources/locale/sv.js
@@ -28,6 +28,7 @@ Oskari.registerLocalization({
                 color: 'Linjens färg',
                 lineCap: 'Linjens ändpunkter',
                 lineDash: 'Linjens stil',
+                lineJoin: 'Hörn',
                 width: 'Bredd',
                 area: {
                     color: 'Linjens färg',

diff --git a/src/react/components/StyleEditor/AreaTab.jsx b/src/react/components/StyleEditor/AreaTab.jsx
@@ -138,6 +138,14 @@ export const AreaTab = ({oskariStyle}) => {
                     <SvgRadioButton options={ constants.LINE_STYLES.lineDash } />
                 </Form.Item>
 
+                <Form.Item
+                    { ...constants.ANTD_FORMLAYOUT }
+                    name='stroke.area.lineJoin'
+                    label={ <Message messageKey='StyleEditor.stroke.area.lineJoin' /> }
+                >
+                    <SvgRadioButton options={ constants.LINE_STYLES.corners } />
+                </Form.Item>
+
                 <Form.Item
                     { ...constants.ANTD_FORMLAYOUT }
                     name='fill.area.pattern'

diff --git a/src/react/components/StyleEditor/LineTab.jsx b/src/react/components/StyleEditor/LineTab.jsx
@@ -45,8 +45,8 @@ export const LineTab = (props) => {
 
                 <Form.Item
                     { ...constants.ANTD_FORMLAYOUT }
-                    name='stroke.area.lineJoin'
-                    label={ <Message messageKey='StyleEditor.stroke.area.lineJoin' /> }
+                    name='stroke.lineJoin'
+                    label={ <Message messageKey='StyleEditor.stroke.lineJoin' /> }
                 >
                     <SvgRadioButton options={ constants.LINE_STYLES.corners } />
                 </Form.Item>

diff --git a/src/react/components/StyleEditor/OskariDefaultStyle.js b/src/react/components/StyleEditor/OskariDefaultStyle.js
@@ -9,12 +9,13 @@ export const OSKARI_BLANK_STYLE = {
         color: '#000000', // stroke color
         width: 3, // stroke width
         lineDash: 'solid', // line dash, supported: dash, dashdot, dot, longdash, longdashdot and solid
-        lineCap: 'square', // line cap, supported: mitre, round and square
+        lineCap: 'square', // line cap, supported: butt, round and square
+        lineJoin: 'round', // line corner, supported: bevel, round and miter
         area: {
             color: '#000000', // area stroke color
             width: 3, // area stroke width
             lineDash: 'solid', // area line dash
-            lineJoin: 'miter' // area line corner
+            lineJoin: 'round' // area line corner, supported: bevel, round and miter
         }
     },
     image: { // image style

diff --git a/src/react/components/StyleEditor/Preview/StyleMapper.js b/src/react/components/StyleEditor/Preview/StyleMapper.js
@@ -36,6 +36,7 @@ const getAreaPropsFromStyle = (style) => {
         strokecolor: style.stroke.area.color,
         size: style.stroke.area.width,
         strokestyle: style.stroke.area.lineDash,
+        linejoin: style.stroke.area.lineJoin,
         pattern: style.fill.area.pattern
     };
 };
@@ -46,7 +47,7 @@ const getLinePropsFromStyle = (style) => {
         size: style.stroke.width,
         linecap: style.stroke.lineCap,
         linedash: style.stroke.lineDash,
-        linejoin: style.stroke.area.lineJoin
+        linejoin: style.stroke.lineJoin
     };
 };
 

diff --git a/src/react/components/StyleEditor/Preview/area.js b/src/react/components/StyleEditor/Preview/area.js
@@ -53,14 +53,14 @@ const getPatternSVG = (areaFills, patternId) => {
 */
 let patternIdCounter = 0;
 export const getAreaSVG = (areaParams, areaFills) => {
-   const { color, strokecolor, size, strokestyle, pattern } = areaParams;
+   const { color, strokecolor, size, linejoin, strokestyle, pattern } = areaParams;
    const path = parsePathFromSVG(areaPreviewSVG);
 
    path.setAttribute('stroke', strokecolor);
    path.setAttribute('stroke-width', size);
    path.setAttribute('stroke-linecap', OSKARI_BLANK_STYLE.stroke.lineCap);
    path.setAttribute('stroke-dasharray', strokestyle === 'dash' ? '4, 4': '');
-   path.setAttribute('stroke-linejoin', OSKARI_BLANK_STYLE.stroke.area.lineJoin);
+   path.setAttribute('stroke-linejoin', linejoin);
 
    const patternId = 'patternPreview' + patternIdCounter++;
    const fillPatternSVG = getPatternSVG(areaFills, pattern);