Stop preview remounting
This commit is contained in:
parent
d4f6359820
commit
a34390c986
5 changed files with 44 additions and 36 deletions
|
@ -1,7 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { get } from "svelte/store"
|
import { get } from "svelte/store"
|
||||||
import { onMount, onDestroy } from "svelte"
|
import { onMount, onDestroy } from "svelte"
|
||||||
import { store, selectedScreen, currentAsset } from "builderStore"
|
import { store, selectedComponent, selectedScreen, currentAsset } from "builderStore"
|
||||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||||
import {
|
import {
|
||||||
ProgressCircle,
|
ProgressCircle,
|
||||||
|
@ -65,7 +65,9 @@
|
||||||
$: refreshContent(json)
|
$: refreshContent(json)
|
||||||
|
|
||||||
// Determine if the add component menu is active
|
// Determine if the add component menu is active
|
||||||
$: isAddingComponent = $isActive(`./new`)
|
$: isAddingComponent = $isActive(
|
||||||
|
`./components/${$selectedComponent?._id}/new`
|
||||||
|
)
|
||||||
|
|
||||||
// Register handler to send custom to the preview
|
// Register handler to send custom to the preview
|
||||||
$: sendPreviewEvent = (name, payload) => {
|
$: sendPreviewEvent = (name, payload) => {
|
||||||
|
@ -208,9 +210,9 @@
|
||||||
|
|
||||||
const toggleAddComponent = () => {
|
const toggleAddComponent = () => {
|
||||||
if (isAddingComponent) {
|
if (isAddingComponent) {
|
||||||
$goto(`../`)
|
$goto(`./components/${$selectedComponent?._id}`)
|
||||||
} else {
|
} else {
|
||||||
$goto(`./new`)
|
$goto(`./components/${$selectedComponent?._id}/new`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
|
import AppPanel from "./_components/AppPanel.svelte"
|
||||||
import * as routify from "@roxi/routify"
|
import * as routify from "@roxi/routify"
|
||||||
import { syncURLToState } from "helpers/urlStateSync"
|
import { syncURLToState } from "helpers/urlStateSync"
|
||||||
import { store } from "builderStore"
|
import { store } from "builderStore"
|
||||||
|
@ -20,4 +21,28 @@
|
||||||
onDestroy(stopSyncing)
|
onDestroy(stopSyncing)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<slot />
|
<div class="design">
|
||||||
|
<div class="content">
|
||||||
|
<AppPanel />
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.design {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: stretch;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: stretch;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import LeftPanel from "./_components/LeftPanel/index.svelte"
|
import LeftPanel from "./_components/LeftPanel/index.svelte"
|
||||||
import AppPanel from "./_components/AppPanel.svelte"
|
|
||||||
import { syncURLToState } from "helpers/urlStateSync"
|
import { syncURLToState } from "helpers/urlStateSync"
|
||||||
import { store, selectedScreen } from "builderStore"
|
import { store, selectedScreen } from "builderStore"
|
||||||
import * as routify from "@roxi/routify"
|
import * as routify from "@roxi/routify"
|
||||||
|
@ -48,38 +47,20 @@
|
||||||
onDestroy(stopSyncing)
|
onDestroy(stopSyncing)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="design">
|
<div class="left">
|
||||||
<div class="content">
|
<LeftPanel />
|
||||||
{#if $selectedScreen}
|
|
||||||
<LeftPanel />
|
|
||||||
<AppPanel />
|
|
||||||
{#if routeComponentId === "screen"}
|
|
||||||
<ScreenSettingsPanel />
|
|
||||||
{:else if routeComponentId === "navigation"}
|
|
||||||
<NavigationPanel />
|
|
||||||
{:else}
|
|
||||||
<ComponentSettingsPanel />
|
|
||||||
{/if}
|
|
||||||
<slot />
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
{#if routeComponentId === "screen"}
|
||||||
|
<ScreenSettingsPanel />
|
||||||
|
{:else if routeComponentId === "navigation"}
|
||||||
|
<NavigationPanel />
|
||||||
|
{:else}
|
||||||
|
<ComponentSettingsPanel />
|
||||||
|
{/if}
|
||||||
|
<slot />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.design {
|
.left {
|
||||||
flex: 1 1 auto;
|
order: -1;
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: stretch;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: stretch;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue