colinfwren

import React from 'react'
import { graphql } from 'gatsby'
import Layout from './Layout'
import SEO from './Seo'

export default function Page({ data: { page }}) {
  return (
    <Layout>
        <SEO data={page.seo}/>
        <h1>{page.title}</h1>   

colinfwren

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/node-apis/
 */
const path = require(`path`)
const MarkdownIt = require('markdown-it')
const { createRemoteFileNode } = require(`gatsby-source-filesystem`)

const markdown = new MarkdownIt()

colinfwren

import React, { useState } from "react";
import { Group, Rect } from "react-konva";
import { EditableText } from "./EditableText";

export function EditableTextUsage({ selected, setSelected }) {
  const [isEditing, setIsEditing] = useState(false);
  const [isTransforming, setIsTransforming] = useState(false);
  const [text, setText] = useState("Click to resize. Double click to edit.");
  const [width, setWidth] = useState(200);
  const [height, setHeight] = useState(200);

colinfwren

import React from "react";
import { ResizableText } from "./ResizableText";
import { EditableTextInput } from "./EditableTextInput";

const RETURN_KEY = 13;
const ESCAPE_KEY = 27;

export function EditableText({
  x,
  y,

colinfwren

import React, { useRef, useEffect } from "react";
import { Text, Transformer } from "react-konva";

export function ResizableText({
  x,
  y,
  text,
  isSelected,
  width,
  onResize,

colinfwren

import React from "react";
import { Text } from 'react-konva';
import { Html } from "react-konva-utils";

const RETURN_KEY = 13;
const ESCAPE_KEY = 27;

function getStyle(width, height) {
  const isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
  const baseStyle = {

colinfwren

export function updatePathFromMiddle(path, edge, position) {
  const newPoints = path.points.map((item, index) => {
    if (edge.points.includes(index)) {
      return {
        ...item,
        [edge.axis]: position[edge.axis]
      };
    }
    return item;
  });

colinfwren

export function updatePathFromExtrude(path, edge, position) {
  // Create copies so can mutate them
  const newPoints = [...path.points];
  const newExtrudableEdges = [...path.extrudableEdges];
  const newActiveDrag = path.activeDrag;
  // Set up configuration, check if starting edge, get the axis to update and the other axis
  // with the node to base the other axis' value off
  const isStartEdge = edge.points[0] === 0;
  const axis = edge.axis;
  const otherAxis = edge.axis === "y" ? "x" : "y";

colinfwren

export function updatePathFromTip(path, index, position) {
  // clone points and update position
  const newPoints = [...path.points];
  newPoints[index] = {
    ...newPoints[index],
    ...position
  };
  // Get the index of the other point to update
  const otherIndex = index === 0 ? 1 : index - 1;
  // Calculate the axis that the edge leading to the tip is on

colinfwren

function dragBoundFunc(pos, axis, anchorRef) {
  const staticPos = anchorRef.current.getAbsolutePosition();
  const otherAxis = axis === 'y' ? 'x' : 'y';
  return {
    [axis]: pos[axis],
    [otherAxis]: staticPos[otherAxis]
  }
}