midsuit
/
prasi-bun
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tree keyboard improvement

This commit is contained in:
Rizky 2023-10-24 20:50:37 +07:00
parent 2270c7c071
commit 0279eb30be
9 changed files with 244 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/web/src/render/ed/logic/ed-global.ts
View File

@ -87,10 +87,12 @@ export const EDGlobal = {
group: {} as Record<string, Awaited<ReturnType<SAction["comp"]["group"]>>>,
},
ui: {
prevent_indent_hook: false,
syncing: false,
tree: {
item_loading: [] as string[],
search: "",
search_ref: null as null | HTMLInputElement,
search_mode: {
Name: true,
JS: false,

1
app/web/src/render/ed/logic/ed-route.ts
View File

@ -33,7 +33,6 @@ export const edRoute = async (p: PG) => {
doc.on("update", async (bin: Uint8Array, origin: any) => {
if (origin === "sv_remote" || origin === "local") return;
console.log(origin);
const res = await p.sync.yjs.sv_local(
"page",
p.page.cur.id,

8
app/web/src/render/ed/logic/tree/build.tsx
View File

@ -147,8 +147,10 @@ const walkMap = (
const fcomp = parent_comp.mitem.get("component");
if (fcomp) {
const ref_ids = fcomp.get("ref_ids");
if (ref_ids) {
let ref_id = ref_ids.get(id);
if (!ref_id) {
ref_id = createId();
ref_ids.set(id, ref_id);
@ -157,7 +159,9 @@ const walkMap = (
}
}
}
mapItem(mitem, item);
if (override_id) {
item.id = override_id;
}
@ -190,8 +194,9 @@ const walkMap = (
mitem_comp.set("ref_ids", new Y.Map() as any);
ref_ids = {};
}
const original_id = item.id;
mapItem(mcomp, item);
item.id = original_id;
const meta: EdMeta = {
item,
@ -200,6 +205,7 @@ const walkMap = (
parent_comp,
};
p.page.meta[item.id] = meta;
if (!skip_tree) {
p.page.tree.push({
id: item.id,

7
app/web/src/render/ed/panel/tree/node/item/action/clone.tsx
View File

@ -1,5 +1,6 @@
import { syncronize } from "y-pojo";
import { IContent, MContent } from "../../../../../../../utils/types/general";
import { IItem } from "../../../../../../../utils/types/item";
import { fillID } from "../../../../../../editor/tools/fill-id";
import { PG } from "../../../../../logic/ed-global";
import { treeRebuild } from "../../../../../logic/tree/build";
@ -10,9 +11,11 @@ export const edActionClone = (p: PG, item: IContent) => {
mitem.doc?.transact(() => {
mitem.parent.forEach((e: MContent, idx) => {
if (e.get("id") === mitem.get("id")) {
const json = e.toJSON() as IContent;
const json = e.toJSON() as IItem;
fillID(json);
if (json.component) json.component.ref_ids = {};
const map = new Y.Map();
syncronize(map, fillID(json));
syncronize(map, json);
mitem.parent.insert(idx, [map]);
}
});

15
app/web/src/render/ed/panel/tree/node/item/action/del.tsx Normal file
View File

@ -0,0 +1,15 @@
import { IContent } from "../../../../../../../utils/types/general";
import { PG } from "../../../../../logic/ed-global";
import { treeRebuild } from "../../../../../logic/tree/build";
export const edActionDelete = async (p: PG, item: IContent) => {
const mitem = p.page.meta[item.id].mitem;
if (mitem) {
mitem.parent.forEach((e, k) => {
if (e == mitem) {
mitem.parent.delete(k);
}
});
await treeRebuild(p);
}
};

4
app/web/src/render/ed/panel/tree/node/item/indent-hook.ts
View File

@ -7,6 +7,10 @@ export const indentHook = (
local: { tree: null | TreeMethods; render: () => void }
) => {
useEffect(() => {
if (p.ui.prevent_indent_hook) {
p.ui.prevent_indent_hook = false;
return;
}
const open = JSON.parse(localStorage.getItem("prasi-tree-open") || "{}");
p.ui.tree.open = open;

6
app/web/src/render/ed/panel/tree/node/item/indent.tsx
View File

@ -60,7 +60,11 @@ export const EdTreeIndent = ({
<ComponentIcon />
</div>
)}
{item.type !== "text" && prm.hasChild && (
{item.type === "item" && prm.hasChild && (
<>{prm.isOpen ? <ChevronDown /> : <ChevronRight />}</>
)}
{item.type === "section" && (
<>{prm.isOpen ? <ChevronDown /> : <ChevronRight />}</>
)}
</div>

195
app/web/src/render/ed/panel/tree/node/render.tsx
View File

@ -6,6 +6,7 @@ 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";
export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
const p = useGlobal(EDGlobal, "EDITOR");
@ -26,24 +27,214 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
return (
<div
tabIndex={0}
className={cx(
item.id,
"relative border-b flex items-stretch min-h-[26px]",
"tree-item",
`tree-${item.id}`,
"relative border-b flex items-stretch outline-none min-h-[26px]",
prm.hasChild && "has-child",
css`
&:focus {
.focus {
display: flex;
}
}
`,
active.item_id === item.id
? ["bg-blue-100"]
: ["hover:bg-blue-50", isComponent && `bg-purple-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) {
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") {
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();
}
});
});
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) {
p.ui.tree.search_ref?.focus();
}
}}
onContextMenu={(event) => {
event.preventDefault();
local.rightClick = event;
local.render();
}}
onFocus={(e) => {
active.item_id = item.id;
p.render();
}}
onClick={() => {
active.item_id = item.id;
p.ui.tree.search = "";
p.render();
}}
>
<div className="focus hidden absolute left-0 bottom-0 top-0 w-[4px] bg-blue-500"></div>
{local.rightClick && (
<EdTreeCtxMenu
node={node}

17
app/web/src/render/ed/panel/tree/search.tsx
View File

@ -1,5 +1,5 @@
import { useGlobal, useLocal } from "web-utils";
import { EDGlobal, EdMeta, PG } from "../../logic/ed-global";
import { EDGlobal, EdMeta, PG, active } from "../../logic/ed-global";
import { NodeModel } from "@minoru/react-dnd-treeview";
import uFuzzy from "@leeoniya/ufuzzy";
@ -15,6 +15,8 @@ export const EdTreeSearch = () => {
cursor: null as number | null,
});
p.ui.tree.search_ref = local.sref;
useEffect(() => {
const input = local.sref;
if (input) input.setSelectionRange(local.cursor, local.cursor);
@ -61,6 +63,14 @@ export const EdTreeSearch = () => {
local.render();
}
}}
onKeyDown={(e) => {
if (e.key === "ArrowDown" || e.key === "Enter") {
const first = document.querySelector(
".tree-item:first-child"
) as HTMLInputElement;
if (first) first.focus();
}
}}
/>
</div>
{(local.focus || local.hover || p.ui.tree.search) && (
@ -129,9 +139,8 @@ export const doTreeSearch = (p: PG) => {
<div
className={css`
b {
font-weight: bold;
color: #df9100;
text-decoration: underline;
background: #4c71f6;
color: white;
}
`}
dangerouslySetInnerHTML={{ __html: text }}