Skip to content

Commit

Permalink
fullscreen button, interface fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@framefactory
framefactory committed Jan 31, 2019
1 parent cd3d427 commit 9779eac
Show file tree
Hide file tree
Showing 7 changed files with 155 additions and 34 deletions.
2 changes: 1 addition & 1 deletion libs/ff-graph
Submodule ff-graph updated from 4cb1d0 to 34701d
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"server": "nodemon services/server/bin/index.js",
"watch": "concurrently \"cd source/client && webpack --watch --app=story\" \"tsc -b source/server -w\" \"nodemon services/server/bin/index.js\"",
"build": "concurrently \"npm run build-server\" \"npm run build-dev\"",
"build-all": "npm run build-dev; npm run build-prod",
"build-dev": "cd source/client; webpack --mode=development --app=all; cd ../..",
"build-prod": "cd source/client; webpack --mode=production --app=all; cd ../..",
"build-server": "tsc -b source/server",
Expand Down
59 changes: 59 additions & 0 deletions source/client/explorer/components/CVInterface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,63 @@ const _inputs = {
logo: types.Boolean("Interface.Logo", true),
};

const _outputs = {
fullscreenAvailable: types.Boolean("Fullscreen.Available", false),
fullscreenEnabled: types.Boolean("Fullscreen.Enabled", false),
};

export default class CVInterface extends Component
{
ins = this.addInputs(_inputs);
outs = this.addOutputs(_outputs);

private _fullscreenElement: HTMLElement = null;

constructor(id: string)
{
super(id);
this.onFullscreenChange = this.onFullscreenChange.bind(this);
}


get fullscreenElement() {
return this._fullscreenElement;
}
set fullscreenElement(element: HTMLElement) {

if (element !== this._fullscreenElement) {
if (this._fullscreenElement) {
this._fullscreenElement.removeEventListener("fullscreenchange", this.onFullscreenChange);
}

this._fullscreenElement = element;

if (element) {
element.addEventListener("fullscreenchange", this.onFullscreenChange);
}
}
}

toggleFullscreen()
{
const outs = this.outs;
const fullscreenElement = this._fullscreenElement;

if (fullscreenElement) {
const state = outs.fullscreenEnabled.value;
if (!state && outs.fullscreenAvailable.value) {
fullscreenElement.requestFullscreen();
}
else if (state) {
document.exitFullscreen();
}
}
}

create()
{
this.outs.fullscreenAvailable.setValue(!!document.body.requestFullscreen);
}

fromData(data: IInterface)
{
Expand All @@ -48,4 +101,10 @@ export default class CVInterface extends Component
logo: ins.logo.value
};
}

protected onFullscreenChange(event: Event)
{
const fullscreenEnabled = !!document["fullscreenElement"];
this.outs.fullscreenEnabled.setValue(fullscreenEnabled);
}
}
103 changes: 73 additions & 30 deletions source/client/explorer/ui/ChromeView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,15 @@ import System from "@ff/graph/System";
import "@ff/ui/ButtonGroup";
import "@ff/ui/PopupButton";

import CVPresentationController from "../components/CVPresentationController";
import CVInterface from "../components/CVInterface";
import CVReader from "../components/CVReader";

import ViewMenu from "./ViewMenu";
import RenderMenu from "./RenderMenu";

import CustomElement, { customElement, html, property } from "@ff/ui/CustomElement";
import CVAnnotations from "../components/CVAnnotations";

////////////////////////////////////////////////////////////////////////////////

Expand All @@ -34,74 +37,114 @@ export default class ChromeView extends CustomElement
@property({ attribute: false })
system: System;

protected interface: CVInterface;
private _viewMenu: ViewMenu = null;
private _renderMenu: RenderMenu = null;

constructor(system?: System)
{
super();
this.system = system;
this.interface = system.getComponent(CVInterface);
}

protected get activePresentation() {
return this.system.getMainComponent(CVPresentationController).activePresentation;
}
protected get interface() {
return this.system.getMainComponent(CVInterface);
}
protected get reader() {
return this.system.getMainComponent(CVReader);
}

protected firstConnected()
{
this.style.pointerEvents = "none";
this.setAttribute("pointer-events", "none");

this._viewMenu = new ViewMenu(this.system);
this._viewMenu.portal = this;

this._renderMenu = new RenderMenu(this.system);
this._renderMenu.portal = this;
}

protected connected()
{
const { visible, logo } = this.interface.ins;
visible.on("value", this.onInterfaceUpdate, this);
logo.on("value", this.onInterfaceUpdate, this);
const iface = this.interface;
iface.ins.visible.on("value", this.performUpdate, this);
iface.ins.logo.on("value", this.performUpdate, this);
iface.outs.fullscreenEnabled.on("value", this.performUpdate, this);

this.reader.ins.visible.on("value", this.performUpdate, this);
}

protected disconnected()
{
const { visible, logo } = this.interface.ins;
visible.off("value", this.onInterfaceUpdate, this);
logo.off("value", this.onInterfaceUpdate, this);
const iface = this.interface;
iface.ins.visible.off("value", this.performUpdate, this);
iface.ins.logo.off("value", this.performUpdate, this);
iface.outs.fullscreenEnabled.off("value", this.performUpdate, this);

this.reader.ins.visible.off("value", this.performUpdate, this);
}

protected render()
{
const { visible, logo } = this.interface.ins;
const isVisible = visible.value;
const showLogo = logo.value;

if (!isVisible) {
const iface = this.interface;
const interfaceVisible = iface.ins.visible.value;
const logoVisible = iface.ins.logo.value;
const fullscreenEnabled = iface.outs.fullscreenEnabled.value;
const fullscreenAvailable = iface.outs.fullscreenAvailable.value;
const readerVisible = this.reader.ins.visible.value;

const activePresentation = this.activePresentation;
const annotationsVisible = activePresentation
? activePresentation.getInnerComponent(CVAnnotations).ins.visible.value : false;

if (!interfaceVisible) {
return html``;
}

const viewMenu = new ViewMenu(this.system);
viewMenu.portal = this;

const renderMenu = new RenderMenu(this.system);
renderMenu.portal = this;

return html`
<div class="sv-main-menu">
<ff-button-group mode="exclusive">
<ff-popup-button class="ff-menu-button" icon="eye" .content=${viewMenu}>
<ff-popup-button class="ff-menu-button" icon="eye" .content=${this._viewMenu}>
</ff-popup-button>
<ff-popup-button class="ff-menu-button" icon="palette" .content=${renderMenu}>
<ff-popup-button class="ff-menu-button" icon="palette" .content=${this._renderMenu}>
</ff-popup-button>
</ff-button-group>
<ff-button class="ff-menu-button" icon="comment" selectable>
<ff-button class="ff-menu-button" icon="comment" title="show/hide annotations"
?selected=${annotationsVisible} @click=${this.onClickAnnotations}>
</ff-button>
<ff-button class="ff-menu-button" icon="document" selectable>
<ff-button class="ff-menu-button" icon="document" title="show/hide document reader"
?selected=${readerVisible} @click=${this.onClickReader}>
</ff-button>
${fullscreenAvailable ? html`<ff-button class="ff-menu-button" icon="expand" title="enable/disable fullscreen mode"
?selected=${fullscreenEnabled} @click=${this.onClickFullscreen}></ff-button>` : null}
</div>
${showLogo ? html`
<div class="sv-logo">
<img src="images/si-dpo3d-logo-neg.svg" alt="Smithsonian DPO 3D Logo">
</div>
` : null}
${logoVisible ? html`<div class="sv-logo">
<img src="images/si-dpo3d-logo-neg.svg" alt="Smithsonian DPO 3D Logo">
</div>` : null}
`;
}

protected onInterfaceUpdate()
protected onClickAnnotations()
{
const activePresentation = this.activePresentation;
if (activePresentation) {
const visible = activePresentation.getInnerComponent(CVAnnotations).ins.visible.value;
activePresentation.getInnerComponents(CVAnnotations).forEach(comp => comp.ins.visible.setValue(!visible));
}
}

protected onClickReader()
{
const prop = this.reader.ins.visible;
prop.setValue(!prop.value);
}

protected onClickFullscreen()
{
this.requestUpdate();
this.interface.toggleFullscreen();
}
}
5 changes: 4 additions & 1 deletion source/client/explorer/ui/ContentView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,12 @@ export default class ContentView extends CustomElement
{
this.setStyle({
position: "absolute",
top: "0", bottom: "0", left: "0", right: "0"
top: "0", bottom: "0", left: "0", right: "0",
touchAction: "none",
});

this.setAttribute("touch-action", "none");

this.canvas = this.createElement("canvas", {
display: "block",
width: "100%",
Expand Down
15 changes: 15 additions & 0 deletions source/client/explorer/ui/MainView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import Icon from "@ff/ui/Icon";
import Notification from "@ff/ui/Notification";

import ExplorerApplication, { IExplorerApplicationProps } from "../ExplorerApplication";
import CVInterface from "../components/CVInterface";

import ContentView from "./ContentView";
import ChromeView from "./ChromeView";
Expand Down Expand Up @@ -73,6 +74,10 @@ export default class MainView extends CustomElement
}
}

protected get interface() {
return this.application.system.getMainComponent(CVInterface);
}

protected firstConnected()
{
const system = this.application.system;
Expand All @@ -84,4 +89,14 @@ export default class MainView extends CustomElement
notifications.setAttribute("id", Notification.stackId);
this.appendChild(notifications);
}

protected connected()
{
this.interface.fullscreenElement = this;
}

protected disconnected()
{
this.interface.fullscreenElement = null;
}
}
4 changes: 2 additions & 2 deletions source/client/story/taskSets.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@ export default {
CVExploreTask,
CVPoseTask,
CVCaptureTask,
CVAnnotationsTask,
//CVAnnotationsTask,
//CVDerivativesTask,
],
"Authoring": [
CVExploreTask,
CVAnnotationsTask,
//CVAnnotationsTask,
],
}

0 comments on commit 9779eac

Please sign in to comment.