Movable

Dependencies

This component does not require any dependencies.

Usage

import Movable from "@arclockproject/common/components/Movable";

The examples below are live. Edit the code to try your own values.

Moving and zooming

Drag with the mouse or one finger. Zoom with the mouse wheel or by pinching. Turning a feature off resets its position or zoom.

▶ Show code (click to view and edit)

Live Editor

function MovablePlayground() {
  const [enableMovement, setEnableMovement] = useState(true);
  const [enableZoom, setEnableZoom] = useState(false);

  return (
    <div>
      <label>
        <input type="checkbox" checked={enableMovement} onChange={() => setEnableMovement(!enableMovement)} /> enableMovement
      </label>{" "}
      <label>
        <input type="checkbox" checked={enableZoom} onChange={() => setEnableZoom(!enableZoom)} /> enableZoom
      </label>
      <Movable
        enableMovement={enableMovement}
        enableZoom={enableZoom}
        style={{
          width: "100%",
          height: "160px",
          background: "rgb(52, 11, 55)", // Purple
        }}
      >
        <div
          style={{
            width: "100%",
            height: "100%",
            background: "rgb(3, 70, 3)", // Green
          }}
        >
          <p style={{ color: "white" }}>
            {enableMovement && enableZoom
              ? "Move and zoom me!"
              : enableMovement
                ? "Move me!"
                : enableZoom
                  ? "Zoom me!"
                  : "You can't move or zoom me!"}
          </p>
        </div>
      </Movable>
    </div>
  );
}

Result

Loading...

Movable acts like a div

It accepts all <div> props. Your onMouseDown and onTouchStart run before the drag logic, even when dragging is off.

▶ Show code (click to view and edit)

Live Editor

function MovableEvents() {
  const [log, setLog] = useState([]);
  const add = (message) => setLog((list) => [message, ...list].slice(0, 4));

  return (
    <div>
      <Movable
        enableMovement
        style={{
          width: "100%",
          height: "120px",
          background: "rgb(52, 11, 55)", // Purple
        }}
        onClick={() => add("onClick")}
        onMouseDown={() => add("onMouseDown (before move logic)")}
      >
        <div
          style={{
            width: "100%",
            height: "100%",
            background: "rgb(3, 70, 3)", // Green
          }}
        >
          <p style={{ color: "white" }}>Click or drag me!</p>
        </div>
      </Movable>
      {log.map((message, i) => (
        <div key={i}><code>{message}</code></div>
      ))}
    </div>
  );
}

Result

Loading...

API

See the Movable API reference for every prop, method and type.