Skip to content

Latest commit

 

History

History
149 lines (106 loc) · 2.65 KB

README.md

File metadata and controls

149 lines (106 loc) · 2.65 KB
Raw

EasyLogic Studio

EasyLogic Studio is built using CSS and SVG to reduce the gap between web design and code. The goal is to have the same point in time between the designer's design and the developer's output.

This project is sapa based.

Screen Shot

Features

Support Element

  • Artboard
  • Rect
  • Circle
  • Text
  • Image
  • SVG Path (with Rect, Circle)
  • SVG Spline
  • SVG Polygon
  • SVG Star
  • SVG TextPath

Style

  • Alignment
  • Position
  • Size (pixel based)
  • Layout (flex, grid, abolute)
  • Constraints (auto resizing)
  • Many styling tools
    • background (support resizing tool)
    • font & text style
    • gradient (multiple background images )
    • border & radius
    • filter
    • clip-path (support svg path )
    • box-shadows (multiple)
    • text-shadows (multiple)

Animation

  • Transition
  • Animation & Keyframes
  • Support cubic-bezier editor

Code & Share

  • Support code viewer
  • Support png & svg download

Drawing

  • Support mini path editor

Theming

  • dark
  • light

Development

git clone https://github.com/easylogic/editor.git
cd editor
npm install 
npm run dev

build

npm run build

Open Editor

please refer to src/index.html, src/index.js

  <body>
    <div id="app"></div>    
  </body>
import EasyLogic from "@easylogic/editor";

var app = new EasyLogic.createDesignEditor({
  container: document.getElementById('app'),
  data: {
    projects: [{
      itemType: 'project', 
      layers: [
        {itemType: 'rect', x: 0, y: 0, width: 100, height: 100, 'background-color': 'red'},
        {itemType: 'rect', x: 20, y: 20, width: 100, height: 100, 'background-color': 'green'},
        {itemType: 'rect', x: 40, y: 40, width: 100, height: 100, 'background-color': 'blue'}
      ]
    }],
  },
  plugins: [
    // define plugin 
    function (editor) {
      console.log(editor);
    }
  ]
});

Configs

You can set some useful configs.

var app = new EasyLogic.createDesignEditor({
  container: document.getElementById('app'),
  config: {
    "style.canvas.backgroud.color": "#FDC111"
    "show.ruler": false,
    "show.left.panel": false,
    "show.right.panel": false
  },
})

Plugins

please refer to MakeEditor

Thanks to

License : MIT