1580158
/
sd-canvas-editor
mirror of https://github.com/jtydhr88/sd-canvas-editor.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

rebuild polotno

pull/15/head
jtydhr88 2023-04-16 12:58:08 -04:00
parent 17ad16faf1
commit 549b49397a
8 changed files with 287 additions and 350 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,3 +1,6 @@
.idea/
venv/
dist/
node_modules/
**/__pycache__/**
package-lock.json

15
javascript/lazyload/canvas-editor.js
View File

@ -19,16 +19,13 @@ await _import();
const apiKey = gradioApp().querySelector('#canvas-editor-polotno-api-key');
const apiKeyValue = apiKey.value;
const { store } = createPolotnoApp({
// this is a demo key just for that project
// (!) please don't use it in your projects
// to create your own API key please go here: https://polotno.com/cabinet
createPolotnoApp({
key: apiKeyValue,
// you can hide back-link on a paid license
// but it will be good if you can keep it for Polotno project support
showCredit: true,
container: container,
});
container: container
});
const store = getPolotnoStore();
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],

508
js/polotno.bundle.js
View File

File diff suppressed because one or more lines are too long

18
package.json Normal file
View File

@ -0,0 +1,18 @@
{
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/preset-env": "^7.21.4",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.2",
"css-loader": "^6.7.3",
"html-webpack-plugin": "^5.5.1",
"style-loader": "^3.3.2",
"webpack": "^5.79.0",
"webpack-cli": "^5.0.1"
},
"dependencies": {
"polotno": "^1.8.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}

10
public/index.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

48
src/index.js Normal file
View File

@ -0,0 +1,48 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { PolotnoContainer, SidePanelWrap, WorkspaceWrap } from 'polotno';
import { Toolbar } from 'polotno/toolbar/toolbar';
import { ZoomButtons } from 'polotno/toolbar/zoom-buttons';
import { SidePanel } from 'polotno/side-panel';
import { Workspace } from 'polotno/canvas/workspace';
import { createStore } from 'polotno/model/store';
export const App = ({ store }) => {
return (
<PolotnoContainer style={{ width: '95vw', height: '100vh' }}>
<SidePanelWrap>
<SidePanel store={store} />
</SidePanelWrap>
<WorkspaceWrap>
<Toolbar store={store} />
<Workspace store={store} />
<ZoomButtons store={store} />
</WorkspaceWrap>
</PolotnoContainer>
);
};
let _store;
export const createPolotnoApp = ({ key, container }) => {
const store = createStore({
key: key,
showCredit: true,
});
store.addPage();
const root = ReactDOM.createRoot(container);
root.render(<App store={store} />);
_store = store;
};
export const getPolotnoStore = () => {
return _store;
};
window.createPolotnoApp = createPolotnoApp;
window.getPolotnoStore = getPolotnoStore;

0
src/styles.css Normal file
View File

33
webpack.config.js Normal file
View File

@ -0,0 +1,33 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'polotno.bundle.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html',
}),
],
};