Discrete changes
This commit is contained in:
parent
1c44a69912
commit
9b48353355
4 changed files with 29 additions and 11 deletions
|
@ -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'),
|
||||
}
|
||||
|
|
21
client/src/components/Creatify/FontFaces/OceanWave.js
Normal file
21
client/src/components/Creatify/FontFaces/OceanWave.js
Normal 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>
|
||||
);
|
||||
},
|
||||
};
|
|
@ -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' }}>
|
||||
|
|
|
@ -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}>
|
||||
|
|
Loading…
Reference in a new issue