Discrete changes

This commit is contained in:
Shawn 2018-11-12 21:23:41 -06:00
parent 1c44a69912
commit 9b48353355
4 changed files with 29 additions and 11 deletions

View file

@ -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'),
}

View file

@ -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>
);
},
};

View file

@ -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' }}>

View file

@ -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}>