mirror of
https://github.com/nasa/openmct.git
synced 2025-06-25 18:50:11 +00:00
Compare commits
48 Commits
plotly-tes
...
couchdb-pe
Author | SHA1 | Date | |
---|---|---|---|
8258f21f7b | |||
44bfcf33ef | |||
669415d362 | |||
8601ec441f | |||
9a57a20404 | |||
1a3bff9813 | |||
baa5f21640 | |||
af9dceee3c | |||
41138a1731 | |||
a54a2f8f84 | |||
5bbe710552 | |||
f2d34d7c33 | |||
8fa1770885 | |||
7221dc1ac6 | |||
25bb9939d6 | |||
e7e12504f2 | |||
63bf856d89 | |||
e3dcd51f8d | |||
cb63f4eca1 | |||
3f60c3c0f1 | |||
16bb22e834 | |||
b1467548da | |||
baa7c0bc58 | |||
73b81e38e7 | |||
8b088b7a2c | |||
894da25461 | |||
87d63806b9 | |||
f0e7f8cfc0 | |||
db597e1e93 | |||
98db273f5d | |||
8a6f944655 | |||
bacad24811 | |||
8cc58946cf | |||
3338bc1000 | |||
80c20b3d05 | |||
0d9558b891 | |||
c29c3c386f | |||
9ceb3c5b1e | |||
bee3a9eedf | |||
e515d19acd | |||
dd13efe065 | |||
b5dfbe268c | |||
a9b9107cc3 | |||
cfda4e4214 | |||
0a657de4b2 | |||
8153edb9cb | |||
dadb6120c2 | |||
d9a94db59d |
3
.gitignore
vendored
3
.gitignore
vendored
@ -37,4 +37,7 @@ protractor/logs
|
||||
# npm-debug log
|
||||
npm-debug.log
|
||||
|
||||
# karma reports
|
||||
report.*.json
|
||||
|
||||
package-lock.json
|
||||
|
@ -43,7 +43,9 @@
|
||||
openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
|
||||
);
|
||||
|
||||
openmct.install(openmct.plugins.LocalStorage());
|
||||
//openmct.install(openmct.plugins.LocalStorage());
|
||||
//Change 'vipersim' to whatever your local db is named
|
||||
openmct.install(openmct.plugins.CouchDB('http://localhost:5984/vipersim'));
|
||||
openmct.install(openmct.plugins.Espresso());
|
||||
openmct.install(openmct.plugins.MyItems());
|
||||
openmct.install(openmct.plugins.Generator());
|
||||
@ -113,7 +115,10 @@
|
||||
openmct.install(openmct.plugins.LADTable());
|
||||
openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
|
||||
openmct.install(openmct.plugins.ObjectMigration());
|
||||
openmct.install(openmct.plugins.ClearData(['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked']));
|
||||
openmct.install(openmct.plugins.ClearData(
|
||||
['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked'],
|
||||
{indicator: true}
|
||||
));
|
||||
openmct.start();
|
||||
</script>
|
||||
</html>
|
||||
|
@ -23,7 +23,7 @@
|
||||
/*global module,process*/
|
||||
|
||||
const devMode = process.env.NODE_ENV !== 'production';
|
||||
const browsers = [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'ChromeHeadless'];
|
||||
const browsers = [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'FirefoxHeadless'];
|
||||
const coverageEnabled = process.env.COVERAGE === 'true';
|
||||
const reporters = ['progress', 'html'];
|
||||
|
||||
@ -95,6 +95,7 @@ module.exports = (config) => {
|
||||
stats: 'errors-only',
|
||||
logLevel: 'warn'
|
||||
},
|
||||
singleRun: true
|
||||
singleRun: true,
|
||||
browserNoActivityTimeout: 90000
|
||||
});
|
||||
}
|
||||
|
@ -41,6 +41,7 @@
|
||||
"jsdoc": "^3.3.2",
|
||||
"karma": "^2.0.3",
|
||||
"karma-chrome-launcher": "^2.2.0",
|
||||
"karma-firefox-launcher": "^1.3.0",
|
||||
"karma-cli": "^1.0.1",
|
||||
"karma-coverage": "^1.1.2",
|
||||
"karma-coverage-istanbul-reporter": "^2.1.1",
|
||||
@ -59,7 +60,7 @@
|
||||
"moment-timezone": "0.5.28",
|
||||
"node-bourbon": "^4.2.3",
|
||||
"node-sass": "^4.9.2",
|
||||
"painterro": "^0.2.65",
|
||||
"painterro": "^1.0.35",
|
||||
"printj": "^1.2.1",
|
||||
"raw-loader": "^0.5.1",
|
||||
"request": "^2.69.0",
|
||||
|
@ -36,8 +36,6 @@ define(
|
||||
}
|
||||
|
||||
EditPersistableObjectsPolicy.prototype.allow = function (action, context) {
|
||||
var identifier;
|
||||
var provider;
|
||||
var domainObject = context.domainObject;
|
||||
var key = action.getMetadata().key;
|
||||
var category = (context || {}).category;
|
||||
@ -46,9 +44,8 @@ define(
|
||||
// is also invoked during the create process which should be allowed,
|
||||
// because it may be saved elsewhere
|
||||
if ((key === 'edit' && category === 'view-control') || key === 'properties') {
|
||||
identifier = objectUtils.parseKeyString(domainObject.getId());
|
||||
provider = this.openmct.objects.getProvider(identifier);
|
||||
return provider.save !== undefined;
|
||||
let newStyleObject = objectUtils.toNewFormat(domainObject, domainObject.getId());
|
||||
return this.openmct.objects.isPersistable(newStyleObject);
|
||||
}
|
||||
|
||||
return true;
|
||||
|
@ -43,7 +43,7 @@ define(
|
||||
);
|
||||
|
||||
mockObjectAPI = jasmine.createSpyObj('objectAPI', [
|
||||
'getProvider'
|
||||
'isPersistable'
|
||||
]);
|
||||
|
||||
mockAPI = {
|
||||
@ -69,34 +69,31 @@ define(
|
||||
});
|
||||
|
||||
it("Applies to edit action", function () {
|
||||
mockObjectAPI.getProvider.and.returnValue({});
|
||||
expect(mockObjectAPI.getProvider).not.toHaveBeenCalled();
|
||||
expect(mockObjectAPI.isPersistable).not.toHaveBeenCalled();
|
||||
|
||||
policy.allow(mockEditAction, testContext);
|
||||
expect(mockObjectAPI.getProvider).toHaveBeenCalled();
|
||||
expect(mockObjectAPI.isPersistable).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("Applies to properties action", function () {
|
||||
mockObjectAPI.getProvider.and.returnValue({});
|
||||
expect(mockObjectAPI.getProvider).not.toHaveBeenCalled();
|
||||
expect(mockObjectAPI.isPersistable).not.toHaveBeenCalled();
|
||||
|
||||
policy.allow(mockPropertiesAction, testContext);
|
||||
expect(mockObjectAPI.getProvider).toHaveBeenCalled();
|
||||
expect(mockObjectAPI.isPersistable).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("does not apply to other actions", function () {
|
||||
mockObjectAPI.getProvider.and.returnValue({});
|
||||
expect(mockObjectAPI.getProvider).not.toHaveBeenCalled();
|
||||
expect(mockObjectAPI.isPersistable).not.toHaveBeenCalled();
|
||||
|
||||
policy.allow(mockOtherAction, testContext);
|
||||
expect(mockObjectAPI.getProvider).not.toHaveBeenCalled();
|
||||
expect(mockObjectAPI.isPersistable).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("Tests object provider for editability", function () {
|
||||
mockObjectAPI.getProvider.and.returnValue({});
|
||||
mockObjectAPI.isPersistable.and.returnValue(false);
|
||||
expect(policy.allow(mockEditAction, testContext)).toBe(false);
|
||||
expect(mockObjectAPI.getProvider).toHaveBeenCalled();
|
||||
mockObjectAPI.getProvider.and.returnValue({save: function () {}});
|
||||
expect(mockObjectAPI.isPersistable).toHaveBeenCalled();
|
||||
mockObjectAPI.isPersistable.and.returnValue(true);
|
||||
expect(policy.allow(mockEditAction, testContext)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
@ -19,7 +19,13 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div class="c-object-label">
|
||||
<div class="c-object-label__type-icon {{type.getCssClass()}}" ng-class="{ 'l-icon-link':location.isLink() }"></div>
|
||||
<div class="c-object-label"
|
||||
ng-class="{ 'is-missing': model.status === 'missing' }"
|
||||
>
|
||||
<div class="c-object-label__type-icon {{type.getCssClass()}}"
|
||||
ng-class="{ 'l-icon-link':location.isLink() }"
|
||||
>
|
||||
<span class="is-missing__indicator" title="This item is missing"></span>
|
||||
</div>
|
||||
<div class='c-object-label__name'>{{model.name}}</div>
|
||||
</div>
|
||||
|
@ -48,9 +48,8 @@ define(
|
||||
// prevents editing of objects that cannot be persisted, so we can assume that this
|
||||
// is a new object.
|
||||
if (!(parent.hasCapability('editor') && parent.getCapability('editor').isEditContextRoot())) {
|
||||
var identifier = objectUtils.parseKeyString(parent.getId());
|
||||
var provider = this.openmct.objects.getProvider(identifier);
|
||||
return provider.save !== undefined;
|
||||
let newStyleObject = objectUtils.toNewFormat(parent, parent.getId());
|
||||
return this.openmct.objects.isPersistable(newStyleObject);
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
@ -33,7 +33,7 @@ define(
|
||||
|
||||
beforeEach(function () {
|
||||
objectAPI = jasmine.createSpyObj('objectsAPI', [
|
||||
'getProvider'
|
||||
'isPersistable'
|
||||
]);
|
||||
|
||||
mockOpenMCT = {
|
||||
@ -51,10 +51,6 @@ define(
|
||||
'isEditContextRoot'
|
||||
]);
|
||||
mockParent.getCapability.and.returnValue(mockEditorCapability);
|
||||
|
||||
objectAPI.getProvider.and.returnValue({
|
||||
save: function () {}
|
||||
});
|
||||
persistableCompositionPolicy = new PersistableCompositionPolicy(mockOpenMCT);
|
||||
});
|
||||
|
||||
@ -65,19 +61,22 @@ define(
|
||||
|
||||
it("Does not allow composition for objects that are not persistable", function () {
|
||||
mockEditorCapability.isEditContextRoot.and.returnValue(false);
|
||||
objectAPI.isPersistable.and.returnValue(true);
|
||||
expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(true);
|
||||
objectAPI.getProvider.and.returnValue({});
|
||||
objectAPI.isPersistable.and.returnValue(false);
|
||||
expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(false);
|
||||
});
|
||||
|
||||
it("Always allows composition of objects in edit mode to support object creation", function () {
|
||||
mockEditorCapability.isEditContextRoot.and.returnValue(true);
|
||||
objectAPI.isPersistable.and.returnValue(true);
|
||||
expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(true);
|
||||
expect(objectAPI.getProvider).not.toHaveBeenCalled();
|
||||
expect(objectAPI.isPersistable).not.toHaveBeenCalled();
|
||||
|
||||
mockEditorCapability.isEditContextRoot.and.returnValue(false);
|
||||
objectAPI.isPersistable.and.returnValue(true);
|
||||
expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(true);
|
||||
expect(objectAPI.getProvider).toHaveBeenCalled();
|
||||
expect(objectAPI.isPersistable).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
});
|
||||
|
@ -297,7 +297,8 @@ define([
|
||||
"persistenceService",
|
||||
"identifierService",
|
||||
"notificationService",
|
||||
"$q"
|
||||
"$q",
|
||||
"openmct"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
@ -20,8 +20,8 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
function () {
|
||||
define(["objectUtils"],
|
||||
function (objectUtils) {
|
||||
|
||||
/**
|
||||
* Defines the `persistence` capability, used to trigger the
|
||||
@ -47,6 +47,7 @@ define(
|
||||
identifierService,
|
||||
notificationService,
|
||||
$q,
|
||||
openmct,
|
||||
domainObject
|
||||
) {
|
||||
// Cache modified timestamp
|
||||
@ -58,6 +59,7 @@ define(
|
||||
this.persistenceService = persistenceService;
|
||||
this.notificationService = notificationService;
|
||||
this.$q = $q;
|
||||
this.openmct = openmct;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -66,7 +68,7 @@ define(
|
||||
*/
|
||||
function rejectIfFalsey(value, $q) {
|
||||
if (!value) {
|
||||
return $q.reject("Error persisting object");
|
||||
return Promise.reject("Error persisting object");
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
@ -98,7 +100,7 @@ define(
|
||||
dismissable: true
|
||||
});
|
||||
|
||||
return $q.reject(error);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -110,34 +112,16 @@ define(
|
||||
*/
|
||||
PersistenceCapability.prototype.persist = function () {
|
||||
var self = this,
|
||||
domainObject = this.domainObject,
|
||||
model = domainObject.getModel(),
|
||||
modified = model.modified,
|
||||
persisted = model.persisted,
|
||||
persistenceService = this.persistenceService,
|
||||
persistenceFn = persisted !== undefined ?
|
||||
this.persistenceService.updateObject :
|
||||
this.persistenceService.createObject;
|
||||
domainObject = this.domainObject;
|
||||
|
||||
if (persisted !== undefined && persisted === modified) {
|
||||
return this.$q.when(true);
|
||||
}
|
||||
|
||||
// Update persistence timestamp...
|
||||
domainObject.useCapability("mutation", function (m) {
|
||||
m.persisted = modified;
|
||||
}, modified);
|
||||
|
||||
// ...and persist
|
||||
return persistenceFn.apply(persistenceService, [
|
||||
this.getSpace(),
|
||||
this.getKey(),
|
||||
domainObject.getModel()
|
||||
]).then(function (result) {
|
||||
return rejectIfFalsey(result, self.$q);
|
||||
}).catch(function (error) {
|
||||
return notifyOnError(error, domainObject, self.notificationService, self.$q);
|
||||
});
|
||||
let newStyleObject = objectUtils.toNewFormat(domainObject.getModel(), domainObject.getId());
|
||||
return this.openmct.objects
|
||||
.save(newStyleObject)
|
||||
.then(function (result) {
|
||||
return rejectIfFalsey(result, self.$q);
|
||||
}).catch(function (error) {
|
||||
return notifyOnError(error, domainObject, self.notificationService, self.$q);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -19,7 +19,6 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
/**
|
||||
* PersistenceCapabilitySpec. Created by vwoeltje on 11/6/14.
|
||||
*/
|
||||
@ -40,7 +39,8 @@ define(
|
||||
model,
|
||||
SPACE = "some space",
|
||||
persistence,
|
||||
happyPromise;
|
||||
mockOpenMCT,
|
||||
mockNewStyleDomainObject;
|
||||
|
||||
function asPromise(value, doCatch) {
|
||||
return (value || {}).then ? value : {
|
||||
@ -56,7 +56,6 @@ define(
|
||||
}
|
||||
|
||||
beforeEach(function () {
|
||||
happyPromise = asPromise(true);
|
||||
model = { someKey: "some value", name: "domain object"};
|
||||
|
||||
mockPersistenceService = jasmine.createSpyObj(
|
||||
@ -94,12 +93,23 @@ define(
|
||||
},
|
||||
useCapability: jasmine.createSpy()
|
||||
};
|
||||
|
||||
mockNewStyleDomainObject = Object.assign({}, model);
|
||||
mockNewStyleDomainObject.identifier = {
|
||||
namespace: "",
|
||||
key: id
|
||||
}
|
||||
|
||||
// Simulate mutation capability
|
||||
mockDomainObject.useCapability.and.callFake(function (capability, mutator) {
|
||||
if (capability === 'mutation') {
|
||||
model = mutator(model) || model;
|
||||
}
|
||||
});
|
||||
|
||||
mockOpenMCT = {};
|
||||
mockOpenMCT.objects = jasmine.createSpyObj('Object API', ['save']);
|
||||
|
||||
mockIdentifierService.parse.and.returnValue(mockIdentifier);
|
||||
mockIdentifier.getSpace.and.returnValue(SPACE);
|
||||
mockIdentifier.getKey.and.returnValue(key);
|
||||
@ -110,51 +120,28 @@ define(
|
||||
mockIdentifierService,
|
||||
mockNofificationService,
|
||||
mockQ,
|
||||
mockOpenMCT,
|
||||
mockDomainObject
|
||||
);
|
||||
});
|
||||
|
||||
describe("successful persistence", function () {
|
||||
beforeEach(function () {
|
||||
mockPersistenceService.updateObject.and.returnValue(happyPromise);
|
||||
mockPersistenceService.createObject.and.returnValue(happyPromise);
|
||||
mockOpenMCT.objects.save.and.returnValue(Promise.resolve(true));
|
||||
});
|
||||
it("creates unpersisted objects with the persistence service", function () {
|
||||
// Verify precondition; no call made during constructor
|
||||
expect(mockPersistenceService.createObject).not.toHaveBeenCalled();
|
||||
expect(mockOpenMCT.objects.save).not.toHaveBeenCalled();
|
||||
|
||||
persistence.persist();
|
||||
|
||||
expect(mockPersistenceService.createObject).toHaveBeenCalledWith(
|
||||
SPACE,
|
||||
key,
|
||||
model
|
||||
);
|
||||
});
|
||||
|
||||
it("updates previously persisted objects with the persistence service", function () {
|
||||
// Verify precondition; no call made during constructor
|
||||
expect(mockPersistenceService.updateObject).not.toHaveBeenCalled();
|
||||
|
||||
model.persisted = 12321;
|
||||
persistence.persist();
|
||||
|
||||
expect(mockPersistenceService.updateObject).toHaveBeenCalledWith(
|
||||
SPACE,
|
||||
key,
|
||||
model
|
||||
);
|
||||
expect(mockOpenMCT.objects.save).toHaveBeenCalledWith(mockNewStyleDomainObject);
|
||||
});
|
||||
|
||||
it("reports which persistence space an object belongs to", function () {
|
||||
expect(persistence.getSpace()).toEqual(SPACE);
|
||||
});
|
||||
|
||||
it("updates persisted timestamp on persistence", function () {
|
||||
model.modified = 12321;
|
||||
persistence.persist();
|
||||
expect(model.persisted).toEqual(12321);
|
||||
});
|
||||
it("refreshes the domain object model from persistence", function () {
|
||||
var refreshModel = {someOtherKey: "some other value"};
|
||||
model.persisted = 1;
|
||||
@ -165,30 +152,37 @@ define(
|
||||
|
||||
it("does not trigger error notification on successful" +
|
||||
" persistence", function () {
|
||||
persistence.persist();
|
||||
expect(mockQ.reject).not.toHaveBeenCalled();
|
||||
expect(mockNofificationService.error).not.toHaveBeenCalled();
|
||||
let rejected = false;
|
||||
return persistence.persist()
|
||||
.catch(() => rejected = true)
|
||||
.then(() => {
|
||||
expect(rejected).toBe(false);
|
||||
expect(mockNofificationService.error).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("unsuccessful persistence", function () {
|
||||
var sadPromise = {
|
||||
then: function (callback) {
|
||||
return asPromise(callback(0), true);
|
||||
}
|
||||
};
|
||||
beforeEach(function () {
|
||||
mockPersistenceService.createObject.and.returnValue(sadPromise);
|
||||
mockOpenMCT.objects.save.and.returnValue(Promise.resolve(false));
|
||||
});
|
||||
it("rejects on falsey persistence result", function () {
|
||||
persistence.persist();
|
||||
expect(mockQ.reject).toHaveBeenCalled();
|
||||
let rejected = false;
|
||||
return persistence.persist()
|
||||
.catch(() => rejected = true)
|
||||
.then(() => {
|
||||
expect(rejected).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it("notifies user on persistence failure", function () {
|
||||
persistence.persist();
|
||||
expect(mockQ.reject).toHaveBeenCalled();
|
||||
expect(mockNofificationService.error).toHaveBeenCalled();
|
||||
let rejected = false;
|
||||
return persistence.persist()
|
||||
.catch(() => rejected = true)
|
||||
.then(() => {
|
||||
expect(rejected).toBe(true);
|
||||
expect(mockNofificationService.error).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -35,7 +35,8 @@ define([
|
||||
'./services/LegacyObjectAPIInterceptor',
|
||||
'./views/installLegacyViews',
|
||||
'./policies/LegacyCompositionPolicyAdapter',
|
||||
'./actions/LegacyActionAdapter'
|
||||
'./actions/LegacyActionAdapter',
|
||||
'./services/LegacyPersistenceAdapter'
|
||||
], function (
|
||||
ActionDialogDecorator,
|
||||
AdapterCapability,
|
||||
@ -51,7 +52,8 @@ define([
|
||||
LegacyObjectAPIInterceptor,
|
||||
installLegacyViews,
|
||||
legacyCompositionPolicyAdapter,
|
||||
LegacyActionAdapter
|
||||
LegacyActionAdapter,
|
||||
LegacyPersistenceAdapter
|
||||
) {
|
||||
return {
|
||||
name: 'src/adapter',
|
||||
@ -114,6 +116,13 @@ define([
|
||||
"instantiate",
|
||||
"topic"
|
||||
]
|
||||
},
|
||||
{
|
||||
provides: "persistenceService",
|
||||
type: "provider",
|
||||
priority: "fallback",
|
||||
implementation: LegacyPersistenceAdapter.default,
|
||||
depends: ["openmct"]
|
||||
}
|
||||
],
|
||||
policies: [
|
||||
|
@ -25,10 +25,11 @@ define([
|
||||
], function (
|
||||
utils
|
||||
) {
|
||||
function ObjectServiceProvider(eventEmitter, objectService, instantiate, topic) {
|
||||
function ObjectServiceProvider(eventEmitter, objectService, instantiate, topic, $injector) {
|
||||
this.eventEmitter = eventEmitter;
|
||||
this.objectService = objectService;
|
||||
this.instantiate = instantiate;
|
||||
this.$injector = $injector;
|
||||
|
||||
this.generalTopic = topic('mutation');
|
||||
this.bridgeEventBuses();
|
||||
@ -68,16 +69,53 @@ define([
|
||||
removeGeneralTopicListener = this.generalTopic.listen(handleLegacyMutation);
|
||||
};
|
||||
|
||||
ObjectServiceProvider.prototype.save = function (object) {
|
||||
var key = object.key;
|
||||
ObjectServiceProvider.prototype.create = async function (object) {
|
||||
let model = utils.toOldFormat(object);
|
||||
|
||||
return object.getCapability('persistence')
|
||||
.persist()
|
||||
.then(function () {
|
||||
return utils.toNewFormat(object, key);
|
||||
});
|
||||
return this.getPersistenceService().createObject(
|
||||
this.getSpace(utils.makeKeyString(object.identifier)),
|
||||
object.identifier.key,
|
||||
model
|
||||
);
|
||||
}
|
||||
ObjectServiceProvider.prototype.update = async function (object) {
|
||||
let model = utils.toOldFormat(object);
|
||||
|
||||
return this.getPersistenceService().updateObject(
|
||||
this.getSpace(utils.makeKeyString(object.identifier)),
|
||||
object.identifier.key,
|
||||
model
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the space in which this domain object is persisted;
|
||||
* this is useful when, for example, decided which space a
|
||||
* newly-created domain object should be persisted to (by
|
||||
* default, this should be the space of its containing
|
||||
* object.)
|
||||
*
|
||||
* @returns {string} the name of the space which should
|
||||
* be used to persist this object
|
||||
*/
|
||||
ObjectServiceProvider.prototype.getSpace = function (keystring) {
|
||||
return this.getIdentifierService().parse(keystring).getSpace();
|
||||
};
|
||||
|
||||
ObjectServiceProvider.prototype.getIdentifierService = function () {
|
||||
if (this.identifierService === undefined) {
|
||||
this.identifierService = this.$injector.get('identifierService');
|
||||
}
|
||||
return this.identifierService;
|
||||
};
|
||||
|
||||
ObjectServiceProvider.prototype.getPersistenceService = function () {
|
||||
if (this.persistenceService === undefined) {
|
||||
this.persistenceService = this.$injector.get('persistenceService');
|
||||
}
|
||||
return this.persistenceService;
|
||||
}
|
||||
|
||||
ObjectServiceProvider.prototype.delete = function (object) {
|
||||
// TODO!
|
||||
};
|
||||
@ -118,7 +156,8 @@ define([
|
||||
eventEmitter,
|
||||
objectService,
|
||||
instantiate,
|
||||
topic
|
||||
topic,
|
||||
openmct.$injector
|
||||
)
|
||||
);
|
||||
|
||||
|
28
src/adapter/services/LegacyPersistenceAdapter.js
Normal file
28
src/adapter/services/LegacyPersistenceAdapter.js
Normal file
@ -0,0 +1,28 @@
|
||||
import objectUtils from 'objectUtils';
|
||||
|
||||
function LegacyPersistenceProvider(openmct) {
|
||||
this.openmct = openmct;
|
||||
}
|
||||
|
||||
LegacyPersistenceProvider.prototype.listObjects = function () {
|
||||
return Promise.resolve([]);
|
||||
}
|
||||
|
||||
LegacyPersistenceProvider.prototype.listSpaces = function () {
|
||||
return Promise.resolve(Object.keys(this.openmct.objects.providers));
|
||||
}
|
||||
|
||||
LegacyPersistenceProvider.prototype.updateObject = function (legacyDomainObject) {
|
||||
return this.openmct.objects.save(legacyDomainObject.useCapability('adapter'));
|
||||
}
|
||||
|
||||
LegacyPersistenceProvider.prototype.updateObject = function (legacyDomainObject) {
|
||||
return this.openmct.objects.save(legacyDomainObject.useCapability('adapter'));
|
||||
}
|
||||
|
||||
LegacyPersistenceProvider.prototype.readObject = function (keystring) {
|
||||
let identifier = objectUtils.parseKeyString(keystring);
|
||||
return this.openmct.legacyObject(this.openmct.objects.get(identifier));
|
||||
}
|
||||
|
||||
export default LegacyPersistenceProvider;
|
@ -101,14 +101,25 @@ define([
|
||||
*/
|
||||
|
||||
/**
|
||||
* Save this domain object in its current state.
|
||||
* Create the given domain object in the corresponding persistence store
|
||||
*
|
||||
* @method save
|
||||
* @method create
|
||||
* @memberof module:openmct.ObjectProvider#
|
||||
* @param {module:openmct.DomainObject} domainObject the domain object to
|
||||
* save
|
||||
* create
|
||||
* @returns {Promise} a promise which will resolve when the domain object
|
||||
* has been saved, or be rejected if it cannot be saved
|
||||
* has been created, or be rejected if it cannot be saved
|
||||
*/
|
||||
|
||||
/**
|
||||
* Update this domain object in its persistence store
|
||||
*
|
||||
* @method update
|
||||
* @memberof module:openmct.ObjectProvider#
|
||||
* @param {module:openmct.DomainObject} domainObject the domain object to
|
||||
* update
|
||||
* @returns {Promise} a promise which will resolve when the domain object
|
||||
* has been updated, or be rejected if it cannot be saved
|
||||
*/
|
||||
|
||||
/**
|
||||
@ -161,8 +172,41 @@ define([
|
||||
throw new Error('Delete not implemented');
|
||||
};
|
||||
|
||||
ObjectAPI.prototype.save = function () {
|
||||
throw new Error('Save not implemented');
|
||||
ObjectAPI.prototype.isPersistable = function (domainObject) {
|
||||
let provider = this.getProvider(domainObject.identifier);
|
||||
return provider !== undefined &&
|
||||
provider.create !== undefined &&
|
||||
provider.update !== undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save this domain object in its current state. EXPERIMENTAL
|
||||
*
|
||||
* @private
|
||||
* @memberof module:openmct.ObjectAPI#
|
||||
* @param {module:openmct.DomainObject} domainObject the domain object to
|
||||
* save
|
||||
* @returns {Promise} a promise which will resolve when the domain object
|
||||
* has been saved, or be rejected if it cannot be saved
|
||||
*/
|
||||
ObjectAPI.prototype.save = function (domainObject) {
|
||||
let provider = this.getProvider(domainObject.identifier);
|
||||
let result;
|
||||
|
||||
if (!this.isPersistable(domainObject)) {
|
||||
result = Promise.reject('Object provider does not support saving');
|
||||
} else if (hasAlreadyBeenPersisted(domainObject)) {
|
||||
result = Promise.resolve(true);
|
||||
} else {
|
||||
if (domainObject.persisted === undefined) {
|
||||
this.mutate(domainObject, 'persisted', domainObject.modified);
|
||||
result = provider.create(domainObject);
|
||||
} else {
|
||||
this.mutate(domainObject, 'persisted', domainObject.modified);
|
||||
result = provider.update(domainObject);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
@ -276,5 +320,9 @@ define([
|
||||
* @memberof module:openmct
|
||||
*/
|
||||
|
||||
function hasAlreadyBeenPersisted(domainObject) {
|
||||
return domainObject.persisted !== undefined &&
|
||||
domainObject.persisted === domainObject.modified;
|
||||
}
|
||||
return ObjectAPI;
|
||||
});
|
||||
|
60
src/api/objects/ObjectAPISpec.js
Normal file
60
src/api/objects/ObjectAPISpec.js
Normal file
@ -0,0 +1,60 @@
|
||||
import ObjectAPI from './ObjectAPI.js';
|
||||
|
||||
describe("The Object API", () => {
|
||||
let objectAPI;
|
||||
let mockDomainObject;
|
||||
const TEST_NAMESPACE = "test-namespace";
|
||||
const FIFTEEN_MINUTES = 15 * 60 * 1000;
|
||||
|
||||
beforeEach(() => {
|
||||
objectAPI = new ObjectAPI();
|
||||
mockDomainObject = {
|
||||
identifier: {
|
||||
namespace: TEST_NAMESPACE,
|
||||
key: "test-key"
|
||||
},
|
||||
name: "test object",
|
||||
type: "test-type"
|
||||
};
|
||||
})
|
||||
describe("The save function", () => {
|
||||
it("Rejects if no provider available", () => {
|
||||
let rejected = false;
|
||||
return objectAPI.save(mockDomainObject)
|
||||
.catch(() => rejected = true)
|
||||
.then(() => expect(rejected).toBe(true));
|
||||
});
|
||||
describe("when a provider is available", () => {
|
||||
let mockProvider;
|
||||
beforeEach(() => {
|
||||
mockProvider = jasmine.createSpyObj("mock provider", [
|
||||
"create",
|
||||
"update"
|
||||
]);
|
||||
objectAPI.addProvider(TEST_NAMESPACE, mockProvider);
|
||||
})
|
||||
it("Calls 'create' on provider if object is new", () => {
|
||||
objectAPI.save(mockDomainObject);
|
||||
expect(mockProvider.create).toHaveBeenCalled();
|
||||
expect(mockProvider.update).not.toHaveBeenCalled();
|
||||
});
|
||||
it("Calls 'update' on provider if object is not new", () => {
|
||||
mockDomainObject.persisted = Date.now() - FIFTEEN_MINUTES;
|
||||
mockDomainObject.modified = Date.now();
|
||||
|
||||
objectAPI.save(mockDomainObject);
|
||||
expect(mockProvider.create).not.toHaveBeenCalled();
|
||||
expect(mockProvider.update).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("Does not persist if the object is unchanged", () => {
|
||||
mockDomainObject.persisted =
|
||||
mockDomainObject.modified = Date.now();
|
||||
|
||||
objectAPI.save(mockDomainObject);
|
||||
expect(mockProvider.create).not.toHaveBeenCalled();
|
||||
expect(mockProvider.update).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
@ -334,8 +334,8 @@ define([
|
||||
});
|
||||
if (subscriber.callbacks.length === 0) {
|
||||
subscriber.unsubscribe();
|
||||
delete this.subscribeCache[keyString];
|
||||
}
|
||||
delete this.subscribeCache[keyString];
|
||||
}.bind(this);
|
||||
};
|
||||
|
||||
|
@ -156,6 +156,29 @@ define([
|
||||
expect(callbacktwo).not.toHaveBeenCalledWith('anotherValue');
|
||||
});
|
||||
|
||||
it('only deletes subscription cache when there are no more subscribers', function () {
|
||||
var unsubFunc = jasmine.createSpy('unsubscribe');
|
||||
telemetryProvider.subscribe.and.returnValue(unsubFunc);
|
||||
telemetryProvider.supportsSubscribe.and.returnValue(true);
|
||||
telemetryAPI.addProvider(telemetryProvider);
|
||||
|
||||
var callback = jasmine.createSpy('callback');
|
||||
var callbacktwo = jasmine.createSpy('callback two');
|
||||
var callbackThree = jasmine.createSpy('callback three');
|
||||
var unsubscribe = telemetryAPI.subscribe(domainObject, callback);
|
||||
var unsubscribeTwo = telemetryAPI.subscribe(domainObject, callbacktwo);
|
||||
|
||||
expect(telemetryProvider.subscribe.calls.count()).toBe(1);
|
||||
unsubscribe();
|
||||
var unsubscribeThree = telemetryAPI.subscribe(domainObject, callbackThree);
|
||||
// Regression test for where subscription cache was deleted on each unsubscribe, resulting in
|
||||
// superfluous additional subscriptions. If the subscription cache is being deleted on each unsubscribe,
|
||||
// then a subsequent subscribe will result in a new subscription at the provider.
|
||||
expect(telemetryProvider.subscribe.calls.count()).toBe(1);
|
||||
unsubscribeTwo();
|
||||
unsubscribeThree();
|
||||
});
|
||||
|
||||
it('does subscribe/unsubscribe', function () {
|
||||
var unsubFunc = jasmine.createSpy('unsubscribe');
|
||||
telemetryProvider.subscribe.and.returnValue(unsubFunc);
|
||||
|
@ -29,24 +29,28 @@ define([
|
||||
ClearDataAction,
|
||||
Vue
|
||||
) {
|
||||
return function plugin(appliesToObjects) {
|
||||
return function plugin(appliesToObjects, options = {indicator: true}) {
|
||||
let installIndicator = options.indicator;
|
||||
|
||||
appliesToObjects = appliesToObjects || [];
|
||||
|
||||
return function install(openmct) {
|
||||
let component = new Vue ({
|
||||
provide: {
|
||||
openmct
|
||||
},
|
||||
components: {
|
||||
GlobalClearIndicator: GlobaClearIndicator.default
|
||||
},
|
||||
template: '<GlobalClearIndicator></GlobalClearIndicator>'
|
||||
}),
|
||||
indicator = {
|
||||
element: component.$mount().$el
|
||||
};
|
||||
if (installIndicator) {
|
||||
let component = new Vue ({
|
||||
provide: {
|
||||
openmct
|
||||
},
|
||||
components: {
|
||||
GlobalClearIndicator: GlobaClearIndicator.default
|
||||
},
|
||||
template: '<GlobalClearIndicator></GlobalClearIndicator>'
|
||||
}),
|
||||
indicator = {
|
||||
element: component.$mount().$el
|
||||
};
|
||||
|
||||
openmct.indicators.add(indicator);
|
||||
openmct.indicators.add(indicator);
|
||||
}
|
||||
|
||||
openmct.contextMenu.registerAction(new ClearDataAction.default(openmct, appliesToObjects));
|
||||
};
|
||||
|
@ -103,6 +103,8 @@ export default class ConditionManager extends EventEmitter {
|
||||
criterion.operation = '';
|
||||
conditionChanged = true;
|
||||
}
|
||||
} else {
|
||||
conditionChanged = true;
|
||||
}
|
||||
});
|
||||
if (conditionChanged) {
|
||||
|
@ -46,6 +46,7 @@ export default class StyleRuleManager extends EventEmitter {
|
||||
if (this.isEditing) {
|
||||
if (this.stopProvidingTelemetry) {
|
||||
this.stopProvidingTelemetry();
|
||||
delete this.stopProvidingTelemetry;
|
||||
}
|
||||
if (this.conditionSetIdentifier) {
|
||||
this.applySelectedConditionStyle();
|
||||
@ -66,6 +67,7 @@ export default class StyleRuleManager extends EventEmitter {
|
||||
subscribeToConditionSet() {
|
||||
if (this.stopProvidingTelemetry) {
|
||||
this.stopProvidingTelemetry();
|
||||
delete this.stopProvidingTelemetry;
|
||||
}
|
||||
this.openmct.objects.get(this.conditionSetIdentifier).then((conditionSetDomainObject) => {
|
||||
this.openmct.telemetry.request(conditionSetDomainObject)
|
||||
@ -154,8 +156,8 @@ export default class StyleRuleManager extends EventEmitter {
|
||||
this.applyStaticStyle();
|
||||
if (this.stopProvidingTelemetry) {
|
||||
this.stopProvidingTelemetry();
|
||||
delete this.stopProvidingTelemetry;
|
||||
}
|
||||
delete this.stopProvidingTelemetry;
|
||||
this.conditionSetIdentifier = undefined;
|
||||
}
|
||||
|
||||
|
@ -197,6 +197,7 @@ export default {
|
||||
}
|
||||
if (this.stopProvidingTelemetry) {
|
||||
this.stopProvidingTelemetry();
|
||||
delete this.stopProvidingTelemetry;
|
||||
}
|
||||
},
|
||||
initialize(conditionSetDomainObject) {
|
||||
@ -210,6 +211,7 @@ export default {
|
||||
if (this.isEditing) {
|
||||
if (this.stopProvidingTelemetry) {
|
||||
this.stopProvidingTelemetry();
|
||||
delete this.stopProvidingTelemetry;
|
||||
}
|
||||
} else {
|
||||
this.subscribeToConditionSet();
|
||||
@ -307,6 +309,7 @@ export default {
|
||||
this.persist(domainObjectStyles);
|
||||
if (this.stopProvidingTelemetry) {
|
||||
this.stopProvidingTelemetry();
|
||||
delete this.stopProvidingTelemetry;
|
||||
}
|
||||
},
|
||||
updateDomainObjectItemStyles(newItems) {
|
||||
@ -375,6 +378,7 @@ export default {
|
||||
subscribeToConditionSet() {
|
||||
if (this.stopProvidingTelemetry) {
|
||||
this.stopProvidingTelemetry();
|
||||
delete this.stopProvidingTelemetry;
|
||||
}
|
||||
if (this.conditionSetDomainObject) {
|
||||
this.openmct.telemetry.request(this.conditionSetDomainObject)
|
||||
|
@ -190,6 +190,7 @@ export default {
|
||||
if (this.isEditing) {
|
||||
if (this.stopProvidingTelemetry) {
|
||||
this.stopProvidingTelemetry();
|
||||
delete this.stopProvidingTelemetry;
|
||||
}
|
||||
} else {
|
||||
this.subscribeToConditionSet();
|
||||
@ -325,6 +326,7 @@ export default {
|
||||
|
||||
if (this.stopProvidingTelemetry) {
|
||||
this.stopProvidingTelemetry();
|
||||
delete this.stopProvidingTelemetry;
|
||||
}
|
||||
|
||||
if (this.unObserveObjects) {
|
||||
@ -337,6 +339,7 @@ export default {
|
||||
subscribeToConditionSet() {
|
||||
if (this.stopProvidingTelemetry) {
|
||||
this.stopProvidingTelemetry();
|
||||
delete this.stopProvidingTelemetry;
|
||||
}
|
||||
if (this.conditionSetDomainObject) {
|
||||
this.openmct.telemetry.request(this.conditionSetDomainObject)
|
||||
@ -494,6 +497,7 @@ export default {
|
||||
|
||||
if (this.stopProvidingTelemetry) {
|
||||
this.stopProvidingTelemetry();
|
||||
delete this.stopProvidingTelemetry;
|
||||
}
|
||||
},
|
||||
removeConditionalStyles(domainObjectStyles, itemId) {
|
||||
|
@ -457,16 +457,44 @@ export default {
|
||||
this.objectViewMap = {};
|
||||
this.layoutItems.forEach(this.trackItem);
|
||||
},
|
||||
addChild(child) {
|
||||
let keyString = this.openmct.objects.makeKeyString(child.identifier);
|
||||
if (this.isTelemetry(child)) {
|
||||
if (!this.telemetryViewMap[keyString] && !this.objectViewMap[keyString]) {
|
||||
this.addItem('telemetry-view', child);
|
||||
isItemAlreadyTracked(child) {
|
||||
let found = false,
|
||||
keyString = this.openmct.objects.makeKeyString(child.identifier);
|
||||
|
||||
this.layoutItems.forEach(item => {
|
||||
if (item.identifier) {
|
||||
let itemKeyString = this.openmct.objects.makeKeyString(item.identifier);
|
||||
|
||||
if (itemKeyString === keyString) {
|
||||
found = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else if (!this.objectViewMap[keyString]) {
|
||||
this.addItem('subobject-view', child);
|
||||
});
|
||||
|
||||
if (found) {
|
||||
return true;
|
||||
} else if (this.isTelemetry(child)) {
|
||||
return this.telemetryViewMap[keyString] && this.objectViewMap[keyString];
|
||||
} else {
|
||||
return this.objectViewMap[keyString];
|
||||
}
|
||||
},
|
||||
addChild(child) {
|
||||
if (this.isItemAlreadyTracked(child)) {
|
||||
return;
|
||||
}
|
||||
|
||||
let type;
|
||||
|
||||
if (this.isTelemetry(child)) {
|
||||
type = 'telemetry-view';
|
||||
} else {
|
||||
type = 'subobject-view';
|
||||
}
|
||||
|
||||
this.addItem(type, child);
|
||||
},
|
||||
removeChild(identifier) {
|
||||
let keyString = this.openmct.objects.makeKeyString(identifier);
|
||||
|
||||
@ -559,14 +587,17 @@ export default {
|
||||
}
|
||||
},
|
||||
updateTelemetryFormat(item, format) {
|
||||
let index = this.layoutItems.findIndex(item);
|
||||
let index = this.layoutItems.findIndex((layoutItem) => {
|
||||
return layoutItem.id === item.id;
|
||||
});
|
||||
|
||||
item.format = format;
|
||||
this.mutate(`configuration.items[${index}]`, item);
|
||||
},
|
||||
createNewDomainObject(domainObject, composition, viewType, nameExtension, model) {
|
||||
let identifier = {
|
||||
key: uuid(),
|
||||
namespace: domainObject.identifier.namespace
|
||||
namespace: this.internalDomainObject.identifier.namespace
|
||||
},
|
||||
type = this.openmct.types.get(viewType),
|
||||
parentKeyString = this.openmct.objects.makeKeyString(this.internalDomainObject.identifier),
|
||||
|
@ -31,10 +31,16 @@
|
||||
<div
|
||||
v-if="domainObject"
|
||||
class="c-telemetry-view"
|
||||
:class="styleClass"
|
||||
:class="{
|
||||
styleClass,
|
||||
'is-missing': domainObject.status === 'missing'
|
||||
}"
|
||||
:style="styleObject"
|
||||
@contextmenu.prevent="showContextMenu"
|
||||
>
|
||||
<div class="is-missing__indicator"
|
||||
title="This item is missing"
|
||||
></div>
|
||||
<div
|
||||
v-if="showLabel"
|
||||
class="c-telemetry-view__label"
|
||||
|
@ -26,4 +26,15 @@
|
||||
@include abs();
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@include isMissing($absPos: true);
|
||||
|
||||
.is-missing__indicator {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.is-missing {
|
||||
border: $borderMissing;
|
||||
}
|
||||
}
|
||||
|
@ -1,13 +1,18 @@
|
||||
<template>
|
||||
<a
|
||||
class="l-grid-view__item c-grid-item"
|
||||
:class="{ 'is-alias': item.isAlias === true }"
|
||||
:class="{
|
||||
'is-alias': item.isAlias === true,
|
||||
'is-missing': item.model.status === 'missing',
|
||||
'c-grid-item--unknown': item.type.cssClass === undefined || item.type.cssClass.indexOf('unknown') !== -1
|
||||
}"
|
||||
:href="objectLink"
|
||||
>
|
||||
<div
|
||||
class="c-grid-item__type-icon"
|
||||
:class="(item.type.cssClass != undefined) ? 'bg-' + item.type.cssClass : 'bg-icon-object-unknown'"
|
||||
></div>
|
||||
>
|
||||
</div>
|
||||
<div class="c-grid-item__details">
|
||||
<!-- Name and metadata -->
|
||||
<div
|
||||
@ -22,6 +27,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-grid-item__controls">
|
||||
<div class="is-missing__indicator"
|
||||
title="This item is missing"
|
||||
></div>
|
||||
<div
|
||||
class="icon-people"
|
||||
title="Shared"
|
||||
|
@ -7,13 +7,19 @@
|
||||
<td class="c-list-item__name">
|
||||
<a
|
||||
ref="objectLink"
|
||||
class="c-object-label"
|
||||
:class="{ 'is-missing': item.model.status === 'missing' }"
|
||||
:href="objectLink"
|
||||
>
|
||||
<div
|
||||
class="c-list-item__type-icon"
|
||||
class="c-object-label__type-icon c-list-item__type-icon"
|
||||
:class="item.type.cssClass"
|
||||
></div>
|
||||
<div class="c-list-item__name-value">{{ item.model.name }}</div>
|
||||
>
|
||||
<span class="is-missing__indicator"
|
||||
title="This item is missing"
|
||||
></span>
|
||||
</div>
|
||||
<div class="c-object-label__name c-list-item__name">{{ item.model.name }}</div>
|
||||
</a>
|
||||
</td>
|
||||
<td class="c-list-item__type">
|
||||
|
@ -38,7 +38,15 @@
|
||||
// Object is an alias to an original.
|
||||
[class*='__type-icon'] {
|
||||
@include isAlias();
|
||||
color: $colorIconAliasForKeyFilter;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-missing {
|
||||
@include isMissing();
|
||||
|
||||
[class*='__type-icon'],
|
||||
[class*='__details'] {
|
||||
opacity: $opacityMissing;
|
||||
}
|
||||
}
|
||||
|
||||
@ -85,15 +93,14 @@
|
||||
body.desktop & {
|
||||
$transOutMs: 300ms;
|
||||
flex-flow: column nowrap;
|
||||
transition: background $transOutMs ease-in-out;
|
||||
transition: $transOutMs ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background: $colorItemBgHov;
|
||||
filter: $filterItemHoverFg;
|
||||
transition: $transIn;
|
||||
|
||||
.c-grid-item__type-icon {
|
||||
filter: $colorKeyFilterHov;
|
||||
transform: scale(1);
|
||||
transform: scale(1.1);
|
||||
transition: $transInBounce;
|
||||
}
|
||||
}
|
||||
@ -103,7 +110,7 @@
|
||||
}
|
||||
|
||||
&__controls {
|
||||
align-items: start;
|
||||
align-items: baseline;
|
||||
flex: 0 0 auto;
|
||||
order: 1;
|
||||
.c-info-button,
|
||||
@ -115,7 +122,6 @@
|
||||
font-size: floor($gridItemDesk / 3);
|
||||
margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
|
||||
order: 2;
|
||||
transform: scale(0.9);
|
||||
transform-origin: center;
|
||||
transition: all $transOutMs ease-in-out;
|
||||
}
|
||||
|
@ -1,37 +1,17 @@
|
||||
/******************************* LIST ITEM */
|
||||
.c-list-item {
|
||||
&__name a {
|
||||
display: flex;
|
||||
|
||||
> * + * { margin-left: $interiorMarginSm; }
|
||||
}
|
||||
|
||||
&__type-icon {
|
||||
// Have to do it this way instead of using icon-* class, due to need to apply alias to the icon
|
||||
color: $colorKey;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
margin-right:$interiorMarginSm;
|
||||
color: $colorItemTreeIcon;
|
||||
}
|
||||
|
||||
&__name-value {
|
||||
&__name {
|
||||
@include ellipsize();
|
||||
}
|
||||
|
||||
&.is-alias {
|
||||
// Object is an alias to an original.
|
||||
[class*='__type-icon'] {
|
||||
&:after {
|
||||
color: $colorIconAlias;
|
||||
content: $glyph-icon-link;
|
||||
font-family: symbolsfont;
|
||||
display: block;
|
||||
position: absolute;
|
||||
text-shadow: rgba(black, 0.5) 0 1px 2px;
|
||||
top: auto; left: -1px; bottom: 1px; right: auto;
|
||||
transform-origin: bottom left;
|
||||
transform: scale(0.65);
|
||||
}
|
||||
@include isAlias();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -13,7 +13,8 @@
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $colorListItemBgHov;
|
||||
background: $colorItemTreeHoverBg;
|
||||
filter: $filterHov;
|
||||
transition: $transIn;
|
||||
}
|
||||
}
|
||||
|
@ -24,14 +24,14 @@ import uuid from 'uuid';
|
||||
|
||||
export default class NewFolderAction {
|
||||
constructor(openmct) {
|
||||
this.name = 'New Folder';
|
||||
this.name = 'Add New Folder';
|
||||
this.key = 'newFolder';
|
||||
this.description = 'Create a new folder';
|
||||
this.cssClass = 'icon-folder';
|
||||
this.cssClass = 'icon-folder-new';
|
||||
|
||||
this._openmct = openmct;
|
||||
this._dialogForm = {
|
||||
name: "New Folder Name",
|
||||
name: "Add New Folder",
|
||||
sections: [
|
||||
{
|
||||
rows: [
|
||||
@ -39,7 +39,9 @@ export default class NewFolderAction {
|
||||
key: "name",
|
||||
control: "textfield",
|
||||
name: "Folder Name",
|
||||
required: false
|
||||
pattern: "\\S+",
|
||||
required: true,
|
||||
cssClass: "l-input-lg"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -53,7 +55,7 @@ export default class NewFolderAction {
|
||||
dialogService = this._openmct.$injector.get('dialogService'),
|
||||
folderType = this._openmct.types.get('folder');
|
||||
|
||||
dialogService.getUserInput(this._dialogForm, {}).then((userInput) => {
|
||||
dialogService.getUserInput(this._dialogForm, {name: 'Unnamed Folder'}).then((userInput) => {
|
||||
let name = userInput.name,
|
||||
identifier = {
|
||||
key: uuid(),
|
||||
|
@ -2,13 +2,16 @@
|
||||
<div class="c-snapshots-h">
|
||||
<div class="l-browse-bar">
|
||||
<div class="l-browse-bar__start">
|
||||
<div class="l-browse-bar__object-name--w icon-notebook">
|
||||
<div class="l-browse-bar__object-name">
|
||||
Notebook Snapshots
|
||||
<span v-if="snapshots.length"
|
||||
class="l-browse-bar__object-details"
|
||||
> {{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
|
||||
</span>
|
||||
<div class="l-browse-bar__object-name--w">
|
||||
<div class="l-browse-bar__object-name c-object-label">
|
||||
<div class="c-object-label__type-icon icon-notebook"></div>
|
||||
<div class="c-object-label__name">
|
||||
Notebook Snapshots
|
||||
<span v-if="snapshots.length"
|
||||
class="l-browse-bar__object-details"
|
||||
> {{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<PopupMenu v-if="snapshots.length > 0"
|
||||
:popup-menu-items="popupMenuItems"
|
||||
|
53
src/plugins/persistence/couch/CouchDocument.js
Normal file
53
src/plugins/persistence/couch/CouchDocument.js
Normal file
@ -0,0 +1,53 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
/**
|
||||
* A CouchDocument describes domain object model in a format
|
||||
* which is easily read-written to CouchDB. This includes
|
||||
* Couch's _id and _rev fields, as well as a separate
|
||||
* metadata field which contains a subset of information found
|
||||
* in the model itself (to support search optimization with
|
||||
* CouchDB views.)
|
||||
* @memberof platform/persistence/couch
|
||||
* @constructor
|
||||
* @param {string} id the id under which to store this mode
|
||||
* @param {object} model the model to store
|
||||
* @param {string} rev the revision to include (or undefined,
|
||||
* if no revision should be noted for couch)
|
||||
* @param {boolean} whether or not to mark this document as
|
||||
* deleted (see CouchDB docs for _deleted)
|
||||
*/
|
||||
export default function CouchDocument(id, model, rev, markDeleted) {
|
||||
return {
|
||||
"_id": id,
|
||||
"_rev": rev,
|
||||
"_deleted": markDeleted,
|
||||
"metadata": {
|
||||
"category": "domain object",
|
||||
"type": model.type,
|
||||
"owner": "admin",
|
||||
"name": model.name,
|
||||
"created": Date.now()
|
||||
},
|
||||
"model": model
|
||||
};
|
||||
}
|
65
src/plugins/persistence/couch/CouchObjectProvider.js
Normal file
65
src/plugins/persistence/couch/CouchObjectProvider.js
Normal file
@ -0,0 +1,65 @@
|
||||
import CouchDocument from "./CouchDocument";
|
||||
|
||||
const REV = "_rev";
|
||||
const ID = "_id";
|
||||
|
||||
export default class CouchObjectProvider {
|
||||
constructor(openmct, url, namespace) {
|
||||
this.openmct = openmct;
|
||||
this.url = url;
|
||||
this.namespace = namespace; this.namespace = namespace; this.namespace = namespace;
|
||||
this.revs = {};
|
||||
}
|
||||
|
||||
request(subPath, method, value) {
|
||||
console.log(subPath, method, value);
|
||||
return fetch(this.url + '/' + subPath, {
|
||||
method: method,
|
||||
body: value
|
||||
}).then(response => response.json())
|
||||
.then(function (response) {
|
||||
return response;
|
||||
}, function () {
|
||||
return undefined;
|
||||
});
|
||||
}
|
||||
|
||||
// Check the response to a create/update/delete request;
|
||||
// track the rev if it's valid, otherwise return false to
|
||||
// indicate that the request failed.
|
||||
checkResponse(response) {
|
||||
if (response && response.ok) {
|
||||
this.revs[response.id] = response.rev;
|
||||
return response.ok;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
getModel(response) {
|
||||
if (response && response.model) {
|
||||
let key = response[ID];
|
||||
this.revs[key] = response[REV];
|
||||
let object = response.model;
|
||||
object.identifier = {
|
||||
namespace: this.namespace,
|
||||
key: key
|
||||
};
|
||||
return object;
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
get(identifier) {
|
||||
return this.request(identifier.key, "GET").then(this.getModel.bind(this));
|
||||
}
|
||||
|
||||
create(model) {
|
||||
return this.request(model.identifier, "PUT", new CouchDocument(model.identifier.key, model)).then(this.checkResponse.bind(this));
|
||||
}
|
||||
|
||||
update(model) {
|
||||
return this.request(model.identifier, "PUT", model).then(this.checkResponse.bind(this));
|
||||
}
|
||||
}
|
8
src/plugins/persistence/couch/plugin.js
Normal file
8
src/plugins/persistence/couch/plugin.js
Normal file
@ -0,0 +1,8 @@
|
||||
import CouchObjectProvider from './CouchObjectProvider';
|
||||
const NAMESPACE = '';
|
||||
|
||||
export default function CouchPlugin(config) {
|
||||
return function install(openmct) {
|
||||
openmct.objects.addProvider(NAMESPACE, new CouchObjectProvider(openmct, config, NAMESPACE));
|
||||
}
|
||||
}
|
77
src/plugins/persistence/couch/pluginSpec.js
Normal file
77
src/plugins/persistence/couch/pluginSpec.js
Normal file
@ -0,0 +1,77 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2020, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
import CouchPlugin from './plugin.js';
|
||||
import {
|
||||
createOpenMct,
|
||||
resetApplicationState
|
||||
} from 'utils/testing';
|
||||
|
||||
fdescribe("the plugin", () => {
|
||||
let openmct;
|
||||
let element;
|
||||
let child;
|
||||
let provider;
|
||||
let testSpace = "testSpace";
|
||||
let testPath = "/test/db";
|
||||
let mockDomainObject = { identifier: {namespace: '', key: "some-value"} };
|
||||
|
||||
beforeEach((done) => {
|
||||
openmct = createOpenMct(false);
|
||||
openmct.install(new CouchPlugin(testSpace, testPath));
|
||||
|
||||
element = document.createElement('div');
|
||||
child = document.createElement('div');
|
||||
element.appendChild(child);
|
||||
|
||||
openmct.on('start', done);
|
||||
openmct.startHeadless();
|
||||
|
||||
provider = openmct.objects.getProvider(mockDomainObject.identifier);
|
||||
});
|
||||
|
||||
it('registers a provider for objects', () => {
|
||||
expect(provider).toBeDefined();
|
||||
});
|
||||
|
||||
it('gets an object', () => {
|
||||
openmct.objects.get(mockDomainObject.identifier).then((result) => {
|
||||
expect(provider.get).toHaveBeenCalled();
|
||||
expect(result).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
it('creates an object', () => {
|
||||
openmct.objects.save(mockDomainObject).then((result) => {
|
||||
expect(provider.create).toHaveBeenCalled();
|
||||
expect(result).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
it('updates an object', () => {
|
||||
openmct.objects.save(mockDomainObject).then((result) => {
|
||||
openmct.objects.save(mockDomainObject).then((updatedResult) => {
|
||||
expect(provider.update).toHaveBeenCalled();
|
||||
expect(updatedResult).toBeDefined();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
@ -28,17 +28,22 @@
|
||||
ng-click="legend.set('expanded', !legend.get('expanded'));">
|
||||
</div>
|
||||
|
||||
<div class="c-plot-legend__wrapper">
|
||||
<div class="c-plot-legend__wrapper"
|
||||
ng-class="{ 'is-cursor-locked': !!lockHighlightPoint }">
|
||||
|
||||
<!-- COLLAPSED PLOT LEGEND -->
|
||||
<div class="plot-wrapper-collapsed-legend"
|
||||
ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
|
||||
ng-class="{'is-cursor-locked': !!lockHighlightPoint }">
|
||||
<div class="c-state-indicator__alert-cursor-lock icon-cursor-lock" title="Cursor is point locked. Click anywhere in the plot to unlock."></div>
|
||||
<div class="plot-legend-item"
|
||||
ng-repeat="series in series track by $index">
|
||||
ng-class="{'is-missing': series.domainObject.status === 'missing'}"
|
||||
ng-repeat="series in series track by $index"
|
||||
>
|
||||
<div class="plot-series-swatch-and-name">
|
||||
<span class="plot-series-color-swatch"
|
||||
<span class="plot-series-color-swatch "
|
||||
ng-style="{ 'background-color': series.get('color').asHexString() }">
|
||||
</span>
|
||||
<span class="is-missing__indicator" title="This item is missing"></span>
|
||||
<span class="plot-series-name">{{ series.get('name') }}</span>
|
||||
</div>
|
||||
<div class="plot-series-value hover-value-enabled value-to-display-{{ legend.get('valueToShowWhenCollapsed') }} {{ series.closest.mctLimitState.cssClass }}"
|
||||
@ -55,7 +60,10 @@
|
||||
</div>
|
||||
|
||||
<!-- EXPANDED PLOT LEGEND -->
|
||||
<div class="plot-wrapper-expanded-legend">
|
||||
<div class="plot-wrapper-expanded-legend"
|
||||
ng-class="{'is-cursor-locked': !!lockHighlightPoint }"
|
||||
>
|
||||
<div class="c-state-indicator__alert-cursor-lock--verbose icon-cursor-lock" title="Click anywhere in the plot to unlock."> Cursor locked to point</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -76,12 +84,15 @@
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr ng-repeat="series in series" class="plot-legend-item">
|
||||
<td class="plot-series-swatch-and-name"
|
||||
ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
|
||||
<tr ng-repeat="series in series"
|
||||
class="plot-legend-item"
|
||||
ng-class="{'is-missing': series.domainObject.status === 'missing'}"
|
||||
>
|
||||
<td class="plot-series-swatch-and-name">
|
||||
<span class="plot-series-color-swatch"
|
||||
ng-style="{ 'background-color': series.get('color').asHexString() }">
|
||||
</span>
|
||||
<span class="is-missing__indicator" title="This item is missing"></span>
|
||||
<span class="plot-series-name">{{ series.get('name') }}</span>
|
||||
</td>
|
||||
|
||||
@ -134,7 +145,7 @@
|
||||
{{option.name}}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
|
||||
|
||||
<mct-ticks axis="yAxis">
|
||||
<div ng-repeat="tick in ticks track by tick.value"
|
||||
|
@ -44,7 +44,7 @@
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The line rendering style for this series.">Line Style</div>
|
||||
title="The rendering method to join lines for this series.">Line Method</div>
|
||||
<div class="grid-cell value">{{ {
|
||||
'none': 'None',
|
||||
'linear': 'Linear interpolation',
|
||||
@ -56,7 +56,7 @@
|
||||
<div class="grid-cell label"
|
||||
title="Whether markers are displayed, and their size.">Markers</div>
|
||||
<div class="grid-cell value">
|
||||
{{series.get('markers') ? "Enabled: " + series.get('markerSize') + "px" : "Disabled"}}
|
||||
{{ series.markerOptionsDisplayText() }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
|
@ -52,7 +52,7 @@
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The line rendering style for this series.">Line Style</div>
|
||||
title="The rendering method to join lines for this series.">Line Method</div>
|
||||
<div class="grid-cell value">
|
||||
<select ng-model="form.interpolate">
|
||||
<option value="none">None</option>
|
||||
@ -64,12 +64,27 @@
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Whether markers are displayed.">Markers</div>
|
||||
<div class="grid-cell value"><input type="checkbox" ng-model="form.markers"/></div>
|
||||
<div class="grid-cell value">
|
||||
<input type="checkbox" ng-model="form.markers"/>
|
||||
<select
|
||||
ng-show="form.markers"
|
||||
ng-model="form.markerShape">
|
||||
<option
|
||||
ng-repeat="option in markerShapeOptions"
|
||||
value="{{ option.value }}"
|
||||
ng-selected="option.value == form.markerShape"
|
||||
>
|
||||
{{ option.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Display markers visually denoting points in alarm.">Alarm Markers</div>
|
||||
<div class="grid-cell value"><input type="checkbox" ng-model="form.alarmMarkers"/></div>
|
||||
<div class="grid-cell value">
|
||||
<input type="checkbox" ng-model="form.alarmMarkers"/>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row" ng-show="form.markers || form.alarmMarkers">
|
||||
<div class="grid-cell label"
|
||||
|
@ -371,7 +371,8 @@ function (
|
||||
chartElement.getBuffer(),
|
||||
chartElement.color().asRGBAArray(),
|
||||
chartElement.count,
|
||||
chartElement.series.get('markerSize')
|
||||
chartElement.series.get('markerSize'),
|
||||
chartElement.series.get('markerShape')
|
||||
);
|
||||
};
|
||||
|
||||
@ -395,9 +396,10 @@ function (
|
||||
this.offset.yVal(highlight.point, highlight.series)
|
||||
]),
|
||||
color = highlight.series.get('color').asRGBAArray(),
|
||||
pointCount = 1;
|
||||
pointCount = 1,
|
||||
shape = highlight.series.get('markerShape');
|
||||
|
||||
this.drawAPI.drawPoints(points, color, pointCount, HIGHLIGHT_SIZE);
|
||||
this.drawAPI.drawPoints(points, color, pointCount, HIGHLIGHT_SIZE, shape);
|
||||
};
|
||||
|
||||
MCTChartController.prototype.drawRectangles = function () {
|
||||
|
@ -25,12 +25,14 @@ define([
|
||||
'lodash',
|
||||
'../configuration/Model',
|
||||
'../lib/extend',
|
||||
'EventEmitter'
|
||||
'EventEmitter',
|
||||
'../draw/MarkerShapes'
|
||||
], function (
|
||||
_,
|
||||
Model,
|
||||
extend,
|
||||
EventEmitter
|
||||
EventEmitter,
|
||||
MARKER_SHAPES
|
||||
) {
|
||||
|
||||
/**
|
||||
@ -56,6 +58,7 @@ define([
|
||||
* `linear` (points are connected via straight lines), or
|
||||
* `stepAfter` (points are connected by steps).
|
||||
* `markers`: boolean, whether or not this series should render with markers.
|
||||
* `markerShape`: string, shape of markers.
|
||||
* `markerSize`: number, size in pixels of markers for this series.
|
||||
* `alarmMarkers`: whether or not to display alarm markers for this series.
|
||||
* `stats`: An object that tracks the min and max y values observed in this
|
||||
@ -101,6 +104,7 @@ define([
|
||||
xKey: options.collection.plot.xAxis.get('key'),
|
||||
yKey: range.key,
|
||||
markers: true,
|
||||
markerShape: 'point',
|
||||
markerSize: 2.0,
|
||||
alarmMarkers: true
|
||||
};
|
||||
@ -410,6 +414,18 @@ define([
|
||||
} else {
|
||||
this.filters = deepCopiedFilters;
|
||||
}
|
||||
},
|
||||
markerOptionsDisplayText: function () {
|
||||
const showMarkers = this.get('markers');
|
||||
if (!showMarkers) {
|
||||
return "Disabled";
|
||||
}
|
||||
|
||||
const markerShapeKey = this.get('markerShape');
|
||||
const markerShape = MARKER_SHAPES[markerShapeKey].label;
|
||||
const markerSize = this.get('markerSize');
|
||||
|
||||
return `${markerShape}: ${markerSize}px`;
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -23,10 +23,12 @@
|
||||
|
||||
define([
|
||||
'EventEmitter',
|
||||
'../lib/eventHelpers'
|
||||
'../lib/eventHelpers',
|
||||
'./MarkerShapes'
|
||||
], function (
|
||||
EventEmitter,
|
||||
eventHelpers
|
||||
eventHelpers,
|
||||
MARKER_SHAPES
|
||||
) {
|
||||
|
||||
/**
|
||||
@ -121,18 +123,17 @@ define([
|
||||
buf,
|
||||
color,
|
||||
points,
|
||||
pointSize
|
||||
pointSize,
|
||||
shape
|
||||
) {
|
||||
var i = 0,
|
||||
offset = pointSize / 2;
|
||||
const drawC2DShape = MARKER_SHAPES[shape].drawC2D.bind(this);
|
||||
|
||||
this.setColor(color);
|
||||
|
||||
for (; i < points; i++) {
|
||||
this.c2d.fillRect(
|
||||
this.x(buf[i * 2]) - offset,
|
||||
this.y(buf[i * 2 + 1]) - offset,
|
||||
pointSize,
|
||||
for (let i = 0; i < points; i++) {
|
||||
drawC2DShape(
|
||||
this.x(buf[i * 2]),
|
||||
this.y(buf[i * 2 + 1]),
|
||||
pointSize
|
||||
);
|
||||
}
|
||||
|
@ -23,30 +23,64 @@
|
||||
|
||||
define([
|
||||
'EventEmitter',
|
||||
'../lib/eventHelpers'
|
||||
'../lib/eventHelpers',
|
||||
'./MarkerShapes'
|
||||
], function (
|
||||
EventEmitter,
|
||||
eventHelpers
|
||||
eventHelpers,
|
||||
MARKER_SHAPES
|
||||
) {
|
||||
|
||||
// WebGL shader sources (for drawing plain colors)
|
||||
var FRAGMENT_SHADER = [
|
||||
"precision mediump float;",
|
||||
"uniform vec4 uColor;",
|
||||
"void main(void) {",
|
||||
"gl_FragColor = uColor;",
|
||||
"}"
|
||||
].join('\n'),
|
||||
VERTEX_SHADER = [
|
||||
"attribute vec2 aVertexPosition;",
|
||||
"uniform vec2 uDimensions;",
|
||||
"uniform vec2 uOrigin;",
|
||||
"uniform float uPointSize;",
|
||||
"void main(void) {",
|
||||
"gl_Position = vec4(2.0 * ((aVertexPosition - uOrigin) / uDimensions) - vec2(1,1), 0, 1);",
|
||||
"gl_PointSize = uPointSize;",
|
||||
"}"
|
||||
].join('\n');
|
||||
const FRAGMENT_SHADER = `
|
||||
precision mediump float;
|
||||
uniform vec4 uColor;
|
||||
uniform int uMarkerShape;
|
||||
|
||||
void main(void) {
|
||||
gl_FragColor = uColor;
|
||||
|
||||
if (uMarkerShape > 1) {
|
||||
vec2 clipSpacePointCoord = 2.0 * gl_PointCoord - 1.0;
|
||||
|
||||
if (uMarkerShape == 2) { // circle
|
||||
float distance = length(clipSpacePointCoord);
|
||||
|
||||
if (distance > 1.0) {
|
||||
discard;
|
||||
}
|
||||
} else if (uMarkerShape == 3) { // diamond
|
||||
float distance = abs(clipSpacePointCoord.x) + abs(clipSpacePointCoord.y);
|
||||
|
||||
if (distance > 1.0) {
|
||||
discard;
|
||||
}
|
||||
} else if (uMarkerShape == 4) { // triangle
|
||||
float x = clipSpacePointCoord.x;
|
||||
float y = clipSpacePointCoord.y;
|
||||
float distance = 2.0 * x - 1.0;
|
||||
float distance2 = -2.0 * x - 1.0;
|
||||
|
||||
if (distance > y || distance2 > y) {
|
||||
discard;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const VERTEX_SHADER = `
|
||||
attribute vec2 aVertexPosition;
|
||||
uniform vec2 uDimensions;
|
||||
uniform vec2 uOrigin;
|
||||
uniform float uPointSize;
|
||||
|
||||
void main(void) {
|
||||
gl_Position = vec4(2.0 * ((aVertexPosition - uOrigin) / uDimensions) - vec2(1,1), 0, 1);
|
||||
gl_PointSize = uPointSize;
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* Create a draw api utilizing WebGL.
|
||||
@ -90,6 +124,7 @@ define([
|
||||
this.vertexShader = this.gl.createShader(this.gl.VERTEX_SHADER);
|
||||
this.gl.shaderSource(this.vertexShader, VERTEX_SHADER);
|
||||
this.gl.compileShader(this.vertexShader);
|
||||
|
||||
this.fragmentShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
|
||||
this.gl.shaderSource(this.fragmentShader, FRAGMENT_SHADER);
|
||||
this.gl.compileShader(this.fragmentShader);
|
||||
@ -105,6 +140,7 @@ define([
|
||||
// shader programs (to pass values into shaders at draw-time)
|
||||
this.aVertexPosition = this.gl.getAttribLocation(this.program, "aVertexPosition");
|
||||
this.uColor = this.gl.getUniformLocation(this.program, "uColor");
|
||||
this.uMarkerShape = this.gl.getUniformLocation(this.program, "uMarkerShape");
|
||||
this.uDimensions = this.gl.getUniformLocation(this.program, "uDimensions");
|
||||
this.uOrigin = this.gl.getUniformLocation(this.program, "uOrigin");
|
||||
this.uPointSize = this.gl.getUniformLocation(this.program, "uPointSize");
|
||||
@ -114,9 +150,6 @@ define([
|
||||
// Create a buffer to holds points which will be drawn
|
||||
this.buffer = this.gl.createBuffer();
|
||||
|
||||
// Use a line width of 2.0 for legibility
|
||||
this.gl.lineWidth(2.0);
|
||||
|
||||
// Enable blending, for smoothness
|
||||
this.gl.enable(this.gl.BLEND);
|
||||
this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
|
||||
@ -138,14 +171,18 @@ define([
|
||||
((v - this.origin[1]) / this.dimensions[1]) * this.height;
|
||||
};
|
||||
|
||||
DrawWebGL.prototype.doDraw = function (drawType, buf, color, points) {
|
||||
DrawWebGL.prototype.doDraw = function (drawType, buf, color, points, shape) {
|
||||
if (this.isContextLost) {
|
||||
return;
|
||||
}
|
||||
|
||||
const shapeCode = MARKER_SHAPES[shape] ? MARKER_SHAPES[shape].drawWebGL : 0;
|
||||
|
||||
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
|
||||
this.gl.bufferData(this.gl.ARRAY_BUFFER, buf, this.gl.DYNAMIC_DRAW);
|
||||
this.gl.vertexAttribPointer(this.aVertexPosition, 2, this.gl.FLOAT, false, 0, 0);
|
||||
this.gl.uniform4fv(this.uColor, color);
|
||||
this.gl.uniform1i(this.uMarkerShape, shapeCode)
|
||||
this.gl.drawArrays(drawType, 0, points);
|
||||
};
|
||||
|
||||
@ -210,12 +247,12 @@ define([
|
||||
* Draw the buffer as points.
|
||||
*
|
||||
*/
|
||||
DrawWebGL.prototype.drawPoints = function (buf, color, points, pointSize) {
|
||||
DrawWebGL.prototype.drawPoints = function (buf, color, points, pointSize, shape) {
|
||||
if (this.isContextLost) {
|
||||
return;
|
||||
}
|
||||
this.gl.uniform1f(this.uPointSize, pointSize);
|
||||
this.doDraw(this.gl.POINTS, buf, color, points);
|
||||
this.doDraw(this.gl.POINTS, buf, color, points, shape);
|
||||
};
|
||||
|
||||
/**
|
||||
|
90
src/plugins/plot/src/draw/MarkerShapes.js
Normal file
90
src/plugins/plot/src/draw/MarkerShapes.js
Normal file
@ -0,0 +1,90 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2020, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define([], function () {
|
||||
/**
|
||||
* @label string (required) display name of shape
|
||||
* @drawWebGL integer (unique, required) index provided to WebGL Fragment Shader
|
||||
* @drawC2D function (required) canvas2d draw function
|
||||
*/
|
||||
const MARKER_SHAPES = {
|
||||
point: {
|
||||
label: 'Point',
|
||||
drawWebGL: 1,
|
||||
drawC2D: function (x, y, size) {
|
||||
const offset = size / 2;
|
||||
|
||||
this.c2d.fillRect(x - offset, y - offset, size, size);
|
||||
}
|
||||
},
|
||||
circle: {
|
||||
label: 'Circle',
|
||||
drawWebGL: 2,
|
||||
drawC2D: function (x, y, size) {
|
||||
const radius = size / 2;
|
||||
|
||||
this.c2d.beginPath();
|
||||
this.c2d.arc(x, y, radius, 0, 2 * Math.PI, false);
|
||||
this.c2d.closePath();
|
||||
this.c2d.fill();
|
||||
}
|
||||
},
|
||||
diamond: {
|
||||
label: 'Diamond',
|
||||
drawWebGL: 3,
|
||||
drawC2D: function (x, y, size) {
|
||||
const offset = size / 2;
|
||||
const top = [x, y + offset];
|
||||
const right = [x + offset, y];
|
||||
const bottom = [x, y - offset];
|
||||
const left = [x - offset, y];
|
||||
|
||||
this.c2d.beginPath();
|
||||
this.c2d.moveTo(...top);
|
||||
this.c2d.lineTo(...right);
|
||||
this.c2d.lineTo(...bottom);
|
||||
this.c2d.lineTo(...left);
|
||||
this.c2d.closePath();
|
||||
this.c2d.fill();
|
||||
}
|
||||
},
|
||||
triangle: {
|
||||
label: 'Triangle',
|
||||
drawWebGL: 4,
|
||||
drawC2D: function (x, y, size) {
|
||||
const offset = size / 2;
|
||||
const v1 = [x, y - offset];
|
||||
const v2 = [x - offset, y + offset];
|
||||
const v3 = [x + offset, y + offset];
|
||||
|
||||
this.c2d.beginPath();
|
||||
this.c2d.moveTo(...v1);
|
||||
this.c2d.lineTo(...v2);
|
||||
this.c2d.lineTo(...v3);
|
||||
this.c2d.closePath();
|
||||
this.c2d.fill();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return MARKER_SHAPES;
|
||||
});
|
@ -22,9 +22,11 @@
|
||||
|
||||
define([
|
||||
'./PlotModelFormController',
|
||||
'../draw/MarkerShapes',
|
||||
'lodash'
|
||||
], function (
|
||||
PlotModelFormController,
|
||||
MARKER_SHAPES,
|
||||
_
|
||||
) {
|
||||
|
||||
@ -93,6 +95,13 @@ define([
|
||||
value: o.key
|
||||
};
|
||||
});
|
||||
this.$scope.markerShapeOptions = Object.entries(MARKER_SHAPES)
|
||||
.map(([key, obj]) => {
|
||||
return {
|
||||
name: obj.label,
|
||||
value: key
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
fields: [
|
||||
@ -108,6 +117,10 @@ define([
|
||||
modelProp: 'markers',
|
||||
objectPath: dynamicPathForKey('markers')
|
||||
},
|
||||
{
|
||||
modelProp: 'markerShape',
|
||||
objectPath: dynamicPathForKey('markerShape')
|
||||
},
|
||||
{
|
||||
modelProp: 'markerSize',
|
||||
coerce: Number,
|
||||
|
@ -71,8 +71,6 @@ define([
|
||||
this.listenTo(this.$canvas, 'mouseleave', this.untrackMousePosition, this);
|
||||
this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
|
||||
this.listenTo(this.$canvas, 'wheel', this.wheelZoom, this);
|
||||
|
||||
this.watchForMarquee();
|
||||
};
|
||||
|
||||
MCTPlotController.prototype.initialize = function () {
|
||||
@ -83,11 +81,6 @@ define([
|
||||
this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
|
||||
this.listenTo(this.$canvas, 'wheel', this.wheelZoom, this);
|
||||
|
||||
this.watchForMarquee();
|
||||
|
||||
this.listenTo(this.$window, 'keydown', this.toggleInteractionMode, this);
|
||||
this.listenTo(this.$window, 'keyup', this.resetInteractionMode, this);
|
||||
|
||||
this.$scope.rectangles = [];
|
||||
this.$scope.tickWidth = 0;
|
||||
|
||||
@ -243,12 +236,16 @@ define([
|
||||
};
|
||||
|
||||
MCTPlotController.prototype.onMouseDown = function ($event) {
|
||||
// do not monitor drag events on browser context click
|
||||
if (event.ctrlKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.listenTo(this.$window, 'mouseup', this.onMouseUp, this);
|
||||
this.listenTo(this.$window, 'mousemove', this.trackMousePosition, this);
|
||||
if (this.allowPan) {
|
||||
if (event.altKey) {
|
||||
return this.startPan($event);
|
||||
}
|
||||
if (this.allowMarquee) {
|
||||
} else {
|
||||
return this.startMarquee($event);
|
||||
}
|
||||
};
|
||||
@ -261,11 +258,11 @@ define([
|
||||
this.$scope.lockHighlightPoint = !this.$scope.lockHighlightPoint;
|
||||
}
|
||||
|
||||
if (this.allowPan) {
|
||||
if (this.pan) {
|
||||
return this.endPan($event);
|
||||
}
|
||||
|
||||
if (this.allowMarquee) {
|
||||
if (this.marquee) {
|
||||
return this.endMarquee($event);
|
||||
}
|
||||
};
|
||||
@ -289,6 +286,9 @@ define([
|
||||
};
|
||||
|
||||
MCTPlotController.prototype.startMarquee = function ($event) {
|
||||
this.$canvas.removeClass('plot-drag');
|
||||
this.$canvas.addClass('plot-marquee');
|
||||
|
||||
this.trackMousePosition($event);
|
||||
if (this.positionOverPlot) {
|
||||
this.freeze();
|
||||
@ -444,6 +444,9 @@ define([
|
||||
};
|
||||
|
||||
MCTPlotController.prototype.startPan = function ($event) {
|
||||
this.$canvas.addClass('plot-drag');
|
||||
this.$canvas.removeClass('plot-marquee');
|
||||
|
||||
this.trackMousePosition($event);
|
||||
this.freeze();
|
||||
this.pan = {
|
||||
@ -486,32 +489,6 @@ define([
|
||||
this.$scope.$emit('user:viewport:change:end');
|
||||
};
|
||||
|
||||
MCTPlotController.prototype.watchForMarquee = function () {
|
||||
this.$canvas.removeClass('plot-drag');
|
||||
this.$canvas.addClass('plot-marquee');
|
||||
this.allowPan = false;
|
||||
this.allowMarquee = true;
|
||||
};
|
||||
|
||||
MCTPlotController.prototype.watchForPan = function () {
|
||||
this.$canvas.addClass('plot-drag');
|
||||
this.$canvas.removeClass('plot-marquee');
|
||||
this.allowPan = true;
|
||||
this.allowMarquee = false;
|
||||
};
|
||||
|
||||
MCTPlotController.prototype.toggleInteractionMode = function (event) {
|
||||
if (event.keyCode === 18) { // control key.
|
||||
this.watchForPan();
|
||||
}
|
||||
};
|
||||
|
||||
MCTPlotController.prototype.resetInteractionMode = function (event) {
|
||||
if (event.keyCode === 18) {
|
||||
this.watchForMarquee();
|
||||
}
|
||||
};
|
||||
|
||||
MCTPlotController.prototype.freeze = function () {
|
||||
this.config.yAxis.set('frozen', true);
|
||||
this.config.xAxis.set('frozen', true);
|
||||
|
@ -54,7 +54,8 @@ define([
|
||||
'./themes/snow',
|
||||
'./URLTimeSettingsSynchronizer/plugin',
|
||||
'./notificationIndicator/plugin',
|
||||
'./newFolderAction/plugin'
|
||||
'./newFolderAction/plugin',
|
||||
'./persistence/couch/plugin'
|
||||
], function (
|
||||
_,
|
||||
UTCTimeSystem,
|
||||
@ -89,12 +90,12 @@ define([
|
||||
Snow,
|
||||
URLTimeSettingsSynchronizer,
|
||||
NotificationIndicator,
|
||||
NewFolderAction
|
||||
NewFolderAction,
|
||||
CouchDBPlugin
|
||||
) {
|
||||
var bundleMap = {
|
||||
LocalStorage: 'platform/persistence/local',
|
||||
MyItems: 'platform/features/my-items',
|
||||
CouchDB: 'platform/persistence/couch',
|
||||
Elasticsearch: 'platform/persistence/elastic'
|
||||
};
|
||||
|
||||
@ -126,27 +127,7 @@ define([
|
||||
|
||||
plugins.Conductor = TimeConductorPlugin.default;
|
||||
|
||||
plugins.CouchDB = function (url) {
|
||||
return function (openmct) {
|
||||
if (url) {
|
||||
var bundleName = "config/couch";
|
||||
openmct.legacyRegistry.register(bundleName, {
|
||||
"extensions": {
|
||||
"constants": [
|
||||
{
|
||||
"key": "COUCHDB_PATH",
|
||||
"value": url,
|
||||
"priority": "mandatory"
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
openmct.legacyRegistry.enable(bundleName);
|
||||
}
|
||||
|
||||
openmct.legacyRegistry.enable(bundleMap.CouchDB);
|
||||
};
|
||||
};
|
||||
plugins.CouchDB = CouchDBPlugin.default;
|
||||
|
||||
plugins.Elasticsearch = function (url) {
|
||||
return function (openmct) {
|
||||
|
@ -1,7 +0,0 @@
|
||||
# Espresso Theme
|
||||
A light colored theme for the Open MCT user interface.
|
||||
|
||||
## Installation
|
||||
```js
|
||||
openmct.install(openmct.plugins.Snow());
|
||||
```
|
@ -3,7 +3,7 @@
|
||||
<div
|
||||
class="c-tabs-view__tabs-holder c-tabs"
|
||||
:class="{
|
||||
'is-dragging': isDragging,
|
||||
'is-dragging': isDragging && allowEditing,
|
||||
'is-mouse-over': allowDrop
|
||||
}"
|
||||
>
|
||||
@ -22,14 +22,24 @@
|
||||
<button
|
||||
v-for="(tab,index) in tabsList"
|
||||
:key="index"
|
||||
class="c-tabs-view__tab c-tab"
|
||||
:class="[
|
||||
{'is-current': isCurrent(tab)},
|
||||
tab.type.definition.cssClass
|
||||
]"
|
||||
class="c-tab c-tabs-view__tab"
|
||||
:class="{
|
||||
'is-current': isCurrent(tab)
|
||||
}"
|
||||
@click="showTab(tab, index)"
|
||||
>
|
||||
<span class="c-button__label">{{ tab.domainObject.name }}</span>
|
||||
<div class="c-object-label"
|
||||
:class="{'is-missing': tab.domainObject.status === 'missing'}"
|
||||
>
|
||||
<div class="c-object-label__type-icon"
|
||||
:class="tab.type.definition.cssClass"
|
||||
>
|
||||
<span class="is-missing__indicator"
|
||||
title="This item is missing"
|
||||
></span>
|
||||
</div>
|
||||
<span class="c-button__label c-object-label__name">{{ tab.domainObject.name }}</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
@ -38,15 +48,6 @@
|
||||
class="c-tabs-view__object-holder"
|
||||
:class="{'c-tabs-view__object-holder--hidden': !isCurrent(tab)}"
|
||||
>
|
||||
<div
|
||||
v-if="currentTab"
|
||||
class="c-tabs-view__object-name c-object-label l-browse-bar__object-name--w"
|
||||
:class="currentTab.type.definition.cssClass"
|
||||
>
|
||||
<div class="l-browse-bar__object-name c-object-label__name">
|
||||
{{ currentTab.domainObject.name }}
|
||||
</div>
|
||||
</div>
|
||||
<object-view
|
||||
v-if="internalDomainObject.keep_alive ? currentTab : isCurrent(tab)"
|
||||
class="c-tabs-view__object"
|
||||
@ -58,6 +59,12 @@
|
||||
|
||||
<script>
|
||||
import ObjectView from '../../../ui/components/ObjectView.vue';
|
||||
import {
|
||||
getSearchParam,
|
||||
setSearchParam,
|
||||
deleteSearchParam
|
||||
} from 'utils/openmctLocation';
|
||||
|
||||
|
||||
var unknownObjectType = {
|
||||
definition: {
|
||||
@ -71,26 +78,45 @@ export default {
|
||||
components: {
|
||||
ObjectView
|
||||
},
|
||||
props: {
|
||||
isEditing: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
let keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
|
||||
|
||||
return {
|
||||
internalDomainObject: this.domainObject,
|
||||
currentTab: {},
|
||||
currentTabIndex: undefined,
|
||||
tabsList: [],
|
||||
setCurrentTab: true,
|
||||
isDragging: false,
|
||||
allowDrop: false
|
||||
allowDrop: false,
|
||||
searchTabKey: `tabs.pos.${keyString}`
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
allowEditing() {
|
||||
return !this.internalDomainObject.locked && this.isEditing;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.composition) {
|
||||
this.composition.on('add', this.addItem);
|
||||
this.composition.on('remove', this.removeItem);
|
||||
this.composition.on('reorder', this.onReorder);
|
||||
this.composition.load().then(() => {
|
||||
let currentTabIndex = this.domainObject.currentTabIndex;
|
||||
let currentTabIndexFromURL = getSearchParam(this.searchTabKey);
|
||||
let currentTabIndexFromDomainObject = this.internalDomainObject.currentTabIndex;
|
||||
|
||||
if (currentTabIndex !== undefined && this.tabsList.length > currentTabIndex) {
|
||||
this.currentTab = this.tabsList[currentTabIndex];
|
||||
if (currentTabIndexFromURL !== null) {
|
||||
this.setCurrentTabByIndex(currentTabIndexFromURL);
|
||||
} else if (currentTabIndexFromDomainObject !== undefined) {
|
||||
this.setCurrentTabByIndex(currentTabIndexFromDomainObject);
|
||||
this.storeCurrentTabIndexInURL(currentTabIndexFromDomainObject);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -100,20 +126,29 @@ export default {
|
||||
document.addEventListener('dragstart', this.dragstart);
|
||||
document.addEventListener('dragend', this.dragend);
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.persistCurrentTabIndex(this.currentTabIndex);
|
||||
},
|
||||
destroyed() {
|
||||
this.composition.off('add', this.addItem);
|
||||
this.composition.off('remove', this.removeItem);
|
||||
this.composition.off('reorder', this.onReorder);
|
||||
|
||||
this.unsubscribe();
|
||||
this.clearCurrentTabIndexFromURL();
|
||||
|
||||
document.removeEventListener('dragstart', this.dragstart);
|
||||
document.removeEventListener('dragend', this.dragend);
|
||||
},
|
||||
methods:{
|
||||
setCurrentTabByIndex(index) {
|
||||
if (this.tabsList[index]) {
|
||||
this.currentTab = this.tabsList[index];
|
||||
}
|
||||
},
|
||||
showTab(tab, index) {
|
||||
if (index !== undefined) {
|
||||
this.storeCurrentTabIndex(index);
|
||||
this.storeCurrentTabIndexInURL(index);
|
||||
}
|
||||
|
||||
this.currentTab = tab;
|
||||
@ -133,6 +168,10 @@ export default {
|
||||
this.setCurrentTab = false;
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.currentTab = {};
|
||||
this.setCurrentTab = true;
|
||||
},
|
||||
removeItem(identifier) {
|
||||
let pos = this.tabsList.findIndex(tab =>
|
||||
tab.domainObject.identifier.namespace === identifier.namespace && tab.domainObject.identifier.key === identifier.key
|
||||
@ -144,6 +183,10 @@ export default {
|
||||
if (this.isCurrent(tabToBeRemoved)) {
|
||||
this.showTab(this.tabsList[this.tabsList.length - 1], this.tabsList.length - 1);
|
||||
}
|
||||
|
||||
if (!this.tabsList.length) {
|
||||
this.reset();
|
||||
}
|
||||
},
|
||||
onReorder(reorderPlan) {
|
||||
let oldTabs = this.tabsList.slice();
|
||||
@ -154,7 +197,7 @@ export default {
|
||||
},
|
||||
onDrop(e) {
|
||||
this.setCurrentTab = true;
|
||||
this.storeCurrentTabIndex(this.tabsList.length);
|
||||
this.storeCurrentTabIndexInURL(this.tabsList.length);
|
||||
},
|
||||
dragstart(e) {
|
||||
if (e.dataTransfer.types.includes('openmct/domain-object-path')) {
|
||||
@ -177,8 +220,19 @@ export default {
|
||||
updateInternalDomainObject(domainObject) {
|
||||
this.internalDomainObject = domainObject;
|
||||
},
|
||||
storeCurrentTabIndex(index) {
|
||||
persistCurrentTabIndex(index) {
|
||||
this.openmct.objects.mutate(this.internalDomainObject, 'currentTabIndex', index);
|
||||
},
|
||||
storeCurrentTabIndexInURL(index) {
|
||||
let currentTabIndexInURL = getSearchParam(this.searchTabKey);
|
||||
|
||||
if (index !== currentTabIndexInURL) {
|
||||
setSearchParam(this.searchTabKey, index);
|
||||
this.currentTabIndex = index;
|
||||
}
|
||||
},
|
||||
clearCurrentTabIndexFromURL() {
|
||||
deleteSearchParam(this.searchTabKey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -42,20 +42,28 @@ define([
|
||||
let component;
|
||||
|
||||
return {
|
||||
show: function (element) {
|
||||
show: function (element, editMode) {
|
||||
component = new Vue({
|
||||
el: element,
|
||||
components: {
|
||||
TabsComponent: TabsComponent.default
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isEditing: editMode
|
||||
};
|
||||
},
|
||||
provide: {
|
||||
openmct,
|
||||
domainObject,
|
||||
composition: openmct.composition.get(domainObject)
|
||||
},
|
||||
template: '<tabs-component></tabs-component>'
|
||||
template: '<tabs-component :isEditing="isEditing"></tabs-component>'
|
||||
});
|
||||
},
|
||||
onEditModeChange(editMode) {
|
||||
component.isEditing = editMode;
|
||||
},
|
||||
destroy: function (element) {
|
||||
component.$destroy();
|
||||
component = undefined;
|
||||
|
@ -151,6 +151,10 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
|
||||
$browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
|
||||
$browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
|
||||
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
|
||||
$filterItemHoverFg: brightness(1.2) contrast(1.1);
|
||||
$filterItemMissing: brightness(0.6) grayscale(1);
|
||||
$opacityMissing: 0.5;
|
||||
$borderMissing: 1px dashed $colorAlert !important;
|
||||
|
||||
/************************************************** EDITING */
|
||||
$editUIColor: $uiColor; // Base color
|
||||
|
@ -155,6 +155,10 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
|
||||
$browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
|
||||
$browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
|
||||
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
|
||||
$filterItemHoverFg: brightness(1.2) contrast(1.1);
|
||||
$filterItemMissing: contrast(0.2);
|
||||
$opacityMissing: 0.5;
|
||||
$borderMissing: 1px dashed $colorAlert !important;
|
||||
|
||||
/************************************************** EDITING */
|
||||
$editUIColor: $uiColor; // Base color
|
||||
|
@ -151,6 +151,10 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
|
||||
$browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
|
||||
$browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
|
||||
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
|
||||
$filterItemHoverFg: brightness(0.9);
|
||||
$filterItemMissing: contrast(0.2);
|
||||
$opacityMissing: 0.4;
|
||||
$borderMissing: 1px dashed $colorAlert !important;
|
||||
|
||||
/************************************************** EDITING */
|
||||
$editUIColor: $uiColor; // Base color
|
||||
|
@ -61,7 +61,7 @@ $plotXBarH: 35px;
|
||||
$plotLegendH: 20px;
|
||||
$plotLegendWidthCollapsed: 20%;
|
||||
$plotLegendWidthExpanded: 50%;
|
||||
$plotSwatchD: 10px;
|
||||
$plotSwatchD: 12px;
|
||||
$plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW); // 1: Top, 2: right, 3: bottom, 4: left
|
||||
$plotMinH: 95px;
|
||||
$controlBarH: 25px;
|
||||
|
@ -411,7 +411,17 @@ select {
|
||||
|
||||
.c-tab {
|
||||
// Used in Tab View, generic tabs
|
||||
background: $colorBtnBg;
|
||||
$notchSize: 7px;
|
||||
$clipPath:
|
||||
polygon(
|
||||
0% 0%,
|
||||
calc(100% - #{$notchSize}) 0%,
|
||||
100% #{$notchSize},
|
||||
100% calc(100% - #{$notchSize}),
|
||||
100% 100%,
|
||||
0% 100%
|
||||
);
|
||||
background: rgba($colorBtnBg, 0.7);
|
||||
color: $colorBtnFg;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
@ -420,21 +430,15 @@ select {
|
||||
margin: 1px 1px 0 0;
|
||||
padding: $interiorMargin $interiorMarginLg;
|
||||
white-space: nowrap;
|
||||
clip-path: $clipPath;
|
||||
-webkit-clip-path: $clipPath; // Safari
|
||||
|
||||
--notchSize: 7px;
|
||||
|
||||
clip-path:
|
||||
polygon(
|
||||
0% 0%,
|
||||
calc(100% - var(--notchSize)) 0%,
|
||||
100% var(--notchSize),
|
||||
100% calc(100% - var(--notchSize)),
|
||||
100% 100%,
|
||||
0% 100%
|
||||
);
|
||||
> * + * {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
|
||||
@include hover() {
|
||||
background: $colorBtnBgHov;
|
||||
filter: $filterHov;
|
||||
}
|
||||
|
||||
&.is-current {
|
||||
|
@ -43,7 +43,9 @@ mct-plot {
|
||||
|
||||
.c-plot,
|
||||
.gl-plot {
|
||||
.s-status-taking-snapshot & {
|
||||
overflow: hidden;
|
||||
|
||||
.s-status-taking-snapshot & {
|
||||
.c-control-bar {
|
||||
display: none;
|
||||
}
|
||||
@ -51,6 +53,17 @@ mct-plot {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*********************** MISSING ITEM INDICATORS */
|
||||
.is-missing__indicator {
|
||||
display: none;
|
||||
}
|
||||
.is-missing {
|
||||
@include isMissing();
|
||||
.is-missing__indicator {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-plot {
|
||||
@ -74,6 +87,7 @@ mct-plot {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&--stacked {
|
||||
@ -102,18 +116,15 @@ mct-plot {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.gl-plot {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: $plotMinH;
|
||||
flex: 1 1 auto;
|
||||
|
||||
/*********************** AXIS AND DISPLAY AREA */
|
||||
.plot-wrapper-axis-and-display-area {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
min-height: $plotMinH;
|
||||
}
|
||||
|
||||
.gl-plot-wrapper-display-area-and-x-axis {
|
||||
@ -196,7 +207,6 @@ mct-plot {
|
||||
left: 0; top: 0; right: auto; bottom: 0;
|
||||
padding-left: 5px;
|
||||
text-orientation: mixed;
|
||||
//overflow: hidden;
|
||||
writing-mode: vertical-lr;
|
||||
&:before {
|
||||
// Icon denoting configurability
|
||||
@ -368,12 +378,6 @@ mct-plot {
|
||||
z-index: -10;
|
||||
|
||||
.l-view-section {
|
||||
//$m: $interiorMargin;
|
||||
//top: $m !important;
|
||||
//right: $m;
|
||||
//bottom: $m;
|
||||
//left: $m;
|
||||
|
||||
.s-status-timeconductor-unsynced .holder-plot {
|
||||
.t-object-alert.t-alert-unsynced {
|
||||
display: none;
|
||||
@ -429,14 +433,18 @@ mct-plot {
|
||||
/****************** _LEGEND.SCSS */
|
||||
.gl-plot-legend,
|
||||
.c-plot-legend {
|
||||
overflow: hidden;
|
||||
|
||||
&__wrapper {
|
||||
// Holds view-control and both collapsed and expanded legends
|
||||
flex: 1 1 auto;
|
||||
overflow: auto; // Prevents collapsed legend from forcing scrollbars on higher parent containers
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
&__view-control {
|
||||
padding-top: 2px;
|
||||
padding-top: 4px;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
@ -481,15 +489,21 @@ mct-plot {
|
||||
/***************** GENERAL STYLES, ALL STATES */
|
||||
.plot-legend-item {
|
||||
// General styles for legend items, both expanded and collapsed legend states
|
||||
> * + * {
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
|
||||
.plot-series-color-swatch {
|
||||
border-radius: $smallCr;
|
||||
border-radius: 30%; //$smallCr;
|
||||
border: 1px solid $colorBodyBg;
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
height: $plotSwatchD;
|
||||
width: $plotSwatchD;
|
||||
}
|
||||
.plot-series-name {
|
||||
display: inline;
|
||||
@include ellipsize();
|
||||
}
|
||||
|
||||
.plot-series-value {
|
||||
@ -497,6 +511,16 @@ mct-plot {
|
||||
}
|
||||
}
|
||||
|
||||
.plot-series-swatch-and-name {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
align-items: center;
|
||||
|
||||
> * + * {
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
.plot-wrapper-expanded-legend {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@ -505,9 +529,6 @@ mct-plot {
|
||||
&.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
|
||||
&.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }
|
||||
|
||||
&.plot-legend-collapsed .icon-cursor-lock::before { padding-right: 5px; }
|
||||
&.plot-legend-expanded .icon-cursor-lock::before { padding-right: 5px; }
|
||||
|
||||
&.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
|
||||
&.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
|
||||
&.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
|
||||
@ -521,19 +542,13 @@ mct-plot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
&:not(:first-child) {
|
||||
margin-left: $interiorMarginLg;
|
||||
}
|
||||
|
||||
.plot-series-swatch-and-name,
|
||||
.plot-series-value {
|
||||
@include ellipsize();
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.plot-series-swatch-and-name {
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
.plot-series-value {
|
||||
text-align: left;
|
||||
}
|
||||
@ -543,7 +558,7 @@ mct-plot {
|
||||
/***************** GENERAL STYLES, EXPANDED */
|
||||
&.plot-legend-expanded {
|
||||
.gl-plot-legend {
|
||||
// max-height: 70%;
|
||||
max-height: 70%;
|
||||
}
|
||||
|
||||
.plot-wrapper-expanded-legend {
|
||||
@ -564,6 +579,11 @@ mct-plot {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
|
||||
> .plot-legend-item + .plot-legend-item {
|
||||
// Space between plot items
|
||||
margin-left: $interiorMarginLg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -595,12 +615,17 @@ mct-plot {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
|
||||
> * + * {
|
||||
// Space between plot items
|
||||
margin-top: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
.plot-legend-item {
|
||||
margin-bottom: 1px;
|
||||
margin-left: 0;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
.plot-series-swatch-and-name {
|
||||
@include ellipsize();
|
||||
flex: 0 1 auto;
|
||||
min-width: 20%;
|
||||
}
|
||||
@ -654,3 +679,24 @@ mct-plot {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*********************** CURSOR LOCK INDICATOR */
|
||||
[class*='c-state-indicator__alert-cursor-lock'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[class*='is-cursor-locked'] {
|
||||
background: rgba($colorInfo, 0.1);
|
||||
|
||||
[class*='c-state-indicator__alert-cursor-lock'] {
|
||||
@include userSelectNone();
|
||||
color: $colorInfo;
|
||||
display: block;
|
||||
margin-right: $interiorMarginSm;
|
||||
|
||||
&[class*='--verbose'] {
|
||||
padding: $interiorMarginSm;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -117,6 +117,33 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin isMissing($absPos: false) {
|
||||
// Common styles to be applied to tree items, object labels, grid and list item views
|
||||
//opacity: 0.7;
|
||||
//pointer-events: none; // Don't think we can do this, as disables title hover on icon element
|
||||
|
||||
.is-missing__indicator {
|
||||
display: none ;
|
||||
text-shadow: $colorBodyBg 0 0 2px;
|
||||
color: $colorAlert;
|
||||
font-family: symbolsfont;
|
||||
|
||||
&:before {
|
||||
content: $glyph-icon-alert-triangle;
|
||||
}
|
||||
}
|
||||
|
||||
@if $absPos {
|
||||
.is-missing__indicator {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-missing .is-missing__indicator,
|
||||
.is-missing .is-missing__indicator { display: block !important; }
|
||||
}
|
||||
|
||||
@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
|
||||
background-image: linear-gradient(-45deg,
|
||||
rgba($c, $a) 25%, transparent 25%,
|
||||
|
@ -49,8 +49,6 @@ table {
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
a { color: $colorBtnMajorBg; }
|
||||
}
|
||||
|
||||
.is-editing {
|
||||
|
@ -13,7 +13,6 @@
|
||||
@import "../plugins/filters/components/filters-view.scss";
|
||||
@import "../plugins/filters/components/global-filters.scss";
|
||||
@import "../plugins/flexibleLayout/components/flexible-layout.scss";
|
||||
@import "../plugins/folderView/components/grid-item.scss";
|
||||
@import "../plugins/folderView/components/grid-view.scss";
|
||||
@import "../plugins/folderView/components/list-item.scss";
|
||||
@import "../plugins/folderView/components/list-view.scss";
|
||||
|
@ -24,13 +24,24 @@
|
||||
class="c-so-view has-local-controls"
|
||||
:class="{
|
||||
'c-so-view--no-frame': !hasFrame,
|
||||
'has-complex-content': complexContent
|
||||
'has-complex-content': complexContent,
|
||||
'is-missing': domainObject.status === 'missing'
|
||||
}"
|
||||
>
|
||||
<div class="c-so-view__header">
|
||||
<div class="c-object-label"
|
||||
:class="[cssClass, classList]"
|
||||
:class="{
|
||||
classList,
|
||||
'is-missing': domainObject.status === 'missing'
|
||||
}"
|
||||
>
|
||||
<div class="c-object-label__type-icon"
|
||||
:class="cssClass"
|
||||
>
|
||||
<span class="is-missing__indicator"
|
||||
title="This item is missing"
|
||||
></span>
|
||||
</div>
|
||||
<div class="c-object-label__name">
|
||||
{{ domainObject && domainObject.name }}
|
||||
</div>
|
||||
@ -46,6 +57,9 @@
|
||||
@click="expand"
|
||||
></button>
|
||||
</div>
|
||||
<div class="is-missing__indicator"
|
||||
title="This item is missing"
|
||||
></div>
|
||||
<object-view
|
||||
ref="objectView"
|
||||
class="c-so-view__object-view"
|
||||
|
@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<a
|
||||
class="c-tree__item__label c-object-label"
|
||||
:class="classList"
|
||||
:class="{
|
||||
classList,
|
||||
'is-missing': observedObject.status === 'missing'
|
||||
}"
|
||||
draggable="true"
|
||||
:href="objectLink"
|
||||
@dragstart="dragStart"
|
||||
@ -10,8 +13,14 @@
|
||||
<div
|
||||
class="c-tree__item__type-icon c-object-label__type-icon"
|
||||
:class="typeClass"
|
||||
></div>
|
||||
<div class="c-tree__item__name c-object-label__name">{{ observedObject.name }}</div>
|
||||
>
|
||||
<span class="is-missing__indicator"
|
||||
title="This item is missing"
|
||||
></span>
|
||||
</div>
|
||||
<div class="c-tree__item__name c-object-label__name">
|
||||
{{ observedObject.name }}
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
|
@ -53,7 +53,9 @@ export default {
|
||||
mounted() {
|
||||
this.currentObject = this.object;
|
||||
this.updateView();
|
||||
this.$el.addEventListener('dragover', this.onDragOver);
|
||||
this.$el.addEventListener('dragover', this.onDragOver, {
|
||||
capture: true
|
||||
});
|
||||
this.$el.addEventListener('drop', this.editIfEditable, {
|
||||
capture: true
|
||||
});
|
||||
@ -269,6 +271,7 @@ export default {
|
||||
if (provider &&
|
||||
provider.canEdit &&
|
||||
provider.canEdit(this.currentObject) &&
|
||||
this.isEditingAllowed() &&
|
||||
!this.openmct.editor.isEditing()) {
|
||||
this.openmct.editor.edit();
|
||||
}
|
||||
@ -301,7 +304,7 @@ export default {
|
||||
objectPath= this.currentObjectPath || this.objectPath,
|
||||
parentObject = objectPath[1];
|
||||
|
||||
return [browseObject, parentObject, this.currentObject].every(object => !object.locked);
|
||||
return [browseObject, parentObject, this.currentObject].every(object => object && !object.locked);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -2,6 +2,10 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.is-missing {
|
||||
border: $borderMissing;
|
||||
}
|
||||
|
||||
/*************************** HEADER */
|
||||
&__header {
|
||||
flex: 0 0 auto;
|
||||
@ -39,6 +43,15 @@
|
||||
> .c-so-view__local-controls {
|
||||
top: $interiorMarginSm; right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&.is-missing {
|
||||
@include isMissing($absPos: true);
|
||||
|
||||
.is-missing__indicator {
|
||||
top: $interiorMargin;
|
||||
left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__local-controls {
|
||||
@ -61,11 +74,9 @@
|
||||
height: 0; // Chrome 73 overflow bug fix
|
||||
overflow: auto;
|
||||
|
||||
.u-angular-object-view-wrapper {
|
||||
.u-fills-container {
|
||||
// Expand component types that fill a container
|
||||
@include abs();
|
||||
}
|
||||
.u-fills-container {
|
||||
// Expand component types that fill a container
|
||||
@include abs();
|
||||
}
|
||||
}
|
||||
|
||||
@ -78,8 +89,5 @@
|
||||
}
|
||||
|
||||
.u-angular-object-view-wrapper {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: contents;
|
||||
}
|
||||
|
@ -7,19 +7,33 @@
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
> * + * { margin-left: $interiorMargin; }
|
||||
|
||||
&__name {
|
||||
@include ellipsize();
|
||||
display: inline;
|
||||
}
|
||||
|
||||
&__type-icon,
|
||||
&:before {
|
||||
&__type-icon {
|
||||
// Type icon. Must be an HTML entity to allow inclusion of alias indicator.
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
font-size: 1.1em;
|
||||
opacity: 0.6;
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
|
||||
&.is-missing {
|
||||
@include isMissing($absPos: true);
|
||||
|
||||
[class*='__type-icon']:before,
|
||||
[class*='__type-icon']:after{
|
||||
opacity: $opacityMissing;
|
||||
}
|
||||
|
||||
.is-missing__indicator {
|
||||
right: -3px;
|
||||
top: -3px;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,6 +41,8 @@
|
||||
border-radius: $controlCr;
|
||||
padding: $interiorMarginSm 1px;
|
||||
|
||||
> * + * { margin-left: $interiorMarginSm; }
|
||||
|
||||
&__name {
|
||||
display: inline;
|
||||
width: 100%;
|
||||
|
@ -1,16 +1,24 @@
|
||||
<template>
|
||||
<div class="c-inspector__header">
|
||||
<div v-if="!multiSelect && !singleSelectNonObject"
|
||||
<div v-if="!multiSelect"
|
||||
class="c-inspector__selected-w c-object-label"
|
||||
:class="typeCssClass"
|
||||
:class="{'is-missing': domainObject.status === 'missing' }"
|
||||
>
|
||||
<span class="c-inspector__selected c-object-label__name">{{ item.name }}</span>
|
||||
</div>
|
||||
<div v-if="singleSelectNonObject"
|
||||
class="c-inspector__selected-w c-object-label"
|
||||
:class="typeCssClass"
|
||||
>
|
||||
<span class="c-inspector__selected c-object-label__name c-inspector__selected--non-domain-object">Layout Object</span>
|
||||
<div class="c-object-label__type-icon"
|
||||
:class="typeCssClass"
|
||||
>
|
||||
<span class="is-missing__indicator"
|
||||
title="This item is missing"
|
||||
></span>
|
||||
</div>
|
||||
|
||||
<span v-if="!singleSelectNonObject"
|
||||
class="c-inspector__selected c-object-label__name"
|
||||
>{{ item.name }}</span>
|
||||
<span v-if="singleSelectNonObject"
|
||||
class="c-inspector__selected c-object-label__name c-inspector__selected--non-domain-object"
|
||||
>Layout Object</span>
|
||||
|
||||
</div>
|
||||
<div v-if="multiSelect"
|
||||
class="c-inspector__multiple-selected-w"
|
||||
|
@ -4,7 +4,7 @@
|
||||
flex-direction: column;
|
||||
|
||||
> * {
|
||||
// Thi is on purpose: want extra margin on top object-name element
|
||||
// This is on purpose: want extra margin on top object-name element
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
|
||||
@ -41,6 +41,8 @@
|
||||
|
||||
&__content {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__elements {
|
||||
|
@ -8,8 +8,18 @@
|
||||
></button>
|
||||
<div
|
||||
class="l-browse-bar__object-name--w c-object-label"
|
||||
:class="[ type.cssClass, classList ]"
|
||||
:class="{
|
||||
classList,
|
||||
'is-missing': domainObject.status === 'missing'
|
||||
}"
|
||||
>
|
||||
<div class="c-object-label__type-icon"
|
||||
:class="type.cssClass"
|
||||
>
|
||||
<span class="is-missing__indicator"
|
||||
title="This item is missing"
|
||||
></span>
|
||||
</div>
|
||||
<span
|
||||
class="l-browse-bar__object-name c-object-label__name c-input-inline"
|
||||
contenteditable
|
||||
|
@ -354,9 +354,9 @@
|
||||
@include headerFont(1.4em);
|
||||
min-width: 0;
|
||||
|
||||
&:before {
|
||||
// Icon
|
||||
margin-right: $interiorMargin;
|
||||
.is-missing__indicator {
|
||||
right: -5px !important;
|
||||
top: -4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -52,12 +52,13 @@
|
||||
padding: $interiorMarginSm $interiorMargin;
|
||||
transition: background 150ms ease;
|
||||
|
||||
&__type-icon {
|
||||
color: $colorItemTreeIcon;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $colorItemTreeHoverBg;
|
||||
|
||||
[class*="__name"] {
|
||||
color: $colorItemTreeHoverFg;
|
||||
}
|
||||
filter: $filterHov;
|
||||
}
|
||||
|
||||
&.is-navigated-object,
|
||||
@ -81,12 +82,6 @@
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.c-tree__item__type-icon:before {
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-navigated-object,
|
||||
&.is-selected {
|
||||
.c-tree__item__type-icon:before {
|
||||
@ -115,10 +110,6 @@
|
||||
color: $colorItemTreeFg;
|
||||
}
|
||||
|
||||
&__type-icon {
|
||||
color: $colorItemTreeIcon;
|
||||
}
|
||||
|
||||
&.is-alias {
|
||||
// Object is an alias to an original.
|
||||
[class*='__type-icon'] {
|
||||
|
@ -76,16 +76,23 @@
|
||||
[class*='minify-indicators'] {
|
||||
// All styles for minified Indicators should go in here
|
||||
.c-indicator:not(.no-minify) {
|
||||
border: 1px solid transparent; // Hack to make minified sizing work in Safari. Have no idea why this works.
|
||||
overflow: visible;
|
||||
transition: transform;
|
||||
|
||||
@include hover() {
|
||||
background: $colorIndicatorBgHov;
|
||||
transition: transform 250ms ease-in 200ms; // Go-away transition
|
||||
|
||||
.c-indicator__label {
|
||||
box-shadow: $colorIndicatorMenuBgShdw;
|
||||
transform: scale(1.0);
|
||||
transition: all 100ms ease-out 100ms;
|
||||
overflow: visible;
|
||||
transition: transform 100ms ease-out 100ms; // Appear transition
|
||||
}
|
||||
}
|
||||
.c-indicator__label {
|
||||
transition: all 250ms ease-in 200ms;
|
||||
transition: transform 250ms ease-in 200ms; // Go-away transition
|
||||
background: $colorIndicatorMenuBg;
|
||||
color: $colorIndicatorMenuFg;
|
||||
border-radius: $controlCr;
|
||||
@ -95,7 +102,7 @@
|
||||
position: absolute;
|
||||
transform-origin: 90% 0;
|
||||
transform: scale(0.0);
|
||||
overflow: visible;
|
||||
overflow: hidden;
|
||||
z-index: 50;
|
||||
|
||||
&:before {
|
||||
|
Reference in New Issue
Block a user