test

[ghigt]

import { FC, Suspense, memo, useDeferredValue, useRef, useState } from 'react'
import './App.css'

const SlowList: FC<{ text: string }> = memo(({ text }) => (
  <ul className="items">
    {Array.from(Array(50), i =>
      <SlowItem key={i} text={text} />
    )}
  </ul>
));

const SlowItem: FC<{ text: string}> = ({ text }) => {
  const startTime = performance.now();
  while (performance.now() - startTime < 1) {
    // Do nothing for 1 ms per item to emulate extremely slow code
  }

  return (
    <li className="item">
      Text: {text}
    </li>
  )
}

const List = () => {
  const [state, setState] = useState([
    { name: 'Antoine', id: 1 },
    { name: 'Thomas', id: 2 },
    { name: 'Robert', id: 3 },
    { name: 'Matthieu', id: 4 },
    { name: 'Alexandre', id: 5 },
  ])

  const [dragItem, setDragItem] = useState<number>();
  const [draggedOver, setDraggedOver] = useState<number>();

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
      {state.map((user, idx) => (
        <div
          style={{ cursor: 'pointer', background: '#111', padding: '5px' }}
          key={user.id}
          draggable
          onDragStart={() => {
            setDragItem(idx);
          }}
          onDragLeave={() => {
            setDraggedOver(undefined);
          }}
          onDragEnter={() => {
            setDraggedOver(idx);
          }}
          onDragEnd={() => {
            console.log('end', dragItem, draggedOver);
            if (draggedOver !== undefined && dragItem !== undefined && dragItem !== draggedOver) {
              setState(dragItem < draggedOver ?
                [...state.slice(0, dragItem), ...state.slice(dragItem+1, draggedOver+1), state[dragItem], ...state.slice(draggedOver+1)] :
                [...state.slice(0, draggedOver), state[dragItem], ...state.slice(draggedOver, dragItem), ...state.slice(dragItem+1)]
              );
            }

            setDraggedOver(undefined);
          }}
          onDragOver={(e) => e.preventDefault()}
        >
          {user.name} - {user.id}
        </div>
      ))}
    </div>
  )
}

function App() {
  // const [state, setState] = useState('');
  // const deferredState = useDeferredValue(state);

  return (
    <>

      <List />

      {/* <input value={state} onChange={(e) => setState(e.target.value)} />

      <Suspense fallback={<h2>Loading...</h2>}>
        <SlowList text={deferredState} />
      </Suspense> */}
    </>
  )
}

export default App

[ghigt]

HTML

<button onclick="reset()">reset</button>
<button onclick="zoomIn()">zoom in</button>
<button onclick="zoomOut()">zoom out</button>

  <div class="wrapper">

  <div class="canvas">
    <div class="box">Scale me with your mouse wheel.</div>
  </div>
</div>

css

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 400px;
  min-height: 100vh;
  border: 1px solid grey;
  overflow: hidden;
}

.canvas {
  width: 100%;
  height: 100%;
  outline: 1px solid red;
  outline-offset: -1px;
}

.box {
  width: 105px;
  height: 105px;
  background: #cdf;
  padding: 5px;
}

JS

function zoom(event) {
  event.preventDefault();

  if ((currentEvent === undefined || currentEvent === 'scale') && event.deltaX == 0 && event.deltaY && event.deltaY > -1 && event.deltaY < 1) {
    console.log('scale', currentEvent);
    currentEvent = 'scale';
    scale += event.deltaY * -0.01;
    scale = Math.min(Math.max(0.125, scale), 4);
  } else if (currentEvent === undefined || currentEvent === 'translate') {
    console.log('translate', currentEvent);
    currentEvent = 'translate';
    x -= event.deltaX;
    y -= event.deltaY;
  } else {
    return;
  }

  clearTimeout(timeoutEvent);
  timeoutEvent = setTimeout(() => {
    currentEvent = undefined;
  }, 300);

  // Apply scale transform
  var t = `scale(${scale}) translateX(${x}px) translateY(${y}px)`;
  el.style.transform = t; 
}

function reset() {
  scale = 1;
  x = 0;
  y = 0;
  el.style.transform = `scale(${scale}) translateX(${x}px) translateY(${y}px)`; 
}

function zoomIn() {
  scale = Math.min(scale + 0.1, 1.5);
  el.style.transform = `scale(${scale}) translateX(${x}px) translateY(${y}px)`;
}

function zoomOut() {
  scale = Math.max(scale - 0.1, 0.5);
  el.style.transform = `scale(${scale}) translateX(${x}px) translateY(${y}px)`;
}

let timeoutEvent;
let currentEvent;

let scale = 1;
let x = 0;
let y = 0;
const el = document.querySelector(".canvas");
const elWrapper = document.querySelector(".wrapper");
elWrapper.onwheel = zoom;