Skip to content

Commit 0832d84

Browse files
dmitry-kurmanovdmitry-kurmanov
authored
PR: CREATOR: DnD: Survey-Elements (#6672)
work for the surveyjs/private-tasks#475
1 parent 87d44f4 commit 0832d84

17 files changed

+519
-329
lines changed

‎functionalTests/designer/drag-drop.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -1887,25 +1887,25 @@ test("Drag Drop indicator - rows", async (t) => {
18871887
.hover(toolboxToolAction)
18881888
.dispatchEvent(toolboxToolAction, "pointerdown")
18891889

1890-
.hover(Selector(".svc-row").nth(0).find(".svc-question__adorner"), { offsetX: 100, offsetY: 5 })
1890+
.hover(Selector(".svc-row").nth(0).find(".svc-question__adorner"), { offsetX: 100, offsetY: 5, speed: 0.1 })
18911891
.expect(Selector(".svc-row").nth(0).hasClass("svc-row--drag-over-top")).ok()
18921892

1893-
.hover(Selector(".svc-row").nth(0).find(".svc-question__adorner"), { offsetX: 100, offsetY: 150 })
1893+
.hover(Selector(".svc-row").nth(0).find(".svc-question__adorner"), { offsetX: 100, offsetY: 150, speed: 0.1 })
18941894
.expect(Selector(".svc-row").nth(0).hasClass("svc-row--drag-over-top")).notOk()
18951895
.expect(Selector(".svc-row").nth(0).hasClass("svc-row--drag-over-bottom")).ok()
18961896

1897-
.hover(Selector(".svc-row").nth(1).find(".svc-question__adorner"), { offsetX: 100, offsetY: 5 })
1897+
.hover(Selector(".svc-row").nth(1).find(".svc-question__adorner"), { offsetX: 100, offsetY: 5, speed: 0.1 })
18981898
.expect(Selector(".svc-row").nth(0).hasClass("svc-row--drag-over-top")).notOk()
18991899
.expect(Selector(".svc-row").nth(0).hasClass("svc-row--drag-over-bottom")).notOk()
19001900
.expect(Selector(".svc-row").nth(1).hasClass("svc-row--drag-over-top")).ok()
19011901

1902-
.hover(Selector(".svc-row").nth(1).find(".svc-question__adorner"), { offsetX: 100, offsetY: 150 })
1902+
.hover(Selector(".svc-row").nth(1).find(".svc-question__adorner"), { offsetX: 100, offsetY: 150, speed: 0.1 })
19031903
.expect(Selector(".svc-row").nth(0).hasClass("svc-row--drag-over-top")).notOk()
19041904
.expect(Selector(".svc-row").nth(0).hasClass("svc-row--drag-over-bottom")).notOk()
19051905
.expect(Selector(".svc-row").nth(1).hasClass("svc-row--drag-over-top")).notOk()
19061906
.expect(Selector(".svc-row").nth(1).hasClass("svc-row--drag-over-bottom")).ok()
19071907

1908-
.hover(Selector(".svc-page__content").nth(1), { offsetX: 100, offsetY: 1 })
1908+
.hover(Selector(".svc-page__content").nth(1), { offsetX: 100, offsetY: 1, speed: 0.1 })
19091909
.dispatchEvent(Selector(".svc-page__content").nth(1), "pointerup")
19101910
.expect(Selector(".svc-row").nth(0).hasClass("svc-row--drag-over-top")).notOk()
19111911
.expect(Selector(".svc-row").nth(0).hasClass("svc-row--drag-over-bottom")).notOk()

‎packages/survey-creator-core/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"build:all": "npm run build && npm run build:i18n && npm run build:themes",
1515
"test": "jest",
1616
"test:cov": "jest --coverage",
17-
"test:dev": "jest --watch",
17+
"test:watch": "jest --watch",
1818
"test:postcss": "postcss build/survey-creator-core.css --silent -u postcss-calc -u autoprefixer -u postcss-fail-on-warn -o survey-creator-core.postcss.css && rimraf survey-creator-core.postcss.css",
1919
"doc_gen": "node doc_generator/editor_docgenerator.js src/entries/index.ts",
2020
"watch:dev": "concurrently \"webpack --env buildType=dev --watch --env emitDeclarations --env emitStyles\" \"rollup -c -w\" ",

‎packages/survey-creator-core/src/components/action-container-view-model.ts

+12-9
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
CssClassBuilder
1313
} from "survey-core";
1414
import { SurveyCreatorModel } from "../creator-base";
15-
import { isPanelDynamic } from "../survey-elements";
15+
import { DropTo, isPanelDynamic } from "../dragdrop-survey-elements";
1616
import { cleanHtmlElementAfterAnimation, prepareElementForVerticalAnimation } from "survey-core";
1717
import { listComponentCss } from "./list-theme";
1818

@@ -100,6 +100,9 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
100100
@property({ defaultValue: false }) expandCollapseAnimationRunning: boolean;
101101
public rootElement: HTMLElement;
102102

103+
@property({ defaultValue: null }) dragTypeOverMe: DropTo;
104+
@property({ defaultValue: false }) isDragMe: boolean;
105+
103106
protected get dragInsideCollapsedContainer(): boolean {
104107
return this.collapsed && this.creator.dragDropSurveyElements.insideContainer;
105108
}
@@ -290,7 +293,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
290293
this.updateActionsProperties();
291294
}
292295
};
293-
protected surveyElement: T
296+
public surveyElement: T
294297
get element() {
295298
return this.surveyElement;
296299
}
@@ -309,7 +312,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
309312
public get actionContainer(): SurveyElementActionContainer {
310313
if (!this.actionContainerValue) {
311314
this.actionContainerValue = this.createActionContainer();
312-
if(this.surveyElement) {
315+
if (this.surveyElement) {
313316
this.updateActionsContainer(this.surveyElement);
314317
this.updateActionsVisibility(false);
315318
}
@@ -318,17 +321,17 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
318321
}
319322
private topActionContainerValue: ActionContainer;
320323
public get topActionContainer(): ActionContainer {
321-
if(!this.topActionContainerValue) {
324+
if (!this.topActionContainerValue) {
322325
this.topActionContainerValue = this.createTopActionContainer();
323-
if(this.surveyElement) {
326+
if (this.surveyElement) {
324327
this.updateActionsVisibility(true);
325328
}
326329
}
327330
return this.topActionContainerValue;
328331
}
329332

330333
private creatorOnLocaleChanged: (sender: Base, options: any) => void = (_, options) => {
331-
if(this.surveyElement) {
334+
if (this.surveyElement) {
332335
this.updateActionsContainer(this.surveyElement);
333336
this.updateActionsProperties();
334337
}
@@ -417,7 +420,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
417420
this.animationCollapsed = undefined;
418421
}
419422
private disposeActions(container: ActionContainer): void {
420-
if(!!container && !container.isDisposed) {
423+
if (!!container && !container.isDisposed) {
421424
container.dispose();
422425
}
423426
}
@@ -441,13 +444,13 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
441444
}
442445
protected cleanActionsContainer() {
443446
const container = this.actionContainerValue;
444-
if(!container) return;
447+
if (!container) return;
445448
const actions = container.actions;
446449
container.setItems([]);
447450
actions.forEach(action => action.dispose && action.dispose());
448451
}
449452
protected updateActionsContainer(surveyElement: SurveyElement) {
450-
if(!this.actionContainerValue) return;
453+
if (!this.actionContainerValue) return;
451454
const actions: Array<Action> = [];
452455
this.buildActions(actions);
453456
this.creator.onElementMenuItemsChanged(surveyElement, actions);

‎packages/survey-creator-core/src/components/page.ts

+6-34
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { Action, ActionContainer, AdaptiveActionContainer, classesToSelector, ComputedUpdater, DragOrClickHelper, DragTypeOverMeEnum, IAction, IElement, PageModel, property, QuestionRowModel, SurveyElement, settings as SurveySettings } from "survey-core";
1+
import { ActionContainer, classesToSelector, ComputedUpdater, DragOrClickHelper, IAction, PageModel, property, QuestionRowModel, settings as SurveySettings } from "survey-core";
22
import { SurveyCreatorModel } from "../creator-base";
33
import { IPortableMouseEvent } from "../utils/events";
44
import { SurveyElementActionContainer, SurveyElementAdornerBase } from "./action-container-view-model";
55
import { getLocString } from "../editorLocalization";
66
import { SurveyHelper } from "../survey-helper";
77
import { settings } from "../creator-settings";
8-
import { DragDropSurveyElements } from "../survey-elements";
8+
import { DragDropSurveyElements, DropTo } from "../dragdrop-survey-elements";
99

1010
import "./page.scss";
1111

@@ -16,18 +16,7 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
1616
public questionTypeSelectorModel: any;
1717
private dragOrClickHelper: DragOrClickHelper;
1818
@property({ defaultValue: "" }) currentAddQuestionType: string;
19-
@property({ defaultValue: null }) dragTypeOverMe: DragTypeOverMeEnum;
20-
@property({ defaultValue: false }) isDragMe: boolean;
21-
private updateDragTypeOverMe() {
22-
if (!this.isDisposed) {
23-
this.dragTypeOverMe = this.page?.dragTypeOverMe;
24-
}
25-
}
26-
private updateIsDragMe() {
27-
if (!this.isDisposed) {
28-
this.isDragMe = this.page?.isDragMe;
29-
}
30-
}
19+
3120
private updateShowPlaceholder(visibleRows?: Array<QuestionRowModel>) {
3221
this.showPlaceholder = !this.isGhost && (visibleRows || this.page.visibleRows).length === 0;
3322
}
@@ -68,20 +57,6 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
6857
if (this.isGhost) {
6958
this.addGhostPageSubsribes(surveyElement);
7059
}
71-
surveyElement.registerFunctionOnPropertiesValueChanged(
72-
["dragTypeOverMe"],
73-
() => {
74-
this.updateDragTypeOverMe();
75-
},
76-
"dragOver"
77-
);
78-
surveyElement.registerFunctionOnPropertiesValueChanged(
79-
["isDragMe"],
80-
() => {
81-
this.updateIsDragMe();
82-
},
83-
"dragOver"
84-
);
8560
surveyElement.registerFunctionOnPropertiesValueChanged(["visibleRows"], (newValue: Array<QuestionRowModel>) => {
8661
this.updateShowPlaceholder(newValue);
8762
}, "updatePlaceholder");
@@ -90,9 +65,7 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
9065
surveyElement.updateCustomWidgets();
9166
surveyElement.setWasShown(true);
9267
this.checkActionProperties();
93-
this.dragTypeOverMe = surveyElement.dragTypeOverMe;
94-
this.isDragMe = surveyElement.isDragMe;
95-
if(this.creator.pageEditMode !== "single") {
68+
if (this.creator.pageEditMode !== "single") {
9669
(<any>surveyElement.locTitle).placeholder = () => { return surveyElement.isStartPage ? "pe.startPageTitlePlaceholder" : "pe.pageTitlePlaceholder"; };
9770
(<any>surveyElement.locDescription).placeholder = "pe.pageDescriptionPlaceholder";
9871
}
@@ -104,7 +77,6 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
10477
delete (<any>surveyElement.locTitle).placeholder;
10578
delete (<any>surveyElement.locDescription).placeholder;
10679
surveyElement.unRegisterFunctionOnPropertiesValueChanged(["elements"], "updatePlaceholder");
107-
surveyElement.unRegisterFunctionOnPropertiesValueChanged(["dragTypeOverMe", "isDragMe"], "dragOver");
10880
surveyElement.unRegisterFunctionOnPropertiesValueChanged(["title", "description"], "add_ghost");
10981
surveyElement.unRegisterFunctionOnPropertiesValueChanged(["visibleRows"], "updatePlaceholder");
11082
surveyElement["surveyChangedCallback"] = undefined;
@@ -256,10 +228,10 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
256228
get css(): string {
257229
let result = super.getCss();
258230
if (this.dragDropHelper.draggedElement && this.dragDropHelper.draggedElement.isPage) {
259-
if (this.dragTypeOverMe === DragTypeOverMeEnum.Top) {
231+
if (this.dragTypeOverMe === DropTo.Top) {
260232
result += " svc-question__content--drag-over-top";
261233
}
262-
if (this.dragTypeOverMe === DragTypeOverMeEnum.Bottom) {
234+
if (this.dragTypeOverMe === DropTo.Bottom) {
263235
result += " svc-question__content--drag-over-bottom";
264236
}
265237
} else {

‎packages/survey-creator-core/src/components/question.ts

+12-23
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {
22
SurveyElement,
3-
SurveyModel,
43
SurveyTemplateRendererTemplateData,
54
property,
65
QuestionHtmlModel,
@@ -9,7 +8,6 @@ import {
98
Question,
109
ItemValue,
1110
Serializer,
12-
DragTypeOverMeEnum,
1311
IAction,
1412
ComputedUpdater,
1513
DragOrClickHelper,
@@ -18,8 +16,6 @@ import {
1816
CssClassBuilder,
1917
QuestionPanelDynamicModel,
2018
ListModel,
21-
QuestionTextModel,
22-
ActionContainer,
2319
Helpers,
2420
PanelModel,
2521
classesToSelector,
@@ -29,18 +25,17 @@ import {
2925
import { SurveyCreatorModel } from "../creator-base";
3026
import { editorLocalization, getLocString } from "../editorLocalization";
3127
import { QuestionConverter } from "../questionconverter";
32-
import { IPortableDragEvent, IPortableEvent, IPortableMouseEvent } from "../utils/events";
28+
import { IPortableEvent } from "../utils/events";
3329
import {
3430
isPropertyVisible,
3531
propertyExists,
3632
} from "../utils/creator-utils";
3733
import { SurveyElementActionContainer, SurveyElementAdornerBase } from "./action-container-view-model";
3834
import "./question.scss";
3935
import { settings } from "../creator-settings";
40-
import { StringEditorConnector, StringItemsNavigatorBase } from "./string-editor";
41-
import { DragDropSurveyElements, isPanelDynamic } from "../survey-elements";
36+
import { StringItemsNavigatorBase } from "./string-editor";
37+
import { DragDropSurveyElements, DropTo } from "../dragdrop-survey-elements";
4238
import { QuestionToolbox, QuestionToolboxItem } from "../toolbox";
43-
import { isUndefined } from "lodash";
4439
import { listComponentCss } from "./list-theme";
4540

4641
export interface QuestionBannerParams {
@@ -146,22 +141,22 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
146141
this.dragOut();
147142
}
148143

149-
if (this.dragTypeOverMe === DragTypeOverMeEnum.InsideEmptyPanel) {
144+
if (this.dragTypeOverMe === DropTo.Inside) {
150145
result += " svc-question__content--drag-over-inside";
151146
}
152147
if (!this.dragInsideCollapsedContainer) {
153-
if (this.dragTypeOverMe === DragTypeOverMeEnum.Left) {
148+
if (this.dragTypeOverMe === DropTo.Left) {
154149
result += " svc-question__content--drag-over-left";
155150
}
156151

157-
if (this.dragTypeOverMe === DragTypeOverMeEnum.Right) {
152+
if (this.dragTypeOverMe === DropTo.Right) {
158153
result += " svc-question__content--drag-over-right";
159154
}
160155

161-
if (this.dragTypeOverMe === DragTypeOverMeEnum.Top) {
156+
if (this.dragTypeOverMe === DropTo.Top) {
162157
result += " svc-question__content--drag-over-top";
163158
}
164-
if (this.dragTypeOverMe === DragTypeOverMeEnum.Bottom) {
159+
if (this.dragTypeOverMe === DropTo.Bottom) {
165160
result += " svc-question__content--drag-over-bottom";
166161
}
167162
if (this.creator) {
@@ -202,15 +197,9 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
202197

203198
protected expandWithDragIn() {
204199
super.expandWithDragIn();
205-
this.element.dragTypeOverMe = null;
200+
this.dragTypeOverMe = null;
206201
this.creator.dragDropSurveyElements.dropTarget = null;
207202
}
208-
get isDragMe(): boolean {
209-
return this.surveyElement.isDragMe;
210-
}
211-
get dragTypeOverMe() {
212-
return this.element.dragTypeOverMe;
213-
}
214203
public get isBannerShowing(): boolean {
215204
return this.isUsingCarryForward || this.isUsingRestfull || this.isMessagePanelVisible;
216205
}
@@ -285,7 +274,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
285274
super.attachElement(surveyElement);
286275
if (surveyElement) {
287276
surveyElement.registerFunctionOnPropertyValueChanged("isRequired", (newValue: any) => {
288-
if(this.isActionContainerCreated) {
277+
if (this.isActionContainerCreated) {
289278
const requiredAction = this.actionContainer.getActionById("isrequired");
290279
this.updateRequiredAction(requiredAction);
291280
}
@@ -329,13 +318,13 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
329318
}
330319
protected updateActionsPropertiesCore(): void {
331320
super.updateActionsPropertiesCore();
332-
if(this.isActionContainerCreated) {
321+
if (this.isActionContainerCreated) {
333322
this.updateActionsLocations();
334323
}
335324
}
336325
protected updateActionsVisibility(isTop: boolean): void {
337326
super.updateActionsVisibility(isTop);
338-
if(!isTop) {
327+
if (!isTop) {
339328
this.updateActionsLocations();
340329
}
341330
}

‎packages/survey-creator-core/src/components/row.ts

+11-12
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11
import {
22
Base,
3-
SurveyModel,
43
SurveyTemplateRendererTemplateData,
54
QuestionRowModel,
6-
DragTypeOverMeEnum,
75
property
86
} from "survey-core";
97
import { SurveyCreatorModel } from "../creator-base";
108
import "./row.scss";
9+
import { DropTo } from "../dragdrop-survey-elements";
10+
import { SurveyElementAdornerBase } from "./action-container-view-model";
1111

1212
export class RowViewModel extends Base {
13+
@property({ defaultValue: null }) dragTypeOverMe: DropTo;
14+
1315
constructor(
1416
public creator: SurveyCreatorModel,
1517
public row: QuestionRowModel,
1618
public templateData: SurveyTemplateRendererTemplateData
1719
) {
1820
super();
19-
this.dragTypeOverMe = this.row.dragTypeOverMe;
21+
if (this.row) {
22+
this.row.setPropertyValue(SurveyElementAdornerBase.AdornerValueName, this);
23+
}
2024
}
2125
public subscribeElementChanges() {
22-
this.row.onPropertyChanged.add(this.rowDragTypeOverMeChanged);
26+
this.row.setPropertyValue(SurveyElementAdornerBase.AdornerValueName, this);
2327
}
2428
public unsubscribeElementChanges() {
25-
this.row.onPropertyChanged.remove(this.rowDragTypeOverMeChanged);
29+
this.row.setPropertyValue(SurveyElementAdornerBase.AdornerValueName, null);
2630
}
27-
@property() dragTypeOverMe: DragTypeOverMeEnum;
28-
private rowDragTypeOverMeChanged: (sender: Base, options: any) => any = (s, o) => {
29-
if (o.name == "dragTypeOverMe") this.dragTypeOverMe = o.newValue;
30-
};
3131
public get cssClasses() {
3232
let result = "svc-row";
3333
let ghostClass = " svc-row--ghost";
@@ -39,10 +39,10 @@ export class RowViewModel extends Base {
3939
result += ghostClass;
4040
}
4141

42-
if (this.dragTypeOverMe === DragTypeOverMeEnum.Top) {
42+
if (this.dragTypeOverMe === DropTo.Top) {
4343
result += " svc-row--drag-over-top";
4444
}
45-
if (this.dragTypeOverMe === DragTypeOverMeEnum.Bottom) {
45+
if (this.dragTypeOverMe === DropTo.Bottom) {
4646
result += " svc-row--drag-over-bottom";
4747
}
4848

@@ -51,6 +51,5 @@ export class RowViewModel extends Base {
5151
public dispose() {
5252
super.dispose();
5353
this.unsubscribeElementChanges();
54-
this.rowDragTypeOverMeChanged = undefined;
5554
}
5655
}

0 commit comments

Comments
 (0)