Neoteric Plumbing Mishap

    @easylogic/editor
    TypeScript icon, indicating that this package has built-in type declarations

    0.13.4 • Public • Published

    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

    Install

    npm i @easylogic/editor

    DownloadsWeekly Downloads

    3

    Version

    0.13.4

    License

    MIT

    Unpacked Size

    4.26 MB

    Total Files

    10

    Last publish

    Collaborators

    • easylogic