"use strict";
// Copyright 2012 United States Government, as represented by the Secretary of Defense, Under
// Secretary of Defense (Personnel & Readiness).
//
// 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.
/// vwf/view/editor creates a view interface for editor functions.
///
/// @module vwf/view/editor
/// @requires version
/// @requires vwf/view
/// @requires vwf/utility
define([
"module",
"version",
"vwf/view",
"vwf/utility",
"vwf/view/lib/ace/ace",
"jquery",
"jquery-ui",
"jquery-encoder-0.1.0"
], function (module, version, view, utility, ace, $) {
var self;
return view.load(module, {
// == Module Definition ====================================================================
initialize: function () {
self = this;
this.ace = window.ace;
this.nodes = {};
this.scenes = {};
this.allScripts = {};
// EDITOR CLOSED --> 0
// HIERARCHY OPEN --> 1
// USER LIST OPEN --> 2
// TIMELINE OPEN --> 3
// ABOUT OPEN --> 4
this.editorView = 0;
this.editorOpen = false;
this.timelineInit = false;
this.aboutInit = false;
this.codeEditorInit = false;
this.modelsInit = false;
this.editingScript = false;
this.topdownName = '#topdown_a';
this.topdownTemp = '#topdown_b';
this.clientList = '#client_list';
this.timeline = '#time_control';
this.about = '#about_tab';
this.codeEditor = '#codeEditor_tab';
this.models = '#model_a';
this.modelsTemp = '#model_b';
this.currentNodeID = '';
this.currentModelID = '';
this.currentModelURL = '';
this.highlightedChild = '';
this.intervalTimer = 0;
this.activeCameraID = undefined;
$(document.head).append('');
document.querySelector('head').innerHTML += '\n" +
"
\n" +
"
\n" +
"
\n" +
"
\n" +
"
\n" +
"
\n" +
"
\n" +
"
\n" +
"
\n" +
"
\n" +
"
\n" +
"
["drawer", "toolbar", "sideBar", "propWindow", "clientsWindow", "codeEditorWindow", "viewSceneProps"].forEach(item => {
let el = document.createElement("div");
el.setAttribute("id", item);
document.body.appendChild(el);
}
);
function avatarCardDef(src, desc, onclickfunc) {
return {
$cell: true,
$type: "div",
class: "mdc-card avatar-card",
$init: function () {
this.style.backgroundImage = 'linear-gradient(0deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0) ), url(' + src + ')'
},
onclick: onclickfunc,
$components: [
{
$type: "section",
class: "mdc-card__primary",
$components: [
{
$type: "h1",
class: "mdc-card__title mdc-card__title--large",
$text: desc.subtitle
},
{
$type: "h2",
class: "mdc-card__subtitle",
$text: desc.title
}
]
},
{
$type: "section",
class: "mdc-card__actions",
$components: [
{
$type: "button",
class: "mdc-button mdc-button--compact mdc-card__action",
//$text: "Use it",
onclick: onclickfunc
}
]
}
]
}
}
let avatarSettings =
{
$cell: true,
$type: "div",
class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__inner",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
$components: [
{
$cell: true,
$type: "button",
class: "mdc-button mdc-button--raised",
$text: "Reset camera view",
onclick: function (e) {
//document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
let controlEl = document.querySelector('#avatarControl');
controlEl.setAttribute('camera', 'active', true);
}
},
{
$cell: true,
$type: "button",
class: "mdc-button mdc-button--raised",
$text: "Hide cursor",
onclick: function (e) {
//document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
let avatarID = 'avatar-' + self.kernel.moniker();
let cursorID = 'myCursor-' + avatarID;
let controlEl = document.querySelector("[id='" + cursorID + "']");
let vis = controlEl.getAttribute('visible');
this.$text = vis ? 'Show cursor' : 'Hide cursor';
vwf_view.kernel.callMethod(avatarID, "showHideCursor", [!vis]);
//controlEl.setAttribute('visible', !vis);
}
}
]
},
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
$components: [
{
$type: "div",
class: "mdc-layout-grid",
$components: [
{
$type: "div",
class: "mdc-layout-grid__inner",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
$components: [
avatarCardDef("/../assets/avatars/ico/simple.jpg", { title: "Simple", subtitle: "Cube" },
function (e) {
let avatarID = 'avatar-' + self.kernel.moniker();
vwf_view.kernel.callMethod(avatarID, "createSimpleAvatar");
}
)
]
},
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
$components: [
avatarCardDef("/../assets/avatars/ico/female.jpg", { title: "Human", subtitle: "Female" },
function (e) {
let avatarID = 'avatar-' + self.kernel.moniker();
vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/../assets/avatars/female/avatar1.gltf"]);
}
)]
},
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
$components: [
avatarCardDef("/../assets/avatars/ico/male.jpg", { title: "Human", subtitle: "Male" },
function (e) {
let avatarID = 'avatar-' + self.kernel.moniker();
vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/../assets/avatars/male/avatar1.gltf"]);
}
)]
}
]
}
]
},
// {
// $cell: true,
// $type: "button",
// class: "mdc-button mdc-button--raised",
// $text: "Simple Avatar",
// onclick: function (e) {
// let avatarID = 'avatar-' + self.kernel.moniker();
// vwf_view.kernel.callMethod(avatarID, "createSimpleAvatar");
// }
// },
// {
// $cell: true,
// $type: "button",
// class: "mdc-button mdc-button--raised",
// $text: "Male Avatar",
// onclick: function (e) {
// let avatarID = 'avatar-' + self.kernel.moniker();
// vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/../assets/avatars/male/avatar1.gltf"]);
// }
// },
// {
// $cell: true,
// $type: "button",
// class: "mdc-button mdc-button--raised",
// $text: "Female Avatar",
// onclick: function (e) {
// let avatarID = 'avatar-' + self.kernel.moniker();
// vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/../assets/avatars/female/avatar1.gltf"]);
// }
// },
]
}
]
}
]
}
let viewSettings =
{
$cell: true,
$type: "div",
class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__inner",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
$components: [
{
$cell: true,
$type: "button",
class: "mdc-button mdc-button--raised",
$text: "Settings",
onclick: function (e) {
//document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
}
}
]
}
]
}
]
}
let savedStateEl = function (item) {
return {
$type: "li",
class: "mdc-list-item",
role: "option",
$components: [
{
$text: "Saved world"
}
]
}
}
let stateListElement = function (item) {
let liEl = {
$type: "li",
class: "mdc-list-item",
role: "option",
id: "",
applicationpath: "",
$components: [
{
$text: "no saves"
}
]
}
let applicationName = item.applicationpath.split("/");
if (applicationName == "") {
return liEl
}
if (applicationName.length > 0) {
applicationName = applicationName[applicationName.length - 1];
}
if (applicationName.length > 0) {
applicationName = applicationName.charAt(0).toUpperCase() + applicationName.slice(1);
}
if (item.latestsave) {
liEl = {
$type: "li",
class: "mdc-list-item",
role: "option",
id: item.savename,
applicationpath: item.applicationpath,
$components: [
{
$text: applicationName + ": " + item.savename
}
]
}
}
else {
liEl = {
$type: "li",
class: "mdc-list-item",
role: "option",
id: item.savename,
revision: item.revision,
applicationpath: item.applicationpath,
$components: [
{
$text: applicationName + ": " + item.savename + " Rev(" + item.revision + ")"
}
]
}
}
return liEl
}
let loadSaveSettings =
{
$cell: true,
$type: "div",
id: "loadSaveSettings",
class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
_saveStates: [],
_getStates: async function () {
let response = await fetch("/" + self.getRoot() + "/listallsaves");
let data = await response.json();
//this._saveStates = data;
//let appName = self.getRoot();
//console.log(data.filter(item => item.applicationpath.split("/")[1] == appName));
let filterData = data.filter(item => item.applicationpath.split("/")[1] == self.getRoot());
if (filterData.length !== 0) {
this._saveStates = filterData
//return filterData
} else {
this._saveStates = [{
savename: "",
latestsave: "",
revision: "",
applicationpath: "",
url: ""
}]
}
// this._saveStates.filter(item => item.applicationpath.split("/")[1] == self.getRoot()).map(stateListElement)
//return data
//console.log(data);
return this._saveStates
},
$init: function () {
this._getStates();
},
$update: function () {
this.$components =
[
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__inner",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
$components: [
{
class: "mdc-textfield",
$cell: true,
$type: "span",
$components: [
{
class: "mdc-textfield__input",
id: "fileName",
$cell: true,
$type: "input",
type: "text",
value: self.getRoot()
}]
}
]
},
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
$components: [
{
$cell: true,
$type: "button",
class: "mdc-button mdc-button--raised",
$text: "Save",
onclick: function (e) {
let fileName = document.querySelector('#fileName')
saveStateAsFile.call(self, fileName.value);
document.querySelector("#fileName").value = '';
//document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
}
}
]
},
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-select",
$init: function () {
var MDCSelect = mdc.select.MDCSelect;
const select = new MDCSelect(document.querySelector('.mdc-select'));
select.listen('MDCSelect:change', () => {
//this._selectedState = select.value;
document.querySelector('#loadStateButton')._selectedState = select.selectedOptions[0];
//console.log(select.value);
//.selectedOptions[0]
});
},
role: "listbox",
$components: [
{
$type: "span",
class: "mdc-select__selected-text",
$text: "Select saved state"
},
{
$type: "div",
class: "mdc-simple-menu mdc-select__menu",
$components: [
{
$type: "ul",
class: "mdc-list mdc-simple-menu__items",
$components: this._saveStates.map(stateListElement)
}
]
}
]
}
]
},
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
$components: [
{
$cell: true,
$type: "button",
_selectedState: {},
id: "loadStateButton",
class: "mdc-button mdc-button--raised",
$text: "Load",
onclick: function (e) {
loadSavedState.call(self, this._selectedState.getAttribute('id'), this._selectedState.getAttribute('applicationpath'), this._selectedState.getAttribute('revision'));
//document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
}
}
]
}
]
}
]
}
}
// document.querySelector('#' + 'viewSettings').$cell({
// $cell: true,
// $type: "div",
// id: 'viewSettings',
// //style:'z-index: 10; position: absolute; margin-left: 240px;',
// class: "settingsDiv mdc-toolbar-fixed-adjust",
// $init: function(){
// this.style.visibility = 'hidden';
// },
// $components: [viewSettings]
// })
// document.querySelector('#' + 'viewSettings').$cell({
// $cell: true,
// $type: "div",
// id: 'viewSettings',
// style:'z-index: 10; position: absolute; margin-left: 240px;',
// class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left mdc-toolbar-fixed-adjust",
// $init: function(){
// this.style.visibility = 'hidden';
// },
// $components: [viewSettings]
// })
let protoPropertiesCell = function (m) {
return {
$type: "div",
class: "mdc-layout-grid__inner",
_prop: {},
$init: function () {
let prop = m[1].prop;
if (prop.value == undefined) {
prop.value = JSON.stringify(utility.transform(vwf.getProperty(this._currentNode, prop.name, []), utility.transforms.transit));
}
this._prop = prop
},
$update: function () {
this.$components = [
{
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
$components: [
{ $text: this._prop.name }
]
},
{
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
},
{
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-7",
$components: [
{
class: "mdc-textfield",
$cell: true,
$type: "div",
$components: [{
class: "mdc-textfield__input",
$cell: true,
$type: "input",
type: "text",
value: this._prop.value,
onchange: function (e) {
let propValue = this.value;
try {
propValue = JSON.parse(propValue);
self.kernel.setProperty(this._currentNode, this._prop.name, propValue);
} catch (e) {
// restore the original value on error
this.value = propValue;
}
}
}]
}
]
}
]
}
}
}
let propertiesCell = function (m) {
return {
$type: "div",
class: "mdc-layout-grid__inner",
$components: [
{
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
$components: [
{ $text: m.name }
]
},
{
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
},
{
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-7",
$components: [
{
class: "mdc-textfield",
$cell: true,
$type: "span",
$components: [
{
class: "mdc-textfield__input",
id: "prop-" + m.name,
$cell: true,
$type: "input",
type: "text",
value: m.getValue(),
onchange: function (e) {
let propValue = this.value;
try {
propValue = JSON.parse(propValue);
self.kernel.setProperty(this._currentNode, m.name, propValue);
} catch (e) {
// restore the original value on error
this.value = propValue;
}
}
}]
}
]
}
]
}
}
let nodeLink = function (m) {
var myClass = "nodeItem";
let myAvatarName = 'avatar-' + self.kernel.moniker();
(myAvatarName == m.name) ? (myClass = "avatarName mdc-typography--subheading2") :
myClass = "nodeItem"
return {
$type: "li",
class: "mdc-list-item",
$components: [{
$type: "a",
class: "mdc-list-item",
$href: "#",
$components: [{
$type: 'span',
class: myClass,
$text: m.name
}
],
onclick: function (e) {
//self.currentNodeID = m.ID;
document.querySelector('#currentNode')._setNode(m.ID);
// document.querySelector('#liveCodeEditor')._editorNode = m.ID;
// createAceEditor(self, m.ID);
}
}]
}
};
let listDivider = {
$cell: true,
$type: "hr",
class: "mdc-list-divider",
}
let nodesCell = {
$cell: true,
$type: "div",
id: "currentNode",
_childNodes: [],
_currentNode: '',
_displayedProperties: {},
_setNode: function (aNode) {
this._currentNode = aNode;
document.querySelector('#sideBar')._sideCurrentNode = this._currentNode
},
$init: function () {
this._currentNode = document.querySelector('#sideBar')._sideCurrentNode
//this._currentNode = vwf_view.kernel.find("", "/")[0];
//this._currentNode = '3333';
},
_getChildNodes: function () {
this._childNodes = self.nodes[this._currentNode];
if (this._childNodes !== undefined) {
return this._childNodes.children
} else {
return []
}
//let nodeIDAlpha = he.encode(this._currentNode);
},
_getNodeProperties: function () {
let node = self.nodes[this._currentNode];
this._displayedProperties = {};
let filterFunction = function (prop) {
return (!this._displayedProperties[prop.name] && prop.name.indexOf('$') === -1) ? (this._displayedProperties[prop.name] = "instance", true) : (false);
};
let props = node.properties.filter(filterFunction.bind(this));
return props
},
_getNodeProtoProperties: function () {
let node = self.nodes[this._currentNode];
let filterFunction = function (prop) {
return (!this._displayedProperties[prop[1].prop.name]) ? (this._displayedProperties[prop[1].prop.name] = prop[1].prototype, true) : (false);
};
let props = Object.entries(getProperties.call(self, self.kernel, node.extendsID)).filter(filterFunction.bind(this));
return props
},
$update: function () {
//this.$text = this._currentNode;
var viewerProps = {};
var viewerPropsCell = {};
let node = self.nodes[this._currentNode];
if (node !== undefined) {
if (node.extendsID == "http://vwf.example.com/aframe/acamera.vwf") {
viewerProps = {
$type: "li",
class: "mdc-list-item",
$components: [
{
$text: "Viewer properties",
$type: "span",
class: "mdc-list-item__text mdc-typography--button"
}
]
}
viewerPropsCell = {
$cell: true,
$type: "div",
class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__inner",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
$components: [
{
$cell: true,
$type: "button",
class: "mdc-button mdc-button--raised",
$text: "Active",
onclick: function (e) {
let camera = document.querySelector('#' + this._currentNode);
camera.setAttribute('active', true);
}
}
]
}
]
}
]
//$components: this._getNodeProtoProperties().map(protoPropertiesCell)
}
} else {
viewerProps = {};
viewerPropsCell = {};
}
}
this.$components = [
{
$cell: true,
$type: "ul",
class: "mdc-list",
$components: [
{
$cell: true,
$type: "button",
class: "mdc-list-item mdc-button mdc-button--raised",
$text: "<--",
onclick: function (e) {
let node = self.nodes[this._currentNode];
if (node.parentID !== 0) {
//self.currentNodeID = node.parentID,
document.querySelector('#currentNode')._setNode(node.parentID)
}
}
},
{
$type: "li",
class: "mdc-list-item",
$components: [
{
$text: "name",
$type: "span",
$init: function () {
let node = self.nodes[this._currentNode];
this.$text = node.name
},
class: "mdc-list-item__text mdc-typography--headline"
//Big header
}]
}, listDivider,
{
// $cell: true,
// $type: "ul",
// class: "mdc-list",
$type: "div",
class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
$components: [
{
$type: "div",
class: "mdc-layout-grid__inner",
$components: [
{
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
$components: [
{
$cell: true,
$type: "button",
class: "mdc-button mdc-button--raised",
$text: "Open in code editor",
onclick: function (e) {
var currentNode = document.querySelector('#currentNode')._currentNode;
if (currentNode == '') {
currentNode = vwf_view.kernel.find("", "/")[0];
}
document.querySelector('#liveCodeEditor')._setNode(currentNode);
//createAceEditor(self, currentNode);
document.querySelector('#codeEditorWindow').style.visibility = 'visible';
}
}
]
}
]
}
]
},
listDivider,
{
$type: "li",
class: "mdc-list-item",
$components: [
{
$text: "Children",
$type: "span",
class: "mdc-list-item__text mdc-typography--button"
}]
},
{
$cell: true,
$type: "ul",
class: "mdc-list",
$components: this._getChildNodes().map(nodeLink)
}, listDivider, {
$type: "li",
class: "mdc-list-item",
$components: [
{
$text: "Properties",
$type: "span",
class: "mdc-list-item__text mdc-typography--button"
//Big header
}]
},
{
// $cell: true,
// $type: "ul",
// class: "mdc-list",
$type: "div",
class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
$components: this._getNodeProperties().map(propertiesCell)
},
listDivider,
{
$type: "li",
class: "mdc-list-item",
$components: [
{
$text: "Proto properties",
$type: "span",
class: "mdc-list-item__text mdc-typography--button"
}]
},
{
$cell: true,
$type: "div",
class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
$components: this._getNodeProtoProperties().map(protoPropertiesCell)
}, listDivider,
viewerProps,
viewerPropsCell
]
}
]
}
}
let codeEditorWindow = {
$cell: true,
$type: "div",
_editorNode: '',
_method: { body: '' },
_methodName: '',
_getNodeMethods: function () {
let node = self.nodes[this._editorNode];
return node.methods
},
_getProtoNodeMethods: function () {
let node = self.nodes[this._editorNode];
let prototypeMethods = getMethods.call(self, self.kernel, node.extendsID);
return prototypeMethods
},
id: "liveCodeEditor",
_setNode: function (node) {
this._editorNode = node;
this._method.body = ''
},
class: "codeEditorGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
_listElement: function (m) {
return {
$type: "li",
class: "mdc-list-item",
$components: [{
$type: "a",
class: "mdc-list-item",
$href: "#",
$text: m[0],
onclick: function (e) {
let method = vwf.getMethod(this._editorNode, m[0]);
//document.querySelector('#aceEditor').
this._method = method;
this._methodName = m[0];
//self.currentNodeID = m.ID;
//document.querySelector('#currentNode')._setNode(m.ID);
}
}]
}
},
$update: function () {
this.$components = [
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__inner",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
$components: [
{
$type: "h3",
class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--subheading1",
$text: this._editorNode
}
]
},
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
$components: [
{
$cell: true,
$type: "button",
class: "mdc-button mdc-button--raised",
$text: "Update",
onclick: function (e) {
let editor = document.querySelector("#aceEditor").env.editor;
let evalText = editor.getValue();
self.kernel.setMethod(this._editorNode, this._methodName,
{ body: evalText, type: "application/javascript", parameters: this._method.parameters });
}
}]
},
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
$components: [
{
$cell: true,
$type: "button",
class: "mdc-button mdc-button--raised",
$text: "Call",
onclick: function (e) {
let params = [];
if (this._method.parameters) {
params = this._method.parameters.length
};
if (params >= 1) { }
self.kernel.callMethod(this._editorNode, this._methodName, this._method.parameters);
}
}]
},
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
$components: [
{
$cell: true,
$type: "button",
class: "mdc-button mdc-button--raised",
$text: "Do It",
onclick: function (e) {
let editor = document.querySelector("#aceEditor").env.editor;
codeEditorDoit.call(self, editor, this._editorNode);
}
}]
},
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
$components: [
{
$cell: true,
$type: "button",
class: "mdc-button mdc-button--raised",
$text: "Print It",
onclick: function (e) {
let editor = document.querySelector("#aceEditor").env.editor;
codeEditorPrintit.call(self, editor, this._editorNode);
}
}]
}
]
},
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__inner",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
style: "overflow-y: scroll; max-height: 800px;",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-list-group",
$components: [
{
$type: "h3",
class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--button",
$text: "Node methods"
},
{
$cell: true,
$type: "ul",
class: "mdc-list",
$components: Object.entries(this._getNodeMethods()).map(this._listElement)
}, listDivider,
{
$type: "h3",
class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--button",
$text: "Proto methods"
},
{
$cell: true,
$type: "ul",
class: "mdc-list",
$components: Object.entries(this._getProtoNodeMethods()).map(this._listElement)
}
]
}
]
},
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-9",
$components: [
{
$cell: true,
class: "aceEditor",
id: "aceEditor",
$type: "div",
$text: this._method.body,
$init: function () {
createAceEditor(self, this._editorNode);
}
}
]
}
]
}
]
//$components:
}
}
let propWindow = {
$cell: true,
$type: "div",
class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
style: "overflow-y: scroll; max-height: 800px;",
$components: [
{
$type: "div",
class: "mdc-layout-grid__inner",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
$components: [
nodesCell
]
}
]
}
//
// Flat button
//
]
}
let clientListCell = {
$cell: true,
$type: "div",
class: "mdc-list",
id: "clientsList",
_watchNodes: [],
_listElement: function (m) {
return {
$type: "a",
class: "mdc-list-item",
$href: "#",
$text: m.name,
onclick: function (e) {
//self.currentNodeID = m.ID;
//document.querySelector('#currentNode')._setNode(m.ID);
}
}
},
$init: function () {
var t = this;
setInterval(function () {
t._updateMe();
}, 1000);
},
_updateMe: function () {
this._watchNodes = self.nodes["http://vwf.example.com/clients.vwf"].children.slice()
},
$update: function () {
//this._clientNodes
this.$components = this._watchNodes.map(this._listElement)
}
}
//createCellWindow("clientsWindow", clientListCell, "Clients");
//createCellWindow("propWindow", propWindow, "Scene");
createCellWindow("codeEditorWindow", codeEditorWindow, "Code editor");
let viewSceneProps = {
$cell: true,
$type: "div",
class: "propGrid mdc-layout-grid mdc-layout-grid--align-left",
//style: "overflow-y: scroll; max-height: 500px; overflow-x: hidden;",
$components: [
{
$type: "div",
class: "mdc-layout-grid__inner",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
$components: [
nodesCell
]
}
]
}
]
}
let sideBar = {
$cell: true,
$type: "div",
id: 'sideBar',
class: "sideBar mdc-toolbar-fixed-adjust",
_sideBarComponent: {},
_sideCurrentNode: '',
$init: function () {
this.style.visibility = 'hidden';
},
$update: function () {
this.$components = [
{
$cell: true,
$type: "button",
class: "mdc-button mdc-button--compact",
$text: "X",
onclick: function (e) {
document.querySelector('#sideBar').style.visibility = 'hidden';
}
},
this._sideBarComponent
]
}
//$components: [this._sideComponents]
}
document.querySelector('#' + 'sideBar').$cell(sideBar)
let drawerCell = {
$cell: true,
$type: "nav",
class: "mdc-temporary-drawer__drawer",
$components: [
{
$cell: true,
$type: "header",
class: "mdc-temporary-drawer__header",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-temporary-drawer__header-content mdc-theme--primary-bg mdc-theme--text-primary-on-primary",
$text: "Home"
}
]
},
{
$cell: true,
$type: "nav",
class: "mdc-temporary-drawer__content mdc-list-group",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-list",
$components: [
{
$cell: true,
$type: "a",
class: "mdc-list-item",
$href: "#",
onclick: function (e) {
let sideBar = document.querySelector('#sideBar');
sideBar._sideBarComponent = viewSceneProps;
let currentNode = document.querySelector('#sideBar')._sideCurrentNode;
currentNode == '' ? document.querySelector('#sideBar')._sideCurrentNode = (vwf_view.kernel.find("", "/")[0]) :
document.querySelector('#sideBar')._sideCurrentNode = currentNode;
document.querySelector('#sideBar').style.visibility = 'visible';
drawer.open = !drawer.open
// let currentNode = document.querySelector('#currentNode')._currentNode;
// currentNode == '' ? document.querySelector('#currentNode')._setNode(vwf_view.kernel.find("", "/")[0]) :
// document.querySelector('#currentNode')._setNode(currentNode);
},
$components: [{
$cell: true,
$type: "i",
class: "material-icons mdc-list-item__start-detail",
$text: "description"
},
{
$text: "Scene"
}
]
},
{
$cell: true,
$type: "a",
class: "mdc-list-item",
$href: "#",
onclick: function (e) {
//self.currentNodeID = m.ID;
// document.querySelector('#clientsList')._setClientNodes(self.nodes["http://vwf.example.com/clients.vwf"]);
// document.querySelector('#clientsWindow').style.visibility = 'visible';
let sideBar = document.querySelector('#sideBar');
sideBar._sideBarComponent = avatarSettings;
drawer.open = !drawer.open
document.querySelector('#sideBar').style.visibility = 'visible';
},
$components: [{
$type: "i",
class: "material-icons mdc-list-item__start-detail",
'aria-hidden': "true",
$text: "account_circle"
},
{
$text: "My Avatar"
}]
},
{
$cell: true,
$type: "a",
class: "mdc-list-item",
$href: "#",
onclick: function (e) {
//self.currentNodeID = m.ID;
// document.querySelector('#clientsList')._setClientNodes(self.nodes["http://vwf.example.com/clients.vwf"]);
let sideBar = document.querySelector('#sideBar');
sideBar._sideBarComponent = viewSettings;
drawer.open = !drawer.open
document.querySelector('#sideBar').style.visibility = 'visible';
},
$components: [{
$type: "i",
class: "material-icons mdc-list-item__start-detail",
'aria-hidden': "true",
$text: "settings"
},
{
$text: "Settings"
}]
},
{
$cell: true,
$type: "a",
class: "mdc-list-item",
$href: "#",
onclick: function (e) {
//self.currentNodeID = m.ID;
// document.querySelector('#clientsList')._setClientNodes(self.nodes["http://vwf.example.com/clients.vwf"]);
let sideBar = document.querySelector('#sideBar');
sideBar._sideBarComponent = loadSaveSettings;
if (document.querySelector('#loadSaveSettings')) {
document.querySelector('#loadSaveSettings')._getStates();
}
//sideBar._sideBarComponent._getStates();
drawer.open = !drawer.open
document.querySelector('#sideBar').style.visibility = 'visible';
},
$components: [{
$type: "i",
class: "material-icons mdc-list-item__start-detail",
'aria-hidden': "true",
$text: "save"
},
{
$text: "Load/Save"
}]
},
{
$cell: true,
$type: "a",
class: "mdc-list-item",
$href: "#",
onclick: function (e) {
// var currentNode = document.querySelector('#currentNode')._currentNode;
// if (currentNode == '') {
// currentNode = vwf_view.kernel.find("", "/")[0];
// }
document.querySelector('#liveCodeEditor')._setNode(vwf_view.kernel.find("", "/")[0]);
//createAceEditor(self, currentNode);
document.querySelector('#codeEditorWindow').style.visibility = 'visible';
},
$components: [{
$type: "i",
class: "material-icons mdc-list-item__start-detail",
'aria-hidden': "true",
$text: "code"
},
{
$text: "Code editor"
}]
}
]
},
{
$cell: true,
$type: "hr",
class: "mdc-list-divider",
},
{
$cell: true,
$type: "h3",
class: "userList mdc-list-group__subheader",
$text: "Users online"
},
clientListCell
]
}
// {
// $cell: true,
// $type: "div",
// class: "mdc-persistent-drawer__toolbar-spacer",
// },
// {
// $cell: true,
// $type: "div",
// class: "mdc-list-group",
// $components: [{
// $cell: true,
// $type: "nav",
// class: "mdc-list",
// $components: [
// ]
// }]
// }
]
};
//
// Input Label
//
document.querySelector("#drawer").$cell({
$cell: true,
$type: "aside",
class: "mdc-temporary-drawer",
$components: [drawerCell]
}
);
let toolbar = {
$cell: true,
$type: "div",
class: "mdc-toolbar__row",
$components: [{
$type: "section",
class: "mdc-toolbar__section mdc-toolbar__section--align-start",
$components: [
{
$type: "button",
class: "demo-menu material-icons mdc-toolbar__icon--menu",
$text: "menu"
},
{
$type: "span",
class: "mdc-toolbar__title catalog-title",
$text: "LiveCoding.space"
}
]
}]
};
document.querySelector("#toolbar").$cell({
$cell: true,
$type: "div",
class: "mdc-toolbar mdc-toolbar--fixed",
$components: [toolbar]
}
);
// let drawer = new mdc.drawer.MDCTemporaryDrawer(document.querySelector('.mdc-temporary-drawer'));
// document.querySelector('.menu').addEventListener('click', () => drawer.open = true);
var drawerEl = document.querySelector('.mdc-temporary-drawer');
var MDCTemporaryDrawer = mdc.drawer.MDCTemporaryDrawer;
var drawer = new MDCTemporaryDrawer(drawerEl);
document.querySelector('.demo-menu').addEventListener('click', function () {
//self.currentNodeID = (self.currentNodeID == '') ? (vwf_view.kernel.find("", "/")[0]) : self.currentNodeID;
// let currentNode = document.querySelector('#currentNode')._currentNode;
// currentNode == '' ? document.querySelector('#currentNode')._setNode(vwf_view.kernel.find("", "/")[0]) :
// document.querySelector('#currentNode')._setNode(currentNode);
//document.querySelector('#currentNode')._setNode(self.currentNodeID);
drawer.open = !drawer.open;
});
drawerEl.addEventListener('MDCTemporaryDrawer:open', function () {
//console.log('Received MDCPersistentDrawer:open');
});
drawerEl.addEventListener('MDCTemporaryDrawer:close', function () {
//console.log('Received MDCPersistentDrawer:close');
});
//==============
$('#tabs').stop().animate({ opacity: 0.0 }, 0);
$('#tabs').mouseenter(function (evt) {
evt.stopPropagation();
$('#tabs').stop().animate({ opacity: 1.0 }, 175);
return false;
});
$('#tabs').mouseleave(function (evt) {
evt.stopPropagation();
$('#tabs').stop().animate({ opacity: 0.0 }, 175);
return false;
});
$('#hierarchy').click(function (evt) {
openEditor.call(self, 1);
});
$('#userlist').click(function (evt) {
openEditor.call(self, 2);
});
$('#timeline').click(function (evt) {
openEditor.call(self, 3);
});
$('#about').click(function (evt) {
openEditor.call(self, 4);
});
$('#models').click(function (evt) {
openEditor.call(self, 5);
});
$('#codeEditor').click(function (evt) {
openEditor.call(self, 6);
});
$('#x').click(function (evt) {
closeEditor.call(self);
});
$('#topdown_a').hide();
$('#topdown_b').hide();
$('#client_list').hide();
$('#time_control').hide();
$('#about_tab').hide();
$('#codeEditor_tab').hide();
$('#model_a').hide();
$('#model_b').hide();
var canvas = document.getElementById(vwf_view.kernel.find("", "/")[0]);
if (canvas) {
$('#topdown_a').height(canvas.height);
$('#topdown_b').height(canvas.height);
$('#client_list').height(canvas.height);
$('#time_control').height(canvas.height);
$('#about_tab').height(canvas.height);
$('#codeEditor_tab').height(canvas.height);
$('#model_a').height(canvas.height);
$('#model_b').height(canvas.height);
}
else {
$('#topdown_a').height(window.innerHeight - 20);
$('#topdown_b').height(window.innerHeight - 20);
$('#client_list').height(window.innerHeight - 20);
$('#time_control').height(window.innerHeight - 20);
$('#about_tab').height(window.innerHeight - 20);
$('#codeEditor_tab').height(window.innerHeight - 20);
$('#model_a').height(window.innerHeight - 20);
$('#model_b').height(window.innerHeight - 20);
}
},
createdNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
childSource, childType, childIndex, childName, callback /* ( ready ) */) {
var nodeIDAttribute = $.encoder.encodeForHTMLAttribute("id", nodeID, true);
var childIDAttribute = $.encoder.encodeForHTMLAttribute("id", childID, true);
var childIDAlpha = $.encoder.encodeForAlphaNumeric(childID);
var kernel = this.kernel;
var self = this;
var parent = this.nodes[nodeID];
var node = this.nodes[childID] = {
children: [],
properties: [],
events: {},
methods: {},
parent: parent,
parentID: nodeID,
ID: childID,
extendsID: childExtendsID,
implementsIDs: childImplementsIDs,
source: childSource,
name: childName,
};
if (parent) {
parent.children.push(node);
}
if (childID == vwf_view.kernel.find("", "/")[0] && childExtendsID && this.kernel.test(childExtendsID,
"self::element(*,'http://vwf.example.com/aframe/ascene.vwf')", childExtendsID)) {
this.scenes[childID] = node;
}
if (nodeID === this.currentNodeID && this.editingScript == false) {
$('#children > div:last').css('border-bottom-width', '1px');
$("#children").append("" + $.encoder.encodeForHTML(childName) + "
");
for (var i = 0; i < node.children.length; i++) {
var nodeChildIDAttribute = $.encoder.encodeForHTMLAttribute("id", node.children[i].ID, true);
var nodeChildIDAlpha = $.encoder.encodeForAlphaNumeric(node.children[i].ID);
var nodeChildNameHTML = $.encoder.encodeForHTML(node.children[i].name);
$('#clientsChildren').append("" + nodeChildNameHTML + "
");
clients$.append("
");
// $('#liveeditor').click(function(evt) {
// openLiveEditor.call(self);
// });
// Save / Load
clients$.append("
");
$('#fileName').keydown(function (evt) {
evt.stopPropagation();
});
$('#fileName').keypress(function (evt) {
evt.stopPropagation();
});
$('#fileName').keyup(function (evt) {
evt.stopPropagation();
});
$('#save').click(function (evt) {
saveStateAsFile.call(self, $('#fileName').val());
});
clients$.append("
");
$('#fileToLoad').append("" + applicationName + ": " + value['savename'] + " ");
}
else {
$('#fileToLoad').append("" + applicationName + ": " + value['savename'] + " Rev(" + value['revision'] + ") ");
}
});
});
clients$.append("
");
$('#load').click(function (evt) {
loadSavedState.call(self, $('#fileToLoad').val(), $('#fileToLoad').find(':selected').attr('applicationpath'), $('#fileToLoad').find(':selected').attr('revision'));
});
}
// -- editor ---
function openLiveEditor(value) {
//this.liveditor = document.createElement('div');
//this.liveditor.setAttribute('id', "editorlive");
// $('body').append(this.liveditor);
var editor = this.ace.edit("editorlive");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
}
// -- viewClient ------------------------------------------------------------------------
function viewClient(clientID) {
var self = this;
var clients$ = $(this.clientList);
var node = this.nodes[clientID];
clients$.html("");
$('#back').click(function (evt) {
viewClients.call(self);
});
// Add node properties
clients$.append("
");
var displayedProperties = {};
for (var i = 0; i < node.properties.length; i++) {
if (!displayedProperties[node.properties[i].name]) {
displayedProperties[node.properties[i].name] = "instance";
var nodeIDAlpha = $.encoder.encodeForAlphaNumeric(clientID);
var propertyNameAttribute = $.encoder.encodeForHTMLAttribute("id", node.properties[i].name, true);
var propertyNameAlpha = $.encoder.encodeForAlphaNumeric(node.properties[i].name);
var propertyNameHTML = $.encoder.encodeForHTML(node.properties[i].name);
var propertyValueAttribute = $.encoder.encodeForHTMLAttribute("val", node.properties[i].getValue(), true);
$('#clientProperties').append("");
}
}
}
// -- drillDown -------------------------------------------------------------------------
function drillDown(nodeID, drillBackID) // invoke with the view as "this"
{
var topdownName = this.topdownName;
var topdownTemp = this.topdownTemp;
drill.call(this, nodeID, drillBackID);
if (nodeID != vwf_view.kernel.find("", "/")[0]) $(topdownName).hide('slide', { direction: 'left' }, 175);
$(topdownTemp).show('slide', { direction: 'right' }, 175);
this.topdownName = topdownTemp;
this.topdownTemp = topdownName;
}
// -- drillUp ---------------------------------------------------------------------------
function drillUp(nodeID) // invoke with the view as "this"
{
var topdownName = this.topdownName;
var topdownTemp = this.topdownTemp;
drill.call(this, nodeID, undefined);
$(topdownName).hide('slide', { direction: 'right' }, 175);
$(topdownTemp).show('slide', { direction: 'left' }, 175);
this.topdownName = topdownTemp;
this.topdownTemp = topdownName;
}
// -- drillBack---------------------------------------------------------------------------
function drillBack(nodeID) // invoke with the view as "this"
{
var topdownName = this.topdownName;
var topdownTemp = this.topdownTemp;
drill.call(this, nodeID, undefined);
// No slide motion, when resizing script window back to normal
$(topdownName).hide();
$(topdownTemp).show();
this.topdownName = topdownTemp;
this.topdownTemp = topdownName;
}
// -- drill -----------------------------------------------------------------------------
function drill(nodeID, drillBackID) // invoke with the view as "this"
{
var node = this.nodes[nodeID];
if (!node) {
this.logger.errorx("drill: Cannot find node '" + nodeID + "'");
return;
}
var self = this;
var topdownName = this.topdownName;
var topdownTemp = this.topdownTemp;
var nodeIDAlpha = $.encoder.encodeForAlphaNumeric(nodeID);
$(topdownName).html(''); // Clear alternate div first to ensure content is added correctly
this.currentNodeID = nodeID;
if (!drillBackID) drillBackID = node.parentID;
if (nodeID == vwf_view.kernel.find("", "/")[0]) {
$(topdownTemp).html("");
}
else {
$(topdownTemp).html("");
$('#' + nodeIDAlpha + '-back').click(function (evt) {
drillUp.call(self, drillBackID);
});
}
// Add node children
$(topdownTemp).append("
");
for (var i = 0; i < node.children.length; i++) {
var nodeChildIDAttribute = $.encoder.encodeForHTMLAttribute("id", node.children[i].ID, true);
var nodeChildIDAlpha = $.encoder.encodeForAlphaNumeric(node.children[i].ID);
$('#children').append("" + $.encoder.encodeForHTML(node.children[i].name) + "
");
var prototypeChildren = getChildren.call( this, this.kernel, node.extendsID );
for ( var key in prototypeChildren)
{
var child = prototypeChildren[key];
var prototypeChildIDAttribute = $.encoder.encodeForHTMLAttribute("id", child.ID, true);
var prototypeChildIDAlpha = $.encoder.encodeForAlphaNumeric(child.ID);
$('#prototypeChildren').append("" + $.encoder.encodeForHTML(child.name) + "
");
var displayedProperties = {};
for (var i = 0; i < node.properties.length; i++) {
if (!displayedProperties[node.properties[i].name] && node.properties[i].name.indexOf('$') === -1) {
displayedProperties[node.properties[i].name] = "instance";
var propertyNameAttribute = $.encoder.encodeForHTMLAttribute("id", node.properties[i].name, true);
var propertyNameAlpha = $.encoder.encodeForAlphaNumeric(node.properties[i].name);
var propertyNameHTML = $.encoder.encodeForHTML(node.properties[i].name);
var propertyValueAttribute = $.encoder.encodeForHTMLAttribute("val", node.properties[i].getValue(), true);
if (propertyNameAlpha.indexOf("semantics") > -1) {
} else if (propertyNameAlpha.indexOf("grammar") > -1) {
} else if (propertyNameAlpha.indexOf("ohm") > -1) {
let propName = propertyNameAlpha;
let propValue = node.properties[i].rawValue;
$(topdownTemp).append("
");
$('#' + nodeIDAlpha + '-' + propertyNameAlpha).append("");
$('#' + nodeIDAlpha + '-' + propertyNameAlpha).click(function (evt) {
editOhmLang.call(self, nodeID, propName, propValue);
});
// $('#properties').append("");
} else {
$('#properties').append("");
}
$('#input-' + nodeIDAlpha + '-' + propertyNameAttribute).change(function (evt) {
var propName = $.encoder.canonicalize($(this).attr("data-propertyName"));
var propValue = $(this).val();
try {
propValue = JSON.parse($.encoder.canonicalize(propValue));
self.kernel.setProperty(nodeID, propName, propValue);
} catch (e) {
// restore the original value on error
$(this).val(propValue);
}
});
$('#input-' + nodeIDAlpha + '-' + propertyNameAlpha).keydown(function (evt) {
evt.stopPropagation();
});
$('#input-' + nodeIDAlpha + '-' + propertyNameAlpha).keypress(function (evt) {
evt.stopPropagation();
});
$('#input-' + nodeIDAlpha + '-' + propertyNameAlpha).keyup(function (evt) {
evt.stopPropagation();
});
}
}
$('#properties > div:last').css('border-bottom-width', '3px');
this.logger.info(self + " " + nodeID);
// Add prototype properties
$(topdownTemp).append("
");
var prototypeProperties = getProperties.call(this, this.kernel, node.extendsID);
for (var key in prototypeProperties) {
var prop = prototypeProperties[key].prop;
if (!displayedProperties[prop.name]) {
displayedProperties[prop.name] = prototypeProperties[key].prototype;
if (prop.value == undefined) {
prop.value = JSON.stringify(utility.transform(vwf.getProperty(nodeID, prop.name, []), utility.transforms.transit));
}
var propertyNameAttribute = $.encoder.encodeForHTMLAttribute("id", prop.name, true);
var propertyNameAlpha = $.encoder.encodeForAlphaNumeric(prop.name);
var propertyNameHTML = $.encoder.encodeForHTML(prop.name);
var propertyValueAttribute = $.encoder.encodeForHTMLAttribute("val", prop.value, true);
$('#prototypeProperties').append("");
$('#input-' + nodeIDAlpha + '-' + propertyNameAlpha).change(function (evt) {
var propName = $.encoder.canonicalize($(this).attr("data-propertyName"));
var propValue = $(this).val();
try {
propValue = JSON.parse($.encoder.canonicalize(propValue));
self.kernel.setProperty(nodeID, propName, propValue);
} catch (e) {
// restore the original value on error
$(this).val(propValue);
}
});
$('#input-' + nodeIDAlpha + '-' + propertyNameAlpha).keydown(function (evt) {
evt.stopPropagation();
});
$('#input-' + nodeIDAlpha + '-' + propertyNameAlpha).keypress(function (evt) {
evt.stopPropagation();
});
$('#input-' + nodeIDAlpha + '-' + propertyNameAlpha).keyup(function (evt) {
evt.stopPropagation();
});
}
}
$('#prototypeProperties > div:last').css('border-bottom-width', '3px');
// Add node methods
$(topdownTemp).append("
");
for (var key in node.methods) {
var method = node.methods[key];
var methodNameAlpha = $.encoder.encodeForAlphaNumeric(key);
var methodNameAttribute = $.encoder.encodeForHTMLAttribute("id", key, true);
var methodNameHTML = $.encoder.encodeForHTML(key);
$('#methods').append("");
$('#rollover-' + methodNameAlpha).mouseover(function (evt) {
$('#param-' + $(this).attr("id").substring(9)).css('visibility', 'visible');
});
$('#rollover-' + methodNameAlpha).mouseleave(function (evt) {
$('#param-' + $(this).attr("id").substring(9)).css('visibility', 'hidden');
});
$('#call-' + methodNameAlpha).click(function (evt) {
self.kernel.callMethod(nodeID, $.encoder.canonicalize($(this).attr("data-methodName")));
});
$('#param-' + methodNameAlpha).click(function (evt) {
setParams.call(self, $.encoder.canonicalize($(this).attr("data-methodName")), method, nodeID);
});
}
$('#methods > div:last').css('border-bottom-width', '3px');
// Add prototype methods
$(topdownTemp).append("
");
var prototypeMethods = getMethods.call(this, this.kernel, node.extendsID);
for (var key in prototypeMethods) {
var method = prototypeMethods[key];
var prototypeMethodNameAlpha = $.encoder.encodeForAlphaNumeric(key);
var prototypeMethodNameAttribute = $.encoder.encodeForHTMLAttribute("id", key, true);
var prototypeMethodNameHTML = $.encoder.encodeForHTML(key);
$('#prototypeMethods').append("" + prototypeMethodNameHTML + "
");
for (var key in node.events) {
var nodeEvent = node.events[key];
var eventNameAlpha = $.encoder.encodeForAlphaNumeric(key);
var eventNameAttribute = $.encoder.encodeForHTMLAttribute("id", key, true);
var eventNameHTML = $.encoder.encodeForHTML(key);
$('#events').append("");
$('#rollover-' + eventNameAlpha).mouseover(function (evt) {
$('#arg-' + $(this).attr("id").substring(9)).css('visibility', 'visible');
});
$('#rollover-' + eventNameAlpha).mouseleave(function (evt) {
$('#arg-' + $(this).attr("id").substring(9)).css('visibility', 'hidden');
});
$('#fire-' + eventNameAlpha).click(function (evt) {
self.kernel.fireEvent(nodeID, $.encoder.canonicalize($(this).attr("data-eventName")));
});
$('#arg-' + eventNameAlpha).click(function (evt) {
setArgs.call(self, $.encoder.canonicalize($(this).attr("data-eventName")), nodeEvent, nodeID);
});
}
$('#events > div:last').css('border-bottom-width', '3px');
// Add prototype events
$(topdownTemp).append("
");
var prototypeEvents = getEvents.call(this, this.kernel, node.extendsID);
for (var key in prototypeEvents) {
var nodeEvent = prototypeEvents[key];
var prototypeEventNameAlpha = $.encoder.encodeForAlphaNumeric(key);
var prototypeEventNameAttribute = $.encoder.encodeForHTMLAttribute("id", key, true);
var prototypeEventNameHTML = $.encoder.encodeForHTML(key);
$('#prototypeEvents').append("" + prototypeEventNameHTML + "
");
for (var i = 0; i < node.implementsIDs.length; i++) {
var nodeImplementsIDAlpha = $.encoder.encodeForAlphaNumeric(node.implementsIDs[i]);
var nodeImplementsIDHTML = $.encoder.encodeForHTML(node.implementsIDs[i]);
$('#behaviors').append("");
/*
//Placeholder to Enable/Disable behaviors
$('#' + node.implementsID[i] + '-enable').change( function(evt) {
});
*/
}
$('#behaviors > div:last').css('border-bottom-width', '3px');
// Add prototype behaviors
$(topdownTemp).append("
");
var prototypeNode = this.nodes[node.extendsID];
for (var i = 0; i < prototypeNode.implementsIDs.length; i++) {
var prototypeImplementsIDAlpha = $.encoder.encodeForAlphaNumeric(prototypeNode.implementsIDs[i]);
var prototypeImplementsIDHTML = $.encoder.encodeForHTML(prototypeNode.implementsIDs[i]);
$('#prototypeBehaviors').append("");
}
$('#prototypeBehaviors > div:last').css('border-bottom-width', '3px');
// Create new method
$(topdownTemp).append("
");
$('#createMethodID').append("");
$('#createMethodID').click(function (evt) {
createMethod.call(self, nodeID);
});
// Create new Event
$(topdownTemp).append("
");
$('#createEventID').append("");
$('#createEventID').click(function (evt) {
createEvent.call(self, nodeID);
});
// Create new script
$(topdownTemp).append("
");
$('#createScript').append("");
$('#createScript').click(function (evt) {
createScript.call(self, nodeID);
});
$('#createScript > div:last').css('border-bottom-width', '3px');
if (this.allScripts[nodeID] !== undefined) {
// Add node scripts
$(topdownTemp).append("
");
for (var i = 0; i < this.allScripts[nodeID].length; i++) {
var scriptFull = this.allScripts[nodeID][i].text;
if (scriptFull != undefined) {
var scriptName = scriptFull.substring(0, scriptFull.indexOf('='));
$('#scripts').append("script " + scriptName + "
");
for (var i = 0; i < this.allScripts[node.extendsID].length; i++) {
var scriptFull = this.allScripts[node.extendsID][i].text;
if (scriptFull != undefined) {
var nodeExtendsIDAlpha = $.encoder.encodeForAlphaNumeric(node.extendsID);
var nodeExtendsIDAttribute = $.encoder.encodeForHTMLAttribute("id", node.extendsID, true);
var scriptName = scriptFull.substring(0, scriptFull.indexOf('='));
$('#prototypeScripts').append("script " + scriptName + "
Name:
Name:
");
$(topdownTemp).append("
");
$(topdownTemp).append("
");
$("#doit-" + nodeIDAlpha + "-" + scriptID).click(function (evt) {
var s_id = $(this).attr("id").substring($(this).attr("id").lastIndexOf('-') + 1);
self.allScripts[nodeID][s_id].text = undefined;;
codeEditorDoit.call(self, editor, nodeID);
});
$("#printit").click(function (evt) {
codeEditorPrintit.call(self, editor, nodeID);
});
$("#update-" + nodeIDAlpha + "-" + scriptID).click(function (evt) {
var s_id = $(this).attr("id").substring($(this).attr("id").lastIndexOf('-') + 1);
self.allScripts[nodeID][s_id].text = undefined;
var evalText = editor.getValue();
self.kernel.execute(nodeID, evalText);
});
// $('#editorlive').focus( function(evt) {
// // Expand the script editor
// self.editingScript = true;
// $('#editor').animate({ 'left' : "-500px" }, 175);
// $('.vwf-tree').animate({ 'width' : "500px" }, 175);
// });
$('#editorlive').keydown(function (evt) {
evt.stopPropagation();
});
}
$(topdownName).hide();
$(topdownTemp).show();
this.topdownName = topdownTemp;
this.topdownTemp = topdownName;
}
// -- setParams -------------------------------------------------------------------------
function setParams(methodName, methodParams, nodeID) // invoke with the view as "this"
{
var self = this;
var topdownName = this.topdownName;
var topdownTemp = this.topdownTemp;
var methodNameAlpha = $.encoder.encodeForAlphaNumeric(methodName);
var methodNameHTML = $.encoder.encodeForHTML(methodName);
$(topdownTemp).html("");
$('#' + methodNameAlpha + '-back').click(function (evt) {
self.editingScript = false;
drillUp.call(self, nodeID);
// Return editor to normal width
$('#editor').animate({ 'left': "-260px" }, 175);
$('.vwf-tree').animate({ 'width': "260px" }, 175);
});
var nodeIDAlpha = $.encoder.encodeForAlphaNumeric(nodeID);
var method = vwf.getMethod(nodeID, methodNameAlpha);
$(topdownTemp).append("
");
//$(topdownTemp).append("" + method.body + "
");
var editor = createAceEditor(self, nodeID);
$("#printit").click(function (evt) {
codeEditorPrintit.call(self, editor, nodeID);
});
$("#doit").click(function (evt) {
codeEditorDoit.call(self, editor, nodeID);
});
$("#update-" + nodeIDAlpha + "-" + methodNameAlpha).click(function (evt) {
var evalText = editor.getValue();
self.kernel.setMethod(nodeID, methodNameAlpha,
{ body: evalText, type: "application/javascript", parameters: method.parameters });
});
var params = [];
if (method.parameters) {
params = method.parameters.length
};
if (params >= 1) {
for (var i = 1; i <= params; i++) {
$(topdownTemp).append("");
$('#input-param' + i).keydown(function (evt) {
evt.stopPropagation();
});
$('#input-param' + i).keypress(function (evt) {
evt.stopPropagation();
});
$('#input-param' + i).keyup(function (evt) {
evt.stopPropagation();
});
}
}
$('#call').click(function (evt) {
if (params >= 1) {
var parameters = new Array();
for (var i = 1; i <= params; i++) {
if ($('#input-param' + i).val()) {
var prmtr = $('#input-param' + i).val();
try {
prmtr = JSON.parse(JSON.stringify($.encoder.canonicalize(prmtr)));
parameters.push(prmtr);
} catch (e) {
self.logger.error('Invalid Value');
}
}
}
}
self.kernel.callMethod(nodeID, methodName, parameters);
});
$(topdownName).hide('slide', { direction: 'left' }, 175);
$(topdownTemp).show('slide', { direction: 'right' }, 175);
this.topdownName = topdownTemp;
this.topdownTemp = topdownName;
}
// -- setArgs ---------------------------------------------------------------------------
function setArgs(eventName, eventArgs, nodeID) // invoke with the view as "this"
{
var self = this;
var topdownName = this.topdownName;
var topdownTemp = this.topdownTemp;
var eventNameAlpha = $.encoder.encodeForAlphaNumeric(eventName);
var eventNameHTML = $.encoder.encodeForHTML(eventName);
$(topdownTemp).html("");
$('#' + eventNameAlpha + '-back').click(function (evt) {
drillUp.call(self, nodeID);
});
for (var i = 1; i <= 8; i++) {
$(topdownTemp).append("");
$('#input-arg' + i).keydown(function (evt) {
evt.stopPropagation();
});
$('#input-arg' + i).keypress(function (evt) {
evt.stopPropagation();
});
$('#input-arg' + i).keyup(function (evt) {
evt.stopPropagation();
});
}
$(topdownTemp).append("
");
$('#fire').click(function (evt) {
var args = new Array();
for (var i = 1; i <= 8; i++) {
if ($('#input-arg' + i).val()) {
var arg = $('#input-arg' + i).val();
try {
arg = JSON.parse($.encoder.canonicalize(arg));
args.push(arg);
} catch (e) {
self.logger.error('Invalid Value');
}
}
}
self.kernel.fireEvent(nodeID, eventName, args);
});
$(topdownName).hide('slide', { direction: 'left' }, 175);
$(topdownTemp).show('slide', { direction: 'right' }, 175);
this.topdownName = topdownTemp;
this.topdownTemp = topdownName;
}
function getPrototypes(kernel, extendsID) {
var prototypes = [];
var id = extendsID;
while (id !== undefined) {
prototypes.push(id);
id = kernel.prototype(id);
}
return prototypes;
}
function getPrototypes(kernel, extendsID) {
var prototypes = [];
var id = extendsID;
while (id !== undefined) {
prototypes.push(id);
id = kernel.prototype(id);
}
return prototypes;
}
function createProperty(node, propertyName, propertyValue) {
var property = {
name: propertyName,
rawValue: propertyValue,
value: undefined,
getValue: function () {
var propertyValue;
if (this.value == undefined) {
try {
propertyValue = utility.transform(this.rawValue, utility.transforms.transit);
this.value = JSON.stringify(propertyValue);
} catch (e) {
this.logger.warnx("createdProperty", nodeID, this.propertyName, this.rawValue,
"stringify error:", e.message);
this.value = this.rawValue;
}
}
return this.value;
}
};
return property;
}
function getProperties(kernel, extendsID) {
var pTypes = getPrototypes(kernel, extendsID);
var pProperties = {};
if (pTypes) {
for (var i = 0; i < pTypes.length; i++) {
var nd = this.nodes[pTypes[i]];
if (nd && nd.properties) {
for (var key in nd.properties) {
pProperties[key] = { "prop": nd.properties[key], "prototype": pTypes[i] };
}
}
}
}
return pProperties;
}
function getChildren(kernel, extendsID) {
var pTypes = getPrototypes(kernel, extendsID);
var pChildren = {};
if (pTypes) {
for (var i = 0; i < pTypes.length; i++) {
var nd = this.nodes[pTypes[i]];
if (nd && nd.children) {
for (var key in nd.children) {
pChildren[key] = nd.children[key];
}
}
}
}
return pChildren;
}
function getEvents(kernel, extendsID) {
var pTypes = getPrototypes(kernel, extendsID);
var events = {};
if (pTypes) {
for (var i = 0; i < pTypes.length; i++) {
var nd = this.nodes[pTypes[i]];
if (nd && nd.events) {
for (var key in nd.events) {
events[key] = nd.events[key];
}
}
}
}
return events;
}
function getMethods(kernel, extendsID) {
var pTypes = getPrototypes(kernel, extendsID);
var methods = {};
if (pTypes) {
for (var i = 0; i < pTypes.length; i++) {
var nd = this.nodes[pTypes[i]];
if (nd && nd.methods) {
for (var key in nd.methods) {
methods[key] = nd.methods[key];
}
}
}
}
return methods;
}
function highlightChildInHierarchy(nodeID) {
if (this.editorOpen && this.editorView == 1) // Hierarchy view open
{
var childDiv = $("div[id='" + nodeID + "']");
if (childDiv.length > 0) {
var previousChild = $("div[id='" + this.highlightedChild + "']");
if (previousChild.length > 0) {
previousChild.removeClass('childContainerHighlight');
}
childDiv.addClass('childContainerHighlight');
this.highlightedChild = nodeID;
}
}
}
// -- showTimeline ----------------------------------------------------------------------
function showTimeline() // invoke with the view as "this"
{
var timeline = this.timeline;
if (!this.timelineInit) {
$('#time_control').append("" +
"
");
var options = {};
["play", "pause", "stop"].forEach(function (state) {
options[state] = { icons: { primary: "ui-icon-" + state }, label: state, text: false };
});
options.rate = { value: 0, min: -2, max: 2, step: 0.1, };
var state = {};
$.get(
"admin/state",
undefined,
function (data) {
state = data;
$("button#play").button("option", state.playing ? options.pause : options.play);
$("button#stop").button("option", "disabled", state.stopped);
$(".rate.slider").slider("value", Math.log(state.rate) / Math.LN10);
if (state.rate < 1.0) {
var label_rate = 1.0 / state.rate;
}
else {
var label_rate = state.rate;
}
var label = label_rate.toFixed(2).toString().replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "");
if (state.rate < 1.0) {
label = "∕ " + label;
} else {
label = label + " ×";
}
$(".rate.vwf-label").html(label);
},
"json"
);
$("button#play").button(
options.pause
).click(function () {
$.post(
state.playing ? "admin/pause" : "admin/play",
undefined,
function (data) {
state = data;
$("button#play").button("option", state.playing ? options.pause : options.play);
$("button#stop").button("option", "disabled", state.stopped);
},
"json"
);
});
$("button#stop").button(
options.stop
).click(function () {
$.post(
"admin/stop",
undefined,
function (data) {
state = data;
$("button#play").button("option", state.playing ? options.pause : options.play);
$("button#stop").button("option", "disabled", state.stopped);
},
"json"
);
});
$(".rate.slider").slider(
options.rate
).bind("slide", function (event, ui) {
$.get(
"admin/state",
{ "rate": Math.pow(10, Number(ui.value)) },
function (data) {
state = data;
$(".rate.slider").slider("value", Math.log(state.rate) / Math.LN10);
if (state.rate < 1.0) {
var label_rate = 1.0 / state.rate;
}
else {
var label_rate = state.rate;
}
var label = label_rate.toFixed(2).toString().replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "");
if (state.rate < 1.0) {
label = "∕ " + label;
} else {
label = label + " ×";
}
$(".rate.vwf-label").html(label);
},
"json"
);
});
this.timelineInit = true;
}
if (!this.editorOpen) {
$(timeline).show('slide', { direction: 'right' }, 175);
}
else {
$(timeline).show();
}
}
// -- Show Code Editor tab
function showCodeEditorTab() // invoke with the view as "this"
{
var self = this;
var codeEditor = this.codeEditor;
if (!this.codeEditorInit) {
$('#codeEditor_tab').append("");
$('#codeEditor_tab').append("
");
$("#doit").click(function (evt) {
codeEditorDoit.call(self, editor, sceneID);
});
$("#printit").click(function (evt) {
codeEditorPrintit.call(self, editor, sceneID);
});
// $('#codeEditor_tab').append("
");
$('#min').click(function (evt) {
$('#editor').animate({ 'left': "-260px" }, 175);
$('.vwf-tree').animate({ 'width': "260px" }, 175);
});
//Open Live Editor
$('#codeEditor_tab').append('console.log("test")
');
var sceneID = self.kernel.application();
var editor = createAceEditor(self, sceneID);
editor.on('blur', function (event, editor) {
// $('#editor').animate({ 'left' : "-260px" }, 175);
// $('.vwf-tree').animate({ 'width' : "260px" }, 175);
});
this.codeEditorInit = true;
}
if (!this.editorOpen) {
$(codeEditor).show('slide', { direction: 'right' }, 175);
}
else {
$(codeEditor).show();
// $('#editor').animate({ 'left' : "-500px" }, 175);
// $('.vwf-tree').animate({ 'width' : "500px" }, 175);
}
}
function codeEditorDoit(editor, nodeID) {
var selectedText = editor.getSession().doc.getTextRange(editor.selection.getRange());
if (selectedText == "") {
var currline = editor.getSelectionRange().start.row;
var selectedText = editor.session.getLine(currline);
}
//console.log(selectedText);
//var sceneID = self.kernel.application();
vwf_view.kernel.execute(nodeID, selectedText);
}
function codeEditorPrintit(editor, nodeID) {
var selectedText = editor.getSession().doc.getTextRange(editor.selection.getRange());
if (selectedText == "") {
var currline = editor.getSelectionRange().start.row;
var selectedText = editor.session.getLine(currline);
}
//console.log(selectedText);
//var sceneID = self.kernel.application();
let scriptText = 'console.log(' + selectedText + ');'
self.kernel.execute(nodeID, scriptText);
}
// -- showAboutTab ----------------------------------------------------------------------
function showAboutTab() // invoke with the view as "this"
{
var about = this.about;
if (!this.aboutInit) {
$('#about_tab').append("" +
"");
let anotherCell =
{
$cell: true,
$text: "About: ",
class: "mdc-typography--display2",
$type: "h2"
}
let andAnotherCell =
{
$cell: true,
$text: "hello world"
}
document.querySelector("#aboutHeader").$cell({
$cell: true,
class: 'header',
$components: [anotherCell, andAnotherCell]
});
// document.querySelector("body").$cell({
// $cell: true,
// $components: [toolbarCell]
// });
this.aboutInit = true;
}
if (!this.editorOpen) {
$(about).show('slide', { direction: 'right' }, 175);
}
else {
$(about).show();
}
}
// -- showModelsTab ----------------------------------------------------------------------
function showModelsTab(modelID, modelURL) // invoke with the view as "this"
{
var self = this;
var models = this.models;
var modelsTemp = this.modelsTemp;
this.currentModelID = modelID;
this.currentModelURL = modelURL;
$(models).html("");
if (modelID == "") {
$(modelsTemp).html("");
$.getJSON("admin/models", function (data) {
if (data.length > 0) {
$.each(data, function (key, value) {
var fileName = encodeURIComponent(value['basename']);
var divId = fileName;
if (divId.indexOf('.') != -1) {
divId = divId.replace(/\./g, "_");
}
var url = value['url'];
$(modelsTemp).append("");
$("#" + divId).click(function (e) {
modelDrillDown.call(self, e.target.textContent, e.target.getAttribute("data-url"));
})
});
}
else {
$(modelsTemp).append("");
}
});
}
else {
var divId = modelID;
if (divId.indexOf('.') != -1) {
divId = divId.replace(/\./g, "_");
}
$(modelsTemp).html("");
$("#" + divId + "-back").click(function (e) {
modelDrillUp.call(self, '');
});
$(modelsTemp).append("");
$('#input-' + divId + '-rotation').keydown(function (evt) {
evt.stopPropagation();
});
$('#input-' + divId + '-rotation').keypress(function (evt) {
evt.stopPropagation();
});
$('#input-' + divId + '-rotation').keyup(function (evt) {
evt.stopPropagation();
});
$(modelsTemp).append("");
$('#input-' + divId + '-scale').keydown(function (evt) {
evt.stopPropagation();
});
$('#input-' + divId + '-scale').keypress(function (evt) {
evt.stopPropagation();
});
$('#input-' + divId + '-scale').keyup(function (evt) {
evt.stopPropagation();
});
$(modelsTemp).append("");
$('#input-' + divId + '-translation').keydown(function (evt) {
evt.stopPropagation();
});
$('#input-' + divId + '-translation').keypress(function (evt) {
evt.stopPropagation();
});
$('#input-' + divId + '-translation').keyup(function (evt) {
evt.stopPropagation();
});
$(modelsTemp).append("");
$("#" + divId + "-drag").on("dragstart", function (e) {
var fileName = $("#" + e.target.getAttribute("data-escaped-name") + "-backDiv").text();
var rotation = encodeURIComponent($("#input-" + e.target.getAttribute("data-escaped-name") + "-rotation").val());
var scale = encodeURIComponent($("#input-" + e.target.getAttribute("data-escaped-name") + "-scale").val());
var translation = encodeURIComponent($("#input-" + e.target.getAttribute("data-escaped-name") + "-translation").val());
var fileData = "{\"fileName\":\"" + fileName + "\", \"fileUrl\":\"" + e.target.getAttribute("data-url") + "\", " +
"\"rotation\":\"" + rotation + "\", \"scale\":\"" + scale + "\", \"translation\":\"" + translation + "\"}";
e.originalEvent.dataTransfer.setData('text/plain', fileData);
e.originalEvent.dataTransfer.setDragImage(e.target, 0, 0);
return true;
});
}
}
// -- Model drillDown -------------------------------------------------------------------------
function modelDrillDown(modelID, modelURL) // invoke with the view as "this"
{
var models = this.models;
var modelsTemp = this.modelsTemp;
showModelsTab.call(this, modelID, modelURL);
if (modelID != "") $(models).hide('slide', { direction: 'left' }, 175);
$(modelsTemp).show('slide', { direction: 'right' }, 175);
this.models = modelsTemp;
this.modelsTemp = models;
}
// -- Model drillUp ---------------------------------------------------------------------------
function modelDrillUp(modelID) // invoke with the view as "this"
{
var models = this.models;
var modelsTemp = this.modelsTemp;
showModelsTab.call(this, modelID);
$(models).hide('slide', { direction: 'right' }, 175);
$(modelsTemp).show('slide', { direction: 'left' }, 175);
this.models = modelsTemp;
this.modelsTemp = models;
}
// -- SaveStateAsFile -------------------------------------------------------------------------
function saveStateAsFile(filename) // invoke with the view as "this"
{
this.logger.info("Saving: " + filename);
var clients = this.nodes["http://vwf.example.com/clients.vwf"];
if (supportAjaxUploadWithProgress.call(this)) {
var xhr = new XMLHttpRequest();
// Save State Information
var state = vwf.getState();
state.nodes[0].children = {};
var timestamp = state["queue"].time;
timestamp = Math.round(timestamp * 1000);
var objectIsTypedArray = function (candidate) {
var typedArrayTypes = [
Int8Array,
Uint8Array,
// Uint8ClampedArray,
Int16Array,
Uint16Array,
Int32Array,
Uint32Array,
Float32Array,
Float64Array
];
var isTypedArray = false;
if (typeof candidate == "object" && candidate != null) {
typedArrayTypes.forEach(function (typedArrayType) {
isTypedArray = isTypedArray || candidate instanceof typedArrayType;
});
}
return isTypedArray;
};
var transitTransformation = function (object) {
return objectIsTypedArray(object) ?
Array.prototype.slice.call(object) : object;
};
var json = JSON.stringify(
require("vwf/utility").transform(
state, transitTransformation
)
);
json = $.encoder.encodeForURL(json);
var path = window.location.pathname;
var pathSplit = path.split('/');
if (pathSplit[0] == "") {
pathSplit.shift();
}
if (pathSplit[pathSplit.length - 1] == "") {
pathSplit.pop();
}
var inst = undefined;
var instIndex = pathSplit.length - 1;
if (pathSplit.length > 2) {
if (pathSplit[pathSplit.length - 2] == "load") {
instIndex = pathSplit.length - 3;
}
}
if (pathSplit.length > 3) {
if (pathSplit[pathSplit.length - 3] == "load") {
instIndex = pathSplit.length - 4;
}
}
inst = pathSplit[instIndex];
var root = "";
for (var i = 0; i < instIndex; i++) {
if (root != "") {
root = root + "/";
}
root = root + pathSplit[i];
}
if (filename == '') filename = inst;
if (root.indexOf('.vwf') != -1) root = root.substring(0, root.lastIndexOf('/'));
xhr.open("POST", "/" + root + "/save/" + filename, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("root=" + root + "/" + filename + "&filename=saveState&inst=" + inst + "×tamp=" + timestamp + "&extension=.vwf.json" + "&jsonState=" + json);
// Save Config Information
var config = { "info": {}, "model": {}, "view": {} };
// Save browser title
config["info"]["title"] = $('title').html();
// Save model drivers
Object.keys(vwf_view.kernel.kernel.models).forEach(function (modelDriver) {
if (modelDriver.indexOf('vwf/model/') != -1) config["model"][modelDriver] = "";
});
// If neither glge or threejs model drivers are defined, specify nodriver
if (config["model"]["vwf/model/glge"] === undefined && config["model"]["vwf/model/threejs"] === undefined) config["model"]["nodriver"] = "";
// Save view drivers and associated parameters, if any
Object.keys(vwf_view.kernel.kernel.views).forEach(function (viewDriver) {
if (viewDriver.indexOf('vwf/view/') != -1) {
if (vwf_view.kernel.kernel.views[viewDriver].parameters) {
config["view"][viewDriver] = vwf_view.kernel.kernel.views[viewDriver].parameters;
}
else config["view"][viewDriver] = "";
}
});
var jsonConfig = $.encoder.encodeForURL(JSON.stringify(config));
// Save config file to server
var xhrConfig = new XMLHttpRequest();
xhrConfig.open("POST", "/" + root + "/save/" + filename, true);
xhrConfig.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhrConfig.send("root=" + root + "/" + filename + "&filename=saveState&inst=" + inst + "×tamp=" + timestamp + "&extension=.vwf.config.json" + "&jsonState=" + jsonConfig);
}
else {
console.error("Unable to save state.");
}
}
// -- LoadSavedState --------------------------------------------------------------------------
function loadSavedState(filename, applicationpath, revision) {
this.logger.info("Loading: " + filename);
// Redirect until setState ID conflict is resolved
var path = window.location.pathname;
var inst = path.substring(path.length - 17, path.length - 1);
var pathSplit = path.split('/');
if (pathSplit[0] == "") {
pathSplit.shift();
}
if (pathSplit[pathSplit.length - 1] == "") {
pathSplit.pop();
}
var inst = undefined;
var instIndex = pathSplit.length - 1;
if (pathSplit.length > 2) {
if (pathSplit[pathSplit.length - 2] == "load") {
instIndex = pathSplit.length - 3;
}
}
if (pathSplit.length > 3) {
if (pathSplit[pathSplit.length - 3] == "load") {
instIndex = pathSplit.length - 4;
}
}
inst = pathSplit[instIndex];
if (revision) {
window.location.pathname = applicationpath + "/" + inst + '/load/' + filename + '/' + revision + '/';
}
else {
window.location.pathname = applicationpath + "/" + inst + '/load/' + filename + '/';
}
// $.get(filename,function(data,status){
// vwf.setState(data);
// });
}
// -- SupportAjax -----------------------------------------------------------------------------
function supportAjaxUploadWithProgress() {
return supportAjaxUploadProgressEvents();
function supportAjaxUploadProgressEvents() {
var xhr = new XMLHttpRequest();
return !!(xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));
}
}
});
\n" +
" 
\n" +
" 
\n" +
" 
\n" +
" 
\n" +
" 
\n" +
" 
" + $.encoder.encodeForHTML(node.name) + "
\n" +
"