Προσθέστε δυνατότητες μεταφοράς και απόθεσης στην εφαρμογή React μας με τη Βιβλιοθήκη Visx

Το Visx είναι μια βιβλιοθήκη που μας επιτρέπει να προσθέτουμε εύκολα γραφικά στην εφαρμογή React.

Σε αυτό το άρθρο, θα εξετάσουμε πώς να το χρησιμοποιήσετε για να προσθέσετε καμπύλες με τμήματα που έχουν το δικό τους στυλ στην εφαρμογή μας React

Εγκαταστήστε τα απαιτούμενα πακέτα

Πρέπει να εγκαταστήσουμε μερικές μονάδες για να δημιουργήσουμε το drag and drop.

Για να ξεκινήσουμε, τρέχουμε:

npm i @visx/drag @visx/gradient @visx/responsive @visx/scale

για να εγκαταστήσετε τα πακέτα.

Προσθήκη δυνατότητας μεταφοράς και απόθεσης

Προσθέτουμε drag and drop γράφοντας τον παρακάτω κώδικα:

import React, { useMemo, useState, useEffect } from "react";
import { scaleOrdinal } from "@visx/scale";
import { LinearGradient } from "@visx/gradient";
import { Drag, raise } from "@visx/drag";
const colors = [
  "#025aac",
  "#02cff9",
  "#02efff",
  "#03aeed",
  "#0384d7",
  "#edfdff",
  "#ab31ff",
  "#5924d7"
];
const generateCircles = ({ width, height }) =>
  new Array(width < 360 ? 40 : 185).fill(1).map((d, i) => {
    const radius = 25 - Math.random() * 20;
    return {
      id: `${i}`,
      radius,
      x: Math.round(Math.random() * (width - radius * 2) + radius),
      y: Math.round(Math.random() * (height - radius * 2) + radius)
    };
  });
function Example({ width, height }) {
  const [draggingItems, setDraggingItems] = useState([]);
  useEffect(() => {
    if (width > 10 && height > 10)
      setDraggingItems(generateCircles({ width, height }));
  }, [width, height]);
  const colorScale = useMemo(
    () =>
      scaleOrdinal({
        range: colors,
        domain: draggingItems.map((d) => d.id)
      }),
    [width, height]
  );
  if (draggingItems.length === 0 || width < 10) return null;
  return (
    <div className="Drag" style={{ touchAction: "none" }}>
      <svg width={width} height={height}>
        <LinearGradient id="stroke" from="#ff00a5" to="#ffc500" />
        <rect fill="#c4c3cb" width={width} height={height} rx={14} />
{draggingItems.map((d, i) => (
          <Drag
            key={`drag-${d.id}`}
            width={width}
            height={height}
            x={d.x}
            y={d.y}
            onDragStart={() => {
              setDraggingItems(raise(draggingItems, i));
            }}
          >
            {({ dragStart, dragEnd, dragMove, isDragging, x, y, dx, dy }) => (
              <circle
                key={`dot-${d.id}`}
                cx={x}
                cy={y}
                r={isDragging ? d.radius + 4 : d.radius}
                fill={isDragging ? "url(#stroke)" : colorScale(d.id)}
                transform={`translate(${dx}, ${dy})`}
                fillOpacity={0.9}
                stroke={isDragging ? "white" : "transparent"}
                strokeWidth={2}
                onMouseMove={dragMove}
                onMouseUp={dragEnd}
                onMouseDown={dragStart}
                onTouchStart={dragStart}
                onTouchMove={dragMove}
                onTouchEnd={dragEnd}
              />
            )}
          </Drag>
        ))}
      </svg>
      <style jsx>{`
        .Drag {
          display: flex;
          flex-direction: column;
          user-select: none;
        }
        svg {
          margin: 1rem 0;
        }
        .deets {
          display: flex;
          flex-direction: row;
          font-size: 12px;
        }
        .deets > div {
          margin: 0.25rem;
        }
      `}</style>
    </div>
  );
}
export default function App() {
  return (
    <div className="App">
      <Example width={500} height={300} />
    </div>
  );
}

Έχουμε τη συνάρτηση generateCircles για να επιστρέψουμε έναν πίνακα αντικειμένων με ιδιότητες id , radius και x και y.

Το id είναι το μοναδικό αναγνωριστικό για κάθε κύκλο.

Και οι άλλες ιδιότητες χρησιμοποιούνται για την απόδοση κύκλων στη σελίδα.

Στο στοιχείο Example, παρακολουθούμε τα στοιχεία που παρακολουθούνται με την κατάσταση draggingItems.

Παρακολουθούμε το πλάτος και το ύψος και προσθέτουμε τους κύκλους στην επιστροφή κλήσης useEffect.

Η κατάσταση colorScale μας επιτρέπει να υπολογίσουμε την κλίμακα για τα χρώματα σύμφωνα με τον πίνακα colors που δημιουργήσαμε νωρίτερα.

Στη δήλωση return, έχουμε το στοιχείο Drag, το οποίο είναι το κοντέινερ για τη διατήρηση στοιχείων με δυνατότητα μεταφοράς.

Στη συνέχεια, αποδίδουμε τα στοιχεία με δυνατότητα μεταφοράς με το στήριγμα απόδοσης στο στοιχείο Drag.

Αποδίδει το circles στον πίνακα draggingItems.

Περνάμε τους χειριστές συμβάντων μεταφοράς από την παράμετρο αντικειμένου ως στηρίγματα του circle για να τους κάνουμε σύρσιμο.

Οι θέσεις τους θα ενημερωθούν με αυτές τις λειτουργίες χειριστή συμβάντων.

Τέλος, έχουμε τα στυλ στην ετικέτα style για να αλλάξουμε τα στυλ για το κοντέινερ.

Τώρα θα πρέπει να έχουμε κύκλους στην οθόνη που μπορούν να σύρονται γύρω από το πλαίσιο.

συμπέρασμα

Μπορούμε να προσθέσουμε δυνατότητες μεταφοράς και απόθεσης στην εφαρμογή React με τη βιβλιοθήκη Visx.

Σας άρεσε αυτό το άρθρο; Αν ναι, αποκτήστε περισσότερο παρόμοιο περιεχόμενο εγγραφείτε στο κανάλι μας στο YouTube!

Περισσότερο περιεχόμενο στο plainenglish.io