Skip to content

Commit

Permalink
-
Browse files Browse the repository at this point in the history
  • Loading branch information
webseon@gmail.com authored and webseon@gmail.com committed Sep 10, 2021
1 parent 7162efd commit 8f27a10
Show file tree
Hide file tree
Showing 33 changed files with 1,068 additions and 1,012 deletions.
6 changes: 3 additions & 3 deletions build/asset-manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"files": {
"main.css": "./static/css/main.b2e8a788.chunk.css",
"main.js": "./static/js/main.c0735e5f.chunk.js",
"main.js.map": "./static/js/main.c0735e5f.chunk.js.map",
"main.js": "./static/js/main.98ac1061.chunk.js",
"main.js.map": "./static/js/main.98ac1061.chunk.js.map",
"runtime-main.js": "./static/js/runtime-main.9ccc50fb.js",
"runtime-main.js.map": "./static/js/runtime-main.9ccc50fb.js.map",
"static/css/2.a39c7786.chunk.css": "./static/css/2.a39c7786.chunk.css",
Expand All @@ -20,6 +20,6 @@
"static/css/2.a39c7786.chunk.css",
"static/js/2.a6b00ea8.chunk.js",
"static/css/main.b2e8a788.chunk.css",
"static/js/main.c0735e5f.chunk.js"
"static/js/main.98ac1061.chunk.js"
]
}
2 changes: 1 addition & 1 deletion build/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="ko"><head><meta charset="utf-8"/><meta property="og:title" content="Ultimate CSS Gradient Generator"><meta property="og:type" content="article"><meta property="og:url" content="https://redcamel.github.io/RedGradient/build/"><meta property="og:image" content="https://redcamel.github.io/RedGradient/build/tempLogo.png"><meta property="og:site_name" content="RedGradient"><meta property="og:description" content="CSS gradient editor"><meta name="Description" content="Ultimate CSS Gradient Generator"><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="RedGradient" content="Ultimate CSS Gradient Generator "/><link rel="apple-touch-icon" href="./tempLogo.png"/><link rel="manifest" href="./manifest.json"/><title>RedGradient</title><script async src="https://www.googletagmanager.com/gtag/js?id=G-BK44VMT68H"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-BK44VMT68H")</script><style id="red_gradient_result_css"></style><link href="./static/css/2.a39c7786.chunk.css" rel="stylesheet"><link href="./static/css/main.b2e8a788.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,i,a=t[0],c=t[1],l=t[2],s=0,p=[];s<a.length;s++)i=a[s],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&p.push(o[i][0]),o[i]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(t);p.length;)p.shift()();return u.push.apply(u,l||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,a=1;a<r.length;a++){var c=r[a];0!==o[c]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.e=function(e){var t=[],r=o[e];if(0!==r)if(r)t.push(r[2]);else{var n=new Promise((function(t,n){r=o[e]=[t,n]}));t.push(r[2]=n);var u,a=document.createElement("script");a.charset="utf-8",a.timeout=120,i.nc&&a.setAttribute("nonce",i.nc),a.src=function(e){return i.p+"static/js/"+({}[e]||e)+"."+{3:"37cfc7c1"}[e]+".chunk.js"}(e);var c=new Error;u=function(t){a.onerror=a.onload=null,clearTimeout(l);var r=o[e];if(0!==r){if(r){var n=t&&("load"===t.type?"missing":t.type),u=t&&t.target&&t.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,r[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:a})}),12e4);a.onerror=a.onload=u,document.head.appendChild(a)}return Promise.all(t)},i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="./",i.oe=function(e){throw console.error(e),e};var a=this.webpackJsonpuntitled=this.webpackJsonpuntitled||[],c=a.push.bind(a);a.push=t,a=a.slice();for(var l=0;l<a.length;l++)t(a[l]);var f=c;r()}([])</script><script src="./static/js/2.a6b00ea8.chunk.js"></script><script src="./static/js/main.c0735e5f.chunk.js"></script></body></html>
<!doctype html><html lang="ko"><head><meta charset="utf-8"/><meta property="og:title" content="Ultimate CSS Gradient Generator"><meta property="og:type" content="article"><meta property="og:url" content="https://redcamel.github.io/RedGradient/build/"><meta property="og:image" content="https://redcamel.github.io/RedGradient/build/tempLogo.png"><meta property="og:site_name" content="RedGradient"><meta property="og:description" content="CSS gradient editor"><meta name="Description" content="Ultimate CSS Gradient Generator"><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="RedGradient" content="Ultimate CSS Gradient Generator "/><link rel="apple-touch-icon" href="./tempLogo.png"/><link rel="manifest" href="./manifest.json"/><title>RedGradient</title><script async src="https://www.googletagmanager.com/gtag/js?id=G-BK44VMT68H"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-BK44VMT68H")</script><style id="red_gradient_result_css"></style><link href="./static/css/2.a39c7786.chunk.css" rel="stylesheet"><link href="./static/css/main.b2e8a788.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,i,a=t[0],c=t[1],l=t[2],s=0,p=[];s<a.length;s++)i=a[s],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&p.push(o[i][0]),o[i]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(t);p.length;)p.shift()();return u.push.apply(u,l||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,a=1;a<r.length;a++){var c=r[a];0!==o[c]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.e=function(e){var t=[],r=o[e];if(0!==r)if(r)t.push(r[2]);else{var n=new Promise((function(t,n){r=o[e]=[t,n]}));t.push(r[2]=n);var u,a=document.createElement("script");a.charset="utf-8",a.timeout=120,i.nc&&a.setAttribute("nonce",i.nc),a.src=function(e){return i.p+"static/js/"+({}[e]||e)+"."+{3:"37cfc7c1"}[e]+".chunk.js"}(e);var c=new Error;u=function(t){a.onerror=a.onload=null,clearTimeout(l);var r=o[e];if(0!==r){if(r){var n=t&&("load"===t.type?"missing":t.type),u=t&&t.target&&t.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,r[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:a})}),12e4);a.onerror=a.onload=u,document.head.appendChild(a)}return Promise.all(t)},i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="./",i.oe=function(e){throw console.error(e),e};var a=this.webpackJsonpuntitled=this.webpackJsonpuntitled||[],c=a.push.bind(a);a.push=t,a=a.slice();for(var l=0;l<a.length;l++)t(a[l]);var f=c;r()}([])</script><script src="./static/js/2.a6b00ea8.chunk.js"></script><script src="./static/js/main.98ac1061.chunk.js"></script></body></html>
4 changes: 2 additions & 2 deletions build/static/js/main.c0735e5f.chunk.js → build/static/js/main.98ac1061.chunk.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions build/static/js/main.98ac1061.chunk.js.map
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion build/static/js/main.c0735e5f.chunk.js.map
View file

This file was deleted.

8 changes: 4 additions & 4 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@ class App extends React.Component {
updateRootState(v = {}) {
if (this.state) {
this.setState(v);
console.log('App updateRootState', this.state);
console.log(this.state);
// console.log('App updateRootState', this.state);
// console.log(this.state);
const activeFrameState = this.state[this.state.activeFrameKey];
if (!activeFrameState || !activeFrameState.canvasInfo) return;

Expand All @@ -89,15 +89,15 @@ class App extends React.Component {

window.actionHistoryCheckNum = window.actionHistoryCheckNum || 0;
window.actionHistoryCheckNum++;
console.log('actionHistoryCheckNum', window.actionHistoryCheckNum);
// console.log('actionHistoryCheckNum', window.actionHistoryCheckNum);
}
prevUpdateTime = t0;
}
}

setNewCanvas(newState) {
this.state = newState;
console.log(this.state);
// console.log(this.state);
//
this.updateRootState(this.state);
}
Expand Down
3 changes: 1 addition & 2 deletions src/core/RedNumber.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ class RedNumber extends React.Component {
calc(e) {
const step = this.props.step || 0.1;
const tX = e.pageX - startX;
console.log(e.pageX);
// console.log(e.pageX);
this.update(+startValue + tX * step);
}

Expand Down Expand Up @@ -100,7 +100,6 @@ class RedNumber extends React.Component {
if (time - startTime > 100) {
this.update(+this.props.value + step);
}
console.log('여기냐');
requestAni = requestAnimationFrame(tick);
};
requestAni = tick();
Expand Down
1 change: 0 additions & 1 deletion src/core/RedNumber2.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,6 @@ class RedNumber2 extends React.Component {
if (time - startTime > 100) {
this.update(+this.props.value + step);
}
console.log('여기냐');
requestAni = requestAnimationFrame(tick);
};
requestAni = tick();
Expand Down
17 changes: 9 additions & 8 deletions src/editor/ActiveSelectBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import js_beautify from "js-beautify";
import RedGradientEditComp from "./edit/gradient/RedGradientEditComp";
import {toast} from "react-toastify";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faCopy, faEye, faEyeSlash, faPlayCircle, faUserEdit} from "@fortawesome/free-solid-svg-icons";
import {faCopy, faPlayCircle, faUserEdit} from "@fortawesome/free-solid-svg-icons";

class ActiveSelectBar extends React.Component {
render() {
Expand All @@ -37,7 +37,7 @@ class ActiveSelectBar extends React.Component {
}}>
{
Object.values(ACTIVE_FRAME_KEY).map(key => {
const activeYn = appComponentState.activeFrameKey === key
const activeYn = appComponentState.activeFrameKey === key;
return <div
style={{
display: 'flex',
Expand All @@ -48,15 +48,16 @@ class ActiveSelectBar extends React.Component {
cursor: 'pointer',
borderRight: '1px solid #000',
// fontWeight:'bold',
color :activeYn ?'#fff': '#efb26a',
color: activeYn ? '#fff' : '#efb26a',
background: activeYn ? 'linear-gradient(#5e7ade, #2c3565)' : '#333'
}}
onClick={() => {
appComponentState.activeFrameKey = key;
console.log(appComponentState);
// console.log(appComponentState);
appComponent.updateRootState({});
}}
><FontAwesomeIcon icon={faUserEdit} style={{marginRight: '6px',opacity : activeYn ? 1 : 0.3}} /> {key.toUpperCase()}</div>;
><FontAwesomeIcon icon={faUserEdit}
style={{marginRight: '6px', opacity: activeYn ? 1 : 0.3}} /> {key.toUpperCase()}</div>;
})
}
<div
Expand Down Expand Up @@ -92,16 +93,16 @@ class ActiveSelectBar extends React.Component {
fontSize: '11px',
color: '#fff',
outline: 'none',
border : 0,
border: 0,
background: 'linear-gradient(#5e7ade, #2c3565)'
}}
onClick={() => {
const tempElem = document.createElement('textarea');

tempElem.value = js_beautify.css_beautify(`
${RedGradientEditComp.getContainerCssText(appComponentState[ACTIVE_FRAME_KEY.BEFORE], )}
${RedGradientEditComp.getContainerCssText(appComponentState[ACTIVE_FRAME_KEY.BEFORE],)}
${RedGradientEditComp.getContainerCssText(appComponentState[ACTIVE_FRAME_KEY.MAIN], true)}
${RedGradientEditComp.getContainerCssText(appComponentState[ACTIVE_FRAME_KEY.AFTER], )}
${RedGradientEditComp.getContainerCssText(appComponentState[ACTIVE_FRAME_KEY.AFTER],)}
`, {
indent_size: 2,
space_in_empty_paren: true,
Expand Down
13 changes: 8 additions & 5 deletions src/editor/RedPreview.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ class RedPreview extends React.Component {
return <div style={style.bg}>
<div style={style.container}>
<div style={{display: 'flex', flex: 1, width: '100%'}}>
<div style={{display: 'flex', flexDirection: 'column', width: '360px',margin : '7px 10px'}}>
<div style={{display: 'flex', flexDirection: 'column', width: '360px', margin: '7px 10px'}}>
{
[
{
Expand Down Expand Up @@ -70,10 +70,13 @@ class RedPreview extends React.Component {
]
}
].map(v => {
return <div style={{margin :'3px 0px',padding: '10px', border: '1px solid #111',borderRadius:'10px'}}>
<div style={{fontSize : '16px',color : '#efb26a'}}>{v['title']}</div>
return <div
style={{margin: '3px 0px', padding: '10px', border: '1px solid #111', borderRadius: '10px'}}>
<div style={{fontSize: '16px', color: '#efb26a'}}>{v['title']}</div>
<div style={{maxHeight: '150px', overflowY: 'scroll'}}>{v['text']}</div>
{v['title']==='main' ? <div style={{fontSize : '14px',color : '#efb26a',marginTop:'5px'}}>출력시 top, left는 0으로 출력됩니다.</div> : ''}
{v['title'] === 'main' ?
<div style={{fontSize: '14px', color: '#efb26a', marginTop: '5px'}}>출력시 top, left는 0으로
출력됩니다.</div> : ''}
</div>;
})
}
Expand Down Expand Up @@ -121,7 +124,7 @@ class RedPreview extends React.Component {
width: `${rootComponentState.device['width']}px`,
height: `${rootComponentState.device['height']}px`,
background: '#fff',
overflow : 'hidden'
overflow: 'hidden'
}}>
<div style={{
// position: 'absolute',
Expand Down
38 changes: 23 additions & 15 deletions src/editor/canvas/RedCanvas.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class RedCanvas extends React.Component {
drawCall(canvasInfo, layers, bgColor) {
const rootComponent = this.props.rootComponent;
// console.log('this',this)
console.log(rootComponent.state);
// console.log(rootComponent.state);
const rootComponentState = rootComponent.state;
const activeSubData = rootComponentState.activeSubData || (rootComponentState.activeSubDataIndex = 0 || rootComponentState.activeLayer['items'][0]);
/////////////////////
Expand All @@ -75,7 +75,7 @@ class RedCanvas extends React.Component {
////////////////////
/////////
const appState = this.props.appComponent.state;
const deviceData = appState['device']
const deviceData = appState['device'];
let beforeText = RedGradientEditComp.getContainerCssText(appState[ACTIVE_FRAME_KEY.BEFORE]);
let mainText = RedGradientEditComp.getContainerCssText(appState[ACTIVE_FRAME_KEY.MAIN]);
let afterText = RedGradientEditComp.getContainerCssText(appState[ACTIVE_FRAME_KEY.AFTER]);
Expand All @@ -88,7 +88,6 @@ class RedCanvas extends React.Component {
${afterText2}
`;

console.log(canvasInfo['addCss'] || ";");
const device = appState['device'];
return <>
<div
Expand Down Expand Up @@ -181,11 +180,19 @@ class RedCanvas extends React.Component {

/> : ''
}

{

this.state.visualEditMode === VISUAL_EDIT_MODE.GRADIENT
? this.renderGradientEdit(rootComponentState, activeSubData, canvasInfo, appState)
? <>
{this.renderContainerEdit(rootComponentState, activeSubData, canvasInfo, appState,false)}
{this.renderGradientEdit(rootComponentState, activeSubData, canvasInfo, appState,true)}
</>
: this.state.visualEditMode === VISUAL_EDIT_MODE.CONTAINER
? this.renderContainerEdit(rootComponentState, activeSubData, canvasInfo, appState)
? <>
{this.renderGradientEdit(rootComponentState, activeSubData, canvasInfo, appState,false)}
{this.renderContainerEdit(rootComponentState, activeSubData, canvasInfo, appState,true)}
</>
: this.renderBorderRadiusEdit(rootComponentState, activeSubData, canvasInfo, appState)
}
</div>
Expand Down Expand Up @@ -267,8 +274,8 @@ class RedCanvas extends React.Component {
left: '50%',
textAlign: 'center',
transform: 'translate(-50%,0)',
display:'flex',
alignItems:'center'
display: 'flex',
alignItems: 'center'
}}>
<div style={style.canvasViewInfo}>
<div style={style.toCenter} onClick={() => this.setState({canvasViewOffsetX: 0, canvasViewOffsetY: 0})}>set
Expand All @@ -277,15 +284,16 @@ class RedCanvas extends React.Component {
<div style={style.toScale} onClick={() => this.setState({canvasViewScale: 1})}>setScale 1x</div>
<div style={style.toScale} onClick={() => this.setState({canvasViewScale: 0.5})}>setScale 0.5x</div>
</div>
<div style={{textAlign:'left',width : '210px'}}>
<div style={{textAlign: 'left', width: '210px'}}>
<div style={{
display:'inline-block',
marginLeft:'5px',
background:'#333',
borderRadius : '4px',
padding : '3px 8px',
whiteSpace:'nowrap',
color: '#fff'}}><span style={{color: '#efb26a'}}>Center </span>
display: 'inline-block',
marginLeft: '5px',
background: '#333',
borderRadius: '4px',
padding: '3px 8px',
whiteSpace: 'nowrap',
color: '#fff'
}}><span style={{color: '#efb26a'}}>Center </span>
: {this.state.canvasViewOffsetX.toFixed(2)},{this.state.canvasViewOffsetY.toFixed(2)} <span
style={{color: '#efb26a'}}>ViewScale </span> : {this.state.canvasViewScale.toFixed(2)}</div>
</div>
Expand Down

0 comments on commit 8f27a10

Please sign in to comment.