Update branch

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

@@ -24,14 +24,13 @@ export default class EditableFontface extends Component {
 
     const textRender = fontFace.textRender || DEFAULT_TEXT_RENDER;
 
-    const textStyles = {
-      ...{
-        minHeight: '30px',
-        WebkitFontSmoothing: 'antialiased',
-        MozOsxFontSmoothing: 'grayscale',
-      },
-      ...(fontFace.text),
-    };
+    const textStyles = Object.assign({
+      minHeight: '30px',
+      WebkitFontSmoothing: 'antialiased',
+      MozOsxFontSmoothing: 'grayscale',
+    }, fontFace.text);
+
+    console.log(textStyles);
 
     return (
       <div style={{ position: 'relative' }}>
@@ -48,7 +47,7 @@ export default class EditableFontface extends Component {
           },
           ...(fontFace.editorStyle || {}),
         }} />
-        <div style={textStyles} title={value}>{textRender(value)}</div>
+      <div ref={me.state.fontRender} style={textStyles} title={value}>{textRender(value)}</div>
       </div>
     );
   }
@@ -63,6 +62,6 @@ export default class EditableFontface extends Component {
 };
 
 export const PRESETS = {
-  'Retro Rainbow': require('./FontFaces/RetroRainbow'),
-  'Green Machine': require('./FontFaces/GreenMachine'),
+  'Retro Rainbow': require('../FontFaces/RetroRainbow'),
+  'Green Machine': require('../FontFaces/GreenMachine'),
 }

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

@@ -1,4 +1,4 @@
-export default const GreenMachine = {
+module.exports = {
   container: {},
   text: {
     color: 'green',

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

@@ -1,4 +1,4 @@
-export default const RetroRainbow = {
+module.exports = {
   container: {},
   editorStyle: {
     fontFamily: 'Arial, sans-serif',
@@ -8,11 +8,10 @@ export default const RetroRainbow = {
   text: {
     fontFamily: 'Arial, sans-serif',
     fontWeight: 'bold',
-    background: 'linear-gradient(to right, #b306a9, #ef2667, #f42e2c, #ffa509, #fdfc00, #55ac2f, #0b13fd, #a804af)',
-    textFillColor: 'transparent',
+    backgroundImage: 'linear-gradient(to right, #b306a9, #ef2667, #f42e2c, #ffa509, #fdfc00, #55ac2f, #0b13fd, #a804af)',
     backgroundClip: 'text',
     transform: 'scale(1, 1.5)',
-    WebkitTextFillColor: 'transparent',
+    color: 'transparent',
     WebkitBackgroundClip: 'text',
   },
 };

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

@@ -1,11 +1,62 @@
 import React, { Component } from 'react';
+import Draggable from 'react-draggable';
+
+let body;
+try {
+  body = document.body;
+} catch(e) {}
 
 export default class RichDraggable extends Component {
+  constructor(props) {
+    super(props);
+
+    this.contents = React.createRef();
+    this.state = {
+      height: 0,
+      width: 0,
+    };
+  }
+
+  componentDidMount() {
+    const height = this.contents.current.offsetHeight;
+    const width = this.contents.current.offsetWidth;
+
+    this.setState({
+      height,
+      width,
+    });
+  }
+
   render() {
+    const me = this;
+
+    const {
+      props,
+      state,
+    } = me;
+
+    const {
+      height: bottom,
+      width: right,
+    } = props.bounds;
+
+    const bounds = {
+      top: 0,
+      left: 0,
+      right: right - state.width,
+      bottom: bottom - state.height,
+    };
+
+    console.log(bounds);
+
     return (
-      <div style={{ margin: '-2px', position: 'absolute', border: '2px dashed blue' }}>
-        {this.props.children}
-      </div>
+      <Draggable bounds={bounds} offsetParent={body} cancel=".no-drag">
+        <div ref={me.contents} style={{ padding: '10px', position: 'absolute', border: '4px dashed #ddd', cursor: 'move' }}>
+          <div className="no-drag" style={{ overflow: 'hidden', position: 'relative', cursor: 'auto' }}>
+            {props.children}
+          </div>
+        </div>
+      </Draggable>
     );
   }
 };

client/src/components/Creatify/index.js

@@ -3,33 +3,74 @@ import React, { Component } from 'react';
 import RichDraggable from './RichDraggable';
 import EditableFontface, { PRESETS as FontPresets } from './EditableFontface';
 
+// TODO: Remove `rasterizehtml` from SSR
+let rasterizeHTML = () => {};
+try {
+  if(window) {
+    rasterizeHTML = require('rasterizehtml')
+  }
+} catch(e) {}
+
 export default class Creatify extends Component {
   constructor(props) {
     super(props);
 
     const fontKeys = Object.keys(FontPresets);
 
+    this.canvas = React.createRef();
+    this.contents = React.createRef();
+
     this.state = {
+      bounds: {},
       fontName: fontKeys[0],
       fontOptions: fontKeys.map((fontName) => (
-        <option value={fontName}>{fontName}</option>
+        <option key={fontName} value={fontName}>{fontName}</option>
       )),
     };
   }
 
+  componentDidMount() {
+    const bounds = this.contents.current.getBoundingClientRect();
+
+    this.setState({
+      bounds,
+    });
+  }
+
+  renderContents() {
+    const me = this;
+
+    const canvas = me.canvas.current;
+    let contents = me.contents.current.innerHTML;
+
+    // Resolves a bug in Chrome where it renders correctly, but
+    // replaces the inline styles with an invalid `background-clip`
+    contents = contents.replace(/background\-clip:(.*)[;$]/g,
+      (match, group) => (`-webkit-background-clip:${group};${match}`)
+    );
+
+    rasterizeHTML.drawHTML(contents, canvas);
+  }
+
   render() {
+    const me = this;
+
     const {
       state,
     } = this;
 
     return (
-      <div style={{ flex: 1 }}>
+      <div style={{ flex: 1, display: 'flex' }}>
+        <button onClick={() => this.renderContents()}>Rasterize</button>
+        <canvas ref={me.canvas} width="200" height="200"></canvas>
         <select value={state.fontName} onChange={(e) => this.onChangeFont(e)}>
           {state.fontOptions}
         </select>
-        <RichDraggable>
-          <EditableFontface fontFace={FontPresets[state.fontName]} value="Hello from LBRY" />
-        </RichDraggable>
+        <div ref={me.contents} style={{ flex: 1 }}>
+          <RichDraggable bounds={state.bounds}>
+            <EditableFontface fontFace={FontPresets[state.fontName]} value="Hello from LBRY" />
+          </RichDraggable>
+        </div>
       </div>
     );
   }