operator

web/app/components/workflow/operator/index.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react'
+import ZoomInOut from './zoom-in-out'
+import { OrganizeGrid } from '@/app/components/base/icons/src/vender/line/layout'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
+
+const Operator = () => {
+  return (
+    <div className={`
+      absolute left-6 bottom-6 flex items-center p-0.5 
+      rounded-lg border-[0.5px] border-gray-100 bg-white shadow-lg text-gray-500 z-10
+    `}>
+      <ZoomInOut />
+      <TooltipPlus popupContent='Organize blocks'>
+        <div className='ml-[1px] flex items-center justify-center w-8 h-8 cursor-pointer hover:bg-black/5 rounded-lg'>
+          <OrganizeGrid className='w-4 h-4' />
+        </div>
+      </TooltipPlus>
+    </div>
+  )
+}
+
+export default memo(Operator)

web/app/components/workflow/operator/zoom-in-out.tsx

@@ -0,0 +1,109 @@
+import type { FC } from 'react'
+import {
+  Fragment,
+  memo,
+  useState,
+} from 'react'
+import { useReactFlow } from 'reactflow'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { SearchLg } from '@/app/components/base/icons/src/vender/line/general'
+import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+
+const ZOOM_IN_OUT_OPTIONS = [
+  [
+    {
+      key: 'in',
+      text: 'Zoom In',
+    },
+    {
+      key: 'out',
+      text: 'Zoom Out',
+    },
+  ],
+  [
+    {
+      key: 'to50',
+      text: 'Zoom to 50%',
+    },
+    {
+      key: 'to100',
+      text: 'Zoom to 100%',
+    },
+  ],
+  [
+    {
+      key: 'fit',
+      text: 'Zoom to Fit',
+    },
+  ],
+]
+
+const ZoomInOut: FC = () => {
+  const reactFlow = useReactFlow()
+  const [open, setOpen] = useState(false)
+
+  const handleZoom = (type: string) => {
+    if (type === 'in')
+      reactFlow.zoomIn()
+
+    if (type === 'out')
+      reactFlow.zoomOut()
+
+    if (type === 'fit')
+      reactFlow.fitView()
+  }
+
+  return (
+    <PortalToFollowElem
+      placement='top-start'
+      open={open}
+      onOpenChange={setOpen}
+      offset={4}
+    >
+      <PortalToFollowElemTrigger asChild onClick={() => setOpen(v => !v)}>
+        <div className={`
+          flex items-center px-2 h-8 cursor-pointer text-[13px] hover:bg-gray-50 rounded-lg
+          ${open && 'bg-gray-50'}
+        `}>
+          <SearchLg className='mr-1 w-4 h-4' />
+          100%
+          <ChevronDown className='ml-1 w-4 h-4' />
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent>
+        <div className='w-[168px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg'>
+          {
+            ZOOM_IN_OUT_OPTIONS.map((options, i) => (
+              <Fragment key={i}>
+                {
+                  i !== 0 && (
+                    <div className='h-[1px] bg-gray-100' />
+                  )
+                }
+                <div className='p-1'>
+                  {
+                    options.map(option => (
+                      <div
+                        key={option.key}
+                        className='flex items-center px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer text-sm text-gray-700'
+                        onClick={() => handleZoom(option.key)}
+                      >
+                        {option.text}
+                      </div>
+                    ))
+                  }
+                </div>
+              </Fragment>
+            ))
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default memo(ZoomInOut)