/DesignPad_Angular10_firebase

Primary LanguageTypeScript

Design Pad ( Demo )

This project is a design site like Microsoft Powerpoint.

What's included

Demo

Live Demo
Home Image
Element Text

Getting Started

  • Install dependancies
npm install
  • Run the application
ng serve
  • Build the application
ng build --prod
  • Deploy
firebase deploy

Firebase setup

  • Project and billing

Create a project and enable these things

- firebase authentication (email, google, facebook)
- firestore
- hosting
- storage
  • environment.ts

Your angular environment.ts file has firebase setup. Replace that config with yours.

Documentation

Components Directory

  • views (src\app\views)
    • admin : admin page
    • app
      • design-panel : the page include toolbar and design panel
      • page
        • edit-item, text-item
          • edit-item : Quill.js is used for text clip. There are two elements to show quill text and curve text.
          • text-item : area to select the text
        • element
          • svgelement : To show the svg image
          • svgselector : To select the svg
        • image
          • image-element: To show the image
          • image-selector: To select the image
    • sidebar : To add item on design pad
      • elements : To show uploaded svg images on sidebar
      • photos : To show uploaded images on sidebar
      • templates : To show saved admin and user templates on sidebar
      • text : To show styled text on sidebar
      • user-uploads : User can upload files from devices
    • toolbar : To handle the style of the clips. It is shown when clip is put on pad
    • toolpanel : This is shown on sidebar
      • filter: To filter images. This is on image toolbar.
      • preset : To show filtered image
      • font-list: To select google fonts
      • text-effects : Add effect to text
    • topnav : user setting drop menu
  • home : home page
  • user : auth page

Functionality of the product

  • Templates : Save admin and user templates (src\app\views\app\design-panel\design-panel.component.ts)
    • UploadTemplate( ) : Save the thumbnail and the data to firestore.

      The data (src\app\services\design.service.ts : theDesign) is the info of the design pad.

    • Elements : Get color of SVG image is loaded. (src\app\views\app\page\element\svgelement\svgelement.component.ts)

      getSVGColorCollection( ) : This is called when SVG image is loaded.

    • Text : google fonts (src\app\views\app\app.component.ts)

      ngOnInit() : When first page is loaded, google fonts is imported

    • design.service.ts (src\app\services\design.service.ts)
      • theDesign : the info of the design pad
        • theDesign.category.size

          The width and height of the design pad.

        • theDesign.pages

          There are all pages that is created.

        • theDesign.pages[ index of the pages ].items

          There are all items that is put on this page.

      • addItemToCurrentPage(item)

        This item is added to selected page.

      • onKeyEvent( )
        • MouseEvent
        • Undo and Redo
        • Drag item using arrow button
        • Copy and Paste item
    • moveable.service.ts (src\app\services\moveable.service.ts)
      • initSelecto()

        Create new selecto

      • onSelectTarget(targets)

        This targets are items that is selected. Add moveable to items { makeMoveableImage(thePageId, targets[0]) }

      • resizeObserver()

        Detect changed of the text area

      • curveTextObserver()

        Detect changed of the curved text area

    • download.service.ts (src\app\services\download.service.ts)
      • downloadAsPdf()

        Download all pages as pdf.

      • downloadAsImg()

        Download all pages as image

    • toolbar.service.ts (src\app\services\toolbar.service.ts)
      • createTextEditor()

        Create quill editor

    • authentication (src\app\shared\auth.service.ts)
    • auth guard (src\app\shared\auth.guard.ts)