svg-polygon-morpher

Node.js module for morphing SVG Polygons without using SMIL Animation.

This package was built for use with React

How to use the svg-polygon-morpher package:

1. In the terminal, run the following commands:

A) $ npx-create-react-app test-svg-polygon-morpher

B) $ npm i svg-polygon-morpher

C) $ cd src

D) $ code App.js

2. Replace the contents of App.js with the following:

// Here we are importing React and the React useReducer hook to manage the state of our SVG polygon coordinates.
import React, { useReducer } from 'react';
// Here we are importing morphPolygon
// We will use to morph, or transition, the points of one polygon from one state to another
import morphPolygon from "svg-polygon-morpher";

// Here we are declaring an array containing three objects. Each of these objects contains an x and a y coordinate.
// Together, the three sets of x and y coordinates will be used to define the points of a triangle svg polygon.
let triangle1Coordinates = [
  { x: 10, y: 0 },
  { x: 10, y: 30 },
  { x: 60, y: 40 }
];

// Here we are defining a second array of triangle svg polygon coordinates which differ from the first.
// We will be transitioning the polygons from the initial state provided by the triangle1Coordinates to an updated state provided by the triangle2Coordinates
let triangle2Coordinates = [
  { x: 20, y: 0 },
  { x: 20, y: 40 },
  { x: 50, y: 80 }
];

// the buildPointsString function takes in an arry of coordinates and returns a string value which can be used as a svg polygon points attribute's value

function buildPointsString (coordinatesArray) {
  // if the value of coordinatesArray is not an array, buildPointsString will return an alert informing the user.
  if (!Array.isArray(coordinatesArray)) {
    return alert("buildPointsString receives a coordinatesArray argument whose data type is not an array.");
  }

  // if the coordinatesArray parameter passes the array validation, the .map() Array method is executed on the coordinatesArray.
  // Each iteration of the array mapping will return a string in the following example format: "10,0"
  // the .map() Array method returns an array containing the values returned from inside the .map() method callback, in the case of triangle1Coordinates, this array would look like this:
  // eg: ["10,0", "0,100", "100,100"]

  // The buildPointsString function then uses the .join() array method with a " " space separator string passed in as a .join() argument to insert a space between each joined item in the array.
  // In the case of triangle1Coordinates, the joined array will look like this:
  //eg: "10,0 0,100 100,100" --> This is the correct syntax to use as a svg polygon points attributes value.

  return coordinatesArray.map((coordinates) => {
      return coordinates.x + "," + coordinates.y;
  }).join(" ");
}

function App() {
  // Here we are using React's useReducer hook to manage the state of the value passed into the polygon points attribute;
  const [usePolygonPoints, setPolygonPoints] = useReducer((state, action) => {
    switch (action.type) {
        case "update": return { ...state };
        default: throw new Error("Reducer received unexpected action type");
    }
  }, triangle1Coordinates);

  return (
    <div className="App">

      {/* Below is a button we will use to trigger the svg-polygon-morpher */}
      <button onClick={() => {
          // morphTo is the set of coordinates we will be morphing to
          // if usePolygonPoints state is not equal to triangle1Coordinates then use triangle1Coordinates
          // else use the triangle2Coordinates.
          let morphTo = (usePolygonPoints !== triangle1Coordinates) ? triangle1Coordinates : triangle2Coordinates;

          // morphingInterval is the numeric value of the interval (in milliseconds) with which we would like our morph to occur.
          let morphingInterval = 1;

          // morphPolygonCallback is a callback we pass into morphPolygon.
          // This particular callback will be used to update the state of usePolygonPoints
          let morphPolygonCallback = () => {
            return setPolygonPoints({ type: "update" });
          };

          // morphPolygon takes in four arguments:
          // --- the first is the initial coordinates for our polygon
          // --- the second is the coordinates with which we would like our polygon to morph to
          // --- the third is the interval at which we would like our morph to occur
          // --- the fourth is a callback we pass into the morphPolygon function to update the state of our polygon.
          return morphPolygon(usePolygonPoints, morphTo, morphingInterval, morphPolygonCallback);
      }}> It's morphin' time </button>

      <svg id="svg" viewBox="0 0 100 100">
        <polygon id="polygon" points={buildPointsString(triangle1Coordinates)} />
      </svg>

    </div>
  );
}

export default App;

3) In the terminal, cd into the root directory of test-svg-polygon-morpher && run the following

A) $ npm start