Deep Tailor 1069a45cfc Flexible Layout (#2201)
* first cut of flexible layout

* better drag handling

* add drop targets to every row

* enable drag and drop between columns and rows

* enable persistance

* add editing capability

* chage rows to frames and columns to containers, switch draggable to whole frame object

* Merge latest, resolve conflicts.

Need to just apply these changes to Deep's branch and push

* enhancements to drag targets

* WIP in flexibleLayout, container.vue files

- Refined classes and markup;
- min-width changed to flex-basis;
- Added toggle direction button;

* Significant progress but still WIP

- Refined classes and markup;
- Layout toggling working;
- Add Container working properly;
- TODOs: fix sizing in empty container, fix bordering, more refinements;

* add resizing of frames - still wip

* Significant enhancements

- Moved all CSS into flexibleLayout.vue;
- Layout now improved for empty container and drop hints;
- Proportional sizing now better for frames and containers;

* Resize handle WIP

* abstract splitter and logic into self contained component that will emit an event when mouse is moving

* Resize handle WIP

- Minor tweak to handle padding and hover;

* add container resize todo persist

* persist container resize

* add frame header, fix column resize on last column

* Refinements to resize-handle

- Fixed sizing;
- Transition on hover;
- TODOs: needs is-dragging to maintain hover style while dragging;

* fix drop hints showing after drop

* move header

* improve mouse move gesture

* Added frame size indicator

* add snapto functionality

* Refined container and frame size indicators

- Also added overflow handling to l-grid-view

* improve resizing logic

* add selection on frames

* Various resizing-frames related

- Fixed overflow - now frame widths can be collapsed to 5% minimum;
- Sizing indicators refined, better positioning and layout;
- Added grippy drag indicators to column heads;
- TODOs: add column head cursors and hover effects, hide indicators
when not in edit mode, handle nested layout and flex layouts while
editing

* Selecting and emtpy layout messaging

- Better empty layout message;
- Moved s-selected to proper element in c-fl-frame;

* Drop-hint and sizing related various

- Drop-hints for first placeholder container now display;
- Drop-hints moved into drag-wrapper;

* add delete frame

* Editing various

- Adjust Snow theme constants related to editing;
- Changed delete message wording;

* Updated icon and added description

* add toggle and remove container to toolbar

* miscellaneous cleanup

* add container button to toolbar

* improve toolbar

* code cleanup in plugin.js

* Various icons, toolbar separator

- Copied in c-toolbar__separator and associated changes in _controls
from Pegah's layout_alpha branch - may have conflicts later.
- Added separator to FL toolbar;
- Updated icons for grippy-ew, toolbar icons;

* add check for empty containers"

* logic to resize frames on drop

* fix delete frame and persisting toolbar

* Significant changes to edit / selection styling

- Both Flexible and fixed Display Layouts addressed;
- Both themes addressed;
- Changed drop-hint icon to icon-plus;

* add correct icons to frame header and fix toolbars showing up in wrong views

* Moving and resizing various

- Cursors;
- Grippy added to frame resize-handle, WIP!;

* add container reordering

* add frame/no frame support to toolbar'

* fix regression of resize handles showing after last frame in container

* force selection of flexible-layout when editing is first clicked, to apply correct toolbar

* make changes to simplify toolbar

* Modified sizing algorithm slightly

* make changes reviewer requested

* fix regression that causes top drop hint to not show

* remove unused variables and bind events to vue

* unsub selection before destroy
2018-11-08 17:17:14 -08:00
2018-11-06 13:22:44 -08:00
2018-11-08 17:17:14 -08:00
2018-08-07 14:47:50 -07:00
2018-07-16 15:21:38 -07:00
2018-10-11 11:33:33 -07:00
2017-04-23 08:10:13 -07:00
2018-09-13 14:19:55 -07:00
2018-11-08 17:17:14 -08:00
2016-09-30 17:31:33 -07:00
2018-08-31 12:03:15 -07:00
2018-08-31 12:03:15 -07:00
2018-08-07 14:47:50 -07:00

Open MCT license

Open MCT (Open Mission Control Technologies) is a next-generation mission control framework for visualization of data on desktop and mobile devices. It is developed at NASA's Ames Research Center, and is being used by NASA for data analysis of spacecraft missions, as well as planning and operation of experimental rover systems. As a generalizable and open source framework, Open MCT could be used as the basis for building applications for planning, operation, and analysis of any systems producing telemetry data.

Please visit our Official Site and Getting Started Guide

See Open MCT in Action

Try Open MCT now with our live demo. Demo

New API

A simpler, easier-to-use API has been added to Open MCT. Changes in this API include a move away from a declarative system of JSON configuration files towards an imperative system based on function calls. Developers will be able to extend and build on Open MCT by making direct function calls to a public API. Open MCT is also being refactored to minimize the dependencies that using Open MCT imposes on developers, such as the current requirement to use AngularJS.

This new API has not yet been heavily used and is likely to contain defects. You can help by trying it out, and reporting any issues you encounter using our GitHub issue tracker. Such issues may include bugs, suggestions, missing documentation, or even just requests for help if you're having trouble.

We want Open MCT to be as easy to use, install, run, and develop for as possible, and your feedback will help us get there!

Building and Running Open MCT Locally

Building and running Open MCT in your local dev environment is very easy. Be sure you have Git and Node.js installed, then follow the directions below. Need additional information? Check out the Getting Started page on our website. (These instructions assume you are installing as a non-root user; developers have reported issues running these steps with root privileges.)

  1. Clone the source code

git clone https://github.com/nasa/openmct.git

  1. Install development dependencies

npm install

  1. Run a local development server

npm start

Open MCT is now running, and can be accessed by pointing a web browser at http://localhost:8080/

Documentation

Documentation is available on the Open MCT website. The documentation can also be built locally.

Examples

The clearest examples for developing Open MCT plugins are in the tutorials provided in our documentation.

For a practical example of a telemetry adapter, see David Hudson's Kerbal Space Program plugin, which allows Kerbal Space Program players to build and use displays for their own missions in Open MCT.

Additional examples are available in the examples hierarchy of this repository; however, be aware that these examples are not fully-documented, so the tutorials will likely serve as a better starting point.

Building the Open MCT Documentation Locally

Open MCT's documentation is generated by an npm-based build. It has additional dependencies that may not be available on every platform and thus is not covered in the standard npm install. Ensure your system has libcairo installed and then run the following commands:

  • npm install
  • npm install canvas nomnoml
  • npm run docs

Documentation will be generated in target/docs.

Deploying Open MCT

Open MCT is built using npm

To build Open MCT for deployment:

npm run prepare

This will compile and minify JavaScript sources, as well as copy over assets. The contents of the dist folder will contain a runnable Open MCT instance (e.g. by starting an HTTP server in that directory), including:

  • openmct.js - Open MCT source code.
  • openmct.css - Basic styles to load to prevent a FOUC.
  • index.html, an example to run Open MCT in the basic configuration.

Tests

Tests are written for Jasmine 3 and run by Karma. To run:

npm test

The test suite is configured to load any scripts ending with Spec.js found in the src hierarchy. Full configuration details are found in karma.conf.js. By convention, unit test scripts should be located alongside the units that they test; for example, src/foo/Bar.js would be tested by src/foo/BarSpec.js. (For legacy reasons, some existing tests may be located in separate test folders near the units they test, but the naming convention is otherwise the same.)

Test Reporting

When npm test is run, test results will be written as HTML to target/tests. Code coverage information is written to target/coverage.

Glossary

Certain terms are used throughout Open MCT with consistent meanings or conventions. Any deviations from the below are issues and should be addressed (either by updating this glossary or changing code to reflect correct usage.) Other developer documentation, particularly in-line documentation, may presume an understanding of these terms.

  • bundle: A bundle is a removable, reusable grouping of software elements. The application is composed of bundles. Plug-ins are bundles. For more information, refer to framework documentation (under platform/framework.)
  • capability: An object which exposes dynamic behavior or non-persistent state associated with a domain object.
  • composition: In the context of a domain object, this refers to the set of other domain objects that compose or are contained by that object. A domain object's composition is the set of domain objects that should appear immediately beneath it in a tree hierarchy. A domain object's composition is described in its model as an array of id's; its composition capability provides a means to retrieve the actual domain object instances associated with these identifiers asynchronously.
  • description: When used as an object property, this refers to the human-readable description of a thing; usually a single sentence or short paragraph. (Most often used in the context of extensions, domain object models, or other similar application-specific objects.)
  • domain object: A meaningful object to the user; a distinct thing in the work support by Open MCT. Anything that appears in the left-hand tree is a domain object.
  • extension: An extension is a unit of functionality exposed to the platform in a declarative fashion by a bundle. For more information, refer to framework documentation (under platform/framework.)
  • id: A string which uniquely identifies a domain object.
  • key: When used as an object property, this refers to the machine-readable identifier for a specific thing in a set of things. (Most often used in the context of extensions or other similar application-specific object sets.)
  • model: The persistent state associated with a domain object. A domain object's model is a JavaScript object which can be converted to JSON without losing information (that is, it contains no methods.)
  • name: When used as an object property, this refers to the human-readable name for a thing. (Most often used in the context of extensions, domain object models, or other similar application-specific objects.)
  • navigation: Refers to the current state of the application with respect to the user's expressed interest in a specific domain object; e.g. when a user clicks on a domain object in the tree, they are navigating to it, and it is thereafter considered the navigated object (until the user makes another such choice.)
  • space: A name used to identify a persistence store. Interactions with persistence will generally involve a space parameter in some form, to distinguish multiple persistence stores from one another (for cases where there are multiple valid persistence locations available.)
Description
A web based mission control framework.
Readme 197 MiB
Languages
JavaScript 62.4%
Vue 28.6%
SCSS 8.4%
HTML 0.4%
Shell 0.2%