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>
|
||||
import { get } from "svelte/store"
|
||||
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 {
|
||||
ProgressCircle,
|
||||
|
@ -65,7 +65,9 @@
|
|||
$: refreshContent(json)
|
||||
|
||||
// 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
|
||||
$: sendPreviewEvent = (name, payload) => {
|
||||
|
@ -208,9 +210,9 @@
|
|||
|
||||
const toggleAddComponent = () => {
|
||||
if (isAddingComponent) {
|
||||
$goto(`../`)
|
||||
$goto(`./components/${$selectedComponent?._id}`)
|
||||
} else {
|
||||
$goto(`./new`)
|
||||
$goto(`./components/${$selectedComponent?._id}/new`)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import AppPanel from "./_components/AppPanel.svelte"
|
||||
import * as routify from "@roxi/routify"
|
||||
import { syncURLToState } from "helpers/urlStateSync"
|
||||
import { store } from "builderStore"
|
||||
|
@ -20,4 +21,28 @@
|
|||
onDestroy(stopSyncing)
|
||||
</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>
|
||||
import LeftPanel from "./_components/LeftPanel/index.svelte"
|
||||
import AppPanel from "./_components/AppPanel.svelte"
|
||||
import { syncURLToState } from "helpers/urlStateSync"
|
||||
import { store, selectedScreen } from "builderStore"
|
||||
import * as routify from "@roxi/routify"
|
||||
|
@ -48,38 +47,20 @@
|
|||
onDestroy(stopSyncing)
|
||||
</script>
|
||||
|
||||
<div class="design">
|
||||
<div class="content">
|
||||
{#if $selectedScreen}
|
||||
<LeftPanel />
|
||||
<AppPanel />
|
||||
{#if routeComponentId === "screen"}
|
||||
<ScreenSettingsPanel />
|
||||
{:else if routeComponentId === "navigation"}
|
||||
<NavigationPanel />
|
||||
{:else}
|
||||
<ComponentSettingsPanel />
|
||||
{/if}
|
||||
<slot />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="left">
|
||||
<LeftPanel />
|
||||
</div>
|
||||
{#if routeComponentId === "screen"}
|
||||
<ScreenSettingsPanel />
|
||||
{:else if routeComponentId === "navigation"}
|
||||
<NavigationPanel />
|
||||
{:else}
|
||||
<ComponentSettingsPanel />
|
||||
{/if}
|
||||
<slot />
|
||||
|
||||
<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;
|
||||
.left {
|
||||
order: -1;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue