Reorder

Github Logo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 import React, { useState } from 'react'; import type { NextPage } from 'next'; import { Page, Container, Canvas } from 'components/content'; import { View, Layer, Rectangle } from 'react-paper-bindings'; function move(arr: any[], from: number, to: number) { return arr.reduce((prev, current, idx, self) => { if (from === to) prev.push(current); if (idx === from) return prev; if (from < to) prev.push(current); if (idx === to) prev.push(self[from]); if (from > to) prev.push(current); return prev; }, []); } const ReorderPage: NextPage = () => { const [rects, setRects] = useState([ { id: 1, center: [100, 50], size: [50, 50], fillColor: 'red' }, { id: 2, center: [125, 75], size: [50, 50], fillColor: 'green' }, { id: 3, center: [150, 100], size: [50, 50], fillColor: 'orange' }, { id: 4, center: [175, 125], size: [50, 50], fillColor: 'blue' }, ]); return ( <Page title="Reorder"> <Container> <Canvas> <View onClick={() => setRects(move(rects, 0, rects.length - 1))}> <Layer> {rects.map((rect) => ( <Rectangle key={rect.id} {...rect} /> ))} </Layer> </View> </Canvas> </Container> </Page> ); }; export default ReorderPage;
react-paper-bindings
  • Editor
  • Scope
  • Multi Canvas
  • Animations
  • Layers
  • Tools
  • Events
  • Refs
  • Selection
  • Reorder
  • CompoundPath