Skip to content

Commit

Permalink
#56 reworks auto-focus in replay
Browse files Browse the repository at this point in the history 
Replay now zooms to fit all parts of the story that are currently shown
  • Loading branch information
Alexander Zellober committed Mar 13, 2020
1 parent dd37e91 commit d9d82b1
Showing 1 changed file with 62 additions and 71 deletions.
133 changes: 62 additions & 71 deletions app/domain-story-modeler/features/replay/replay.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,20 @@ let selection;
let replayOn = false;
let currentStep = 0;
let replaySteps = [];
let stepViewboxes = [];
let initialViewbox;

let errorStep = 0;

let modal = document.getElementById('modal');
let startReplayButton = document.getElementById('buttonStartReplay');
let nextStepButton = document.getElementById('buttonNextStep');
let previousStepButton = document.getElementById('buttonPreviousStep');
let stopReplayButton = document.getElementById('buttonStopReplay');
let currentReplayStepLabel = document.getElementById('replayStep');
let incompleteStoryDialog = document.getElementById('incompleteStoryInfo');
const modal = document.getElementById('modal');
const canvasDOM = document.getElementById('canvas');
const logoContainer = document.getElementsByClassName('logoContainer')[0];
const startReplayButton = document.getElementById('buttonStartReplay');
const nextStepButton = document.getElementById('buttonNextStep');
const previousStepButton = document.getElementById('buttonPreviousStep');
const stopReplayButton = document.getElementById('buttonStopReplay');
const currentReplayStepLabel = document.getElementById('replayStep');
const incompleteStoryDialog = document.getElementById('incompleteStoryInfo');

export function getReplayOn() {
return replayOn;
Expand Down Expand Up @@ -139,6 +142,8 @@ export function initReplay(inCanvas, inSelection) {
replayOn = false;
currentStep = 0;
canvas.viewbox(initialViewbox);

stepViewboxes = [];
}
});
}
Expand Down Expand Up @@ -243,6 +248,8 @@ export function getAllNotShown(allObjects, shownElements) {
function presentationMode() {

removeSelectionAndEditing();
hideLogos();
addPaddingToCanvas();

const contextPadElements = document.getElementsByClassName('djs-context-pad');
const paletteElements = document.getElementsByClassName('djs-palette');
Expand All @@ -266,6 +273,7 @@ function presentationMode() {
const headlineAndButtons = document.getElementById('headlineAndButtons');
headlineAndButtons.style.gridTemplateColumns = 'auto 230px 3px';


let i = 0;
for (i = 0; i < contextPadElements.length; i++) {
contextPadElements[i].style.display = 'none';
Expand All @@ -289,6 +297,9 @@ function removeSelectionAndEditing() {
}

function editMode() {
showLogos();
removePaddingFromCanvas();

let contextPadElements = document.getElementsByClassName('djs-context-pad');
let paletteElements = document.getElementsByClassName('djs-palette');

Expand All @@ -312,6 +323,7 @@ function editMode() {
let headlineAndButtons = document.getElementById('headlineAndButtons');
headlineAndButtons.style.gridTemplateColumns = 'auto 390px 3px';


let i = 0;
for (i = 0; i < contextPadElements.length; i++) {
contextPadElements[i].style.display = 'block';
Expand Down Expand Up @@ -356,78 +368,57 @@ function showCurrentStep() {
domObject.style.display = 'block';
});

// if (currentStepNotInView()) {
// focusOnActiveActivity();
// }
canvas.viewbox(initialViewbox);
if (stepViewboxes[currentStep] == null) {
if (currentStepFitsInWindow()) {
const stepViewBox = canvas.viewbox();
const viewport = document.getElementsByClassName('viewport')[0];
const boundingRectangle = viewport.getBoundingClientRect();

stepViewBox.x = boundingRectangle.x;
stepViewBox.y = boundingRectangle.y - 50;

stepViewboxes[currentStep] = stepViewBox;
} else {
canvas.zoom('fit-viewport');
console.log(canvas.viewbox());
}
}

canvas.viewbox(stepViewboxes[currentStep]);
}

/*
function currentStepNotInView() {
function currentStepFitsInWindow() {
const currentViewbox = canvas.viewbox();
const boundingRectangle = canvas.viewbox().inner;

const step = replaySteps[currentStep];
const stepHeight = boundingRectangle.height;
const stepWidth = boundingRectangle.width + 50;

let elements = [];
step.targets.forEach(target => {
elements.push(target);
});
const viewBoxHeight = currentViewbox.width;
const viewBoxWidth = currentViewbox.height;

let initialElement = step.source;
let stepBounds = {
x: initialElement.x,
y: initialElement.y,
width: initialElement.width,
height: initialElement.height
};
elements.forEach(element => {
if (element.x < stepBounds.x) {
stepBounds.x = element.x;
} else {
if (stepBounds.width < element.x + element.width) {
stepBounds.width = element.x + element.width;
}
}
if (element.y < stepBounds.y) {
stepBounds.y = element.y;
} else {
if (stepBounds.height < element.y + element.height) {
stepBounds.height = element.y + element.height;
}
}
});
console.log(currentViewbox);

if (currentViewbox.x < stepBounds.x && currentViewbox.y < stepBounds.y) {
if (
currentViewbox.x + currentViewbox.width >
stepBounds.x + stepBounds.width
) {
if (
currentViewbox.y + currentViewbox.height >
stepBounds.y + stepBounds.height
) {
return false;
}
}
if (viewBoxHeight >= stepHeight && viewBoxWidth >= stepWidth) {
return true;
}
return true;
return false;
}

function focusOnActiveActivity() {
const step = replaySteps[currentStep];
const activitiesInStep = step.activities;
const activityToFocusOn = activitiesInStep[0];
const elX = activityToFocusOn.waypoints[0].x - initialViewbox.width / 2;
const elY = activityToFocusOn.waypoints[0].y - initialViewbox.height / 2;
let stepViewbox = {
x: elX,
y: elY,
height: initialViewbox.height,
width: initialViewbox.width,
scale: initialViewbox.scale,
outer: initialViewbox.outer,
inner: initialViewbox.inner
};
canvas.viewbox(stepViewbox);
function hideLogos() {
logoContainer.style.display = 'none';
}
*/

function showLogos() {
logoContainer.style.display = 'block';
}

function addPaddingToCanvas() {
canvasDOM.style.right = '3px';
}


function removePaddingFromCanvas() {
canvasDOM.style.right = 'unset';
}

0 comments on commit d9d82b1

Please sign in to comment.