diff options
13 files changed, 130 insertions, 6 deletions
diff --git a/src/client/views/nodes/Keyframe.scss b/src/client/views/animationtimeline/Keyframe.scss index b1e8b0b65..b1e8b0b65 100644 --- a/src/client/views/nodes/Keyframe.scss +++ b/src/client/views/animationtimeline/Keyframe.scss diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx index 780928e77..995a5b402 100644 --- a/src/client/views/nodes/Keyframe.tsx +++ b/src/client/views/animationtimeline/Keyframe.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import "./Keyframe.scss"; import "./Timeline.scss"; -import "./../globalCssVariables.scss"; +import "../globalCssVariables.scss"; import { observer, Observer } from "mobx-react"; import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS, isComputedProp, runInAction } from "mobx"; import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc"; @@ -519,6 +519,7 @@ export class Keyframe extends React.Component<IProps> { onContextMenu={action((e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); + console.log("has been clicked!"); let offsetLeft = this._bar.current!.getBoundingClientRect().left - this._bar.current!.parentElement!.getBoundingClientRect().left; let offsetTop = this._bar.current!.getBoundingClientRect().top; //+ this._bar.current!.parentElement!.getBoundingClientRect().top; this.props.setFlyout({ x: offsetLeft * this.props.transform.Scale, y: offsetTop * this.props.transform.Scale, display: "block", regiondata: this.regiondata, regions: this.regions }); diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss index 47f448adb..47f448adb 100644 --- a/src/client/views/nodes/Timeline.scss +++ b/src/client/views/animationtimeline/Timeline.scss diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index 923e99e63..d2714592e 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -13,7 +13,7 @@ import { faPlayCircle, faBackward, faForward, faGripLines, faArrowUp, faArrowDow import { ContextMenuProps } from "../ContextMenuItem"; import { ContextMenu } from "../ContextMenu"; import { DocumentManager } from "../../util/DocumentManager"; -import { VideoBox } from "./VideoBox"; +import { VideoBox } from "../nodes/VideoBox"; import { VideoField } from "../../../new_fields/URLField"; import { CollectionVideoView } from "../collections/CollectionVideoView"; import { Transform } from "../../util/Transform"; diff --git a/src/client/views/animationtimeline/TimelineMenu.scss b/src/client/views/animationtimeline/TimelineMenu.scss new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/src/client/views/animationtimeline/TimelineMenu.scss diff --git a/src/client/views/animationtimeline/TimelineMenu.tsx b/src/client/views/animationtimeline/TimelineMenu.tsx new file mode 100644 index 000000000..e82075f6a --- /dev/null +++ b/src/client/views/animationtimeline/TimelineMenu.tsx @@ -0,0 +1,47 @@ + +import * as React from "react"; + + +/** + * TimelineMenu: + * + * + * Timeline: + * - + * + * + * Keyframe: + * - Delete keyframe + * - Move keyframe + * - Edit keyframe (shows schema) + * + * + * Region: + * - Add Keyframe + * - Copy Interpolation + * - Copy path + * - Add Interpolation + * - Add Path + * - Change fades + * - position region + * - duration region + * - + */ +export class TimelineMenu extends React.Component { + public static Instance:TimelineMenu; + + constructor (props:Readonly<{}>){ + super(props); + TimelineMenu.Instance = this; + } + + + + + render() { + return ( + <div></div> + ); + } + +}
\ No newline at end of file diff --git a/src/client/views/nodes/Track.scss b/src/client/views/animationtimeline/Track.scss index c8d56edf6..c8d56edf6 100644 --- a/src/client/views/nodes/Track.scss +++ b/src/client/views/animationtimeline/Track.scss diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/animationtimeline/Track.tsx index b12dabadf..4f78f86b8 100644 --- a/src/client/views/nodes/Track.tsx +++ b/src/client/views/animationtimeline/Track.tsx @@ -11,6 +11,9 @@ import { FlyoutProps } from "./Timeline"; import { Transform } from "../../util/Transform"; import { AddComparisonParameters } from "../../northstar/model/idea/idea"; import { CollectionSchemaBooleanCell } from "../collections/CollectionSchemaCells"; +import { DocumentManager } from "../../util/DocumentManager"; +import { DocumentView } from "../nodes/DocumentView"; +import { RichTextField } from "../../../new_fields/RichTextField"; interface IProps { node: Doc; @@ -60,6 +63,7 @@ export class Track extends React.Component<IProps> { return reaction( () => { return Doc.allKeys(this.props.node).map(key => FieldValue(this.props.node[key])); }, async () => { + console.log("rAN"); let regiondata: (Doc | undefined) = await this.findRegion(this.props.currentBarX) ; if (regiondata) { let keyframes = await DocListCastAsync((regiondata as Doc).keyframes!); @@ -129,6 +133,12 @@ export class Track extends React.Component<IProps> { let docFromApply = kfNode; if (this.filterKeys(Doc.allKeys(this.props.node)).length > this.filterKeys(Doc.allKeys(kfNode)).length) docFromApply = this.props.node; this.filterKeys(Doc.allKeys(docFromApply)).forEach(key => { + if (key === "type") { + if (this.props.node[key] === "text") { + this.props.node.dataDocTest = new RichTextField(StrCast(kfNode.stateData)); + console.log("updated"); + } + } if (!kfNode[key]) { this.props.node[key] = undefined; } else { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index a63994e6e..676a49288 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -27,7 +27,7 @@ import "./CollectionFreeFormView.scss"; import { MarqueeView } from "./MarqueeView"; import React = require("react"); import v5 = require("uuid/v5"); -import { Timeline } from "../../nodes/Timeline"; +import { Timeline } from "../../animationtimeline/Timeline"; import { ScriptField } from "../../../../new_fields/ScriptField"; import { OverlayView, OverlayElementOptions } from "../../OverlayView"; import { ScriptBox } from "../../ScriptBox"; diff --git a/src/client/views/graph/Graph.tsx b/src/client/views/graph/Graph.tsx new file mode 100644 index 000000000..864bb8f46 --- /dev/null +++ b/src/client/views/graph/Graph.tsx @@ -0,0 +1,17 @@ +import * as React from "react"; +import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; + +export class Graph extends React.Component { + + + + + + + + render() { + return ( + ) + } + +}
\ No newline at end of file diff --git a/src/client/views/graph/GraphManager.ts b/src/client/views/graph/GraphManager.ts new file mode 100644 index 000000000..9d62b1ef8 --- /dev/null +++ b/src/client/views/graph/GraphManager.ts @@ -0,0 +1,45 @@ + + +import {Graph} from "./Graph"; +import {observable, computed} from 'mobx'; +import { Dictionary } from "typescript-collections"; +import { string } from "prop-types"; +import { Doc } from "../../../new_fields/Doc"; + + +export class GraphManager { + @observable public Graphs: Graph[] = []; + + @observable public GraphData: Doc = new Doc(); + + private static _instance: GraphManager; + + @computed + public static get Instance():GraphManager { + return this._instance || (this._instance = new this()); + } + + private constructor(){ + + } + + + + + public set addGraph(graph:Graph){ + this.Graphs.push(graph); + } + + + defaultGraphs = () => { + this.GraphData.linear = ; + } + + + + + + + + +}
\ No newline at end of file diff --git a/src/client/views/graph/GraphMenu.tsx b/src/client/views/graph/GraphMenu.tsx new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/src/client/views/graph/GraphMenu.tsx diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index f019868aa..9b37a6491 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -1,6 +1,6 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faEdit, faSmile, faTextHeight } from '@fortawesome/free-solid-svg-icons'; -import { action, IReactionDisposer, observable, reaction, runInAction, computed, trace } from "mobx"; +import { action, IReactionDisposer, observable, reaction, runInAction, computed, trace, toJS } from "mobx"; import { observer } from "mobx-react"; import { baseKeymap } from "prosemirror-commands"; import { history } from "prosemirror-history"; @@ -35,6 +35,7 @@ import "./FormattedTextBox.scss"; import React = require("react"); import { DateField } from '../../../new_fields/DateField'; import { Utils } from '../../../Utils'; +import { toSvgDataURL } from 'html-to-image'; library.add(faEdit); library.add(faSmile, faTextHeight); @@ -122,13 +123,14 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe if (this.props.isOverlay) { DragManager.StartDragFunctions.push(() => FormattedTextBox.InputBoxOverlay = undefined); } + toJS(console.log(this.props.Document)); document.addEventListener("paste", this.paste); } @computed get extensionDoc() { return Doc.resolvedFieldDataDoc(this.dataDoc, this.props.fieldKey, "dummy"); } - @computed get dataDoc() { return BoolCast(this.props.Document.isTemplate) && this.props.DataDoc ? this.props.DataDoc : Doc.GetProto(this.props.Document); } + @computed get dataDoc() {return BoolCast(this.props.Document.isTemplate) && this.props.DataDoc ? this.props.DataDoc : Doc.GetProto(this.props.Document); } paste = (e: ClipboardEvent) => { if (e.clipboardData && this._editorView) { @@ -163,7 +165,9 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe this._applyingChange = true; if (this.extensionDoc) this.extensionDoc.text = state.doc.textBetween(0, state.doc.content.size, "\n\n"); if (this.extensionDoc) this.extensionDoc.lastModified = new DateField(new Date(Date.now())); - this.dataDoc[this.props.fieldKey] = new RichTextField(JSON.stringify(state.toJSON())); + this.dataDoc[this.props.fieldKey] = new RichTextField(JSON.stringify(state.toJSON())); + this.props.Document.stateData = JSON.stringify(state.toJSON()); + this.props.Document.dataDocTest = this.dataDoc[this.props.fieldKey]; this._applyingChange = false; let title = StrCast(this.dataDoc.title); if (title && title.startsWith("-") && this._editorView && !this.Document.customTitle) { |