react-designer-core
v1.4.1
Published
React-designer-core is a set of core components for easy content creation.
Downloads
40
Readme
react-designer-core
React-designer-core is a set of core components for react-designer. This is WYSIWYG editor for easy content creation (legal contracts, business forms, marketing leaflets, technical guides, visual reports, rich dashboards, tutorials and other content, etc.).
Live demos
Main goals
- it is for developers - to use it in your own solutions with your own widgets (components)
- it is based on simple principals
- minimal JSON definition - PTT - maps directly to React components
- good performance even for big documents - due to usage of immutable structure using freezer-js
- simple extensible by custom components or frameworks (react-bootstrap, material-design, your company made widgets, etc.)
- offers standard design components (Workplace, Container, Box, ObjectBrowser) and features
It comes with core components typical for WYSIWYG designers
- Workplace - main working area for drawing documents
- ObjectTree - logical component tree - enables to search and move components between nodes
Document definition is done in JSON - uses PTT
- document definition - simple JSON - Page Transform Tree (PTT) - it is framework agnostic definition
- document rendering - visual component tree - React virtual DOM - rendering to DOM so that it maps each component (terminal node) from logical tree to react component and its properties
Document definition - PTT
The PPT format is framework agnostic document description. It enables to dynamically render pages in different sizes (A4,A3,Letter,...),in various formats (html,pdf,...) and for various visual media (screen, papers).
It is a simple component tree that consists of these two nodes
- containers - nodes that are containers for other components - visual and logical grouping of parts of document (sections, containers,grids, rows, cells, panels, etc. )
- boxes - terminal nodes (leaf) that are visible components - (components, boxes, widgets) - renders to document (typically by simple mapings to props of component)
There is an minimal 'Hello world' example. The PTT consists of one container and one box with TextBox element.
{
"name": "Hello World Example",
"elementName": "PTTv1",
"containers": [
{
"name": "My first container",
"elementName": "Container",
"style": { "top": 0, "left": 0, "height": 200, "width": 740, "position": "relative" },
"boxes": [{
"name": "My first text",
"elementName": "TextContent",
"style": { "top": 0, "left": 0 },
"props":{
"content": "Hello world"
}
}]
}]
}
See the full PTT specification.
Document rendering - visual component tree - PTT rendering in react
To render react components specifies in react is really simple
render:{
{this.props.boxes.map(function (box, i) {
var component = React.createElement(widget,box, box.content!== undefined?React.DOM.span(null, box.content):undefined);
return (
<div style={box.style}>
{component}
</div>
);
}, this)}
}
Demo & Examples
To build the examples locally, run:
npm install
gulp dev
Then open localhost:8000
in a browser.
Installation
The easiest way to use this component is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).
You can also use the standalone build by including dist/react-designer-core.js
in your page. If you use this, make sure you have already included React, and it is available as a global variable.
npm install react-designer-core --save
Usage
import {Workplace,ObjectBrowser} from 'react-designer-core';
import React from 'react';
import Freezer from 'freezer-js';
import Designer from './Designer';
// Create a Freezer store
var freezer = new Freezer({
schema: {
elementName: 'ObjectSchema',
name: 'New Document',
containers: []
}
})
export default class AppContainer extends React.Component {
componentDidMount() {
var me = this;
// 2. Your app get re-rendered on any state change
freezer.on('update', function () {
me.forceUpdate()
});
}
render() {
// 1. Your app receives the state
var state = freezer.get();
return <Designer state={ state } />;
}
}
import React from 'react';
import {Workplace,ObjectBrowser} from 'react-designer-core';
import Widgets from './Widgets';
import WidgetRenderer from './WidgetRenderer';
export default class Designer extends React.Component {
constructor(props) {
super(props);
this.state = {
current: {
node: props.state.schema
},
snapGrid: [10, 10]
}
}
currentChanged(currentNode, path) {
if (currentNode === undefined) return;
this.setState({
current: {
node: currentNode,
path: path === undefined ? this.state.current && this.state.current.path : path
}
}
);
}
render() {
var schema = this.props.state.schema;
return
<div className="index">
<Workplace schema={schema} current={this.state.current}
currentChanged={this.currentChanged.bind(this)} widgets={Widgets}
widgetRenderer={WidgetRenderer} snapGrid={this.state.snapGrid}/>
<ObjectBrowser rootNode={schema} current={this.state.current}
currentChanged={this.currentChanged.bind(this)}/>
</div>
}
}
See the example folder to see more features.
License
MIT. Copyright (c) 2015 Roman Samec