radix select

lama_cleaner/app/src/components/Editor/Editor.scss

@@ -52,7 +52,6 @@
 }
 
 .editor-toolkit-panel {
-  // width: 100%;
   position: fixed;
   bottom: 0.5rem;
   border-radius: 3rem;
@@ -110,80 +109,3 @@
   border: 1px solid var(--yellow-accent);
   pointer-events: none;
 }
-
-.editor-size-selector-options {
-  position: fixed;
-  display: grid;
-}
-
-.editor-size-selector {
-  grid-area: toolkit-size-selector;
-  display: grid;
-  grid-template-columns: repeat(2, max-content);
-  align-items: center;
-}
-
-.editor-size-selector-main {
-  @include accented-display(var(white));
-  user-select: none;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  outline: none;
-  gap: 8px;
-  width: 128px;
-
-  border: 1px solid var(--editor-size-border-color);
-  color: var(--options-text-color);
-
-  svg {
-    width: 1rem;
-    height: 1rem;
-    margin-top: 0.25rem;
-  }
-}
-
-.editor-size-options {
-  @include accented-display(var(--btn-primary-bg));
-  width: 128px;
-  padding: 0;
-  display: grid;
-  justify-self: center;
-  position: fixed;
-  bottom: 4rem;
-  cursor: pointer;
-
-  color: var(--options-text-color);
-  background-color: var(--page-bg);
-  border: 1px solid var(--editor-size-border-color);
-
-  border-radius: 0.6rem;
-
-  @include mobile {
-    bottom: 11.5rem;
-  }
-
-  .editor-size-option {
-    display: flex;
-    align-items: center;
-    height: 40px;
-    user-select: none;
-    padding: 0.2rem 0.8rem;
-
-    &:first-of-type {
-      border-top-right-radius: 0.5rem;
-      border-top-left-radius: 0.5rem;
-    }
-
-    &:last-of-type {
-      border-bottom-left-radius: 0.5rem;
-      border-bottom-right-radius: 0.5rem;
-    }
-
-    &:hover {
-      background-color: var(--yellow-accent);
-      color: var(--btn-text-hover-color);
-    }
-  }
-}

lama_cleaner/app/src/components/Editor/Editor.tsx

@@ -268,6 +268,7 @@ export default function Editor(props: EditorProps) {
     isOriginalLoaded,
     windowSize,
     initialCentered,
+    drawOnCurrentRender,
   ])
 
   // Zoom reset

lama_cleaner/app/src/components/Editor/SizeSelector.tsx

@@ -1,6 +1,5 @@
-import React, { useCallback, useRef, useState } from 'react'
-import { useClickAway } from 'react-use'
-import { ChevronUpIcon } from '@heroicons/react/outline'
+import React, { useCallback, useState } from 'react'
+import Selector from '../shared/Selector'
 
 const sizes = ['720', '1080', '2000', 'Original']
 
@@ -12,24 +11,9 @@ type SizeSelectorProps = {
 
 export default function SizeSelector(props: SizeSelectorProps) {
   const { originalHeight, originalWidth, onChange } = props
-  const [showOptions, setShowOptions] = useState<boolean>(false)
-  const sizeSelectorRef = useRef(null)
   const [activeSize, setActiveSize] = useState<string>('Original')
   const longSide: number = Math.max(originalWidth, originalHeight)
 
-  const getValidSizes = useCallback(() => {
-    const validSizes: string[] = []
-    for (let i = 0; i < sizes.length; i += 1) {
-      if (sizes[i] === 'Original') {
-        validSizes.push(sizes[i])
-      }
-      if (parseInt(sizes[i], 10) < longSide) {
-        validSizes.push(sizes[i])
-      }
-    }
-    return validSizes
-  }, [longSide])
-
   const getSizeShowName = useCallback(
     (size: string) => {
       if (size === 'Original') {
@@ -46,57 +30,38 @@ export default function SizeSelector(props: SizeSelectorProps) {
     [originalWidth, originalHeight, longSide]
   )
 
-  const showOptionsHandler = () => {
-    setShowOptions(currentShowOptionsState => !currentShowOptionsState)
-  }
+  const getValidSizes = useCallback(() => {
+    const validSizes: string[] = []
+    for (let i = 0; i < sizes.length; i += 1) {
+      if (sizes[i] === 'Original') {
+        validSizes.push(getSizeShowName(sizes[i]))
+      }
+      if (parseInt(sizes[i], 10) < longSide) {
+        validSizes.push(getSizeShowName(sizes[i]))
+      }
+    }
+    return validSizes
+  }, [longSide, getSizeShowName])
 
-  useClickAway(sizeSelectorRef, () => {
-    setShowOptions(false)
-  })
-
-  const sizeChangeHandler = (e: any) => {
-    const currentRes = e.target.textContent.split('x')
+  const sizeChangeHandler = (value: string) => {
+    const currentRes = value.split('x')
     if (originalWidth > originalHeight) {
       setActiveSize(currentRes[0])
-      onChange(currentRes[0])
+      onChange(parseInt(currentRes[0], 10))
     } else {
       setActiveSize(currentRes[1])
-      onChange(currentRes[1])
+      onChange(parseInt(currentRes[1], 10))
     }
-    setShowOptions(!showOptions)
   }
 
   return (
-    <div className="editor-size-selector" ref={sizeSelectorRef}>
-      <div
-        className="editor-size-selector-main"
-        role="button"
-        tabIndex={0}
-        onClick={showOptionsHandler}
-        aria-hidden="true"
-      >
-        <p>{getSizeShowName(activeSize.toString())}</p>
-        <div className="editor-size-selector-icon">
-          <ChevronUpIcon />
-        </div>
-      </div>
-
-      {showOptions && (
-        <div className="editor-size-options">
-          {getValidSizes().map(size => (
-            <div
-              className="editor-size-option"
-              role="button"
-              tabIndex={0}
-              key={size}
-              onClick={sizeChangeHandler}
-              aria-hidden="true"
-            >
-              {getSizeShowName(size)}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
+    <Selector
+      width={100}
+      autoFocusAfterClose={false}
+      value={getSizeShowName(activeSize.toString())}
+      options={getValidSizes()}
+      onChange={sizeChangeHandler}
+      chevronDirection="up"
+    />
   )
 }