\n
\n
Layer: \n
\n {selectedObjects.length ? (\n \n {\n setLayerMode(\"SelectedLayer\");\n }}\n />\n \n selected ({selectedObjects.length.toLocaleString()})\n \n \n ) : (\n <>\n \n {\n setLayerMode(\"BaseLayer\");\n }}\n />{\" \"}\n base \n \n \n {\n setLayerMode(\"AllLayers\");\n }}\n />\n \n all (\n {canvas?._objects\n .filter(\n (object) => object instanceof fabric.Image\n )\n .length.toLocaleString() ?? 0}\n )\n \n \n \n )}\n \n
\n {activeCanvasType === \"color\" ? (\n <>\n
\n
\n Hue:{\" \"}\n \n {hueRotate == null ? (\n \"MULTIPLE VALUES\"\n ) : (\n <>{Math.round(hueRotate * 180)}°\n )}\n \n \n
\n {\n if (Array.isArray(value)) {\n value = value[0];\n }\n setHueRotate(value / 180);\n }}\n trackStyle={{\n height: 8,\n background: \"#03fccf\",\n }}\n handleStyle={{\n width: 20,\n height: 20,\n marginTop: -6,\n borderColor: \"#03fccf\",\n background: \"rgb(5, 69, 76)\",\n // background: `rgb(${brushColor}, ${brushColor}, ${brushColor})`,\n opacity: 1,\n }}\n railStyle={{\n height: 8,\n border: \"1px solid #555\",\n background: \"rgba(255, 255, 255, 0.3)\",\n }}\n />\n
\n
\n\n
\n
\n Saturation:{\" \"}\n \n {saturation == null\n ? \"MULTIPLE VALUES\"\n : `${Math.round(saturation * 100 + 100)}%`}\n \n \n
\n {\n if (Array.isArray(value)) {\n value = value[0];\n }\n setSaturation(value / 100);\n }}\n trackStyle={{\n height: 8,\n background: \"#03fccf\",\n }}\n handleStyle={{\n width: 20,\n height: 20,\n marginTop: -6,\n borderColor: \"#03fccf\",\n background: \"rgb(5, 69, 76)\",\n // background: `rgb(${brushColor}, ${brushColor}, ${brushColor})`,\n opacity: 1,\n }}\n railStyle={{\n height: 8,\n border: \"1px solid #555\",\n background: \"rgba(255, 255, 255, 0.3)\",\n }}\n />\n
\n
\n \n ) : null}\n\n
\n
\n Brightness:{\" \"}\n \n {brightness == null\n ? \"MULTIPLE VALUES\"\n : `${Math.round(brightness * 100 + 100)}%`}\n \n \n
\n {\n if (Array.isArray(value)) {\n value = value[0];\n }\n setBrightness(value / 100);\n }}\n trackStyle={{\n height: 8,\n background: \"#03fccf\",\n }}\n handleStyle={{\n width: 20,\n height: 20,\n marginTop: -6,\n borderColor: \"#03fccf\",\n background: \"rgb(5, 69, 76)\",\n // background: `rgb(${brushColor}, ${brushColor}, ${brushColor})`,\n opacity: 1,\n }}\n railStyle={{\n height: 8,\n border: \"1px solid #555\",\n background: \"rgba(255, 255, 255, 0.3)\",\n }}\n />\n
\n
\n\n
\n
\n Contrast:{\" \"}\n \n {contrast == null\n ? \"MULTIPLE VALUES\"\n : `${Math.round(contrast * 100 + 100)}%`}\n \n \n
\n {\n if (Array.isArray(value)) {\n value = value[0];\n }\n setContrast(value / 100);\n }}\n trackStyle={{\n height: 8,\n background: \"#03fccf\",\n }}\n handleStyle={{\n width: 20,\n height: 20,\n marginTop: -6,\n borderColor: \"#03fccf\",\n background: \"rgb(5, 69, 76)\",\n // background: `rgb(${brushColor}, ${brushColor}, ${brushColor})`,\n opacity: 1,\n }}\n railStyle={{\n height: 8,\n border: \"1px solid #555\",\n background: \"rgba(255, 255, 255, 0.3)\",\n }}\n />\n
\n
\n