Flex-Editor

A layout editor forReact.

Installation

flex-editor is available as an npm package.

npm install flex-editor

Example

https://dht.github.io/flex-editor

Usage

Here is a quick example to get you started:

Import

 import FlexEditor from 'flex-editor/FlexEditor';

Add to reducers

import flexState from 'flex-editor/reducers';
 
const reduxApp = combineReducers({
   flexState,
   /// ...other reducers
});
 
export default reduxApp;
 

Simple

<div style={{position: 'fixed',top: 0,left: 0,right: 0,bottom: 0}}>
    <FlexEditor
        colors={[{color: '#060', title: 'green'}]}
        fonts={[{value: "Tisa Pro, Tisa OT, serif", title: "Tisa Pro"}]}
        width={1000}
        height={600}
        showDataButtons={true}/>
</div>

API Flex-editor holds its state in aRedux store. To access the store you can use the following API methods:

import * as api from 'flex-editor';
 

#### Properties

Property	Description
flexState	The combined reduces of flex-editor
ElementTypes	eNum of element Types (image, text...)
ActionTypesElements	Get the action types in the element reducer
ActionTypesAppState	Get the action types in the appState reducer

#### Method

Method	Description
clearFieldModal()	Hides the field modal
configOverlay(options)	Sets the overlay image
	{url: url, width: width, height: height}
changeOverlayVerPosition(delta)	Nudges the vertical position by X px
changeOverlayHorPosition(delta)	Nudges the horizontal position by X px
changeOverlayOpacity(opacity)	Changes the opacity to X
toggleOverlay()	Show/hides overlay
resetOverlay()	Clears overlay configuration
addUIMessage(message, isSticky)	Adds a user message
clearUIMessages()	Clears UI message
setResolution(resolution)	Set appState to a certain resolution (1-4)
addView(data)	Add a view to current position with data
addElement(...args)	Add an element to current position with data
	args: elementType, parent_id, style, data
setElements(elements)	Set the editor's initial elements
resetScreen()	Resets editor's content to initial state
setDataField(fieldName, fieldType)	Set field variable for selected element
setStyleField(fieldName, cssKey)	Set style variable for selected element
loadResolution(resolution)	Load styles of a certain resolution (1-4)
loadResolution(resolution)	Load styles of a certain resolution (1-4)
applyClass(element_id, className)	Applies a className for a certain element
applyVars(element_id, key, value)	Merges a variable key with new json value
applyContent(element_id, content)	Sets an element's content
refreshSelector(delay?)	Refreshes the selector's box
setSelectedElement(...args)	Set a selected element
	args: id, parent_id, elementType

Contribution

To run locally install all the dependencies:

dev:

npm install

peer:

npm install react@^15.4.1 react-dom@^15.4.1 material-ui@^0.18.6 redux@^3.6.0 redux-thunk@^2.1.0 react-redux@^4.4.6 react-tap-event-plugin@^2.0.0

run with npm:

npm start

and open:http://localhost:3000

first test was added as a starting point:

npm test

We need to understand how to trigger long key presses and mouse moves in enzyme to further test this component. Any contributions are welcomed.

License

This project is licensed under the terms of the MIT license