From f6fea34821593ea1893277542301bb9ec057a5e7 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Mon, 23 Oct 2023 17:37:53 +0300 Subject: [PATCH] fixed text positioning... Signed-off-by: Alex A. Naanou --- experiments/outline-editor/generic.js | 18 +++++++++------ experiments/outline-editor/index.html | 33 +++++++++++++-------------- 2 files changed, 27 insertions(+), 24 deletions(-) diff --git a/experiments/outline-editor/generic.js b/experiments/outline-editor/generic.js index ea5e06b..9fdcf9d 100755 --- a/experiments/outline-editor/generic.js +++ b/experiments/outline-editor/generic.js @@ -40,6 +40,7 @@ HTMLTextAreaElement.prototype.getTextGeometry = function(){ // get the relevant styles... var style = getComputedStyle(this) + var paddingV = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) var s = {} for(var i=0; i < style.length; i++){ var k = style[i] @@ -49,12 +50,11 @@ HTMLTextAreaElement.prototype.getTextGeometry = function(){ s[k] = style[k] } } var carret = document.createElement('span') - carret.innerText = '|' + carret.innerText = '|' carret.style.margin = '0px' carret.style.padding = '0px' var span = document.createElement('span') - span.innerText = text.slice(0, offset) Object.assign(span.style, { ...s, @@ -62,24 +62,28 @@ HTMLTextAreaElement.prototype.getTextGeometry = function(){ display: 'block', top: '-100%', left: '-100%', - width: this.offsetWidth + 'px', - height: this.scrollHeight + 'px', + width: style.width, + height: style.height, padding: style.padding, + boxSizing: style.boxSizing, + outline: 'solid 1px red', pointerEvents: 'none', }) - span.append(carret) + span.append( + text.slice(0, offset), + carret, + text.slice(offset)) document.body.append(span) - var padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) var res = { length: text.length, lines: Math.floor( - (this.offsetHeight - padding) + (this.offsetHeight - paddingV) / carret.offsetHeight), line: Math.floor(carret.offsetTop / carret.offsetHeight), offset: offset, diff --git a/experiments/outline-editor/index.html b/experiments/outline-editor/index.html index 76c9fd3..7503d58 100755 --- a/experiments/outline-editor/index.html +++ b/experiments/outline-editor/index.html @@ -67,7 +67,7 @@ var setup = function(){ - ...or should this be `sort:: done` -- i.e. sort children by done status?? - codeblock as a block _...if only whitespace before/after clear it and style whole block..._ - _...might be a good idea to do this with codeblock at start/end of block..._ + _...might be a good idea to do this with codeblock at start/end of block..._ - Code blocks and bullets: - ``` code @@ -77,8 +77,8 @@ var setup = function(){ - FEATURE: read-only mode - export html - embed css - - cleanup html - - generate ideomatic html (???) + - cleanup html + - generate ideomatic html (???) - style attrs (see: [attrs](#attributes)) - FEATURE: `collapse-children:: true` block option -- when loading collapse all immediate children - FF: figure out a way to draw expand/collapse bullets without the use of CSS' `:has(..)` @@ -93,9 +93,9 @@ var setup = function(){ - make this generic - FEATURE? block templates... collapsed:: true - - something like: `TPL: [_] -- ` + - something like: `TPL: [_] -- ` - `TPL:` -- template marker - - `` -- field marker + - `` -- field marker - each child node will copy the template and allow editing of only fields - not clear how to handle template changes... - JSON API @@ -123,7 +123,7 @@ var setup = function(){ - DONE unify attr parsing collapsed:: true - _now duplicated in `.parse(..)` and `.__code2html__(..)`_ - - might be a good idea to add a special text parse stage and use in on both branches... + - might be a good idea to add a special text parse stage and use in on both branches... - DONE attrs in editor are not parsed correctly (see: [attrs](#attributes)) - DONE multiple attrs are not handled correctly (see: [attrs](#attributes)) - DONE call `.sync()` on all changes... @@ -140,7 +140,7 @@ var setup = function(){ - _not sure how..._ - DONE click to select/edit node must retain click position in text... - DONE checkbox navigation via `alt-` - collapsed:: true + collapsed:: true - _might be a good idea to include also TODO/DONE navigation -- not yet sure how to mark undone blocks (i.e. the ones marked with TODO in Logseg)..._ - toggle with `space` - navigation auto-selects first checkbox @@ -166,8 +166,8 @@ var setup = function(){ - ## Refactoring: - Plugin architecture - DONE basic structure - - plugin handler sequencing (see: `.setup(..)`) - - DONE plugin handler canceling (see: `.runPlugins(..)`) + - plugin handler sequencing (see: `.setup(..)`) + - DONE plugin handler canceling (see: `.runPlugins(..)`) - DONE Item parser (`.__code2html__(..)`) collapsed:: true - DONE split out @@ -175,7 +175,7 @@ var setup = function(){ - DONE Format parser/generator collapsed:: true - DONE split out - - DONE define api (see: `.__code2text__(..) / .__text2code__(..)`) + - DONE define api (see: `.__code2text__(..) / .__text2code__(..)`) - CSS - separate out settings - separate out theming @@ -245,21 +245,20 @@ var setup = function(){ - y - z - c - - > quote - id::quote-example + - > quote - Notes - - NOTE: a note text + - NOTE: a note text - NOTE: - a root note can also be empty - click on the outer border to edit root - - // C-style comment - - ; ASM-style comment - - XXX Highlight + - // C-style comment + - ; ASM-style comment + - XXX Highlight - DONE Done (toggled via: `ctrl-d`) - Basic inline *bold*, _italic_ and ~striked~ - Marking ==text== - Code: - - Inline quoting `html code` + - Inline quoting `html code` - code blocks ```javascript var text = 'Hello, world!'