https://1rosehip.atlassian.net/browse/RRS-63

mzusin · Jul 12, 2023 · 4c64c87 · 4c64c87
1 parent cb4f2e0
commit 4c64c87
Show file tree

Hide file tree

Showing 10 changed files with 239 additions and 43 deletions.
diff --git a/dist/mz-react-round-slider.esm.js b/dist/mz-react-round-slider.esm.js
diff --git a/dist/mz-react-round-slider.esm.js.map b/dist/mz-react-round-slider.esm.js.map
diff --git a/dist/mz-react-round-slider.min.js b/dist/mz-react-round-slider.min.js
diff --git a/dist/mz-react-round-slider.min.js.map b/dist/mz-react-round-slider.min.js.map
diff --git a/src/core/domain/pointers-provider.ts b/src/core/domain/pointers-provider.ts
@@ -116,7 +116,7 @@ const initPointers = (
         return [{
             id: newId(),
             index: 0,
-            radius: DEFAULT_POINTER_RADIUS,
+            radius: getNumber(settings.pointerRadius, DEFAULT_POINTER_RADIUS),
             angleDeg: mod(getNumber(settings.pathStartAngle, DEFAULT_PATH_START_ANGLE), 360),
             bgColor: getString(settings.pointerBgColor, DEFAULT_POINTER_BG_COLOR),
             bgColorSelected: getString(settings.pointerBgColorSelected, DEFAULT_POINTER_BG_COLOR_SELECTED),
@@ -132,6 +132,7 @@ const initPointers = (
     for(let i=0; i<settings.pointers.length; i++) {
         const settingPointer = settings.pointers[i];
 
+        const radius = settingPointer.radius !== undefined ? settingPointer.radius : getNumber(settings.pointerRadius, DEFAULT_POINTER_RADIUS);
         const bgColor = settingPointer.bgColor ? settingPointer.bgColor : getString(settings.pointerBgColor, DEFAULT_POINTER_BG_COLOR);
         const bgColorSelected = settingPointer.bgColorSelected ? settingPointer.bgColorSelected : getString(settings.pointerBgColorSelected, DEFAULT_POINTER_BG_COLOR_SELECTED);
         const bgColorDisabled = settingPointer.bgColorDisabled ? settingPointer.bgColorDisabled : getString(settings.pointerBgColorDisabled, DEFAULT_POINTER_BG_COLOR_DISABLED);
@@ -156,7 +157,7 @@ const initPointers = (
         pointers.push({
             id: newId(),
             index: i,
-            radius: getNumber(settingPointer.radius, DEFAULT_POINTER_RADIUS),
+            radius,
             angleDeg: angleAfterStep,
             bgColor,
             bgColorSelected,

diff --git a/src/core/domain/settings-provider.ts b/src/core/domain/settings-provider.ts
@@ -30,6 +30,8 @@ export interface ISettings {
     pointerBorder?: number;
     pointerBorderColor?: string;
     pointersOverlap?: boolean;
+    pointerSVG?: ReactNode;
+    pointerRadius?: number;
 
     // connection ------------
     hideConnection?: boolean;

diff --git a/src/core/ui/Pointer.tsx b/src/core/ui/Pointer.tsx
@@ -261,15 +261,26 @@ const Pointer = (props: IPointerProps) => {
 
                     cursor={ pointer.disabled ? 'default' : 'pointer' }
                     style={ outlineNoneStyle }>
-                    <circle
-                        cx={ radius/2 }
-                        cy={ radius/2 }
-                        r={ radius }
-
-                        fill={ getPointerFill(pointer, pointerRef, bgColor, bgColorSelected, bgColorDisabled) }
-                        strokeWidth={ border }
-                        stroke={ borderColor }
-                    />
+
+                    {
+                        !settings.pointerSVG &&
+                        <circle
+                            cx={ radius/2 }
+                            cy={ radius/2 }
+                            r={ radius }
+
+                            fill={ getPointerFill(pointer, pointerRef, bgColor, bgColorSelected, bgColorDisabled) }
+                            strokeWidth={ border }
+                            stroke={ borderColor }
+                        />
+                    }
+
+                    {
+                        settings.pointerSVG &&
+                        <g>
+                            { settings.pointerSVG }
+                        </g>
+                    }
                 </g>
             }
         </>

diff --git a/src/example/index.tsx b/src/example/index.tsx
@@ -931,7 +931,7 @@ export const testOverlap = () => {
 export const testStyling = () => {
     return (
         <>
-            <RoundSlider
+            {/*<RoundSlider
                 pathRadius={ 150 }
                 pathStartAngle={ 0 }
                 pathEndAngle={ 180 }
@@ -1041,6 +1041,32 @@ export const testStyling = () => {
                         value: 70
                     }
                 ]}
+            />*/}
+
+            <RoundSlider
+                pointerRadius={ 50 }
+                pointerSVG={
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                         width="50" height="50" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor"
+                         fill="none" strokeLinecap="round" strokeLinejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                        <path
+                            d="M12 10c-1.32 0 -1.983 .421 -2.931 1.924l-.244 .398l-.395 .688a50.89 50.89 0 0 0 -.141 .254c-.24 .434 -.571 .753 -1.139 1.142l-.55 .365c-.94 .627 -1.432 1.118 -1.707 1.955c-.124 .338 -.196 .853 -.193 1.28c0 1.687 1.198 2.994 2.8 2.994l.242 -.006c.119 -.006 .234 -.017 .354 -.034l.248 -.043l.132 -.028l.291 -.073l.162 -.045l.57 -.17l.763 -.243l.455 -.136c.53 -.15 .94 -.222 1.283 -.222c.344 0 .753 .073 1.283 .222l.455 .136l.764 .242l.569 .171l.312 .084c.097 .024 .187 .045 .273 .062l.248 .043c.12 .017 .235 .028 .354 .034l.242 .006c1.602 0 2.8 -1.307 2.8 -3c0 -.427 -.073 -.939 -.207 -1.306c-.236 -.724 -.677 -1.223 -1.48 -1.83l-.257 -.19l-.528 -.38c-.642 -.47 -1.003 -.826 -1.253 -1.278l-.27 -.485l-.252 -.432c-1.011 -1.696 -1.618 -2.099 -3.053 -2.099z"
+                            strokeWidth="0" fill="currentColor"></path>
+                        <path
+                            d="M19.78 7h-.03c-1.219 .02 -2.35 1.066 -2.908 2.504c-.69 1.775 -.348 3.72 1.075 4.333c.256 .109 .527 .163 .801 .163c1.231 0 2.38 -1.053 2.943 -2.504c.686 -1.774 .34 -3.72 -1.076 -4.332a2.05 2.05 0 0 0 -.804 -.164z"
+                            strokeWidth="0" fill="currentColor"></path>
+                        <path
+                            d="M9.025 3c-.112 0 -.185 .002 -.27 .015l-.093 .016c-1.532 .206 -2.397 1.989 -2.108 3.855c.272 1.725 1.462 3.114 2.92 3.114l.187 -.005a1.26 1.26 0 0 0 .084 -.01l.092 -.016c1.533 -.206 2.397 -1.989 2.108 -3.855c-.27 -1.727 -1.46 -3.114 -2.92 -3.114z"
+                            strokeWidth="0" fill="currentColor"></path>
+                        <path
+                            d="M14.972 3c-1.459 0 -2.647 1.388 -2.916 3.113c-.29 1.867 .574 3.65 2.174 3.867c.103 .013 .2 .02 .296 .02c1.39 0 2.543 -1.265 2.877 -2.883l.041 -.23c.29 -1.867 -.574 -3.65 -2.174 -3.867a2.154 2.154 0 0 0 -.298 -.02z"
+                            strokeWidth="0" fill="currentColor"></path>
+                        <path
+                            d="M4.217 7c-.274 0 -.544 .054 -.797 .161c-1.426 .615 -1.767 2.562 -1.078 4.335c.563 1.451 1.71 2.504 2.941 2.504c.274 0 .544 -.054 .797 -.161c1.426 -.615 1.767 -2.562 1.078 -4.335c-.563 -1.451 -1.71 -2.504 -2.941 -2.504z"
+                            strokeWidth="0" fill="currentColor"></path>
+                    </svg>
+                }
             />
         </>
     )
@@ -1165,7 +1191,7 @@ export const testEvents = () => {
     )
 };
 
-const testRangeDragging = () => {
+export const testRangeDragging = () => {
   return (
       <>
           <RoundSlider
@@ -1193,10 +1219,10 @@ const App = () => {
             {/*{ testData() }*/}
             {/*{ testStep() }*/}
             {/*{ testOverlap() }*/}
-            {/*{ testStyling() }*/}
+            { testStyling() }
             {/*{ testDisabled() }*/}
             {/*{ testEvents() }*/}
-            { testRangeDragging() }
+            {/*{ testRangeDragging() }*/}
         </>
     );
 };

diff --git a/test/browser/example.min.js b/test/browser/example.min.js
diff --git a/test/browser/example.min.js.map b/test/browser/example.min.js.map