From 6b5b3e68d09a98d9c8ac360102dbc2109e4d74f2 Mon Sep 17 00:00:00 2001 From: undefined Date: Wed, 19 Jan 2022 20:27:55 +0800 Subject: [PATCH] ui: monaco: better auto-resize --- .../components/editor/{index.js => index.ts} | 60 ++++++++++++++----- packages/ui-default/package.json | 2 +- .../ui-default/pages/domain_group.page.ts | 15 +++++ .../ui-default/templates/domain_group.html | 1 + 4 files changed, 62 insertions(+), 16 deletions(-) rename packages/ui-default/components/editor/{index.js => index.ts} (78%) diff --git a/packages/ui-default/components/editor/index.js b/packages/ui-default/components/editor/index.ts similarity index 78% rename from packages/ui-default/components/editor/index.js rename to packages/ui-default/components/editor/index.ts index 04ee82d7d..a91c7b3bb 100644 --- a/packages/ui-default/components/editor/index.js +++ b/packages/ui-default/components/editor/index.ts @@ -24,12 +24,29 @@ export const config = { }, }; +interface MonacoOptions { + language?: string; + onChange?: (val: string) => any; + theme?: string; + model?: string; + autoResize?: boolean; + autoLayout?: boolean; + value?: string; +} +interface VditorOptions { + theme?: 'classic' | 'dark' +} +type Options = MonacoOptions & VditorOptions; + export default class Editor extends DOMAttachedObject { static DOMAttachKey = 'vjEditorInstance'; + model: import('../monaco').default.editor.IModel; + editor: import('../monaco').default.editor.IStandaloneCodeEditor; + vditor: import('vditor').default; + isValid: boolean; - constructor($dom, options = {}) { + constructor($dom, public options: Options = {}) { super($dom); - this.options = options; if (UserContext.preferredEditorType === 'monaco') this.initMonaco(); else if (options.language && options.language !== 'markdown') this.initMonaco(); else this.initVditor(); @@ -59,10 +76,9 @@ export default class Editor extends DOMAttachedObject { || monaco.editor.createModel(value, language, monaco.Uri.parse(model)) : model; this.model.setValue(value); - this.model.updateOptions({ language }); - const cfg = { + const cfg: import('../monaco').default.editor.IStandaloneEditorConstructionOptions = { theme, - lineNumbers: true, + lineNumbers: 'on', glyphMargin: true, lightbulb: { enabled: true }, model: this.model, @@ -79,19 +95,31 @@ export default class Editor extends DOMAttachedObject { const lineHeight = this.editor.getOption(monaco.editor.EditorOption.lineHeight); const lineCount = this.editor.getModel()?.getLineCount() || 1; let height = this.editor.getTopForLineNumber(lineCount + 1) + lineHeight; - if (window.innerHeight < height) height = window.innerHeight; if (prevHeight !== height) { + if (window.innerHeight * 1.5 < height) { + height = window.innerHeight; + this.editor.updateOptions({ + scrollbar: { + vertical: 'auto', + horizontal: 'auto', + handleMouseWheel: true, + }, + }); + } else { + this.editor.updateOptions({ + scrollbar: { + vertical: 'hidden', + horizontal: 'hidden', + handleMouseWheel: false, + }, + }); + } prevHeight = height; editorElement.style.height = `${height}px`; this.editor.layout(); } }; if (autoResize) { - cfg.scrollbar = { - vertical: 'hidden', - horizontal: 'hidden', - handleMouseWheel: false, - }; cfg.wordWrap = 'bounded'; cfg.scrollBeyondLastLine = false; } @@ -103,7 +131,7 @@ export default class Editor extends DOMAttachedObject { requestAnimationFrame(updateEditorHeight); // folding }); } - this._subscription = this.editor.onDidChangeModelContent(() => { + this.editor.onDidChangeModelContent(() => { const val = this.editor.getValue(); $dom.val(val); $dom.text(val); @@ -112,7 +140,9 @@ export default class Editor extends DOMAttachedObject { this.isValid = true; if (hasFocus) this.focus(); if (autoResize) updateEditorHeight(); + // @ts-ignore window.model = this.model; + // @ts-ignore window.editor = this.editor; } @@ -125,10 +155,10 @@ export default class Editor extends DOMAttachedObject { const value = $dom.val(); const { onChange } = this.options; await new Promise((resolve) => { - this.editor = new Vditor(ele, { + this.vditor = new Vditor(ele, { ...config, ...this.options, - after: resolve, + after: () => resolve(null), input(v) { $dom.val(v); $dom.text(v); @@ -147,7 +177,7 @@ export default class Editor extends DOMAttachedObject { destory() { this.detach(); - if (this.editor?.destory) this.editor.destory(); + if (this.vditor?.destroy) this.vditor.destroy(); else if (this.editor?.dispose) this.editor.dispose(); } diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json index de41d365d..939adad3d 100644 --- a/packages/ui-default/package.json +++ b/packages/ui-default/package.json @@ -1,6 +1,6 @@ { "name": "@hydrooj/ui-default", - "version": "4.30.1", + "version": "4.30.2", "author": "undefined ", "license": "AGPL-3.0", "main": "hydro.js", diff --git a/packages/ui-default/pages/domain_group.page.ts b/packages/ui-default/pages/domain_group.page.ts index f22455043..018c030ff 100644 --- a/packages/ui-default/pages/domain_group.page.ts +++ b/packages/ui-default/pages/domain_group.page.ts @@ -50,9 +50,11 @@ const page = new NamedPage('domain_group', () => { createGroupDialogContent.find('[name="create_group_users"]'), { multi: true, height: 'auto' }, ); + const targets = {}; $('input[data-gid]').get().forEach((ele) => { const input = UserSelectAutoComplete.getOrConstruct>($(ele), { multi: true, height: 'auto' }); const gid = ele.getAttribute('data-gid'); + targets[gid] = input; let loaded = false; input.onChange(() => { if (input.value().length && !loaded) { @@ -123,8 +125,21 @@ const page = new NamedPage('domain_group', () => { } } + async function handleClickSaveAll() { + for (const gid of Object.keys(targets)) { + const uids = targets[gid].value(); + try { + await update(gid, uids); + } catch (error) { + Notification.error(error.message); + } + } + Notification.success(i18n('Saved.')); + } + $('[name="create_group"]').click(() => handleClickCreateGroup()); $('[name="delete_selected"]').click(() => handleClickDeleteSelected()); + $('[name="save_all"]').on('click', () => handleClickSaveAll()); }); export default page; diff --git a/packages/ui-default/templates/domain_group.html b/packages/ui-default/templates/domain_group.html index 298c7c426..661138def 100644 --- a/packages/ui-default/templates/domain_group.html +++ b/packages/ui-default/templates/domain_group.html @@ -43,6 +43,7 @@
+
{% endblock %}