From 47a991c39a43a922e1c0075fbe0a7e6ae8a13cc5 Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Tue, 20 Jun 2023 14:43:36 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B1=20Add=20insert=20mode=20to=20local?= =?UTF-8?q?=20storage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/SquareEdit/Contents.ts | 2 +- src/SquareEdit/Controls.ts | 18 ++++++++++++++--- src/SquareEdit/DivaEditMode.ts | 33 +++++++++++++++++++------------- src/SquareEdit/SingleEditMode.ts | 33 +++++++++++++++++++------------- src/utils/LocalSettings.ts | 8 +++++++- 5 files changed, 63 insertions(+), 31 deletions(-) diff --git a/src/SquareEdit/Contents.ts b/src/SquareEdit/Contents.ts index 2fd13d455..d73310fa7 100644 --- a/src/SquareEdit/Contents.ts +++ b/src/SquareEdit/Contents.ts @@ -113,7 +113,7 @@ export const editControlsPanel =
Selection Mode:
- + diff --git a/src/SquareEdit/Controls.ts b/src/SquareEdit/Controls.ts index c41afb1af..e81d5cee3 100644 --- a/src/SquareEdit/Controls.ts +++ b/src/SquareEdit/Controls.ts @@ -4,7 +4,8 @@ import * as Contents from './Contents'; import { setGroupingHighlight } from '../utils/Color'; import { unselect } from '../utils/SelectTools'; import InsertHandler from './InsertHandler'; -import { setSettings } from '../utils/LocalSettings'; +import { getSettings, setSettings } from '../utils/LocalSettings'; +import { InsertTabType, InsertType } from '../Types'; /** * Bind listeners to insert tabs.' @@ -30,11 +31,17 @@ export function bindInsertTabs (insertHandler: InsertHandler): void { document.getElementById(tab).addEventListener('click', () => { deactivate('.insertTab'); activate(tab, insertHandler); + setSettings({ insertTab: tab as InsertTabType }); document.getElementById('insert_data').innerHTML = Contents.insertTabHtml[tab]; bindElements(insertHandler); deactivate('.insertel'); - const firstOption = document.getElementsByClassName('insertel')[0]; - activate(firstOption.id, insertHandler); + try { + const { insertMode } = getSettings(); + activate(insertMode, insertHandler); + } catch (e) { + const firstOption = document.getElementsByClassName('insertel')[0]; + activate(firstOption.id, insertHandler); + } }); }); } @@ -63,6 +70,8 @@ export function initInsertEditControls (): void { displayHeadingTitle.classList.remove('focused'); insertHeadingTitle.classList.add('focused'); + setSettings({ userMode: 'insert' }); + ( document.querySelector('.insertel.is-active')).click(); editPanel.querySelector('.side-panel-btn.sel-by.is-active').classList.add('unfocused'); insertPanel.querySelector('.side-panel-btn.insertel.is-active').classList.remove('unfocused'); @@ -73,6 +82,8 @@ export function initInsertEditControls (): void { editPanel.addEventListener('click', () => { insertHeadingTitle.classList.remove('focused'); displayHeadingTitle.classList.add('focused'); + + setSettings({ userMode: 'edit' }); insertPanel.querySelector('.side-panel-btn.insertel.is-active').classList.add('unfocused'); editPanel.querySelector('.side-panel-btn.sel-by.is-active').classList.remove('unfocused'); @@ -139,6 +150,7 @@ function activate (id: string, insertHandler: InsertHandler): void { selectedTab.classList.add('is-active'); if (document.getElementById(id).classList.contains('insertel')) { insertHandler.insertActive(id); + setSettings({ insertMode: id as InsertType }); } } diff --git a/src/SquareEdit/DivaEditMode.ts b/src/SquareEdit/DivaEditMode.ts index e706ed388..a49262260 100644 --- a/src/SquareEdit/DivaEditMode.ts +++ b/src/SquareEdit/DivaEditMode.ts @@ -9,6 +9,7 @@ import { NeumeEditInterface } from '../Interfaces'; import * as Contents from './Contents'; import { undoRedoPanel } from '../utils/EditContents'; import { getSettings } from '../utils/LocalSettings'; +import { UserType } from '../Types'; class DivaEdit implements NeumeEditInterface { neonView: NeonView; @@ -27,7 +28,8 @@ class DivaEdit implements NeumeEditInterface { this.dragHandler = new DragHandler(this.neonView, '.active-page > svg'); this.insertHandler = new InsertHandler(this.neonView, '.active-page > svg'); bindInsertTabs(this.insertHandler); - document.getElementById('primitiveTab').click(); + const { insertTab } = getSettings(); + document.getElementById(insertTab).click(); Select.setSelectHelperObjects(this.neonView, this.dragHandler); this.setSelectListeners(); SelectOptions.initNeonView(this.neonView); @@ -37,23 +39,28 @@ class DivaEdit implements NeumeEditInterface { setHighlightSelectionControls(); this.neonView.view.addUpdateCallback(this.setSelectListeners.bind(this)); - document.getElementById('edit_controls').click(); // focus display panel - const { selectionMode } = getSettings(); - document.getElementById(selectionMode).click(); + const { userMode, insertMode, selectionMode } = getSettings(); + document.getElementById(insertMode).classList.add('is-active'); + document.getElementById(selectionMode).classList.add('is-active'); + switch (userMode) { + case 'edit': + document.getElementById(selectionMode).click(); + break; + case 'insert': + document.getElementById(insertMode).click(); + break; + default: + return; + } } /** * Get the user mode that Neon is in. Either insert, edit, or viewer. - * @returns {string} + * @returns {UserType} */ - getUserMode (): string { - if (this.insertHandler !== undefined) { - if (this.insertHandler.isInsertMode()) { - return 'insert'; - } - return 'edit'; - } - return 'viewer'; + getUserMode (): UserType { + const { userMode } = getSettings(); + return userMode; } setSelectListeners (): void { diff --git a/src/SquareEdit/SingleEditMode.ts b/src/SquareEdit/SingleEditMode.ts index 491b9e2e1..ad62900c4 100644 --- a/src/SquareEdit/SingleEditMode.ts +++ b/src/SquareEdit/SingleEditMode.ts @@ -11,6 +11,7 @@ import * as Contents from './Contents'; import { undoRedoPanel } from '../utils/EditContents'; import { initNavbar } from '../utils/EditControls'; import { getSettings } from '../utils/LocalSettings'; +import { UserType } from '../Types'; /** * An Edit Module for a single page of a manuscript. @@ -42,7 +43,8 @@ class SingleEditMode implements NeumeEditInterface { this.dragHandler = new DragHandler(this.neonView, '#svg_group'); this.insertHandler = new InsertHandler(this.neonView, '#svg_group'); bindInsertTabs(this.insertHandler); - document.getElementById('primitiveTab').click(); + const { insertTab } = getSettings(); + document.getElementById(insertTab).click(); Select.setSelectHelperObjects(this.neonView, this.dragHandler); this.setSelectListeners(); @@ -53,23 +55,28 @@ class SingleEditMode implements NeumeEditInterface { setHighlightOption('selection'); this.neonView.view.addUpdateCallback(this.setSelectListeners.bind(this)); - // focus display panel by clicking on the stored selection mode - const { selectionMode } = getSettings(); - document.getElementById(selectionMode).click(); + const { userMode, insertMode, selectionMode } = getSettings(); + document.getElementById(insertMode).classList.add('is-active'); + document.getElementById(selectionMode).classList.add('is-active'); + switch (userMode) { + case 'edit': + document.getElementById(selectionMode).click(); + break; + case 'insert': + document.getElementById(insertMode).click(); + break; + default: + return; + } } /** * Get the user mode that Neon is in. Either insert, edit, or viewer. - * @returns {string} + * @returns {UserType} */ - getUserMode (): string { - if (this.insertHandler !== undefined) { - if (this.insertHandler.isInsertMode()) { - return 'insert'; - } - return 'edit'; - } - return 'viewer'; + getUserMode (): UserType { + const { userMode } = getSettings(); + return userMode; } setSelectListeners (): void { diff --git a/src/utils/LocalSettings.ts b/src/utils/LocalSettings.ts index d097f6435..f5fbf8613 100644 --- a/src/utils/LocalSettings.ts +++ b/src/utils/LocalSettings.ts @@ -1,4 +1,4 @@ -import { GroupingType, SelectionType } from '../Types'; +import { GroupingType, SelectionType, UserType, InsertType, InsertTabType } from '../Types'; /** * The one instance of LocalSettings that will be created and @@ -21,6 +21,9 @@ export interface Settings { glyphOpacity: number; imageOpacity: number; highlightMode: GroupingType; + userMode: UserType; + insertMode: InsertType; + insertTab: InsertTabType; selectionMode: SelectionType; displayBBox: boolean; displayText: boolean; @@ -41,6 +44,9 @@ const DEFAULT_SETTINGS: Settings = { glyphOpacity: 100, imageOpacity: 100, highlightMode: 'none', + userMode: 'viewer', + insertMode: 'punctum', + insertTab: 'primitiveTab', selectionMode: 'selBySyllable', displayBBox: false, displayText: false,