client/src/components/Creatify/EditableFontface/index.js

@@ -67,4 +67,5 @@ export default class EditableFontface extends Component {
 export const PRESETS = {
   'Retro Rainbow': require('../FontFaces/RetroRainbow'),
   'Green Machine': require('../FontFaces/GreenMachine'),
+  'Ocean Wave': require('../FontFaces/OceanWave'),
 }

client/src/components/Creatify/FontFaces/OceanWave.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+module.exports = {
+  container: {},
+  editorStyle: {},
+  text: {},
+  textRender: (text) => {
+    // TODO: Inline the path
+    const id = `curve-${text.replace(/[^A-Za-z0-9]/g, '')}-oceanwave`
+    return (
+      <svg viewBox="0 0 425 300" style={{ height: '10em' }}>
+        <path id={id} fill="transparent" d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145" />
+        <text x="25">
+          <textPath href={`#${id}`}>
+            {text}
+          </textPath>
+        </text>
+      </svg>
+    );
+  },
+};

client/src/components/Creatify/RichDraggable/index.js

@@ -47,8 +47,6 @@ export default class RichDraggable extends Component {
       bottom: bottom - state.height,
     };
 
-    console.log(bounds);
-
     return (
       <Draggable bounds={bounds} offsetParent={body} cancel=".no-drag">
         <div ref={me.contents} style={{ padding: '10px', position: 'absolute', border: '4px dashed #ddd', cursor: 'move' }}>

client/src/components/Creatify/index.js

@@ -25,7 +25,7 @@ export default class Creatify extends Component {
       (fontName) => (
         {
           value: fontName,
-          label: <EditableFontface fontFace={FontPresets[fontName]} value={fontName} editable="false" />,
+          label: <EditableFontface key={fontName} fontFace={FontPresets[fontName]} value={fontName} editable="false" />,
           fontName,
         }
       )
@@ -58,7 +58,11 @@ export default class Creatify extends Component {
       (match, group) => (`-webkit-background-clip:${group};${match}`)
     );
 
-    rasterizeHTML.drawHTML(contents, canvas);
+    rasterizeHTML.drawHTML(contents, canvas).then((renderResult) => {
+
+    }, (error) => {
+
+    });
   }
 
   render() {
@@ -68,18 +72,12 @@ export default class Creatify extends Component {
       state,
     } = this;
 
-    const options = [
-      { value: 'chocolate', label: <div><b>Chocolate</b></div> },
-      { value: 'strawberry', label: 'Strawberry' },
-      { value: 'vanilla', label: 'Vanilla' },
-    ];
-
     return (
       <div style={{ flex: 1, display: 'flex' }}>
         <div>
           <button onClick={() => this.renderContents()}>Rasterize</button>
           <canvas ref={me.canvas} width="200" height="200"></canvas>
-          <Select options={state.fontOptions} onChange={(option) => this.setFont(option.fontName)} />
+          <Select isSearchable={false} options={state.fontOptions} onChange={(option) => this.setFont(option.fontName)} />
         </div>
         <div ref={me.contents} style={{ flex: 1 }}>
           <RichDraggable bounds={state.bounds}>