From 61dcd6a0e23384e68a7d7f2f9e0143741f5cbf56 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 15 May 2020 17:36:39 -0400 Subject: moving toward a proper slide transition system --- .../views/collections/CollectionCarouselView.tsx | 5 +- .../CollectionFreeFormLayoutEngines.tsx | 4 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 118 ++++++++++----------- 3 files changed, 62 insertions(+), 65 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 39bb9bc23..f65a89422 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -9,7 +9,6 @@ import { DragManager } from '../../util/DragManager'; import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView'; import "./CollectionCarouselView.scss"; import { CollectionSubView } from './CollectionSubView'; -import { faCaretLeft, faCaretRight } from '@fortawesome/free-solid-svg-icons'; import { Doc } from '../../../fields/Doc'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { ContextMenu } from '../ContextMenu'; @@ -76,10 +75,10 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) @computed get buttons() { return <>
- +
- +
; } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx index 3860ce2d7..a4fd5384f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx @@ -25,6 +25,7 @@ export interface ViewDefBounds { fontSize?: number; highlight?: boolean; color?: string; + opacity?: number; replica?: string; pair?: { layout: Doc, data?: Doc }; } @@ -37,6 +38,7 @@ export interface PoolData { width?: number; height?: number; color?: string; + opacity?: number; transition?: string; highlight?: boolean; replica: string; @@ -416,7 +418,7 @@ function normalizeResults( height: newPosRaw.height! * scale, pair: ele[1].pair }; - poolData.set(newPos.pair.layout[Id] + (newPos.replica || ""), { transition: "transform 1s", ...newPos }); + poolData.set(newPos.pair.layout[Id] + (newPos.replica || ""), { transition: "all 1s", ...newPos }); } }); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index bf679309c..751ee03d2 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -46,6 +46,7 @@ import React = require("react"); import { CollectionViewType } from "../CollectionView"; import { Timeline } from "../../animationtimeline/Timeline"; import { SnappingManager } from "../../../util/SnappingManager"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload); @@ -53,6 +54,7 @@ export const panZoomSchema = createSchema({ _panX: "number", _panY: "number", scale: "number", + timecode: "number", arrangeScript: ScriptField, arrangeInit: ScriptField, useClusters: "boolean", @@ -124,15 +126,8 @@ export class CollectionFreeFormView extends CollectionSubView { - const timecode = Cast(this.props.Document.timecode, "number", null); - if (timecode !== undefined) { - ((newBox instanceof Doc) ? [newBox] : newBox).map(doc => { - doc["x-indexed"] = new List(numberRange(timecode + 1).map(i => NumCast(doc.x))); - doc["y-indexed"] = new List(numberRange(timecode + 1).map(i => NumCast(doc.y))); - doc.timecode = ComputedField.MakeFunction("collection.timecode", {}, { collection: this.props.Document }); - doc.x = ComputedField.MakeInterpolated("x", "timecode"); - doc.y = ComputedField.MakeInterpolated("y", "timecode"); - }); + if (this.Document.timecode !== undefined) { + CollectionFreeFormDocumentView.setupKeyframes((newBox instanceof Doc) ? [newBox] : newBox, this.Document.timecode, this.props.Document); } if (newBox instanceof Doc) { @@ -145,6 +140,25 @@ export class CollectionFreeFormView extends CollectionSubView { + if (this.props.Document.timecode === undefined) { + this.props.Document.timecode = 0; + CollectionFreeFormDocumentView.setupKeyframes(this.childDocs, 0, this.props.Document); + } + const timecode = NumCast(this.props.Document.timecode); + CollectionFreeFormDocumentView.updateKeyframe(this.childDocs, timecode); + this.props.Document.timecode = Math.max(0, timecode + 1); + } + @undoBatch + @action + prevKeyframe = (): void => { + CollectionFreeFormDocumentView.gotoKeyframe(this.childDocs.slice()); + this.props.Document.timecode = Math.max(0, NumCast(this.props.Document.timecode) - 1); + } + private selectDocuments = (docs: Doc[]) => { SelectionManager.DeselectAll(); docs.map(doc => DocumentManager.Instance.getDocumentView(doc)).map(dv => dv && SelectionManager.SelectDoc(dv, true)); @@ -185,8 +199,12 @@ export class CollectionFreeFormView extends CollectionSubView { - if (this.props.Document.timecode === undefined) { - this.childDocs.map(doc => { - this.props.Document.timecode = 0; - doc["x-indexed"] = new List([NumCast(doc.x)]); - doc["y-indexed"] = new List([NumCast(doc.y)]); - doc.timecode = ComputedField.MakeFunction("collection.timecode", {}, { collection: this.props.Document }); - doc.x = ComputedField.MakeInterpolated("x", "timecode"); - doc.y = ComputedField.MakeInterpolated("y", "timecode"); - }); - } - const timecode = NumCast(this.props.Document.timecode); - this.childDocs.map(doc => { - const xindexed = Cast(doc['x-indexed'], listSpec("number"), null); - const yindexed = Cast(doc['y-indexed'], listSpec("number"), null); - xindexed.length <= timecode + 1 && xindexed.push(NumCast(doc.x)); - yindexed.length <= timecode + 1 && yindexed.push(NumCast(doc.y)); - }); - this.childDocs.map(doc => doc.transition = "transform 1s"); - this.props.Document.timecode = Math.max(0, timecode + 1); - setTimeout(() => this.childDocs.map(doc => doc.transition = undefined), 1010); - } - @undoBatch - @action - backupInterpolated = (): void => { - this.childDocs.map(doc => doc.transition = "transform 1s"); - this.props.Document.timecode = Math.max(0, NumCast(this.props.Document.timecode) - 1); - setTimeout(() => this.childDocs.map(doc => doc.transition = undefined), 1010); - } - - private thumbIdentifier?: number; onContextMenu = (e: React.MouseEvent) => { @@ -1185,8 +1175,8 @@ export class CollectionFreeFormView extends CollectionSubView 0 ? this.placeholder : this.marqueeView} - + {this.isAnnotationOverlay ? (null) : + <> +
+ +
+
+ {NumCast(this.props.Document.timecode)} +
+
+ +
+ }
Date: Fri, 15 May 2020 20:59:35 -0400 Subject: cleaned up frame animation buttons. Added server code for https? removed unused devserver from webpack.config --- .../collectionFreeForm/CollectionFreeFormView.scss | 18 ++++++ .../collectionFreeForm/CollectionFreeFormView.tsx | 6 +- src/server/server_Initialization.ts | 17 +++++ webpack.config.js | 74 +++++++++------------- 4 files changed, 69 insertions(+), 46 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 60c39c825..7a84fcde1 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -41,6 +41,24 @@ // touch action none means that the browser will handle none of the touch actions. this allows us to implement our own actions. touch-action: none; + .fwdKeyframe, .numKeyframe, .backKeyframe{ + cursor: pointer; + position: absolute; + width: 20; + height:20; + bottom:0; + background:gray; + } + .backKeyframe { + right:45; + } + .numKeyframe { + right:25; + } + .fwdKeyframe { + right:5; + } + .collectionfreeformview-placeholder { background: gray; width: 100%; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 751ee03d2..4be671a76 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1352,13 +1352,13 @@ export class CollectionFreeFormView extends CollectionSubView {this.isAnnotationOverlay ? (null) : <> -
+
-
+
{NumCast(this.props.Document.timecode)}
-
+
} diff --git a/src/server/server_Initialization.ts b/src/server/server_Initialization.ts index 4b3094616..14b0dedc3 100644 --- a/src/server/server_Initialization.ts +++ b/src/server/server_Initialization.ts @@ -53,6 +53,23 @@ export default async function InitializeServer(routeSetter: RouteSetter) { logPort("server", serverPort); console.log(); }); + + // var express = require('express') + // var fs = require('fs') + // var https = require('https') + // var app = express() + + // app.get('/', function (req, res) { + // res.send('hello world') + // }) + + // https.createServer({ + // key: fs.readFileSync('server.key'), + // cert: fs.readFileSync('server.cert') + // }, app) + // .listen(3000, function () { + // console.log('Example app listening on port 3000! Go to https://localhost:3000/') + // }) disconnect = async () => new Promise(resolve => server.close(resolve)); return isRelease; diff --git a/webpack.config.js b/webpack.config.js index 67d492e1f..480ed7aa3 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -63,57 +63,45 @@ module.exports = { }, module: { rules: [{ - test: [/\.tsx?$/], - use: [{ - loader: 'ts-loader', - options: { - transpileOnly: true - } - }] + test: [/\.tsx?$/], + use: [{ + loader: 'ts-loader', + options: { + transpileOnly: true + } + }] + }, + { + test: /\.scss|css$/, + use: [{ + loader: "style-loader" }, { - test: /\.scss|css$/, - use: [{ - loader: "style-loader" - }, - { - loader: "css-loader" - }, - { - loader: "sass-loader" - } - ] + loader: "css-loader" }, { - test: /\.(jpg|png|pdf)$/, - use: [{ - loader: 'file-loader' - }] - }, - { - test: /\.(png|jpg|gif)$/i, - use: [{ - loader: 'url-loader', - options: { - limit: 8192 - } - }] + loader: "sass-loader" } + ] + }, + { + test: /\.(jpg|png|pdf)$/, + use: [{ + loader: 'file-loader' + }] + }, + { + test: /\.(png|jpg|gif)$/i, + use: [{ + loader: 'url-loader', + options: { + limit: 8192 + } + }] + } ] }, plugins, - devServer: { - compress: false, - host: "localhost", - contentBase: path.join(__dirname, 'deploy'), - port: 4321, - hot: true, - https: false, - overlay: { - warnings: true, - errors: true - } - }, externals: [ 'child_process' ] -- cgit v1.2.3-70-g09d2