@archireport/react-native-svg-draw 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/DrawCore/ColorSlider.js +3 -3
- package/lib/commonjs/components/DrawCore/ColorSlider.js.map +1 -1
- package/lib/module/components/DrawCore/ColorSlider.js +3 -3
- package/lib/module/components/DrawCore/ColorSlider.js.map +1 -1
- package/package.json +1 -1
- package/src/components/DrawCore/ColorSlider.tsx +5 -5
- package/src/types.d.ts +3 -1
|
@@ -83,11 +83,11 @@ const ColorSlider = ({
|
|
|
83
83
|
const slidePos = Math.min(sliderHeight.value, startY + translationY);
|
|
84
84
|
|
|
85
85
|
if (slidePos < 0.1 * sliderHeight.value) {
|
|
86
|
-
color.value = `hsl(
|
|
86
|
+
color.value = `hsl(0, 100%, ${Math.min(100, 100 - slidePos / (0.1 * sliderHeight.value) * 50).toFixed(10)}%)`;
|
|
87
87
|
} else if (slidePos > 0.9 * sliderHeight.value) {
|
|
88
|
-
color.value = `hsl(
|
|
88
|
+
color.value = `hsl(0, 100%, ${Math.max(50 - (slidePos - 0.9 * sliderHeight.value) / (0.1 * sliderHeight.value) * 50, 0).toFixed(10)}%)`;
|
|
89
89
|
} else {
|
|
90
|
-
color.value = `hsl(${(slidePos - sliderHeight.value * 0.1) / (sliderHeight.value - sliderHeight.value * 0.2) * 360},
|
|
90
|
+
color.value = `hsl(${(slidePos - sliderHeight.value * 0.1) / (sliderHeight.value - sliderHeight.value * 0.2) * 360}, 100%, 50%)`;
|
|
91
91
|
}
|
|
92
92
|
},
|
|
93
93
|
onEnd: () => {}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ColorSlider.tsx"],"names":["TRACK_R","gradientColors","styles","StyleSheet","create","container","flex","alignItems","width","thumb","position","height","borderRadius","top","backgroundColor","track","borderWidth","indicator","marginTop","ColorSlider","color","linearGradient","LinearGradient","sliderHeight","hslRegExp","RegExp","res","exec","value","lum","parseFloat","tint","Math","min","max","onGestureEvent","onStart","y","ctx","startY","onActive","translationY","slidePos","onEnd","style","transform","translateY","selectedColorStyle","onLayout","event","nativeEvent","layout"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["ColorSlider.tsx"],"names":["TRACK_R","gradientColors","styles","StyleSheet","create","container","flex","alignItems","width","thumb","position","height","borderRadius","top","backgroundColor","track","borderWidth","indicator","marginTop","ColorSlider","color","linearGradient","LinearGradient","sliderHeight","hslRegExp","RegExp","res","exec","value","lum","parseFloat","tint","Math","min","max","onGestureEvent","onStart","y","ctx","startY","onActive","translationY","slidePos","toFixed","onEnd","style","transform","translateY","selectedColorStyle","onLayout","event","nativeEvent","layout"],"mappings":"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","sourcesContent":["import React, { useCallback } from 'react';\nimport { LayoutChangeEvent, StyleSheet, View, ViewProps } from 'react-native';\n\nimport {\n PanGestureHandler,\n PanGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\nimport Animated, {\n useAnimatedGestureHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n} from 'react-native-reanimated';\nimport type { hslColor } from '../../types';\n\nconst TRACK_R = 10;\n\nconst gradientColors = [\n 'hsl(0, 100%, 100%) 00%',\n 'hsl(0, 100%, 50%) 10%',\n 'hsl(45, 100%, 50%) 20%',\n 'hsl(90, 100%, 50%) 30%',\n 'hsl(135, 100%, 50%) 40%',\n 'hsl(180, 100%, 50%) 50%',\n 'hsl(225, 100%, 50%) 60%',\n 'hsl(270, 100%, 50%) 70%',\n 'hsl(315, 100%, 50%) 80%',\n 'hsl(360, 100%, 50%) 90%',\n 'hsl(0, 100%, 0%) 100% ',\n];\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n alignItems: 'center',\n width: '100%',\n },\n thumb: {\n position: 'absolute',\n width: TRACK_R * 2,\n height: TRACK_R * 2,\n borderRadius: TRACK_R,\n top: 0,\n backgroundColor: 'white',\n },\n track: { width: 10, flex: 1, borderRadius: 5, borderWidth: 1 },\n indicator: {\n width: 22,\n height: 22,\n borderRadius: 22,\n marginTop: 20,\n },\n});\n\nconst ColorSlider = ({\n color,\n linearGradient: LinearGradient,\n}: {\n color: Animated.SharedValue<hslColor>;\n linearGradient: React.ComponentType<{ colors: any[] } & ViewProps>;\n}) => {\n const sliderHeight = useSharedValue(0);\n\n const position = useDerivedValue(() => {\n const hslRegExp = new RegExp(/hsl\\(([\\d.]+),\\s*(\\d+)%,\\s*([\\d.]+)%\\)/);\n const res = hslRegExp.exec(color.value);\n\n const lum = res ? parseFloat(res[3]) : 0;\n\n const tint = res ? parseFloat(res[1]) : 0;\n\n if (lum > 50) {\n return ((sliderHeight.value * 0.1) / 50) * (100 - lum);\n }\n\n if (lum < 50) {\n return sliderHeight.value - ((sliderHeight.value * 0.1) / 50) * lum;\n }\n\n return Math.min(\n sliderHeight.value,\n Math.max(\n 0,\n sliderHeight.value * 0.1 +\n tint * ((sliderHeight.value - sliderHeight.value * 0.2) / 360)\n )\n );\n }, [sliderHeight.value]);\n\n const onGestureEvent = useAnimatedGestureHandler<\n PanGestureHandlerGestureEvent,\n { startY: number }\n >(\n {\n onStart: ({ y }, ctx) => {\n ctx.startY = y;\n },\n onActive: ({ translationY }, { startY }) => {\n const slidePos = Math.min(sliderHeight.value, startY + translationY);\n\n if (slidePos < 0.1 * sliderHeight.value) {\n color.value = `hsl(0, 100%, ${Math.min(\n 100,\n 100 - (slidePos / (0.1 * sliderHeight.value)) * 50\n ).toFixed(10)}%)`;\n } else if (slidePos > 0.9 * sliderHeight.value) {\n color.value = `hsl(0, 100%, ${Math.max(\n 50 -\n ((slidePos - 0.9 * sliderHeight.value) /\n (0.1 * sliderHeight.value)) *\n 50,\n 0\n ).toFixed(10)}%)`;\n } else {\n color.value = `hsl(${\n ((slidePos - sliderHeight.value * 0.1) /\n (sliderHeight.value - sliderHeight.value * 0.2)) *\n 360\n }, 100%, 50%)`;\n }\n },\n onEnd: () => {},\n },\n []\n );\n\n const style = useAnimatedStyle(() => {\n return {\n transform: [{ translateY: position.value - TRACK_R }],\n };\n }, [position.value]);\n\n const selectedColorStyle = useAnimatedStyle(() => {\n return {\n backgroundColor: color.value,\n };\n }, [color.value]);\n\n const onLayout = useCallback(\n (event: LayoutChangeEvent) => {\n sliderHeight.value = event.nativeEvent.layout.height;\n },\n [sliderHeight]\n );\n\n return (\n <View style={styles.container}>\n <PanGestureHandler onGestureEvent={onGestureEvent}>\n <Animated.View style={styles.container}>\n <LinearGradient\n colors={gradientColors}\n onLayout={onLayout}\n style={styles.track}\n />\n <Animated.View style={[styles.thumb, style]} />\n </Animated.View>\n </PanGestureHandler>\n\n <Animated.View style={[styles.indicator, selectedColorStyle]} />\n </View>\n );\n};\n\nexport default ColorSlider;\n"]}
|
|
@@ -67,11 +67,11 @@ const ColorSlider = ({
|
|
|
67
67
|
const slidePos = Math.min(sliderHeight.value, startY + translationY);
|
|
68
68
|
|
|
69
69
|
if (slidePos < 0.1 * sliderHeight.value) {
|
|
70
|
-
color.value = `hsl(
|
|
70
|
+
color.value = `hsl(0, 100%, ${Math.min(100, 100 - slidePos / (0.1 * sliderHeight.value) * 50).toFixed(10)}%)`;
|
|
71
71
|
} else if (slidePos > 0.9 * sliderHeight.value) {
|
|
72
|
-
color.value = `hsl(
|
|
72
|
+
color.value = `hsl(0, 100%, ${Math.max(50 - (slidePos - 0.9 * sliderHeight.value) / (0.1 * sliderHeight.value) * 50, 0).toFixed(10)}%)`;
|
|
73
73
|
} else {
|
|
74
|
-
color.value = `hsl(${(slidePos - sliderHeight.value * 0.1) / (sliderHeight.value - sliderHeight.value * 0.2) * 360},
|
|
74
|
+
color.value = `hsl(${(slidePos - sliderHeight.value * 0.1) / (sliderHeight.value - sliderHeight.value * 0.2) * 360}, 100%, 50%)`;
|
|
75
75
|
}
|
|
76
76
|
},
|
|
77
77
|
onEnd: () => {}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ColorSlider.tsx"],"names":["React","useCallback","StyleSheet","View","PanGestureHandler","Animated","useAnimatedGestureHandler","useAnimatedStyle","useDerivedValue","useSharedValue","TRACK_R","gradientColors","styles","create","container","flex","alignItems","width","thumb","position","height","borderRadius","top","backgroundColor","track","borderWidth","indicator","marginTop","ColorSlider","color","linearGradient","LinearGradient","sliderHeight","hslRegExp","RegExp","res","exec","value","lum","parseFloat","tint","Math","min","max","onGestureEvent","onStart","y","ctx","startY","onActive","translationY","slidePos","onEnd","style","transform","translateY","selectedColorStyle","onLayout","event","nativeEvent","layout"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["ColorSlider.tsx"],"names":["React","useCallback","StyleSheet","View","PanGestureHandler","Animated","useAnimatedGestureHandler","useAnimatedStyle","useDerivedValue","useSharedValue","TRACK_R","gradientColors","styles","create","container","flex","alignItems","width","thumb","position","height","borderRadius","top","backgroundColor","track","borderWidth","indicator","marginTop","ColorSlider","color","linearGradient","LinearGradient","sliderHeight","hslRegExp","RegExp","res","exec","value","lum","parseFloat","tint","Math","min","max","onGestureEvent","onStart","y","ctx","startY","onActive","translationY","slidePos","toFixed","onEnd","style","transform","translateY","selectedColorStyle","onLayout","event","nativeEvent","layout"],"mappings":"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","sourcesContent":["import React, { useCallback } from 'react';\nimport { LayoutChangeEvent, StyleSheet, View, ViewProps } from 'react-native';\n\nimport {\n PanGestureHandler,\n PanGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\nimport Animated, {\n useAnimatedGestureHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n} from 'react-native-reanimated';\nimport type { hslColor } from '../../types';\n\nconst TRACK_R = 10;\n\nconst gradientColors = [\n 'hsl(0, 100%, 100%) 00%',\n 'hsl(0, 100%, 50%) 10%',\n 'hsl(45, 100%, 50%) 20%',\n 'hsl(90, 100%, 50%) 30%',\n 'hsl(135, 100%, 50%) 40%',\n 'hsl(180, 100%, 50%) 50%',\n 'hsl(225, 100%, 50%) 60%',\n 'hsl(270, 100%, 50%) 70%',\n 'hsl(315, 100%, 50%) 80%',\n 'hsl(360, 100%, 50%) 90%',\n 'hsl(0, 100%, 0%) 100% ',\n];\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n alignItems: 'center',\n width: '100%',\n },\n thumb: {\n position: 'absolute',\n width: TRACK_R * 2,\n height: TRACK_R * 2,\n borderRadius: TRACK_R,\n top: 0,\n backgroundColor: 'white',\n },\n track: { width: 10, flex: 1, borderRadius: 5, borderWidth: 1 },\n indicator: {\n width: 22,\n height: 22,\n borderRadius: 22,\n marginTop: 20,\n },\n});\n\nconst ColorSlider = ({\n color,\n linearGradient: LinearGradient,\n}: {\n color: Animated.SharedValue<hslColor>;\n linearGradient: React.ComponentType<{ colors: any[] } & ViewProps>;\n}) => {\n const sliderHeight = useSharedValue(0);\n\n const position = useDerivedValue(() => {\n const hslRegExp = new RegExp(/hsl\\(([\\d.]+),\\s*(\\d+)%,\\s*([\\d.]+)%\\)/);\n const res = hslRegExp.exec(color.value);\n\n const lum = res ? parseFloat(res[3]) : 0;\n\n const tint = res ? parseFloat(res[1]) : 0;\n\n if (lum > 50) {\n return ((sliderHeight.value * 0.1) / 50) * (100 - lum);\n }\n\n if (lum < 50) {\n return sliderHeight.value - ((sliderHeight.value * 0.1) / 50) * lum;\n }\n\n return Math.min(\n sliderHeight.value,\n Math.max(\n 0,\n sliderHeight.value * 0.1 +\n tint * ((sliderHeight.value - sliderHeight.value * 0.2) / 360)\n )\n );\n }, [sliderHeight.value]);\n\n const onGestureEvent = useAnimatedGestureHandler<\n PanGestureHandlerGestureEvent,\n { startY: number }\n >(\n {\n onStart: ({ y }, ctx) => {\n ctx.startY = y;\n },\n onActive: ({ translationY }, { startY }) => {\n const slidePos = Math.min(sliderHeight.value, startY + translationY);\n\n if (slidePos < 0.1 * sliderHeight.value) {\n color.value = `hsl(0, 100%, ${Math.min(\n 100,\n 100 - (slidePos / (0.1 * sliderHeight.value)) * 50\n ).toFixed(10)}%)`;\n } else if (slidePos > 0.9 * sliderHeight.value) {\n color.value = `hsl(0, 100%, ${Math.max(\n 50 -\n ((slidePos - 0.9 * sliderHeight.value) /\n (0.1 * sliderHeight.value)) *\n 50,\n 0\n ).toFixed(10)}%)`;\n } else {\n color.value = `hsl(${\n ((slidePos - sliderHeight.value * 0.1) /\n (sliderHeight.value - sliderHeight.value * 0.2)) *\n 360\n }, 100%, 50%)`;\n }\n },\n onEnd: () => {},\n },\n []\n );\n\n const style = useAnimatedStyle(() => {\n return {\n transform: [{ translateY: position.value - TRACK_R }],\n };\n }, [position.value]);\n\n const selectedColorStyle = useAnimatedStyle(() => {\n return {\n backgroundColor: color.value,\n };\n }, [color.value]);\n\n const onLayout = useCallback(\n (event: LayoutChangeEvent) => {\n sliderHeight.value = event.nativeEvent.layout.height;\n },\n [sliderHeight]\n );\n\n return (\n <View style={styles.container}>\n <PanGestureHandler onGestureEvent={onGestureEvent}>\n <Animated.View style={styles.container}>\n <LinearGradient\n colors={gradientColors}\n onLayout={onLayout}\n style={styles.track}\n />\n <Animated.View style={[styles.thumb, style]} />\n </Animated.View>\n </PanGestureHandler>\n\n <Animated.View style={[styles.indicator, selectedColorStyle]} />\n </View>\n );\n};\n\nexport default ColorSlider;\n"]}
|
package/package.json
CHANGED
|
@@ -99,24 +99,24 @@ const ColorSlider = ({
|
|
|
99
99
|
const slidePos = Math.min(sliderHeight.value, startY + translationY);
|
|
100
100
|
|
|
101
101
|
if (slidePos < 0.1 * sliderHeight.value) {
|
|
102
|
-
color.value = `hsl(
|
|
102
|
+
color.value = `hsl(0, 100%, ${Math.min(
|
|
103
103
|
100,
|
|
104
104
|
100 - (slidePos / (0.1 * sliderHeight.value)) * 50
|
|
105
|
-
)}%)
|
|
105
|
+
).toFixed(10)}%)`;
|
|
106
106
|
} else if (slidePos > 0.9 * sliderHeight.value) {
|
|
107
|
-
color.value = `hsl(
|
|
107
|
+
color.value = `hsl(0, 100%, ${Math.max(
|
|
108
108
|
50 -
|
|
109
109
|
((slidePos - 0.9 * sliderHeight.value) /
|
|
110
110
|
(0.1 * sliderHeight.value)) *
|
|
111
111
|
50,
|
|
112
112
|
0
|
|
113
|
-
)}%)
|
|
113
|
+
).toFixed(10)}%)`;
|
|
114
114
|
} else {
|
|
115
115
|
color.value = `hsl(${
|
|
116
116
|
((slidePos - sliderHeight.value * 0.1) /
|
|
117
117
|
(sliderHeight.value - sliderHeight.value * 0.2)) *
|
|
118
118
|
360
|
|
119
|
-
},
|
|
119
|
+
}, 100%, 50%)`;
|
|
120
120
|
}
|
|
121
121
|
},
|
|
122
122
|
onEnd: () => {},
|
package/src/types.d.ts
CHANGED
|
@@ -9,7 +9,9 @@ import {
|
|
|
9
9
|
|
|
10
10
|
export type Point = { x: number; y: number };
|
|
11
11
|
|
|
12
|
-
export type hslColor = `hsl(${number}, ${number}%, ${
|
|
12
|
+
export type hslColor = `hsl(${number}, ${number | string}%, ${
|
|
13
|
+
| number
|
|
14
|
+
| string}%)`;
|
|
13
15
|
|
|
14
16
|
type Size = { width: number; height: number };
|
|
15
17
|
|