From 6b52b5d97ec5bf49923801e0b04a67925a37eda8 Mon Sep 17 00:00:00 2001 From: Brandon Date: Tue, 5 Mar 2019 18:47:19 -0500 Subject: Finished kvp again --- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/KeyValueBox.tsx | 54 +++++++++++++++++++++++++++++++-- src/client/views/nodes/KeyValuePair.tsx | 31 ++++++++++++++++++- 3 files changed, 82 insertions(+), 5 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index e01e1d4cd..5ce8bb637 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,4 +1,4 @@ -import { action, computed } from "mobx"; +import { action, computed } from "mobx" import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { Field, FieldWaiting, Opt } from "../../../fields/Field"; diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index e8ebd50be..6192cd278 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -4,12 +4,18 @@ import { observer } from "mobx-react"; import { EditorView } from 'prosemirror-view'; import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app import { Document } from '../../../fields/Document'; -import { Opt, FieldWaiting } from '../../../fields/Field'; +import { Opt, FieldWaiting, Field } from '../../../fields/Field'; import { KeyStore } from '../../../fields/KeyStore'; import { FieldView, FieldViewProps } from './FieldView'; import { KeyValuePair } from "./KeyValuePair"; import "./KeyValueBox.scss"; import React = require("react") +import { Server } from "../../Server" +import { EditableView } from "../EditableView"; +import { CompileScript, ToField } from "../../util/Scripting"; +import { useState } from 'react' +import { Key } from '../../../fields/Key'; +import { TextField } from '../../../fields/TextField'; @observer export class KeyValueBox extends React.Component { @@ -18,12 +24,18 @@ export class KeyValueBox extends React.Component { private _ref: React.RefObject; private _editorView: Opt; private _reactionDisposer: Opt; + private _newKey = ''; + private _newValue = ''; constructor(props: FieldViewProps) { super(props); this._ref = React.createRef(); + this.state = { + key: '', + value: '' + } } @@ -32,6 +44,26 @@ export class KeyValueBox extends React.Component { return false; } + onEnterKey = (e: React.KeyboardEvent): void => { + if (e.key == 'Enter') { + if (this._newKey != '' && this._newValue != '') { + let doc = this.props.doc.GetT(KeyStore.Data, Document); + if (!doc || doc == FieldWaiting) { + return + } + let realDoc = doc; + realDoc.Set(new Key(this._newKey), new TextField(this._newValue)); + if (this.refs.newKVPKey instanceof HTMLInputElement) { + this.refs.newKVPKey.value = '' + } + if (this.refs.newKVPValue instanceof HTMLInputElement) { + this.refs.newKVPValue.value = '' + } + this._newKey = '' + this._newValue = '' + } + } + } onPointerDown = (e: React.PointerEvent): void => { if (e.buttons === 1 && this.props.isSelected()) { @@ -52,7 +84,7 @@ export class KeyValueBox extends React.Component { let ids: { [key: string]: string } = {}; let protos = doc.GetAllPrototypes(); for (const proto of protos) { - proto._proxies.forEach((val, key) => { + proto._proxies.forEach((val: any, key: string) => { if (!(key in ids)) { ids[key] = key; } @@ -67,9 +99,24 @@ export class KeyValueBox extends React.Component { return rows; } + keyChanged = (e: React.ChangeEvent) => { + this._newKey = e.currentTarget.value; + } - render() { + valueChanged = (e: React.ChangeEvent) => { + this._newValue = e.currentTarget.value; + } + newKeyValue = () => { + return ( + + + + + ) + } + + render() { return (
@@ -78,6 +125,7 @@ export class KeyValueBox extends React.Component { {this.createTable()} + {this.newKeyValue()}
Fields
) diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index a97e98313..111f85a05 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -8,6 +8,8 @@ import { observable, action } from 'mobx'; import { Document } from '../../../fields/Document'; import { Key } from '../../../fields/Key'; import { Server } from "../../Server" +import { EditableView } from "../EditableView"; +import { CompileScript, ToField } from "../../util/Scripting"; // Represents one row in a key value plane @@ -48,10 +50,37 @@ export class KeyValuePair extends React.Component { bindings: {}, selectOnLoad: false, } + let contents = ( + + ); return ( {this.key.Name} - + { + let field = props.doc.Get(props.fieldKey); + if (field && field instanceof Field) { + return field.ToScriptString(); + } + return field || ""; + }} + SetValue={(value: string) => { + let script = CompileScript(value, undefined, true); + if (!script.compiled) { + return false; + } + let field = script(); + if (field instanceof Field) { + props.doc.Set(props.fieldKey, field); + return true; + } else { + let dataField = ToField(field); + if (dataField) { + props.doc.Set(props.fieldKey, dataField); + return true; + } + } + return false; + }}> ) } -- cgit v1.2.3-70-g09d2 From 31c9722ed5e587d3ae294db83c134b8e6ad050f8 Mon Sep 17 00:00:00 2001 From: Hannah Chow Date: Mon, 11 Mar 2019 18:32:28 -0400 Subject: added tooltips --- src/client/views/DocumentDecorations.scss | 12 ++++++------ src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/nodes/LinkBox.scss | 22 +++++++++++++++++----- src/client/views/nodes/LinkBox.tsx | 6 +++--- src/client/views/nodes/LinkMenu.tsx | 4 ++-- 5 files changed, 29 insertions(+), 17 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index a9621efa5..9e3034829 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -80,11 +80,11 @@ } .linkButton-empty { - height: 20px; - width: 20px; + height: 16px; + width: 16px; margin-top: 10px; border-radius: 50%; - opacity: 0.6; + opacity: 0.9; pointer-events: auto; background-color: $dark-color; color: $light-color; @@ -95,11 +95,11 @@ } .linkButton-nonempty { - height: 20px; - width: 20px; + height: 16px; + width: 16px; margin-top: 10px; border-radius: 50%; - opacity: 0.6; + opacity: 0.9; pointer-events: auto; background-color: $dark-color; color: $light-color; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index b75644ecd..313b35ca8 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -234,7 +234,7 @@ export class DocumentDecorations extends React.Component {
e.preventDefault()}>
e.preventDefault()}>
-
{linkButton}
+
{linkButton}
) diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss index 00e5ebb3d..bdedbc103 100644 --- a/src/client/views/nodes/LinkBox.scss +++ b/src/client/views/nodes/LinkBox.scss @@ -1,3 +1,4 @@ +@import "../global_variables"; .link-container { width: 100%; height: 30px; @@ -29,11 +30,22 @@ } .button { - height: 15px; - width: 15px; - margin: 8px 5px; + height: 16px; + width: 16px; + margin: 8px 4px; border-radius: 50%; - opacity: 0.6; + opacity: 0.9; pointer-events: auto; - background-color: #2B6091; + background-color: $dark-color; + color: $light-color; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + transition: transform 0.2s; +} + +.button:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; } \ No newline at end of file diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index 69df676ff..44b3dccb7 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -79,9 +79,9 @@ export class LinkBox extends React.Component {
-
-
-
+
+
+
) diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx index 5c6b06d00..5eeb40772 100644 --- a/src/client/views/nodes/LinkMenu.tsx +++ b/src/client/views/nodes/LinkMenu.tsx @@ -39,8 +39,8 @@ export class LinkMenu extends React.Component {
- {this.renderLinkItems(linkTo, KeyStore.LinkedToDocs, "Source: ")} - {this.renderLinkItems(linkFrom, KeyStore.LinkedFromDocs, "Destination: ")} + {this.renderLinkItems(linkTo, KeyStore.LinkedToDocs, "Destination: ")} + {this.renderLinkItems(linkFrom, KeyStore.LinkedFromDocs, "Source: ")}
) -- cgit v1.2.3-70-g09d2 From bff0093163bdc05fb661eb744c2333069544dc89 Mon Sep 17 00:00:00 2001 From: laurawilsonri Date: Mon, 11 Mar 2019 18:48:58 -0400 Subject: added a method to check if block has a syle ie bullets --- src/client/util/RichTextSchema.tsx | 44 +++++++++++++++++++++++++---- src/client/util/TooltipTextMenu.tsx | 3 +- src/client/views/nodes/FormattedTextBox.tsx | 2 ++ 3 files changed, 41 insertions(+), 8 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index abf448c9f..341d5a443 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -1,12 +1,31 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Schema, NodeSpec, MarkSpec, DOMOutputSpecArray } from "prosemirror-model" +import { Schema, NodeSpec, MarkSpec, DOMOutputSpecArray, NodeType } from "prosemirror-model" import { joinUp, lift, setBlockType, toggleMark, wrapIn } from 'prosemirror-commands' import { redo, undo } from 'prosemirror-history' -import { orderedList, bulletList, listItem } from 'prosemirror-schema-list' +import { orderedList, bulletList, listItem, } from 'prosemirror-schema-list' +import { EditorState, Transaction, NodeSelection, } from "prosemirror-state"; +import { EditorView, } from "prosemirror-view"; const pDOM: DOMOutputSpecArray = ["p", 0], blockquoteDOM: DOMOutputSpecArray = ["blockquote", 0], hrDOM: DOMOutputSpecArray = ["hr"], preDOM: DOMOutputSpecArray = ["pre", ["code", 0]], brDOM: DOMOutputSpecArray = ["br"], ulDOM: DOMOutputSpecArray = ["ul", 0] +//adapted this method - use it to check if block has a tag (ie bulleting) +const blockActive = (type: NodeType>, attrs = {}) => (state: EditorState) => { + + if (state.selection instanceof NodeSelection) { + const sel: NodeSelection = state.selection; + let $from = sel.$from; + let to = sel.to; + let node = sel.node; + + if (node) { + return node.hasMarkup(type, attrs); + } + + return to <= $from.end() && $from.parent.hasMarkup(type, attrs); + } +}; + // :: Object // [Specs](#model.NodeSpec) for the nodes defined in this schema. export const nodes: { [index: string]: NodeSpec } = { @@ -113,11 +132,24 @@ export const nodes: { [index: string]: NodeSpec } = { content: 'list_item+', group: 'block' }, + //bullet_list: { + // ...bulletList, + // content: 'list_item+', + // group: 'block', + //parseDOM: [{ tag: "ul" }, { style: 'list-style-type=disc' }], + //toDOM() { return ulDOM } + //}, bullet_list: { - content: 'list_item+', - group: 'block', - parseDOM: [{ tag: "ul" }, { style: "list-style-type=disc;" }], - toDOM() { return ulDOM } + title: "Wrap in bullet list", + content: icons.bullet_list, + active: blockActive(state.config.schema.nodes.bullet_list), + enable: state => wrapInList(state.config.schema.nodes.bullet_list), + run: state => wrapInList(state.config.schema.nodes.bullet_list), + active: blockActive(schema.nodes.bullet_list), + enable: wrapInList(schema.nodes.bullet_list), + run: wrapInList(schema.nodes.bullet_list), + select: state => true, + menu: props => @@ -33,7 +32,7 @@ export class CollectionPDFView extends React.Component { } // "inherited" CollectionView API starts here... - + public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); } diff --git a/src/client/views/collections/CollectionVideoView.scss b/src/client/views/collections/CollectionVideoView.scss new file mode 100644 index 000000000..6c2f5a62a --- /dev/null +++ b/src/client/views/collections/CollectionVideoView.scss @@ -0,0 +1,35 @@ +.collectionVideoView-controls{ + width: 100%; + height: 100%; + position: absolute; +} +.collectionVideoView-time{ + color : white; + top :25px; + left : 25px; + position: absolute; + background-color: rgba(50, 50, 50, 0.2); +} +.collectionVideoView-play { + width: 25px; + height: 20px; + bottom: 25px; + left : 25px; + position: absolute; + color : white; + background-color: rgba(50, 50, 50, 0.2); + border-radius: 4px; + text-align: center; +} +.collectionVideoView-full { + width: 25px; + height: 20px; + bottom: 25px; + right : 25px; + position: absolute; + color : white; + background-color: rgba(50, 50, 50, 0.2); + border-radius: 4px; + text-align: center; + +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index a6471f53c..058325b21 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -1,4 +1,4 @@ -import { action, computed } from "mobx"; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { KeyStore } from "../../../fields/KeyStore"; @@ -7,6 +7,8 @@ import { CollectionView, CollectionViewType } from "./CollectionView"; import { CollectionViewProps } from "./CollectionViewBase"; import React = require("react"); import { FieldId } from "../../../fields/Field"; +import { ReplaceAroundStep } from "prosemirror-transform"; +import "./CollectionVideoView.scss" @observer @@ -18,14 +20,10 @@ export class CollectionVideoView extends React.Component { isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`; } - public SelectedDocs: FieldId[] = [] - @action onPageBack = () => this.curPage > 1 ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage - 1) : 0; - @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : 0; - - @computed private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, 0); } - @computed private get numPages() { return this.props.Document.GetNumber(KeyStore.NumPages, 0); } + private _mainCont = React.createRef(); // "inherited" CollectionView API starts here... + public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); } @@ -40,11 +38,74 @@ export class CollectionVideoView extends React.Component { get collectionViewType(): CollectionViewType { return CollectionViewType.Freeform; } get subView(): any { return CollectionView.SubView(this); } + componentDidMount() { + this.repete(); + } + + player = (): HTMLVideoElement => { + return this._mainCont.current!.getElementsByTagName("video")[0]; + } + + @action + repete = () => { + if (this.player()) { + this.ctime = this.player().currentTime; + this.props.Document.SetNumber(KeyStore.CurPage, Math.round(this.ctime)); + } + setTimeout(() => this.repete(), 100) + } + + + @observable + ctime: number = 0 + @observable + playing: boolean = false; + + @action + onPlayDown = () => { + if (this.player()) { + if (this.player().paused) { + this.player().play(); + this.playing = true; + } else { + this.player().pause(); + this.playing = false; + } + } + } + @action + onFullDown = (e: React.PointerEvent) => { + if (this.player()) { + this.player().requestFullscreen(); + e.stopPropagation(); + e.preventDefault(); + } + } + + @action + onResetDown = () => { + if (this.player()) { + this.player().pause(); + this.player().currentTime = 0; + } + + } + render() { - return (
- {/* */} + return (
+
+ {this.subView} +
+ {"" + Math.round(this.ctime)} + {" " + Math.round((this.ctime - Math.trunc(this.ctime)) * 100)} +
+
+ {this.playing ? "\"" : ">"} +
+
+ F +
+
) } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 17a0fbd23..bbb4a5d83 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -50,7 +50,7 @@ export class CollectionView extends React.Component { @action public static AddDocument(props: CollectionViewProps, doc: Document) { - doc.SetNumber(KeyStore.Page, props.Document.GetNumber(KeyStore.CurPage, 0)); + doc.SetNumber(KeyStore.Page, props.Document.GetNumber(KeyStore.CurPage, -1)); if (props.Document.Get(props.fieldKey) instanceof Field) { //TODO This won't create the field if it doesn't already exist const value = props.Document.GetData(props.fieldKey, ListField, new Array()) diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 544af41a2..b0b5a63a4 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -86,7 +86,7 @@ export class PDFBox extends React.Component { @observable private _interactive: boolean = false; @observable private _loaded: boolean = false; - @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, 0); } + @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, -1); } componentDidMount() { this._reactionDisposer = reaction( diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 9c60d4348..053d9dd56 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -51,7 +51,7 @@ export class VideoBox extends React.Component {
{({ measureRef }) => -
diff --git a/src/client/views/collections/CollectionPDFView.scss b/src/client/views/collections/CollectionPDFView.scss new file mode 100644 index 000000000..28878c6fa --- /dev/null +++ b/src/client/views/collections/CollectionPDFView.scss @@ -0,0 +1,28 @@ +.collectionPdfView-buttonTray { + width: 100%; + height: 100%; + top : 25px; + left : 20px; + position: relative; + transform-origin: left top; + position: absolute; +} +.collectionPdfView-cont{ + width: 100%; + height: 100%; + position: absolute; +} +.collectionPdfView-backward { + color : white; + top :0px; + left : 0px; + position: absolute; + background-color: rgba(50, 50, 50, 0.2); +} +.collectionPdfView-forward { + color : white; + top :0px; + left : 25px; + position: absolute; + background-color: rgba(50, 50, 50, 0.2); +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index be3a281f2..124d82c8b 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -5,6 +5,7 @@ import { KeyStore } from "../../../fields/KeyStore"; import { ContextMenu } from "../ContextMenu"; import { CollectionView, CollectionViewType } from "./CollectionView"; import { CollectionViewProps } from "./CollectionViewBase"; +import "./CollectionPDFView.scss" import React = require("react"); import { FieldId } from "../../../fields/Field"; @@ -24,10 +25,11 @@ export class CollectionPDFView extends React.Component { @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : -1; private get uIButtons() { + let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().transformDirection(1, 1)[0]); return ( -
- - +
+ +
); } @@ -49,7 +51,7 @@ export class CollectionPDFView extends React.Component { get subView(): any { return CollectionView.SubView(this); } render() { - return (
+ return (
{this.subView} {this.props.isSelected() ? this.uIButtons : (null)}
) diff --git a/src/client/views/collections/CollectionVideoView.scss b/src/client/views/collections/CollectionVideoView.scss index 6c2f5a62a..ec3c0327d 100644 --- a/src/client/views/collections/CollectionVideoView.scss +++ b/src/client/views/collections/CollectionVideoView.scss @@ -1,4 +1,9 @@ -.collectionVideoView-controls{ +.collectionVideoView-buttonTray{ + width: 100%; + height: 100%; + position: absolute; +} +.collectionVideoView-cont{ width: 100%; height: 100%; position: absolute; @@ -9,6 +14,7 @@ left : 25px; position: absolute; background-color: rgba(50, 50, 50, 0.2); + transform-origin: left top; } .collectionVideoView-play { width: 25px; @@ -20,6 +26,7 @@ background-color: rgba(50, 50, 50, 0.2); border-radius: 4px; text-align: center; + transform-origin: left bottom; } .collectionVideoView-full { width: 25px; @@ -31,5 +38,6 @@ background-color: rgba(50, 50, 50, 0.2); border-radius: 4px; text-align: center; + transform-origin: right bottom; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index 9856a1284..9b01c23c9 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -7,7 +7,6 @@ import { CollectionView, CollectionViewType } from "./CollectionView"; import { CollectionViewProps } from "./CollectionViewBase"; import React = require("react"); import { FieldId } from "../../../fields/Field"; -import { ReplaceAroundStep } from "prosemirror-transform"; import "./CollectionVideoView.scss" @@ -21,6 +20,25 @@ export class CollectionVideoView extends React.Component { } private _mainCont = React.createRef(); + + private get uIButtons() { + let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().transformDirection(1, 1)[0]); + return ( +
+
+ {"" + Math.round(this.ctime)} + {" " + Math.round((this.ctime - Math.trunc(this.ctime)) * 100)} +
+
+ {this.playing ? "\"" : ">"} +
+
+ F +
+
); + } + + // "inherited" CollectionView API starts here... @observable @@ -40,20 +58,20 @@ export class CollectionVideoView extends React.Component { get subView(): any { return CollectionView.SubView(this); } componentDidMount() { - this.repete(); + this.updateTimecode(); } - player = (): HTMLVideoElement => { - return this._mainCont.current!.getElementsByTagName("video")[0]; + get player(): HTMLVideoElement | undefined { + return this._mainCont.current ? this._mainCont.current.getElementsByTagName("video")[0] : undefined; } @action - repete = () => { - if (this.player()) { - this.ctime = this.player().currentTime; + updateTimecode = () => { + if (this.player) { + this.ctime = this.player.currentTime; this.props.Document.SetNumber(KeyStore.CurPage, Math.round(this.ctime)); } - setTimeout(() => this.repete(), 100) + setTimeout(() => this.updateTimecode(), 100) } @@ -64,20 +82,20 @@ export class CollectionVideoView extends React.Component { @action onPlayDown = () => { - if (this.player()) { - if (this.player().paused) { - this.player().play(); + if (this.player) { + if (this.player.paused) { + this.player.play(); this.playing = true; } else { - this.player().pause(); + this.player.pause(); this.playing = false; } } } @action onFullDown = (e: React.PointerEvent) => { - if (this.player()) { - this.player().requestFullscreen(); + if (this.player) { + this.player.requestFullscreen(); e.stopPropagation(); e.preventDefault(); } @@ -85,28 +103,17 @@ export class CollectionVideoView extends React.Component { @action onResetDown = () => { - if (this.player()) { - this.player().pause(); - this.player().currentTime = 0; + if (this.player) { + this.player.pause(); + this.player.currentTime = 0; } } render() { return (
-
- {this.subView} -
- {"" + Math.round(this.ctime)} - {" " + Math.round((this.ctime - Math.trunc(this.ctime)) * 100)} -
-
- {this.playing ? "\"" : ">"} -
-
- F -
-
+ {this.subView} + {this.uIButtons}
) } } \ No newline at end of file diff --git a/src/client/views/collections/PreviewCursor.tsx b/src/client/views/collections/PreviewCursor.tsx index ab68fbc46..a1411250a 100644 --- a/src/client/views/collections/PreviewCursor.tsx +++ b/src/client/views/collections/PreviewCursor.tsx @@ -16,7 +16,7 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView"; export interface PreviewCursorProps { getTransform: () => Transform; container: CollectionFreeFormView; - addLiveTextDocuemnt: (doc: Document) => void; + addLiveTextDocument: (doc: Document) => void; } @observer @@ -57,11 +57,13 @@ export class PreviewCursor extends React.Component { @action onKeyPress = (e: KeyboardEvent) => { //if not these keys, make a textbox if preview cursor is active! - if (!e.ctrlKey && !e.altKey) { + if (!e.ctrlKey && !e.altKey && !e.defaultPrevented) { //make textbox and add it to this collection let [x, y] = this.props.getTransform().transformPoint(this._lastX, this._lastY); let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "new" }); - this.props.addLiveTextDocuemnt(newBox); + this.props.addLiveTextDocument(newBox); + e.stopPropagation(); + e.preventDefault(); } } diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 9f92410d4..ad947afd5 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -11,5 +11,5 @@ } .pdfBox-contentContainer { position: absolute; - transform-origin: "left top"; + transform-origin: left top; } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From a3678862b48d6bb44f37533b827d290c883ce542 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 14 Mar 2019 16:54:48 -0400 Subject: added a background color --- src/client/documents/Documents.ts | 2 ++ src/client/views/Main.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 2 ++ src/fields/KeyStore.ts | 1 + 4 files changed, 6 insertions(+), 1 deletion(-) (limited to 'src/client/views/nodes') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 15e16a491..4e0eefcc6 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -40,6 +40,7 @@ export interface DocumentOptions { layout?: string; layoutKeys?: Key[]; viewType?: number; + backgroundColor?: string; } export namespace Documents { @@ -83,6 +84,7 @@ export namespace Documents { if (options.page !== undefined) { doc.SetNumber(KeyStore.Page, options.page); } if (options.scale !== undefined) { doc.SetNumber(KeyStore.Scale, options.scale); } if (options.viewType !== undefined) { doc.SetNumber(KeyStore.ViewType, options.viewType); } + if (options.backgroundColor !== undefined) { doc.SetText(KeyStore.BackgroundColor, options.backgroundColor); } if (options.layout !== undefined) { doc.SetText(KeyStore.Layout, options.layout); } if (options.layoutKeys !== undefined) { doc.Set(KeyStore.LayoutKeys, new ListField(options.layoutKeys)); } return doc; diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index d73e9b8fe..8ee028076 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -58,7 +58,7 @@ Documents.initProtos(mainDocId, (res?: Document) => { let videourl = "http://techslides.com/demos/sample-videos/small.mp4"; let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {})) let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" })) - let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" })); + let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, backgroundColor: "Transparent", title: "a freeform collection" })); let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" })); let addVideoNode = action(() => Documents.VideoDocument(videourl, { width: 200, title: "video node" })); let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 200, title: "a schema collection" })); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 8cd406d7d..4b50e40a3 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -305,9 +305,11 @@ export class DocumentView extends React.Component { var scaling = this.props.ContentScaling(); var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); + var backgroundcolor = this.props.Document.GetText(KeyStore.BackgroundColor, ""); return (
0 ? nativeWidth.toString() + "px" : "100%", height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%", transformOrigin: "left top", diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts index f93a68c85..0c8b7e260 100644 --- a/src/fields/KeyStore.ts +++ b/src/fields/KeyStore.ts @@ -19,6 +19,7 @@ export namespace KeyStore { export const Annotations = new Key("Annotations"); export const ViewType = new Key("ViewType"); export const Layout = new Key("Layout"); + export const BackgroundColor = new Key("BackgroundColor"); export const BackgroundLayout = new Key("BackgroundLayout"); export const OverlayLayout = new Key("OverlayLayout"); export const LayoutKeys = new Key("LayoutKeys"); -- cgit v1.2.3-70-g09d2 From c17605b4d1fe04429b029ff5a161f31ce19f5fd4 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 15 Mar 2019 10:48:23 -0400 Subject: think video resizing is fixed now. --- src/client/views/collections/CollectionSchemaView.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 37620cd7c..14e1df8ca 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -49,7 +49,7 @@ export class CollectionSchemaView extends CollectionViewBase { let reference = React.createRef(); let onItemDown = setupDrag(reference, () => props.doc); return ( -
+
{ let field = props.doc.Get(props.fieldKey); diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 053d9dd56..fef278cec 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -30,7 +30,7 @@ export class VideoBox extends React.Component { var nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 0); var nativeHeight = this.props.doc.GetNumber(KeyStore.NativeHeight, 0); var newNativeHeight = nativeWidth * r.entry.height / r.entry.width; - if (newNativeHeight != nativeHeight && !isNaN(newNativeHeight)) { + if (!nativeHeight && newNativeHeight != nativeHeight && !isNaN(newNativeHeight)) { this.props.doc.SetNumber(KeyStore.Height, newNativeHeight / nativeWidth * this.props.doc.GetNumber(KeyStore.Width, 0)); this.props.doc.SetNumber(KeyStore.NativeHeight, newNativeHeight); } @@ -48,7 +48,7 @@ export class VideoBox extends React.Component { //setTimeout(action(() => this._loaded = true), 500); return ( -
+
{({ measureRef }) =>