From 6c21cd194c93316d7958028d1597537dd3fa82a0 Mon Sep 17 00:00:00 2001 From: Florian Heft Date: Fri, 8 Apr 2022 18:45:13 +0200 Subject: [PATCH] Move 'active slide' property from editor to slide * The currently active slide is not (only) a property of the editor, it's also used by the presenter and the viewer (in the future). * Therefore the property is moved to the 'slide' context. --- src/js/editor/index.js | 23 +--------- src/js/editor/preview.js | 2 +- src/js/project.js | 2 +- src/js/slide.js | 40 +++++++++++------ src/js/slide.test.js | 92 +++++++++++++++++++--------------------- 5 files changed, 73 insertions(+), 86 deletions(-) diff --git a/src/js/editor/index.js b/src/js/editor/index.js index 83db827..b0172df 100644 --- a/src/js/editor/index.js +++ b/src/js/editor/index.js @@ -1,11 +1,4 @@ -import { - db, - connect, - signal, - trigger, - withInputSignals, - connector, -} from "flyps"; +import { connect, signal, trigger, withInputSignals } from "flyps"; import { h } from "flyps-dom-snabbdom"; import { mat4, vec3 } from "gl-matrix"; @@ -112,18 +105,6 @@ export function onMouseDown(ev, cameraPosition, projectFn) { }); } -/** - * connectors - */ - -connector( - "editor/active-slide", - withInputSignals( - () => db, - db => db.editor.activeSlide, - ), -); - /** * views */ @@ -268,7 +249,7 @@ export let editor = withInputSignals( () => [ connect("matrix/client-transform"), connect("camera/position"), - connect("editor/active-slide"), + connect("slide/active"), ], ([transformMatrix, cameraPosition, activeSlide], tale) => { if (!tale) { diff --git a/src/js/editor/preview.js b/src/js/editor/preview.js index 16d004e..687eef9 100644 --- a/src/js/editor/preview.js +++ b/src/js/editor/preview.js @@ -94,7 +94,7 @@ function previewItem([tw, th], tale, slide, index, active) { } export const preview = withInputSignals( - () => [connect("editor/active-slide"), connect("camera/rect")], + () => [connect("slide/active"), connect("camera/rect")], ([activeSlide, cameraRect], tale) => { let tw = 200, th = 112; // aspect ratio 16:9 diff --git a/src/js/project.js b/src/js/project.js index 4a2f4b7..1dcae56 100644 --- a/src/js/project.js +++ b/src/js/project.js @@ -97,7 +97,7 @@ handler("projects/activate", ({ db }, eventId, slug) => ({ db: { ...db, activeTale: slug, - editor: { ...db.editor, activeSlide: undefined }, + activeSlide: undefined, }, trigger: ["project/reset-view"], })); diff --git a/src/js/slide.js b/src/js/slide.js index ac4d8db..27c006b 100644 --- a/src/js/slide.js +++ b/src/js/slide.js @@ -1,8 +1,20 @@ -import { handler } from "flyps"; +import { connector, db, handler, withInputSignals } from "flyps"; import { findTale } from "./project"; import { DEFAULT_SLIDE_TRANSITION_DURATION } from "./config"; +/** + * connectors + */ + +connector( + "slide/active", + withInputSignals( + () => db, + db => db.activeSlide, + ), +); + function prevSlide(slides, index) { index = Number.isInteger(index) ? index : 0; return (index + slides.length - 1) % slides.length; @@ -18,18 +30,18 @@ function nextSlide(slides, index) { */ export function activate(db, index) { - return { ...db, editor: { ...db.editor, activeSlide: index } }; + return { ...db, activeSlide: index }; } export function activatePrev(db) { let tale = findTale([db.tales, db.activeTale]); - let index = prevSlide(tale.slides, db.editor.activeSlide); + let index = prevSlide(tale.slides, db.activeSlide); return activate(db, index); } export function activateNext(db) { let tale = findTale([db.tales, db.activeTale]); - let index = nextSlide(tale.slides, db.editor.activeSlide); + let index = nextSlide(tale.slides, db.activeSlide); return activate(db, index); } @@ -50,7 +62,7 @@ export function isPointInRect(point, rect) { */ export function activateAtPosition(db, position) { let tale = findTale([db.tales, db.activeTale]); - let activeSlideIndex = db.editor.activeSlide || 0; + let activeSlideIndex = db.activeSlide || 0; let i = activeSlideIndex; do { i = i > 0 ? i - 1 : tale.slides.length - 1; @@ -63,7 +75,7 @@ export function activateAtPosition(db, position) { } export function deactivate(db) { - return { ...db, editor: { ...db.editor, activeSlide: undefined } }; + return { ...db, activeSlide: undefined }; } function arraySwap(array, idx1, idx2) { @@ -78,7 +90,7 @@ export function swap(db, idx1, idx2) { let count = slides.length - 1; if (0 <= idx1 && idx1 <= count && 0 <= idx2 && idx2 <= count) { return { - db: { ...db, editor: { ...db.editor, activeSlide: idx2 } }, + db: { ...db, activeSlide: idx2 }, trigger: [ "projects/update", { ...tale, slides: arraySwap(tale.slides, idx1, idx2) }, @@ -88,12 +100,12 @@ export function swap(db, idx1, idx2) { } export function swapPrev(db) { - let idx = db.editor.activeSlide; + let idx = db.activeSlide; return swap(db, idx, idx - 1); } export function swapNext(db) { - let idx = db.editor.activeSlide; + let idx = db.activeSlide; return swap(db, idx, idx + 1); } @@ -116,7 +128,7 @@ export function flyToNext(db) { export function focusCurrent(db) { let tale = findTale([db.tales, db.activeTale]); let slides = tale.slides || []; - let slide = slides[db.editor.activeSlide]; + let slide = slides[db.activeSlide]; return { trigger: ["camera/fit-rect", slide.rect], }; @@ -125,7 +137,7 @@ export function focusCurrent(db) { export function flyToCurrent(db) { let tale = findTale([db.tales, db.activeTale]); let slides = tale.slides || []; - let slide = slides[db.editor.activeSlide]; + let slide = slides[db.activeSlide]; return { trigger: [ "camera/fly-to-rect", @@ -158,7 +170,7 @@ export function insert(db, slide, index) { export function update(db, slide) { let tale = findTale([db.tales, db.activeTale]); let slides = [...(tale.slides || [])]; - slides[db.editor.activeSlide] = slide; + slides[db.activeSlide] = slide; return { trigger: ["projects/update", { ...tale, slides }], }; @@ -167,9 +179,9 @@ export function update(db, slide) { export function deleteCurrent(db) { let tale = findTale([db.tales, db.activeTale]); let slides = [...(tale.slides || [])]; - slides.splice(db.editor.activeSlide, 1); + slides.splice(db.activeSlide, 1); return { - db: { ...db, editor: { ...db.editor, activeSlide: undefined } }, + db: { ...db, activeSlide: undefined }, trigger: ["projects/update", { ...tale, slides }], }; } diff --git a/src/js/slide.test.js b/src/js/slide.test.js index 10b9a0f..d6d081e 100644 --- a/src/js/slide.test.js +++ b/src/js/slide.test.js @@ -22,15 +22,15 @@ import { describe("slide", () => { it("activates slide", () => { let db = activate({}, 42); - expect(db.editor.activeSlide).toBe(42); + expect(db.activeSlide).toBe(42); }); it("activates prev slide", () => { let db = activatePrev({ tales: [{ slug: "foo", slides: [{}, {}, {}] }], activeTale: "foo", - editor: { activeSlide: 1 }, + activeSlide: 1, }); - expect(db.editor.activeSlide).toBe(0); + expect(db.activeSlide).toBe(0); }); it("activates last slide on prev with no activated slide", () => { let db = activatePrev({ @@ -38,23 +38,23 @@ describe("slide", () => { activeTale: "foo", editor: {}, }); - expect(db.editor.activeSlide).toBe(2); + expect(db.activeSlide).toBe(2); }); it("activates last after first slide", () => { let db = activatePrev({ tales: [{ slug: "foo", slides: [{}, {}, {}] }], activeTale: "foo", - editor: { activeSlide: 0 }, + activeSlide: 0, }); - expect(db.editor.activeSlide).toBe(2); + expect(db.activeSlide).toBe(2); }); it("activates next slide", () => { let db = activateNext({ tales: [{ slug: "foo", slides: [{}, {}, {}] }], activeTale: "foo", - editor: { activeSlide: 1 }, + activeSlide: 1, }); - expect(db.editor.activeSlide).toBe(2); + expect(db.activeSlide).toBe(2); }); it("activates first slide on next with no activated slide", () => { let db = activateNext({ @@ -62,19 +62,19 @@ describe("slide", () => { activeTale: "foo", editor: {}, }); - expect(db.editor.activeSlide).toBe(0); + expect(db.activeSlide).toBe(0); }); it("activates first after last slide", () => { let db = activateNext({ tales: [{ slug: "foo", slides: [{}, {}, {}] }], activeTale: "foo", - editor: { activeSlide: 2 }, + activeSlide: 2, }); - expect(db.editor.activeSlide).toBe(0); + expect(db.activeSlide).toBe(0); }); it("deactivates slide", () => { - let db = deactivate({ editor: { activeSlide: 1 } }); - expect(db.editor.activeSlide).toBeUndefined(); + let db = deactivate({ activeSlide: 1 }); + expect(db.activeSlide).toBeUndefined(); }); it("swaps slides", () => { let initialDb = { @@ -82,7 +82,7 @@ describe("slide", () => { activeTale: "foo", }; let { db, trigger } = swap(initialDb, 0, 2); - expect(db.editor.activeSlide).toBe(2); + expect(db.activeSlide).toBe(2); expect(trigger).toEqual([ "projects/update", { slug: "foo", slides: [{ id: 3 }, { id: 2 }, { id: 1 }] }, @@ -102,10 +102,10 @@ describe("slide", () => { let initialDb = { tales: [{ slug: "foo", slides: [{ id: 1 }, { id: 2 }, { id: 3 }] }], activeTale: "foo", - editor: { activeSlide: 1 }, + activeSlide: 1, }; let { db, trigger } = swapPrev(initialDb); - expect(db.editor.activeSlide).toBe(0); + expect(db.activeSlide).toBe(0); expect(trigger).toEqual([ "projects/update", { slug: "foo", slides: [{ id: 2 }, { id: 1 }, { id: 3 }] }, @@ -115,10 +115,10 @@ describe("slide", () => { let initialDb = { tales: [{ slug: "foo", slides: [{ id: 1 }, { id: 2 }, { id: 3 }] }], activeTale: "foo", - editor: { activeSlide: 1 }, + activeSlide: 1, }; let { db, trigger } = swapNext(initialDb); - expect(db.editor.activeSlide).toBe(2); + expect(db.activeSlide).toBe(2); expect(trigger).toEqual([ "projects/update", { slug: "foo", slides: [{ id: 1 }, { id: 3 }, { id: 2 }] }, @@ -129,9 +129,9 @@ describe("slide", () => { let { db, trigger } = flyToPrev({ tales: [{ slug: "foo", slides: [{ rect }, {}, {}], settings: {} }], activeTale: "foo", - editor: { activeSlide: 1 }, + activeSlide: 1, }); - expect(db.editor.activeSlide).toBe(0); + expect(db.activeSlide).toBe(0); expect(trigger).toEqual(["camera/fly-to-rect", rect, 500]); }); it("flies to last after first slide", () => { @@ -139,9 +139,9 @@ describe("slide", () => { let { db, trigger } = flyToPrev({ tales: [{ slug: "foo", slides: [{}, {}, { rect }], settings: {} }], activeTale: "foo", - editor: { activeSlide: 0 }, + activeSlide: 0, }); - expect(db.editor.activeSlide).toBe(2); + expect(db.activeSlide).toBe(2); expect(trigger).toEqual(["camera/fly-to-rect", rect, 500]); }); it("flies to next slide", () => { @@ -149,9 +149,9 @@ describe("slide", () => { let { db, trigger } = flyToNext({ tales: [{ slug: "foo", slides: [{}, {}, { rect }], settings: {} }], activeTale: "foo", - editor: { activeSlide: 1 }, + activeSlide: 1, }); - expect(db.editor.activeSlide).toBe(2); + expect(db.activeSlide).toBe(2); expect(trigger).toEqual(["camera/fly-to-rect", rect, 500]); }); it("flies to first after last slide", () => { @@ -159,9 +159,9 @@ describe("slide", () => { let { db, trigger } = flyToNext({ tales: [{ slug: "foo", slides: [{ rect }, {}, {}], settings: {} }], activeTale: "foo", - editor: { activeSlide: 2 }, + activeSlide: 2, }); - expect(db.editor.activeSlide).toBe(0); + expect(db.activeSlide).toBe(0); expect(trigger).toEqual(["camera/fly-to-rect", rect, 500]); }); it("focuses on current slide", () => { @@ -174,7 +174,7 @@ describe("slide", () => { }, ], activeTale: "foo", - editor: { activeSlide: 0 }, + activeSlide: 0, }); expect(effects.trigger).toEqual(["camera/fit-rect", rect]); }); @@ -189,7 +189,7 @@ describe("slide", () => { }, ], activeTale: "foo", - editor: { activeSlide: 0 }, + activeSlide: 0, }); expect(effects.trigger).toEqual(["camera/fly-to-rect", rect, 500]); }); @@ -204,7 +204,7 @@ describe("slide", () => { }, ], activeTale: "foo", - editor: { activeSlide: 0 }, + activeSlide: 0, }); expect(effects.trigger).toEqual(["camera/fly-to-rect", rect, 123]); }); @@ -221,7 +221,7 @@ describe("slide", () => { "projects/update", { slug: "test-1", slides: [{ id: 1 }, { id: 2 }] }, ]); - expect(effects.db).toEqual({ ...db, editor: { activeSlide: 1 } }); + expect(effects.db).toEqual({ ...db, activeSlide: 1 }); }); it("updates slide", () => { let db = { @@ -230,9 +230,7 @@ describe("slide", () => { { slug: "test-2", slides: [] }, ], activeTale: "test-1", - editor: { - activeSlide: 1, - }, + activeSlide: 1, }; let effects = update(db, { id: 2, value: 42 }); expect(effects.trigger).toEqual([ @@ -247,9 +245,7 @@ describe("slide", () => { { slug: "test-2", slides: [] }, ], activeTale: "test-1", - editor: { - activeSlide: 1, - }, + activeSlide: 1, }; let effects = deleteCurrent(db); expect(effects.trigger).toEqual([ @@ -264,12 +260,10 @@ describe("slide", () => { { slug: "test-2", slides: [] }, ], activeTale: "test-1", - editor: { - activeSlide: 1, - }, + activeSlide: 1, }; let effects = deleteCurrent(db); - expect(effects.db.editor.activeSlide).toBeFalsy(); + expect(effects.db.activeSlide).toBeFalsy(); }); }); describe("insert", () => { @@ -301,7 +295,7 @@ describe("insert", () => { activeTale: "test-1", }; let effects = insert(db, { id: 3 }, 2); - expect(effects.db).toEqual({ ...db, editor: { activeSlide: 2 } }); + expect(effects.db).toEqual({ ...db, activeSlide: 2 }); }); }); describe("move", () => { @@ -352,11 +346,11 @@ describe("activateAtPosition", () => { }, ], activeTale: "foo", - editor: { activeSlide: 0 }, + activeSlide: 0, }, [5, 5], ); - expect(db.editor.activeSlide).toBeUndefined(); + expect(db.activeSlide).toBeUndefined(); }); it("activates the slide at the given position", () => { let db = activateAtPosition( @@ -371,11 +365,11 @@ describe("activateAtPosition", () => { }, ], activeTale: "foo", - editor: { activeSlide: 1 }, + activeSlide: 1, }, [15, 15], ); - expect(db.editor.activeSlide).toBe(0); + expect(db.activeSlide).toBe(0); }); it("activates the slide below the currently active slide", () => { let db = activateAtPosition( @@ -391,11 +385,11 @@ describe("activateAtPosition", () => { }, ], activeTale: "foo", - editor: { activeSlide: 1 }, + activeSlide: 1, }, [15, 15], ); - expect(db.editor.activeSlide).toBe(0); + expect(db.activeSlide).toBe(0); }); it( "activates the top-most slide again if the bottom-most slide " + @@ -414,11 +408,11 @@ describe("activateAtPosition", () => { }, ], activeTale: "foo", - editor: { activeSlide: 0 }, + activeSlide: 0, }, [15, 15], ); - expect(db.editor.activeSlide).toBe(2); + expect(db.activeSlide).toBe(2); }, ); });