aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/DragManager.ts4
-rw-r--r--src/client/views/collections/CollectionSchemaCells.tsx42
-rw-r--r--src/client/views/collections/CollectionSchemaMovableTableHOC.tsx18
-rw-r--r--src/client/views/collections/CollectionSchemaView.scss24
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx17
-rw-r--r--src/new_fields/Doc.ts9
6 files changed, 64 insertions, 50 deletions
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index f9f6b05c0..0299b1d90 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -1,6 +1,6 @@
import { action, runInAction } from "mobx";
import { Doc } from "../../new_fields/Doc";
-import { Cast } from "../../new_fields/Types";
+import { Cast, StrCast } from "../../new_fields/Types";
import { URLField } from "../../new_fields/URLField";
import { emptyFunction } from "../../Utils";
import { CollectionDockingView } from "../views/collections/CollectionDockingView";
@@ -305,7 +305,7 @@ export namespace DragManager {
StartDrag([ele], dragData, downX, downY, options);
}
- export function StartColumnDrag(ele: HTMLElement, dragData: ColumnDragData, downX: number, downY: number, options?:DragOptions) {
+ export function StartColumnDrag(ele: HTMLElement, dragData: ColumnDragData, downX: number, downY: number, options?: DragOptions) {
StartDrag([ele], dragData, downX, downY, options);
}
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index abb2203a0..bc84da140 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -34,7 +34,7 @@ export interface CellProps {
renderDepth: number;
addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void;
moveDocument: (document: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean) => boolean;
- isFocused: boolean;
+ isFocused: boolean;
changeFocusedCellByIndex: (row: number, col: number) => void;
setIsEditing: (isEditing: boolean) => void;
isEditable: boolean;
@@ -42,22 +42,22 @@ export interface CellProps {
@observer
export class CollectionSchemaCell extends React.Component<CellProps> {
- @observable protected _isEditing: boolean = false;
+ @observable protected _isEditing: boolean = this.props.isEditing ? true : false;
protected _focusRef = React.createRef<HTMLDivElement>();
protected _document = this.props.rowProps.original;
private _dropDisposer?: DragManager.DragDropDisposer;
componentDidMount() {
- if (this._focusRef.current) {
- if (this.props.isFocused) {
- this._focusRef.current.className += " focused";
- if (!this.props.isEditable) {
- this._focusRef.current.className += " inactive";
- }
- } else {
- this._focusRef.current.className = "collectionSchemaView-cellWrapper";
- }
- }
+ // if (this._focusRef.current) {
+ // if (this.props.isFocused) {
+ // this._focusRef.current.className += " focused";
+ // if (!this.props.isEditable) {
+ // this._focusRef.current.className += " inactive";
+ // }
+ // } else {
+ // this._focusRef.current.className = "collectionSchemaView-cellWrapper";
+ // }
+ // }
document.addEventListener("keydown", this.onKeyDown);
@@ -69,6 +69,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
@action
onKeyDown = (e: KeyboardEvent): void => {
+ console.log("CELL keydown");
if (this.props.isFocused && this.props.isEditable) {
document.removeEventListener("keydown", this.onKeyDown);
this._isEditing = true;
@@ -139,10 +140,10 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
addDocTab: this.props.addDocTab,
};
- let onItemDown = (e: React.PointerEvent) => {
- SetupDrag(this._focusRef, () => this._document[props.fieldKey] instanceof Doc ? this._document[props.fieldKey] : this._document,
- this._document[props.fieldKey] instanceof Doc ? (doc: Doc, target: Doc, addDoc: (newDoc: Doc) => any) => addDoc(doc) : this.props.moveDocument, this._document[props.fieldKey] instanceof Doc ? "alias" : this.props.Document.schemaDoc ? "copy" : undefined)(e);
- };
+ // let onItemDown = (e: React.PointerEvent) => {
+ // SetupDrag(this._focusRef, () => this._document[props.fieldKey] instanceof Doc ? this._document[props.fieldKey] : this._document,
+ // this._document[props.fieldKey] instanceof Doc ? (doc: Doc, target: Doc, addDoc: (newDoc: Doc) => any) => addDoc(doc) : this.props.moveDocument, this._document[props.fieldKey] instanceof Doc ? "alias" : this.props.Document.schemaDoc ? "copy" : undefined)(e);
+ // };
let onPointerEnter = (e: React.PointerEvent): void => {
if (e.buttons === 1 && SelectionManager.GetIsDragging() && (type === "document" || type === undefined)) {
dragRef!.current!.className = "doc-drag-over";
@@ -163,10 +164,15 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
contents = typeof field === "object" ? doc ? StrCast(doc.title) === "" ? "--" : StrCast(doc.title) : `--${typeof field}--` : `--${typeof field}--`;
}
+ let className = "collectionSchemaView-cellWrapper";
+ if (this._isEditing) className += " editing";
+ if (this.props.isFocused && this.props.isEditable) className += " focused";
+ if (this.props.isFocused && !this.props.isEditable) className += " inactive";
+
return (
<div className="" ref={dragRef} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}>
- <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
- <div className="collectionSchemaView-cellContents" ref={type === undefined || type === "document" ? this.dropRef: null} onPointerDown={onItemDown} key={props.Document[Id]}>
+ <div className={className} ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
+ <div className="collectionSchemaView-cellContents" ref={type === undefined || type === "document" ? this.dropRef : null} key={props.Document[Id]}>
<EditableView
editing={this._isEditing}
isEditingCallback={this.isEditingCallback}
diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
index beae739ec..6d388bb40 100644
--- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
+++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
@@ -7,6 +7,7 @@ import { DragManager, SetupDrag } from "../../util/DragManager";
import { SelectionManager } from "../../util/SelectionManager";
import { Cast, FieldValue, StrCast } from "../../../new_fields/Types";
import { ContextMenu } from "../ContextMenu";
+import { action } from "mobx";
export interface MovableColumnProps {
@@ -106,7 +107,7 @@ export interface MovableRowProps {
rowInfo: RowInfo;
ScreenToLocalTransform: () => Transform;
addDoc: (doc: Doc, relativeTo?: Doc, before?: boolean) => boolean;
- moveDoc: DragManager.MoveFunction;
+ removeDoc: (doc: Doc) => boolean;
rowFocused: boolean;
textWrapRow: (doc: Doc) => void;
rowWrapped: boolean;
@@ -145,9 +146,6 @@ export class MovableRow extends React.Component<MovableRowProps> {
}
rowDrop = (e: Event, de: DragManager.DropEvent) => {
- // const { children = null, rowInfo } = this.props;
- // if (!rowInfo) return false;
-
const rowDoc = FieldValue(Cast(this.props.rowInfo.original, Doc));
if (!rowDoc) return false;
@@ -160,24 +158,26 @@ export class MovableRow extends React.Component<MovableRowProps> {
e.stopPropagation();
if (de.data.draggedDocuments[0] === rowDoc) return true;
let addDocument = (doc: Doc) => this.props.addDoc(doc, rowDoc, before);
- let movedDocs = de.data.draggedDocuments; //(de.data.options === this.props.treeViewId ? de.data.draggedDocuments : de.data.droppedDocuments);
+ let movedDocs = de.data.draggedDocuments;
return (de.data.dropAction || de.data.userDropAction) ?
de.data.droppedDocuments.reduce((added: boolean, d) => this.props.addDoc(d, rowDoc, before) || added, false)
: (de.data.moveDocument) ?
movedDocs.reduce((added: boolean, d) => de.data.moveDocument(d, rowDoc, addDocument) || added, false)
- // movedDocs.reduce((added: boolean, d) => this.props.moveDoc(d, rowDoc, addDocument) || added, false)
: de.data.droppedDocuments.reduce((added: boolean, d) => this.props.addDoc(d, rowDoc, before), false);
}
return false;
}
onRowContextMenu = (e: React.MouseEvent): void => {
- // const { rowInfo } = this.props;
- // const { textWrapRow, original } = rowInfo;
let description = this.props.rowWrapped ? "Unwrap text on row" : "Text wrap row";
ContextMenu.Instance.addItem({ description: description, event: () => this.props.textWrapRow(this.props.rowInfo.original) });
}
+ @action
+ move: DragManager.MoveFunction = (doc: Doc, target: Doc, addDoc) => {
+ return doc !== target && this.props.removeDoc(doc) && addDoc(doc);
+ }
+
render() {
const { children = null, rowInfo } = this.props;
if (!rowInfo) {
@@ -189,7 +189,7 @@ export class MovableRow extends React.Component<MovableRowProps> {
if (!doc) return <></>;
let reference = React.createRef<HTMLDivElement>();
- let onItemDown = SetupDrag(reference, () => doc, this.props.moveDoc);
+ let onItemDown = SetupDrag(reference, () => doc, this.move);
let className = "collectionSchema-row";
if (this.props.rowFocused) className += " row-focused";
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 410790197..c2b0d8f42 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -148,7 +148,7 @@
padding: 0;
font-size: 13px;
text-align: center;
- // white-space: normal;
+ white-space: normal;
.imageBox-cont {
position: relative;
@@ -196,8 +196,6 @@
.collectionSchemaView-header {
height: 100%;
color: gray;
- letter-spacing: 2px;
- text-transform: uppercase;
.collectionSchema-header-menu {
height: 100%;
@@ -206,16 +204,18 @@
width: 100%;
height: 100%;
padding: 4px;
+ letter-spacing: 2px;
+ text-transform: uppercase;
svg {
margin-right: 4px;
}
}
- div[class*="css"] {
- width: 100%;
- height: 100%;
- }
+ // div[class*="css"] {
+ // width: 100%;
+ // height: 100%;
+ // }
}
}
@@ -287,12 +287,6 @@ button.add-column {
background-color: $light-color-secondary;
}
- &.row-wrapped {
- .rt-td {
- white-space: normal;
- }
- }
-
.row-dragger {
// height: $MAX_ROW_HEIGHT;
}
@@ -309,6 +303,10 @@ button.add-column {
&.row-inside {
border: 1px solid red;
}
+
+ .row-dragging {
+ background-color: blue;
+ }
}
}
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 62e4ceb54..a7e435ac6 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -344,7 +344,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
addDocTab: this.props.addDocTab,
moveDocument: this.props.moveDocument,
setIsEditing: this.setCellIsEditing,
- isEditable: isEditable
+ isEditable: isEditable,
};
let colType = this.getColumnType(col);
@@ -393,13 +393,16 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
}
tableAddDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => {
- console.log("table add doc");
return Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before);
}
- tableMoveDoc = (d: Doc, target: Doc, addDoc: (doc: Doc) => boolean) => {
- console.log("SCHEMA MOVE", StrCast(d.title), StrCast(target.title));
- this.props.moveDocument(d, target, addDoc);
+ tableRemoveDoc = (document: Doc): boolean => {
+ let index = this.props.childDocs.findIndex(d => d === document);
+ if (index !== -1) {
+ this.props.childDocs.splice(index, 1);
+ return true;
+ }
+ return false;
}
private getTrProps: ComponentPropsGetterR = (state, rowInfo) => {
@@ -410,7 +413,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
return {
ScreenToLocalTransform: this.props.ScreenToLocalTransform,
addDoc: this.tableAddDoc,
- moveDoc: this.tableMoveDoc,
+ removeDoc: this.tableRemoveDoc,
rowInfo,
rowFocused: !this._headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document),
textWrapRow: this.textWrapRow,
@@ -467,6 +470,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
}
onKeyDown = (e: KeyboardEvent): void => {
+ console.log("schema keydown", !this._cellIsEditing, !this._headerIsEditing, this.props.isFocused(this.props.Document));
if (!this._cellIsEditing && !this._headerIsEditing && this.props.isFocused(this.props.Document)) {// && this.props.isSelected()) {
let direction = e.key === "Tab" ? "tab" : e.which === 39 ? "right" : e.which === 37 ? "left" : e.which === 38 ? "up" : e.which === 40 ? "down" : "";
this.changeFocusedCellByDirection(direction);
@@ -504,7 +508,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
changeFocusedCellByIndex = (row: number, col: number): void => {
this._focusedCell = { row: row, col: col };
this.props.setFocused(this.props.Document);
- // console.log("changed cell by index", StrCast(this.props.Document.title));
}
@action
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 5ae0753d8..eba1d4f04 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -267,21 +267,28 @@ export namespace Doc {
export function AddDocToList(target: Doc, key: string, doc: Doc, relativeTo?: Doc, before?: boolean, first?: boolean, allowDuplicates?: boolean) {
if (target[key] === undefined) {
+ console.log("target key undefined");
Doc.GetProto(target)[key] = new List<Doc>();
}
let list = Cast(target[key], listSpec(Doc));
if (list) {
+ console.log("has list");
if (allowDuplicates !== true) {
let pind = list.reduce((l, d, i) => d instanceof Doc && Doc.AreProtosEqual(d, doc) ? i : l, -1);
if (pind !== -1) {
list.splice(pind, 1);
}
}
- if (first) list.splice(0, 0, doc);
+ if (first) {
+ console.log("is first");
+ list.splice(0, 0, doc);
+ }
else {
+ console.log("not first");
let ind = relativeTo ? list.indexOf(relativeTo) : -1;
if (ind === -1) list.push(doc);
else list.splice(before ? ind : ind + 1, 0, doc);
+ console.log("index", ind);
}
}
return true;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-16 17:42:26 +0000