141 lines
3.9 KiB
Vue
141 lines
3.9 KiB
Vue
<template>
|
|
<section class="fullscreen-editor">
|
|
<EditorTopToolbar
|
|
:device-mode="deviceMode"
|
|
:selected-selector="selectedSelector"
|
|
:selected-hidden="selectedElementMeta.hidden"
|
|
:insert-block-type="insertBlockType"
|
|
:insert-block-type-options="insertBlockTypeOptions"
|
|
:can-undo="canUndo"
|
|
:can-redo="canRedo"
|
|
@set-device-mode="setDeviceMode"
|
|
@toggle-visibility="toggleSelectedBlockVisibility"
|
|
@update:insert-block-type="insertBlockType = $event"
|
|
@insert-before="insertBlockNearSelection('before')"
|
|
@insert-after="insertBlockNearSelection('after')"
|
|
@duplicate="duplicateSelectedBlock"
|
|
@delete="deleteSelectedBlock"
|
|
@undo="undoHistory"
|
|
@redo="redoHistory"
|
|
@back="goBack"
|
|
@load-demo="loadDemoPage"
|
|
/>
|
|
|
|
<el-alert
|
|
v-if="errorMessage"
|
|
type="error"
|
|
:closable="false"
|
|
:title="errorMessage"
|
|
show-icon
|
|
/>
|
|
|
|
<section class="fullscreen-editor__stage">
|
|
<div class="fullscreen-editor__canvas-shell">
|
|
<EditorCanvasFrame
|
|
:base-url="baseUrl"
|
|
:device-mode="deviceMode"
|
|
:candidates="canvasCandidates"
|
|
:selected-selector="selectedSelector"
|
|
:preview-status="selectedPreviewSummary"
|
|
:preview-operations="previewOperations"
|
|
:feedback-summary="canvasFeedbackSummary"
|
|
:bridge-command="canvasBridgeCommand"
|
|
@select-candidate="selectCanvasCandidate"
|
|
@hover-candidate="handleCanvasHover"
|
|
@hover-clear="keepCurrentSelection"
|
|
@hotspot-action="handleCanvasHotspotAction"
|
|
@inline-attribute-change="handleInlineAttributeChange"
|
|
@inline-style-change="handleInlineStyleChange"
|
|
@inline-text-change="handleInlineTextChange"
|
|
@canvas-ready="handleCanvasReady"
|
|
@bridge-outbound="handleCanvasOutbound"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onBeforeUnmount, onMounted } from "vue"
|
|
import EditorCanvasFrame from "@/module/editor/components/EditorCanvasFrame.vue";
|
|
import EditorTopToolbar from "@/module/editor/components/EditorTopToolbar.vue";
|
|
import { useEditorWorkspacePage } from "@/module/editor/service/use-editor-workspace-page";
|
|
|
|
const {
|
|
errorMessage,
|
|
previewOperations,
|
|
canvasCandidates,
|
|
selectedPreviewSummary,
|
|
canvasFeedbackSummary,
|
|
selectedSelector,
|
|
selectedElementMeta,
|
|
canvasBridgeCommand,
|
|
baseUrl,
|
|
deviceMode,
|
|
setDeviceMode,
|
|
insertBlockType,
|
|
insertBlockTypeOptions,
|
|
toggleSelectedBlockVisibility,
|
|
insertBlockNearSelection,
|
|
duplicateSelectedBlock,
|
|
deleteSelectedBlock,
|
|
canUndo,
|
|
canRedo,
|
|
undoHistory,
|
|
redoHistory,
|
|
selectCanvasCandidate,
|
|
loadDemoPage,
|
|
handleCanvasReady,
|
|
handleCanvasHotspotAction,
|
|
handleInlineAttributeChange,
|
|
handleInlineStyleChange,
|
|
handleCanvasHover,
|
|
handleInlineTextChange,
|
|
keepCurrentSelection,
|
|
handleCanvasOutbound,
|
|
goBack,
|
|
} = useEditorWorkspacePage();
|
|
|
|
function onKeyDown(e) {
|
|
const tag = document.activeElement?.tagName?.toLowerCase()
|
|
if (tag === "input" || tag === "textarea" || tag === "select") return
|
|
if (document.activeElement?.isContentEditable) return
|
|
|
|
const mod = e.ctrlKey || e.metaKey
|
|
if (!mod) return
|
|
|
|
if (e.key === "z" && !e.shiftKey) {
|
|
e.preventDefault()
|
|
if (canUndo.value) undoHistory()
|
|
return
|
|
}
|
|
if ((e.key === "y") || (e.key === "z" && e.shiftKey)) {
|
|
e.preventDefault()
|
|
if (canRedo.value) redoHistory()
|
|
}
|
|
}
|
|
|
|
onMounted(() => window.addEventListener("keydown", onKeyDown))
|
|
onBeforeUnmount(() => window.removeEventListener("keydown", onKeyDown))
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fullscreen-editor {
|
|
min-height: 100vh;
|
|
background: #f6f8fb;
|
|
}
|
|
|
|
.fullscreen-editor__stage {
|
|
display: grid;
|
|
min-height: calc(100vh - 72px);
|
|
}
|
|
|
|
.fullscreen-editor__canvas-shell :deep(.editor-canvas-frame) {
|
|
min-height: calc(100vh - 72px);
|
|
overflow: hidden;
|
|
border-radius: 0;
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
</style>
|