commit
27ccbb5f14
16 changed files with 815 additions and 501 deletions
|
@ -64,7 +64,7 @@ export default class EditableFontface extends Component {
|
|||
) : null;
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={{ position: 'relative', ...(fontFace.container || {}) }}>
|
||||
<style scoped>{'@keyframes textBlink { 0% { opacity: 1 } 30% { opacity: 0.6 } 60% { opacity: 1 } }'}</style>
|
||||
{fontInput}
|
||||
<div ref={me.state.fontRender} style={textStyles} title={value}>{textRender(value)}</div>
|
||||
|
@ -93,6 +93,7 @@ export const PRESETS = {
|
|||
'Lazer': require('../FontFaces/Lazer'),
|
||||
'Neon': require('../FontFaces/Neon'),
|
||||
'Old Blue': require('../FontFaces/OldBlue'),
|
||||
'Outline': require('../FontFaces/Outline'),
|
||||
'Retro Rainbow': require('../FontFaces/RetroRainbow'),
|
||||
'The Special': require('../FontFaces/TheSpecial'),
|
||||
'Vapor Wave': require('../FontFaces/VaporWave'),
|
|
@ -1,5 +1,4 @@
|
|||
module.exports = {
|
||||
container: {},
|
||||
editorStyle: {
|
||||
fontFamily: 'courier, Courier New',
|
||||
fontWeight: 'bold',
|
||||
|
@ -12,4 +11,7 @@ module.exports = {
|
|||
fontWeight: 'bold',
|
||||
textShadow: '1px 1px 2px #003605',
|
||||
},
|
||||
previewOverrides: {
|
||||
fontSize: '1.6em',
|
||||
},
|
||||
};
|
|
@ -1,5 +1,4 @@
|
|||
module.exports = {
|
||||
container: {},
|
||||
editorStyle: {
|
||||
fontFamily: 'helvetica, Helvetica Nue',
|
||||
fontWeight: 'bold',
|
||||
|
@ -14,6 +13,7 @@ module.exports = {
|
|||
},
|
||||
previewOverrides: {
|
||||
fontSize: '1.5em',
|
||||
overflow: 'hidden',
|
||||
padding: '0 1rem 0 1rem',
|
||||
},
|
||||
};
|
|
@ -1,5 +1,4 @@
|
|||
module.exports = {
|
||||
container: {},
|
||||
editorStyle: {
|
||||
fontFamily: 'helvetica, Helvetica Nue',
|
||||
fontWeight: 'bold',
|
||||
|
@ -20,4 +19,7 @@ module.exports = {
|
|||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextStroke: '0.03em rgba(255, 255, 255, 0.6)',
|
||||
},
|
||||
previewOverrides: {
|
||||
fontSize: '1.8em',
|
||||
},
|
||||
};
|
|
@ -1,5 +1,4 @@
|
|||
module.exports = {
|
||||
container: {},
|
||||
editorStyle: {
|
||||
fontFamily: 'Helvetica, Arial',
|
||||
fontWeight: 'bold',
|
|
@ -17,6 +17,7 @@ module.exports = {
|
|||
},
|
||||
previewOverrides: {
|
||||
height: '2.6rem',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
textRender: (text) => {
|
||||
const id = `curve-${text.replace(/[^A-Za-z0-9]/g, '')}-oceanwave`
|
||||
|
@ -24,12 +25,12 @@ module.exports = {
|
|||
<svg viewBox="0 0 500 50" style={{ height: '4em', fontFamily: 'Arial', fontWeight: 'bold' }}>
|
||||
<path id={id} fill="transparent" d="M 0 50 Q 50 0 100 50 Q 150 100 200 50 Q 250 0 300 50 Q 350 100 400 50 Q 450 0 500 50 Q 550 100 600 50 " transform="scale(1 0.5) translate(0 15)" />
|
||||
<text x="10" style={{ fill: '#4dc2fe', fontWeight: 900, letterSpacing: '-0.15em', textShadow: '0.15em -0.1em #1c55a0' }}>
|
||||
<textPath href={`#${id}`}>
|
||||
<textPath xlinkHref={`#${id}`}>
|
||||
{text}
|
||||
</textPath>
|
||||
</text>
|
||||
<text x="10" style={{ fill: 'transparent', stroke: '#1c55a0', strokeWidth: '.012em', fontWeight: 900, letterSpacing: '-0.15em' }}>
|
||||
<textPath href={`#${id}`}>
|
||||
<textPath xlinkHref={`#${id}`}>
|
||||
{text}
|
||||
</textPath>
|
||||
</text>
|
18
client/src/components/Memeify/FontFaces/Outline.js
Normal file
18
client/src/components/Memeify/FontFaces/Outline.js
Normal file
|
@ -0,0 +1,18 @@
|
|||
module.exports = {
|
||||
editorStyle: {
|
||||
fontFamily: 'arial',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '2em',
|
||||
},
|
||||
text: {
|
||||
color: '#fff',
|
||||
fontFamily: 'arial',
|
||||
fontSize: '2rem',
|
||||
fontWeight: 'bold',
|
||||
textShadow: '2px 2px .1px #000, -1px -1px .1px #000, 1px -1px .1px #000, -1px 1px .1px #000, 1px 1px .1px #000',
|
||||
},
|
||||
previewOverrides: {
|
||||
fontSize: '1.6rem',
|
||||
padding: '0 .04rem',
|
||||
},
|
||||
};
|
|
@ -1,5 +1,4 @@
|
|||
module.exports = {
|
||||
container: {},
|
||||
editorStyle: {
|
||||
fontFamily: 'Arial, sans-serif',
|
||||
fontWeight: 'bold',
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
module.exports = {
|
||||
container: {},
|
||||
editorStyle: {
|
||||
fontFamily: 'Arial, sans-serif',
|
||||
fontWeight: 'bold',
|
|
@ -10,7 +10,9 @@ const charToFullWidth = char => {
|
|||
const stringToFullWidth =
|
||||
|
||||
module.exports = {
|
||||
container: {},
|
||||
container: {
|
||||
overflow: 'hidden',
|
||||
},
|
||||
editorStyle: {},
|
||||
text: {
|
||||
fontFamily: 'Segoe UI,Helvetica,Arial',
|
||||
|
@ -33,7 +35,7 @@ module.exports = {
|
|||
<svg viewBox="0 0 500 160" 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="10">
|
||||
<textPath href={`#${id}`}>
|
||||
<textPath xlinkHref={`#${id}`}>
|
||||
{formattedText}
|
||||
</textPath>
|
||||
</text>
|
|
@ -49,9 +49,11 @@ export default class RichDraggable extends Component {
|
|||
|
||||
return (
|
||||
<Draggable {...props} bounds={bounds} offsetParent={body} cancel=".no-drag">
|
||||
<div ref={me.contents} style={{ padding: '15px', position: 'absolute', border: '4px dashed #ddd', cursor: 'move' }} className="creatifyDecor">
|
||||
<div className="no-drag" style={{ position: 'relative', cursor: 'auto' }}>
|
||||
{props.children}
|
||||
<div ref={me.contents} style={{ border: '4px dashed rgba(0, 0, 0, .7)', cursor: 'move', position: 'absolute' }} className="creatifyDecor">
|
||||
<div style={{ border: '4px dashed rgba(255, 255, 255, .8)', margin: '-5px -3px -3px -5px', padding: '15px' }} className="creatifyDecor">
|
||||
<div className="no-drag" style={{ position: 'relative', cursor: 'auto' }}>
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Draggable>
|
|
@ -30,7 +30,7 @@ const getRasterizedCanvas = (contents, width, height) => {
|
|||
|
||||
// Attempt to match font kerning with the DOM.
|
||||
const kerningAndPadding = '<style>svg{font-kerning:normal}body{padding:0;margin:0}</style>';
|
||||
const svgContents = `<svg xmlns="http://www.w3.org/2000/svg" width="${width * 2}" height="${height * 2}">
|
||||
let svgContents = `<svg xmlns="http://www.w3.org/2000/svg" width="${width * 2}" height="${height * 2}">
|
||||
<foreignObject x="0" y="0" width="${width * 2}" height="${height * 2}" externalResourcesRequired="true">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>${kerningAndPadding}</head><body>${contents}</body></html>
|
||||
</foreignObject></svg>`;
|
||||
|
@ -81,7 +81,7 @@ const getRasterizedCanvas = (contents, width, height) => {
|
|||
});
|
||||
};
|
||||
|
||||
export default class Creatify extends Component {
|
||||
export default class Memeify extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
|
@ -94,7 +94,7 @@ export default class Creatify extends Component {
|
|||
{
|
||||
value: fontName,
|
||||
label: (
|
||||
<div style={{ maxHeight: '150px', maxWidth: '100%', fontSize: '16px', overflow: 'hidden' }}>
|
||||
<div style={{ maxHeight: '150px', maxWidth: '100%', fontSize: '16px' }}>
|
||||
<EditableFontface key={fontName} fontFace={FontPresets[fontName]} preview={true} value={fontName} editable={false} blinkSelection={false} />
|
||||
</div>
|
||||
),
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
|
||||
import { validateFile } from '../../utils/file';
|
||||
import Creatify from '@components/Creatify';
|
||||
import Memeify from '@components/Memeify';
|
||||
import DropzonePreviewImage from '@components/DropzonePreviewImage';
|
||||
import DropzoneDropItDisplay from '@components/DropzoneDropItDisplay';
|
||||
import DropzoneInstructionsDisplay from '@components/DropzoneInstructionsDisplay';
|
||||
|
@ -187,11 +187,11 @@ class Dropzone extends React.Component {
|
|||
};
|
||||
|
||||
const memeifyContent = memeify && file && filePreview ? (
|
||||
<Creatify flex toolbarClassName={'dropzone-memeify-toolbar'} onSave={(canvas) => this.selectFileFromCanvas(canvas)}>
|
||||
<Memeify flex toolbarClassName={'dropzone-memeify-toolbar'} onSave={(canvas) => this.selectFileFromCanvas(canvas)}>
|
||||
<div style={{ background: '#fff', flex: 1, pointerEvents: 'none' }}>
|
||||
<img style={{ width: '100%' }} src={filePreview} />
|
||||
</div>
|
||||
</Creatify>
|
||||
</Memeify>
|
||||
) : null;
|
||||
|
||||
const dropZoneClassName = 'dropzone' + (dragOver ? ' dropzone--drag-over' : '');
|
||||
|
|
1250
package-lock.json
generated
1250
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -123,6 +123,7 @@
|
|||
"ndb": "^1.0.26",
|
||||
"node-sass": "^4.10.0",
|
||||
"nodemon": "^1.18.6",
|
||||
"react-color": "^2.14.1",
|
||||
"redux-devtools": "^3.4.1",
|
||||
"regenerator-transform": "^0.13.3",
|
||||
"rollup": "^0.67.0",
|
||||
|
|
Loading…
Reference in a new issue