{"id":22282621,"url":"https://github.com/carbonfive/interaction-map-example","last_synced_at":"2025-03-25T19:44:55.996Z","repository":{"id":66259833,"uuid":"40146925","full_name":"carbonfive/interaction-map-example","owner":"carbonfive","description":"A simple drawing app implementated as an demonstration of the Interaction Map Pattern","archived":false,"fork":false,"pushed_at":"2015-10-20T20:16:33.000Z","size":253,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":63,"default_branch":"master","last_synced_at":"2025-01-30T17:36:59.031Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/carbonfive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-03T20:41:18.000Z","updated_at":"2015-10-20T17:57:03.000Z","dependencies_parsed_at":"2023-02-23T09:45:20.912Z","dependency_job_id":null,"html_url":"https://github.com/carbonfive/interaction-map-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbonfive%2Finteraction-map-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbonfive%2Finteraction-map-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbonfive%2Finteraction-map-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbonfive%2Finteraction-map-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carbonfive","download_url":"https://codeload.github.com/carbonfive/interaction-map-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245534530,"owners_count":20631285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-03T16:34:02.474Z","updated_at":"2025-03-25T19:44:55.980Z","avatar_url":"https://github.com/carbonfive.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Interaction Map: A Design Pattern for Context Dependent User Interactions\n\n## Summary\nWhat follows is a description of a design pattern that I'm calling the Interaction Map Pattern. It is intended to be \nused when implementing a user interface that responds to the same event in a number of different ways, depending on the\ncontext and/or state of the application when the event is invoked. For example, in a drawing application pressing the \nmouse down, dragging the cursor, then releasing the mouse will have one effect when the 'paintbrush' tool is selected,\nanother when the 'eraser' tool is selected, yet another when the 'select' tool is selected, and so on.\n\nThe Interaction Map Pattern attempts to reduce the cognitive overhead required to understand and modify the code for \nsuch user interfaces by explicitly defining every possible state and also the state transitions. The pattern is similar\nto a state machine except that it is permissible to \"jump\" between states that are not explicitly connected by transition\nfunctions.\n\nAn added benefit of implementing an Interaction Map is that it creates an unambiguous vocabulary for the user interface \nwhich can be used to facilitate communication amongst developers as well as between developers and non-technical\nmembers of the team.\n\n## The Pattern\nThe Interaction Map pattern consists of three primary components: A collection of __Interaction Modes__, an \n__Interaction Map__, and an __Interaction Delegator__. The pattern also expects a secondary component that I'll call \nan __Interaction Controller__. What follows is an overview of the responsibility of each component.\n\n### Interaction Mode\nThe __Interaction Mode__ is the fundamental unit of the Interaction Map pattern. Each __Interaction Mode__ defines a\nmode name, a set of __Transition Functions__ that are responsible for deciding if the mode should handle a given \nevent, and a set of __Event Handlers__ that are responsible for responding to events that the mode cares about. \n\n### Interaction Map\nAn __Interaction Map__ contains a register of available __Interaction Modes__. Only one mode may be active at any \ngiven time. The __Interaction Map__ is responsible for keeping track of the enabled mode and for invoking event \ntransition and handler functions on it.\n\n### Interaction Delegator\nThe __Interaction Delegator__ is responsible for delegating events to an __Interaction Map__. In the sample \nimplementation it is also responsible for notifying observers when the enabled __Interaction Mode__ changes. For the \npurpose of the pattern description, I haven't decided if mode change notification should be considered an __Interaction \nDelegator__ responsibility.\n\n### Interaction Controller\nThe __Interaction Controller__ is responsible for interactions with the larger application. I am calling it a \ncontroller here because in the sample implementation the meat of the domain logic is implemented with an MVC pattern,\nbut the Interaction Map pattern is not proscriptive about the behavior of the __Interaction Controller__. It can be any \ntype of object. The important thing is that the __Interaction Map__ MUST pass the __Interaction Controller__ to \nthe __Interaction Mode's__ __Transition Functions__ and __Event Handlers__.\n\n## The Flow\nThe pattern works like this:\n  1. The interaction delegator receives an event.\n  2. The interaction delegator sends the event to the Interaction Map.\n  3. The interaction map calls the `transition` function on the active interaction mode.\n  4. The interaction mode calls the transition function that matches the event name passed into `transition`, if it \n  exists, and returns the transition function's return value. If no transition function is defined the interaction \n  mode may either return it's own name or a falsy value.\n  5. If the `transition` function returns the name of a different interaction mode then the interaction delegator \n  switches the active interaction mode to match the one named.\n  6. The interaction delegator calls the `handle` method on the active interaction mode (which may have changed in \n  step 4). \n  7. The interaction mode calls the event handler that matches the event name passed into `handle`, if it exists. If \n  no event handler exists the event is ignored.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarbonfive%2Finteraction-map-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarbonfive%2Finteraction-map-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarbonfive%2Finteraction-map-example/lists"}