@best-apps/gfx-editor

GFX Editor

Canvas editor using Fabricjs. Available as a React component and in VanillaJS

Contributing

See CONTRIBUTING.md

Installation and usage

🚧 Coming soon 🚧

Storybook development

Run:

yarn
yarn storybook

Use in React App

• First create a div with width, height, and position styles so that the editor can fill this container element.
• GFXProvider. Then use GFXProvider and provide it a valid config object. You can also provide it a react ref as gfxRef. It will get initialized with a gfx instance object.
• Interfaces. Finally, use either the FullInterface or BasicInterface component.

Here's an example

import { useRef, useState } from 'react';
import { APIProvider, GFXProvider, GFXType } from '@agencyenterprise/gfx-editor'
import BasicInterface from 'src/Interfaces/BasicInterface/BasicInterface';

function App() {

  const gfxRef = useRef<GFXType>();

  return (
    <div
      style={{
        width: 400,
        height: 600,
        position: 'relative' // You have to wrap the editor in an element with width/height and position: fixed/relative/absolute
      }}
    >
      <APIProvider>
        <GFXProvider
          gfxRef={gfxRef}
          config={{}}
        >
          <BasicInterface /> 
          {/* Or <FullInterface /> */}
        </GFXProvider>
      </APIProvider>
    </div>
  )
}

Use in a Shopify Store

TBD. Wait until the editor is configured for the GFX Storefront first

Questions

• We have a library of components. Editor is one of them.
• The IFrame can have everything put together.
• Should we NOT use an iframe. We will manage all GFX storefronts. We can manage DNS, CORS issues, analytics and third-party plugins.
• Do we need babel.config.js?
• Do we need rollup.config.js?

Extended Roadmap

• Put an icon on custom controls to remove bg?
• Upgrading fabric means rewriting fabricCustomControls
• Examples
  • Shopify
    • With editor buttons inside the iframe (easy mode)
    • With editor buttons outside of iframe (advanced/custom)
  • GFX Storefront
    • With editor buttons inside the iframe (easy mode)
    • With editor buttons outside of iframe (advanced/custom)

To be documented

• When to use internalRef
• When to use hooks
• When to use canvas/hooks
• When to use gfx.state.activeObject vs internalRef.current.activeObject