Sign up for free to use this document yourself.

  • #Roadmap POC >>>

  • The below classes are just a basic guide to facilitating a proof of concept only, and do not necessarily reflect actual production.

  • SavedLayout

  • SlideshowModel

    • slides : Array<Slide>
    • currentlySelectedSlide : Slide

  • Upon loading a saved layout, it will generate a blueprint of LayoutDataModel and LayoutVisualModel respectively.

    and ….

  • LayoutVisualModel

    • visualHash : Hash<String nid, Visual>

  • LayoutDataModel

    • dataHash : Hash<String nid, String copy>
    • dataOrder : Array<String nid> or d-linked list
    • uidCounter: int = 0

  • Slide

    • SavedLayout // blueprint LayoutDataModel & LayoutVisualModel
    • dataModel : LayoutDataModel
    • visualModel : LayoutVisualModel

  • String nid (Node id)

    Node ids are in the following format:

    • Title.n
    • Title.n.n
    • Title.n.n.n
    • Text.n
    • Text.n.n
    • Text.n.n.n
    • Text.n.n.n.title
    • Image.n
    • Note.n
    • NoteBreak

    In the format of “Channel.n.n”, etc. To faciliitate in quick contextual lookups for possible binding. They are automatically generated by a saved layout, where n is a counter for the given Channel and consecutive level. 3rd “n” refers to a line node.

    And for any new nodes being generated on the fly while editing:

    • Title.New.N
    • Title.New.N.n
    • Text.New.N
    • Text.New.N.n
    • Image.New.N
    • Note.New.N
    • NoteBreak

    In the format of “Channel.New.N”, where “N” is a unique id counter. “n” refers to a consecutive line node.

  • Theme

  • Content

  • Style

  • 1. Proof of concept for Content (first step. single mock slide)

    SINGLE SLIDE TESTS:

    Tests is to be attempted across various slide layout schemes.

    Word Processor:

    Typing in word-processor to update an example mock slide visuals only.

    • Word processor core typing/ui functionality.
    • Word processor edit current slide’s LayoutDataModel.
    • Example slide template layout visual elements listen to changes to slide’s LayoutDataModel ‘s nodes to update the content visually on the slide, live. It also refers to blueprint’s LayoutVisualModel to see if it can match any undefined styles and positions in current slide’s LayoutVisualModel to the one in blueprint instead for any given nodes while content editing is being made.
    • Word processor to load a new LayoutDataModel upon changing layout and generate any placeholder texts if required.
    • Save word processor data into LayoutDataModel re-loadable format.

    Visual editor:

    • Drag visual elements around, apply S1-S3 stylings, etc. layout elements to scheme, link elements in flow, etc. Selection occurs due to word processor node focus as well (later can integrate). for now just use mouse selection, etc.
    • Save re-layouted visuals into LayoutVisualModel re-loadable format.
    • Load both LayoutVisualModel and LayoutDataModel to generate single slide DOM, or modify existing slide DOM.
    • Apply a Style to DOM element function. (to faciliate integration)
    • Focus-select on DOM element function. (to faciliate integration)

    Integration Wordprocessor/Visual Editor:

    Single slide:

    • Slide visual editor later to integrate to Wordprocessor and replace it’s mock slide implementation with proper editable one.

  • Visual

    • x : Number
    • y : Number
    • width : Number
    • height : Number
    • Style
    • flowFromPreviousNode:Boolean

  • CurrentSlideLayout

    • LayoutDataModel duplicate
    • LayoutVisualModel new instance

    … create a duplicate of LayoutDataModel keep track of current edits being made to the existing content layout for the existing slide.

    … create a new fresh instance of LayoutVisualModel to keep track of any slide visual changes that differ from the blueprint.

        • 2. Set up multiple slides tests

          • Create a new “Layout” panel trigger for newly-created slides….
          • SlideshowModel class to keep track of existing slides, currently selected slide, etc.

          Both visual editor and word processor

          • Modify visual editor and word processor to allow for creating of slides and handling of multiple slides

          Word processor

          • When navigating to an existing slide, navigate cursor and view to existing slide scroll position if navigation done outside of word processor .

          Visual editor

          • When navigating to an existing slide, refresh visuals by refering to it’s current LayoutVisualModel/LayoutDataMOdel being used for current Slide.
        {"cards":[{"_id":"525bdbfd60a769d11d00009e","treeId":"524bf2fc25a3bf6cd500001c","seq":1947561,"position":0.5,"parentId":null,"content":"#Roadmap POC &gt;&gt;&gt;\n---------"},{"_id":"525c415060a769d11d0000a7","treeId":"524bf2fc25a3bf6cd500001c","seq":1947518,"position":2,"parentId":"525bdbfd60a769d11d00009e","content":"### Theme"},{"_id":"525c418c60a769d11d0000a8","treeId":"524bf2fc25a3bf6cd500001c","seq":1947519,"position":3,"parentId":"525bdbfd60a769d11d00009e","content":"### Content"},{"_id":"525c41a660a769d11d0000a9","treeId":"524bf2fc25a3bf6cd500001c","seq":1947875,"position":4,"parentId":"525bdbfd60a769d11d00009e","content":"### Style"},{"_id":"525c746e60a769d11d000102","treeId":"524bf2fc25a3bf6cd500001c","seq":1947563,"position":0.75,"parentId":null,"content":"The below classes are just a basic guide to facilitating a proof of concept only, and do not necessarily reflect actual production."},{"_id":"524bf31025a3bf6cd500001e","treeId":"524bf2fc25a3bf6cd500001c","seq":1946968,"position":1,"parentId":null,"content":"## SavedLayout"},{"_id":"525bdcb560a769d11d0000a0","treeId":"524bf2fc25a3bf6cd500001c","seq":8736149,"position":0.5,"parentId":"524bf31025a3bf6cd500001e","content":"## 1. Proof of concept for Content (first step. single mock slide)\n\n\n### SINGLE SLIDE TESTS:\nTests is to be attempted across various slide layout schemes.\n\n###Word Processor:\n\n[ ] 1-way binding test to single slide:\n\nTyping in word-processor to update an example mock slide visuals only.\n\n- Word processor core typing/ui functionality.\n- Word processor edit current slide's LayoutDataModel.\n- Example slide template layout visual elements listen to changes to slide's LayoutDataModel 's nodes to update the content visually on the slide, live. It also refers to blueprint's LayoutVisualModel to see if it can match any undefined styles and positions in current slide's LayoutVisualModel to the one in blueprint instead for any given nodes while content editing is being made.\n- Word processor to load a new LayoutDataModel upon changing layout and generate any placeholder texts if required.\n- Save word processor data into LayoutDataModel re-loadable format.\n\n______\n###Visual editor:\n\n[ ] Single Slide editing \n\n- Drag visual elements around, apply S1-S3 stylings, etc. layout elements to scheme, link elements in flow, etc. Selection occurs due to word processor node focus as well (later can integrate). for now just use mouse selection, etc.\n- Save re-layouted visuals into LayoutVisualModel re-loadable format.\n- Load both LayoutVisualModel and LayoutDataModel to generate single slide DOM, or modify existing slide DOM.\n- Apply a Style to DOM element function. (to faciliate integration)\n- Focus-select on DOM element function. (to faciliate integration)\n\n_________________\n\n### Integration Wordprocessor/Visual Editor: \n### Single slide:\n- Slide visual editor later to integrate to Wordprocessor and replace it's mock slide implementation with proper editable one.\n\n_________________"},{"_id":"525cc47060a769d11d0001fe","treeId":"524bf2fc25a3bf6cd500001c","seq":1957644,"position":0.5,"parentId":"525bdcb560a769d11d0000a0","content":"## 2. Set up multiple slides tests\n\n- Create a new \"Layout\" panel trigger for newly-created slides....\n- SlideshowModel class to keep track of existing slides, currently selected slide, etc.\n\n### Both visual editor and word processor\n- Modify visual editor and word processor to allow for creating of slides and handling of multiple slides\n______\n\n### Word processor\n- When navigating to an existing slide, navigate cursor and view to existing slide scroll position if navigation done outside of word processor .\n\n### Visual editor\n- When navigating to an existing slide, refresh visuals by refering to it's current LayoutVisualModel/LayoutDataMOdel being used for current Slide."},{"_id":"525b8d5160a769d11d00007d","treeId":"524bf2fc25a3bf6cd500001c","seq":8736142,"position":1,"parentId":"524bf31025a3bf6cd500001e","content":"## Visual\n- x : Number\n- y : Number\n- width : Number\n- height : Number\n- Style\n- flowFromPreviousNode:Boolean"},{"_id":"525cdcbc60a769d11d000200","treeId":"524bf2fc25a3bf6cd500001c","seq":1948238,"position":4,"parentId":null,"content":"## SlideshowModel\n- slides : Array&lt;Slide&gt;\n- currentlySelectedSlide : Slide"},{"_id":"525b7f0960a769d11d000078","treeId":"524bf2fc25a3bf6cd500001c","seq":8736081,"position":4.25,"parentId":null,"content":"Upon loading a saved layout, it will generate a blueprint of LayoutDataModel and LayoutVisualModel respectively.\n\nand ....\n"},{"_id":"525b808e60a769d11d000079","treeId":"524bf2fc25a3bf6cd500001c","seq":1947391,"position":1,"parentId":"525b7f0960a769d11d000078","content":"### CurrentSlideLayout\n\n- LayoutDataModel duplicate\n- LayoutVisualModel new instance\n\n... create a duplicate of LayoutDataModel keep track of current edits being made to the existing content layout for the existing slide.\n\n... create a new fresh instance of LayoutVisualModel to keep track of any slide visual changes that differ from the blueprint.\n\n\n\n"},{"_id":"524bf35e25a3bf6cd500001f","treeId":"524bf2fc25a3bf6cd500001c","seq":8736141,"position":4.375,"parentId":null,"content":"## LayoutVisualModel\n- visualHash : Hash&lt;String nid, Visual&gt;"},{"_id":"524bf42d25a3bf6cd5000020","treeId":"524bf2fc25a3bf6cd500001c","seq":8736080,"position":4.5,"parentId":null,"content":"## LayoutDataModel\n- dataHash : Hash&lt;String nid, String copy&gt;\n- dataOrder : Array&lt;String nid&gt; or d-linked list\n- uidCounter: int = 0"},{"_id":"525ce2af60a769d11d000201","treeId":"524bf2fc25a3bf6cd500001c","seq":1947858,"position":5,"parentId":null,"content":"## Slide\n- SavedLayout // blueprint LayoutDataModel & LayoutVisualModel\n- dataModel : LayoutDataModel\n- visualModel : LayoutVisualModel"},{"_id":"525b8f7860a769d11d00007f","treeId":"524bf2fc25a3bf6cd500001c","seq":8731323,"position":6,"parentId":null,"content":"## String nid (Node id)\nNode ids are in the following format:\n- Title.n\n- Title.n.n\n- Title.n.n.n\n- Text.n\n- Text.n.n\n- Text.n.n.n\n- Text.n.n.n.title\n- Image.n\n- Note.n\n- NoteBreak\n\nIn the format of \"Channel.n.n\", etc. To faciliitate in quick contextual lookups for possible binding. They are automatically generated by a saved layout, where n is a counter for the given Channel and consecutive level. 3rd \"n\" refers to a line node.\n\nAnd for any new nodes being generated on the fly while editing:\n- Title.New.N\n- Title.New.N.n\n- Text.New.N\n- Text.New.N.n\n- Image.New.N\n- Note.New.N\n- NoteBreak\n\nIn the format of \"Channel.New.N\", where \"N\" is a unique id counter. \"n\" refers to a consecutive line node."}],"tree":{"_id":"524bf2fc25a3bf6cd500001c","name":"SFlide POC classes & roadmap","publicUrl":"sflide-poc-classes-roadmap"}}