wip fix
This commit is contained in:
Rizky
parent
462b8e19f6
commit
abab7f0113
|
|
@ -10,10 +10,10 @@ import { edUndoManager } from "./logic/ed-undo";
|
|||
import { EdPane } from "./panel/main/pane-resize";
|
||||
import { EdPopCode } from "./panel/popup/code/code";
|
||||
import { EdPopCompGroup } from "./panel/popup/comp/comp-group";
|
||||
import { EdPopScript } from "./panel/popup/script/script";
|
||||
import { EdPagePop } from "./panel/popup/page/page-popup";
|
||||
import { EdPopScript } from "./panel/popup/script/pop-script";
|
||||
import { EdPopSite } from "./panel/popup/site/site-popup";
|
||||
import { EdScriptInit } from "./panel/script/monaco/init";
|
||||
import { EdPagePop } from "./panel/popup/page/page-popup";
|
||||
|
||||
export const EdBase = () => {
|
||||
const p = useGlobal(EDGlobal, "EDITOR");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,184 @@
|
|||
import { RenderParams } from "@minoru/react-dnd-treeview";
|
||||
import { KeyboardEvent } from "react";
|
||||
import { IContent } from "../../../../../utils/types/general";
|
||||
import { PG, active } from "../../../logic/ed-global";
|
||||
import { edActionDelete } from "./item/action/del";
|
||||
|
||||
export const treeItemKeyMap = (p: PG, prm: RenderParams, item: IContent) => {
|
||||
return (e: KeyboardEvent) => {
|
||||
p.ui.prevent_indent_hook = true;
|
||||
if (e.key === "ArrowLeft") {
|
||||
if (prm.isOpen) {
|
||||
prm.onToggle();
|
||||
return;
|
||||
}
|
||||
const up = e.currentTarget.parentElement?.parentElement?.parentElement;
|
||||
if (up) {
|
||||
const c = up.children[0] as HTMLInputElement;
|
||||
if (c) c.focus();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (e.key === "ArrowRight") {
|
||||
if (prm.hasChild) {
|
||||
if (!prm.isOpen) {
|
||||
prm.onToggle();
|
||||
}
|
||||
|
||||
const target = e.currentTarget;
|
||||
setTimeout(() => {
|
||||
let next = target.nextElementSibling;
|
||||
if (next) {
|
||||
if (next.children[0].children[0].childElementCount > 1) {
|
||||
const c = next.children[0].children[0] as HTMLInputElement;
|
||||
c.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
let up = e.currentTarget.parentElement;
|
||||
while (up) {
|
||||
if (up.nextElementSibling) {
|
||||
break;
|
||||
}
|
||||
up = up.parentElement;
|
||||
}
|
||||
|
||||
if (up) {
|
||||
let next = up.nextElementSibling;
|
||||
while (next && next.children[0]) {
|
||||
if (next.children[0].classList.contains("has-child")) {
|
||||
const c = next.children[0] as HTMLInputElement;
|
||||
if (c) {
|
||||
c.focus();
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (next.nextElementSibling) {
|
||||
next = next.nextElementSibling;
|
||||
} else {
|
||||
(next as HTMLInputElement).focus();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === "ArrowDown") {
|
||||
const child = e.currentTarget.nextElementSibling;
|
||||
if (child) {
|
||||
const c = child.children[0]?.children[0] as HTMLInputElement;
|
||||
if (c) c.focus();
|
||||
return;
|
||||
}
|
||||
let up = e.currentTarget.parentElement;
|
||||
while (up) {
|
||||
if (up.nextElementSibling) {
|
||||
break;
|
||||
}
|
||||
up = up.parentElement;
|
||||
}
|
||||
|
||||
if (up) {
|
||||
const next = up.nextElementSibling;
|
||||
if (next) {
|
||||
const c = next.children[0] as HTMLInputElement;
|
||||
if (c) c.focus();
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === "ArrowUp") {
|
||||
let down = e.currentTarget.parentElement?.previousElementSibling;
|
||||
if (down) {
|
||||
if (down.childElementCount === 2) {
|
||||
while (down) {
|
||||
if (down.childElementCount === 2) {
|
||||
down = down.children[1].lastElementChild;
|
||||
} else {
|
||||
if (down.nextElementSibling) {
|
||||
down = down.nextElementSibling;
|
||||
} else break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (down) {
|
||||
(down.children[0] as HTMLInputElement).focus();
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
const up = e.currentTarget.parentElement?.parentElement?.parentElement;
|
||||
|
||||
if (up) {
|
||||
if (!up.classList.contains("absolute")) {
|
||||
const c = up.children[0] as HTMLInputElement;
|
||||
if (c) {
|
||||
c.focus();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p.ui.tree.search_ref?.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === "Enter") {
|
||||
if (p.ui.tree.search) {
|
||||
p.ui.tree.search = "";
|
||||
p.ui.prevent_indent_hook = false;
|
||||
active.item_id = "";
|
||||
p.render();
|
||||
setTimeout(() => {
|
||||
active.item_id = item.id;
|
||||
p.render();
|
||||
setTimeout(() => {
|
||||
const f = document.querySelector(
|
||||
`.tree-${item.id}`
|
||||
) as HTMLInputElement;
|
||||
if (f) {
|
||||
f.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
p.ui.tree.rename_id = item.id;
|
||||
p.render();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === "Backspace" || e.key === "Delete") {
|
||||
let last = "";
|
||||
let found = null as HTMLInputElement | null;
|
||||
p.page.meta[item.id].parent_item.mitem?.get("childs")?.forEach((e) => {
|
||||
if (e.get("id") === item.id) {
|
||||
found = document.querySelector(`.tree-${last}`);
|
||||
}
|
||||
if (!found) {
|
||||
last = e.get("id");
|
||||
}
|
||||
});
|
||||
|
||||
if (!found) {
|
||||
last = p.page.meta[item.id].parent_item.mitem?.get("id") || "";
|
||||
found = document.querySelector(`.tree-${last}`);
|
||||
}
|
||||
|
||||
edActionDelete(p, item);
|
||||
|
||||
if (found) {
|
||||
found.focus();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key.length === 1 && !e.altKey && !e.metaKey && !e.shiftKey) {
|
||||
p.ui.tree.search_ref?.focus();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
import { NodeRender } from "@minoru/react-dnd-treeview";
|
||||
import { useGlobal, useLocal } from "web-utils";
|
||||
import { Loading } from "../../../../../utils/ui/loading";
|
||||
import { EDGlobal, EdMeta, active } from "../../../logic/ed-global";
|
||||
import { EdTreeAction } from "./item/action";
|
||||
import { EdTreeCtxMenu } from "./item/ctx-menu";
|
||||
import { EdTreeIndent } from "./item/indent";
|
||||
import { EdTreeName } from "./item/name";
|
||||
import { Loading } from "../../../../../utils/ui/loading";
|
||||
import { edActionDelete } from "./item/action/del";
|
||||
import { treeItemKeyMap } from "./key-map";
|
||||
|
||||
export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
|
||||
const p = useGlobal(EDGlobal, "EDITOR");
|
||||
|
|
@ -45,186 +45,7 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
|
|||
: [isComponent && `bg-purple-50`],
|
||||
active.hover_id === item.id && "bg-blue-50"
|
||||
)}
|
||||
onKeyDown={(e) => {
|
||||
p.ui.prevent_indent_hook = true;
|
||||
if (e.key === "ArrowLeft") {
|
||||
if (prm.isOpen) {
|
||||
prm.onToggle();
|
||||
return;
|
||||
}
|
||||
const up =
|
||||
e.currentTarget.parentElement?.parentElement?.parentElement;
|
||||
if (up) {
|
||||
const c = up.children[0] as HTMLInputElement;
|
||||
if (c) c.focus();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (e.key === "ArrowRight") {
|
||||
if (prm.hasChild) {
|
||||
if (!prm.isOpen) {
|
||||
prm.onToggle();
|
||||
}
|
||||
|
||||
const target = e.currentTarget;
|
||||
setTimeout(() => {
|
||||
let next = target.nextElementSibling;
|
||||
if (next) {
|
||||
if (next.children[0].children[0].childElementCount > 1) {
|
||||
const c = next.children[0].children[0] as HTMLInputElement;
|
||||
c.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
let up = e.currentTarget.parentElement;
|
||||
while (up) {
|
||||
if (up.nextElementSibling) {
|
||||
break;
|
||||
}
|
||||
up = up.parentElement;
|
||||
}
|
||||
|
||||
if (up) {
|
||||
let next = up.nextElementSibling;
|
||||
while (next && next.children[0]) {
|
||||
if (next.children[0].classList.contains("has-child")) {
|
||||
const c = next.children[0] as HTMLInputElement;
|
||||
if (c) {
|
||||
c.focus();
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (next.nextElementSibling) {
|
||||
next = next.nextElementSibling;
|
||||
} else {
|
||||
(next as HTMLInputElement).focus();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === "ArrowDown") {
|
||||
const child = e.currentTarget.nextElementSibling;
|
||||
if (child) {
|
||||
const c = child.children[0]?.children[0] as HTMLInputElement;
|
||||
if (c) c.focus();
|
||||
return;
|
||||
}
|
||||
let up = e.currentTarget.parentElement;
|
||||
while (up) {
|
||||
if (up.nextElementSibling) {
|
||||
break;
|
||||
}
|
||||
up = up.parentElement;
|
||||
}
|
||||
|
||||
if (up) {
|
||||
const next = up.nextElementSibling;
|
||||
if (next) {
|
||||
const c = next.children[0] as HTMLInputElement;
|
||||
if (c) c.focus();
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === "ArrowUp") {
|
||||
let down = e.currentTarget.parentElement?.previousElementSibling;
|
||||
if (down) {
|
||||
if (down.childElementCount === 2) {
|
||||
while (down) {
|
||||
if (down.childElementCount === 2) {
|
||||
down = down.children[1].lastElementChild;
|
||||
} else {
|
||||
if (down.nextElementSibling) {
|
||||
down = down.nextElementSibling;
|
||||
} else break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (down) {
|
||||
(down.children[0] as HTMLInputElement).focus();
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
const up =
|
||||
e.currentTarget.parentElement?.parentElement?.parentElement;
|
||||
|
||||
if (up) {
|
||||
if (!up.classList.contains("absolute")) {
|
||||
const c = up.children[0] as HTMLInputElement;
|
||||
if (c) {
|
||||
c.focus();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p.ui.tree.search_ref?.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === "Enter") {
|
||||
if (p.ui.tree.search) {
|
||||
p.ui.tree.search = "";
|
||||
p.ui.prevent_indent_hook = false;
|
||||
active.item_id = "";
|
||||
p.render();
|
||||
setTimeout(() => {
|
||||
active.item_id = item.id;
|
||||
p.render();
|
||||
setTimeout(() => {
|
||||
const f = document.querySelector(
|
||||
`.tree-${item.id}`
|
||||
) as HTMLInputElement;
|
||||
if (f) {
|
||||
f.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
p.ui.tree.rename_id = item.id;
|
||||
p.render();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === "Backspace" || e.key === "Delete") {
|
||||
let last = "";
|
||||
let found = null as HTMLInputElement | null;
|
||||
p.page.meta[item.id].parent_item.mitem
|
||||
?.get("childs")
|
||||
?.forEach((e) => {
|
||||
if (e.get("id") === item.id) {
|
||||
found = document.querySelector(`.tree-${last}`);
|
||||
}
|
||||
if (!found) {
|
||||
last = e.get("id");
|
||||
}
|
||||
});
|
||||
|
||||
if (!found) {
|
||||
last = p.page.meta[item.id].parent_item.mitem?.get("id") || "";
|
||||
found = document.querySelector(`.tree-${last}`);
|
||||
}
|
||||
|
||||
edActionDelete(p, item);
|
||||
|
||||
if (found) {
|
||||
found.focus();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key.length === 1 && !e.altKey && !e.metaKey && !e.shiftKey) {
|
||||
p.ui.tree.search_ref?.focus();
|
||||
}
|
||||
}}
|
||||
onKeyDown={treeItemKeyMap(p, prm, item)}
|
||||
onContextMenu={(event) => {
|
||||
event.preventDefault();
|
||||
local.rightClick = event;
|
||||
|
|
|
|||
Loading…
Reference in New Issue