Giter Site home page Giter Site logo

floido-designer's People

Contributors

davidabgaryan avatar sandor avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

floido-designer's Issues

#2 – Typography

Typography
– colors: same problems as everywhere
– the numberinputs (font size, Line height, spacing, border) are not reflecting the changes of the sliders
– text border does not accepting "0" – so there is a border even if it should not be. Should be initially "0"

Important – !:
– if a NON text object (like rectangle etc.) is selected, all the text controls should be disabled
– if a TEXT object is selected all the styling control should be disabled

#1. – Fix Panel tabs

– right and left panel: the initially active tab should be set as active (blue)
– left panel: the tabs for layers and pages should be changed by the icons in the TOP panel

Fix numerical values in the right panel

– The numerical values are not updating when you drag/scale/rotate the object with the mouse on the canvas.
– Numerical inputs should show the values without decimal units. I.E 400px and not 400.345px

– Check all Inputs if the are working or not...

# 4 – Implement image filters

Create it as filters.js – ???

The image filter in the Styling menu should be implemented and bounded to their respective controls. Implement the filters as array function. Here is some info and help for the implementation:

https://stackoverflow.com/questions/46326909/fabricjs-v-2-beta-enable-disable-filter/46359737#46359737

This should be now really trivial. All we have to do is to construct an array for the filters. The mechanism for activating – deactivating the respective filter is solved in the "Shadow" function I think (the switch should avt like the shadow switch)...

# 1.1. – Left and Right tab panels

This panels – and also other UI related panels and windows that we will introduce later on in the project – should be accessible from the main "electron" menu. So from the main app menu. After thinking over all the aspects now, following should happen with the tab panels on the left and right side.

Left Side menu:

– the panels on the left (layers and pages) should be physically bound to the left pane in the index.html
– the buttons in the toolbar.html file should remain as they where originally created (residing only in the toolbar on the top
– a click on this buttons should switch between Layers and Pages

Right Side Menu:

– the panels on the left (currently only Inspector. Later than Asset Library) should be physically bound to the left pane in the index.html

– the buttons in the toolbar.html file should remain as they where originally created (residing only in the topbar)
– a click on this buttons should switch (later) between Inspector, Asset Library etc. We should build this tab panels and switching mechanism (with some dummy content for asset library) just like for the left pannel...

# 3. – Text style underline

the text attribute uderline is defined in beta 2 as true or false. Please fix this in the functions and in the text panel

EDIT: We have to investigate this with the help of the developers. In beta2 this text decorations (overline, underline etc.) are handled differently than before

# 6. – Canvas background image

The size of the background image (scale) should be manipulated with the slider
Please add "Center on canvas" to the "Repeat" options (also as function)

# 5. – Align objects function

We need some functions to align objects on the canvas. Here is a reference for left, right center. Extend this to top, middle and bottom and connect to the little buttons in the element styling panel...

Inspiration (but be aware there is a bug in the code – play around to see it):

https://jsfiddle.net/rekrah/xxrqbhph/

Distribute object horizontally and vertically. We need also this function. Should be working like in Adobe applications.

Important: Problems with the XEL Toolkit

Some of the XEL Widgets (like radios etc.) are not acting as they should when we use AngularJS. Please examine why this is happening. Possible solution: examine the bindToValue functions and the getter and setter methods defined there...

Please make a reference function/binding for all the relevant XEL Widgets to check if the are working...

# 5. – Size with aspect ratio

In the element layout panel – when you click on the toggle button between Size-Width and Size-Height (toggled) the size should be scaled respecting the current aspect ratio of the object.

!!! Same applies for the object scale...

# 7. – Paste Images from the clipboard to canvas

There is a paster JS file that 'should' be doing this – pasting Images copied from OUTSIDE of floido on the floido canvas. I.E. copy in Photoshop and paste in floido as image file. This function is not working – would be great to have it....

# 8. – Clean up code

– The helpers.js file should be separated further in smaller (logical) chunks. I.E. creating object in one file, manipulating object/text properties in one file etc. etc

– please get rid of the word "kitchensink" in the JS files ;-))))

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.