Smalltalk › Pharo › Pharo Smalltalk Developers

[ANN] Twisty, text with active state framework

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

8 messages Options

Denis Kudriashov

[ANN] Twisty, text with active state framework

I’m glad to announce new text framework Twisty.

Twisty is text implementation based on active state idea. In this library text instances announce any change which happens with it. Due to this behavior Twisty provides cursors and layout objects which state are automatically restored after text changes. It is simplified implementation of text tools which operate on single text instance. They do not need to implement any synchronization of their state when somebody edit text.

Any text editing should be performed by:

text

editContentsBy: [cursor insert: ‘new string’]

andSubmitChangesBy: [text asString allDigits]

First block in this example performs text changes by cursor instance. Cursor can be fetched by "text newActiveCursor". Also text can be edited by text region instances.

Last block is predicate which validate changes. At the time of its execution text already applied all changes from first block. So full and completed text state can be verified. If state is incorrect all changes will be cancelled. If anything ok text will accept all changes by announcing TwyTextChanged event.

In this example changes will be cancelled and ’new string’ will be not accepted.

There is short version of editing method without any validation:

text editContentsBy: [region backspaceKey]

Editing methods return announced event. It can be TwyTextChanged or TwyChangesCancelled events. This events contains all changes which happened during editing block execution. Changes are presented by first class objects subclasses of TwyImmediateChangeAnnouncement: TwyCharactersSpanIncreased, TwyElementInserted, TwyElementsGroupRemoved, TwyCursorMoved and others.

Changes can be cancelled. Cancel should be performed inside editing block:

text editContentsBy: [textChanged cancel]

It is used for undo/redo implementation.

Twisty implements single text morph TwyTextMorph. Different behavior should be implemented by specific class of text tool (subclasses of TwyTextTool). It can be editor tool, selection tool, cursor tool, undo/redo tool and others. Text morph contains collection of such tools. Different combination of tools supplies different behavior. For example, text morph without any tools is simple readonly text field. Text morph with selection tool allows select text region and copy it to clipboard. If cursor tool are added to morph then blinked cursor are shown for visible text navigation.

Tools approach allows replace usual hierarchy of text morphs by composition of tool classes.

Tools are added to text morph by:

textMorph ensureTool: TwyCursorTool

TwyEditorTool adds editing behavior to text morph. It subscribes on key press events from morph to accept arbitrary characters input, cut selection or insert clipboard contents. All actions are delegated to instance of TwyEditor. Editor by itself delegates execution of actions to text decorator and then It validates resulted changes by text validator.

Text validator is responsible for text changes verification. For example validator can check that text has only digits and forbid insertion of any other characters. By default editor has TwyNullTextValidator which allowed any text.

Text decorator is responsible for specific processing of usual editing operations. Text decorator decides how characters should be inserted or removed, how selected text region should be changed. By default editor have TwyNativeTextDecorator which inserts characters with usual logic where characters are inserted at cursor position and selection region are reset. But there is TwyMaskedTextDecorator which implements it differently. It overrides asterix characters of mask with inserted string and skips non asterix characters.

You can see examples on available features in TwyTextMorph class side and in attached videos.

Twisty. Text editor

Twisty. Masked fields

Twisty. Smart numbers

Twisty. Smart Characters

Twisty. Autoscrolling without scroll pane

Twisty. PlaceHolder

Twisty. Live tuning

You can load code in Pharo 4 and 5 by:

Gofer it

smalltalkhubUser: 'dionisiy' project: 'Twisty';

configurationOf: 'Twisty';

loadStable

Best regards,

Denis

Peter Uhnak

Re: [ANN] Twisty, text with active state framework

This is really nice!

I especially like the masking capabilities.

Peter

On 11/26, Denis Kudriashov wrote:

> I’m glad to announce new text framework Twisty.
>
> Twisty is text implementation based on active state idea. In this library
> text instances announce any change which happens with it. Due to this
> behavior Twisty provides cursors and layout objects which state are
> automatically restored after text changes. It is simplified implementation
> of text tools which operate on single text instance. They do not need to
> implement any synchronization of their state when somebody edit text.
>
> Any text editing should be performed by:
>
> text
> editContentsBy: [cursor insert: ‘new string’]
> andSubmitChangesBy: [text asString allDigits]
>
> First block in this example performs text changes by cursor instance.
> Cursor can be fetched by "text newActiveCursor". Also text can be edited by
> text region instances.
> Last block is predicate which validate changes. At the time of its
> execution text already applied all changes from first block. So full and
> completed text state can be verified. If state is incorrect all changes
> will be cancelled. If anything ok text will accept all changes by
> announcing TwyTextChanged event.
> In this example changes will be cancelled and ’new string’ will be not
> accepted.
> There is short version of editing method without any validation:
>
> text editContentsBy: [region backspaceKey]
>
> Editing methods return announced event. It can be TwyTextChanged or
> TwyChangesCancelled events. This events contains all changes which happened
> during editing block execution. Changes are presented by first class
> objects subclasses of TwyImmediateChangeAnnouncement:
> TwyCharactersSpanIncreased, TwyElementInserted, TwyElementsGroupRemoved,
> TwyCursorMoved and others.
> Changes can be cancelled. Cancel should be performed inside editing block:
>
> text editContentsBy: [textChanged cancel]
>
> It is used for undo/redo implementation.
>
> Twisty implements single text morph TwyTextMorph. Different behavior should
> be implemented by specific class of text tool (subclasses of TwyTextTool).
> It can be editor tool, selection tool, cursor tool, undo/redo tool and
> others. Text morph contains collection of such tools. Different combination
> of tools supplies different behavior. For example, text morph without any
> tools is simple readonly text field. Text morph with selection tool allows
> select text region and copy it to clipboard. If cursor tool are added to
> morph then blinked cursor are shown for visible text navigation.
> Tools approach allows replace usual hierarchy of text morphs by composition
> of tool classes.
> Tools are added to text morph by:
> textMorph ensureTool: TwyCursorTool
>
> TwyEditorTool adds editing behavior to text morph. It subscribes on key
> press events from morph to accept arbitrary characters input, cut selection
> or insert clipboard contents. All actions are delegated to instance of
> TwyEditor. Editor by itself delegates execution of actions to text
> decorator and then It validates resulted changes by text validator.
> Text validator is responsible for text changes verification. For example
> validator can check that text has only digits and forbid insertion of any
> other characters. By default editor has TwyNullTextValidator which allowed
> any text.
> Text decorator is responsible for specific processing of usual editing
> operations. Text decorator decides how characters should be inserted or
> removed, how selected text region should be changed. By default editor have
> TwyNativeTextDecorator which inserts characters with usual logic where
> characters are inserted at cursor position and selection region are reset.
> But there is TwyMaskedTextDecorator which implements it differently. It
> overrides asterix characters of mask with inserted string and skips non
> asterix characters.
>
> You can see examples on available features in TwyTextMorph class side and
> in attached videos.
>
> Twisty. Text editor <https://www.youtube.com/watch?v=WNLSBt1eB2w>
> Twisty. Masked fields <https://www.youtube.com/watch?v=nZ3mWmJWp-k>
> Twisty. Smart numbers <https://www.youtube.com/watch?v=ilx8XuRFOeY>
> Twisty. Smart Characters <https://www.youtube.com/watch?v=iRpafGFcH_4>
> Twisty. Autoscrolling without scroll pane
> <https://www.youtube.com/watch?v=I_x3INGJy-E>
> Twisty. PlaceHolder <https://www.youtube.com/watch?v=tHNO-qnTY1E>
> Twisty. Live tuning <https://www.youtube.com/watch?v=Rm1jp3eHsCU>
>
> You can load code in Pharo 4 and 5 by:
>
> Gofer it
> smalltalkhubUser: 'dionisiy' project: 'Twisty';
> configurationOf: 'Twisty';
> loadStable
>
> Best regards,
> Denis

--
Peter

kilon.alios

Re: [ANN] Twisty, text with active state framework

In reply to this post by Denis Kudriashov

Quite impressive, I was developing a specialised input for time formats of HH:MM:SS and I wanted to extend with ability to take minutes as pure number and autoformat it to the above format. I have accomplished some of it but your implementation seems more powerful. Will give it a try , thanks

On Thu, Nov 26, 2015 at 12:09 PM Denis Kudriashov <[hidden email]> wrote:

I’m glad to announce new text framework Twisty.

Twisty is text implementation based on active state idea. In this library text instances announce any change which happens with it. Due to this behavior Twisty provides cursors and layout objects which state are automatically restored after text changes. It is simplified implementation of text tools which operate on single text instance. They do not need to implement any synchronization of their state when somebody edit text.

Any text editing should be performed by:

text
editContentsBy: [cursor insert: ‘new string’]
andSubmitChangesBy: [text asString allDigits]

First block in this example performs text changes by cursor instance. Cursor can be fetched by "text newActiveCursor". Also text can be edited by text region instances.
Last block is predicate which validate changes. At the time of its execution text already applied all changes from first block. So full and completed text state can be verified. If state is incorrect all changes will be cancelled. If anything ok text will accept all changes by announcing TwyTextChanged event.
In this example changes will be cancelled and ’new string’ will be not accepted.
There is short version of editing method without any validation:

text editContentsBy: [region backspaceKey]

Editing methods return announced event. It can be TwyTextChanged or TwyChangesCancelled events. This events contains all changes which happened during editing block execution. Changes are presented by first class objects subclasses of TwyImmediateChangeAnnouncement: TwyCharactersSpanIncreased, TwyElementInserted, TwyElementsGroupRemoved, TwyCursorMoved and others.
Changes can be cancelled. Cancel should be performed inside editing block:

text editContentsBy: [textChanged cancel]

It is used for undo/redo implementation.

Twisty implements single text morph TwyTextMorph. Different behavior should be implemented by specific class of text tool (subclasses of TwyTextTool). It can be editor tool, selection tool, cursor tool, undo/redo tool and others. Text morph contains collection of such tools. Different combination of tools supplies different behavior. For example, text morph without any tools is simple readonly text field. Text morph with selection tool allows select text region and copy it to clipboard. If cursor tool are added to morph then blinked cursor are shown for visible text navigation.
Tools approach allows replace usual hierarchy of text morphs by composition of tool classes.
Tools are added to text morph by:

textMorph ensureTool: TwyCursorTool

TwyEditorTool adds editing behavior to text morph. It subscribes on key press events from morph to accept arbitrary characters input, cut selection or insert clipboard contents. All actions are delegated to instance of TwyEditor. Editor by itself delegates execution of actions to text decorator and then It validates resulted changes by text validator.
Text validator is responsible for text changes verification. For example validator can check that text has only digits and forbid insertion of any other characters. By default editor has TwyNullTextValidator which allowed any text.
Text decorator is responsible for specific processing of usual editing operations. Text decorator decides how characters should be inserted or removed, how selected text region should be changed. By default editor have TwyNativeTextDecorator which inserts characters with usual logic where characters are inserted at cursor position and selection region are reset. But there is TwyMaskedTextDecorator which implements it differently. It overrides asterix characters of mask with inserted string and skips non asterix characters.

You can see examples on available features in TwyTextMorph class side and in attached videos.

Twisty. Text editor
Twisty. Masked fields
Twisty. Smart numbers
Twisty. Smart Characters
Twisty. Autoscrolling without scroll pane
Twisty. PlaceHolder
Twisty. Live tuning

You can load code in Pharo 4 and 5 by:

Gofer it
smalltalkhubUser: 'dionisiy' project: 'Twisty';
configurationOf: 'Twisty';
loadStable

Best regards,
Denis

Denis Kudriashov

Re: [ANN] Twisty, text with active state framework

2015-11-26 12:01 GMT+01:00 Dimitris Chloupis <[hidden email]>:

Quite impressive, I was developing a specialised input for time formats of HH:MM:SS and I wanted to extend with ability to take minutes as pure number and autoformat it to the above format. I have accomplished some of it but your implementation seems more powerful. Will give it a try , thanks

I was think to implement it to. But I have other tasks.

It should be easy with Twisty. Just look at how smartNumbers implemented where thousands split by separator. If I right understand what you want (I'm not sure) you will need implement kind of TwyDecorationFormat and TwyTextSpec

Denis Kudriashov

Re: [ANN] Twisty, text with active state framework

In reply to this post by Peter Uhnak

2015-11-26 11:55 GMT+01:00 Peter Uhnak <[hidden email]>:

I especially like the masking capabilitie

Thank's.

Interesting how it is implemented.

In Twisty portion of text have attributes collection like color and font. Asterix in masked text is just special kind of such attribute TwyMaskAsterixAttribute. Its value is character which should be used as asterix. TwyMaskedTextDecorator edits only text regions with such attribute.

There is another attribute TwySecreteAsterixAttribute. Any text region which marked with it will be shown as asterix characters (from it value).

Nicolai Hess-3-2

Re: [ANN] Twisty, text with active state framework

In reply to this post by Denis Kudriashov

Impressive!

How does it compare to Rubric or TxText ?

I see some similarities with TxText (and you worked on TxText too?). Does it mean this is a more complete version of TxText. With similar

core and/or the same design.

All classes are commented +1 for Twy -1 for Rubric :)

What I like about rubrics textcomponents are the Text/Line decorations like in RubLipsumWithSegmentsExample (see screenshot).

Does Twy support this too?

2015-11-26 11:07 GMT+01:00 Denis Kudriashov <[hidden email]>:

I’m glad to announce new text framework Twisty.

Twisty is text implementation based on active state idea. In this library text instances announce any change which happens with it. Due to this behavior Twisty provides cursors and layout objects which state are automatically restored after text changes. It is simplified implementation of text tools which operate on single text instance. They do not need to implement any synchronization of their state when somebody edit text.

Any text editing should be performed by:

text
editContentsBy: [cursor insert: ‘new string’]
andSubmitChangesBy: [text asString allDigits]

First block in this example performs text changes by cursor instance. Cursor can be fetched by "text newActiveCursor". Also text can be edited by text region instances.
Last block is predicate which validate changes. At the time of its execution text already applied all changes from first block. So full and completed text state can be verified. If state is incorrect all changes will be cancelled. If anything ok text will accept all changes by announcing TwyTextChanged event.
In this example changes will be cancelled and ’new string’ will be not accepted.
There is short version of editing method without any validation:

text editContentsBy: [region backspaceKey]

Editing methods return announced event. It can be TwyTextChanged or TwyChangesCancelled events. This events contains all changes which happened during editing block execution. Changes are presented by first class objects subclasses of TwyImmediateChangeAnnouncement: TwyCharactersSpanIncreased, TwyElementInserted, TwyElementsGroupRemoved, TwyCursorMoved and others.
Changes can be cancelled. Cancel should be performed inside editing block:

text editContentsBy: [textChanged cancel]

It is used for undo/redo implementation.

Twisty implements single text morph TwyTextMorph. Different behavior should be implemented by specific class of text tool (subclasses of TwyTextTool). It can be editor tool, selection tool, cursor tool, undo/redo tool and others. Text morph contains collection of such tools. Different combination of tools supplies different behavior. For example, text morph without any tools is simple readonly text field. Text morph with selection tool allows select text region and copy it to clipboard. If cursor tool are added to morph then blinked cursor are shown for visible text navigation.
Tools approach allows replace usual hierarchy of text morphs by composition of tool classes.
Tools are added to text morph by:

textMorph ensureTool: TwyCursorTool

TwyEditorTool adds editing behavior to text morph. It subscribes on key press events from morph to accept arbitrary characters input, cut selection or insert clipboard contents. All actions are delegated to instance of TwyEditor. Editor by itself delegates execution of actions to text decorator and then It validates resulted changes by text validator.
Text validator is responsible for text changes verification. For example validator can check that text has only digits and forbid insertion of any other characters. By default editor has TwyNullTextValidator which allowed any text.
Text decorator is responsible for specific processing of usual editing operations. Text decorator decides how characters should be inserted or removed, how selected text region should be changed. By default editor have TwyNativeTextDecorator which inserts characters with usual logic where characters are inserted at cursor position and selection region are reset. But there is TwyMaskedTextDecorator which implements it differently. It overrides asterix characters of mask with inserted string and skips non asterix characters.

You can see examples on available features in TwyTextMorph class side and in attached videos.

Twisty. Text editor
Twisty. Masked fields
Twisty. Smart numbers
Twisty. Smart Characters
Twisty. Autoscrolling without scroll pane
Twisty. PlaceHolder
Twisty. Live tuning

You can load code in Pharo 4 and 5 by:

Gofer it
smalltalkhubUser: 'dionisiy' project: 'Twisty';
configurationOf: 'Twisty';
loadStable

Best regards,
Denis

PharoScreenshot.9.png (24K) Download Attachment

Tudor Girba-2

Re: [ANN] Twisty, text with active state framework

+1 to all of this (including the questions of Nicolai) :)

Cheers,
Doru

> On Nov 27, 2015, at 8:57 AM, Nicolai Hess <[hidden email]> wrote:
>
>
>
> Impressive!
> How does it compare to Rubric or TxText ?
> I see some similarities with TxText (and you worked on TxText too?). Does it mean this is a more complete version of TxText. With similar
> core and/or the same design.
>
> All classes are commented +1 for Twy -1 for Rubric :)
> What I like about rubrics textcomponents are the Text/Line decorations like in RubLipsumWithSegmentsExample (see screenshot).
>
> Does Twy support this too?
>
>
>
>
>
>
> 2015-11-26 11:07 GMT+01:00 Denis Kudriashov <[hidden email]>:
> I’m glad to announce new text framework Twisty.
>
> Twisty is text implementation based on active state idea. In this library text instances announce any change which happens with it. Due to this behavior Twisty provides cursors and layout objects which state are automatically restored after text changes. It is simplified implementation of text tools which operate on single text instance. They do not need to implement any synchronization of their state when somebody edit text.
>
> Any text editing should be performed by:
>
> text
> editContentsBy: [cursor insert: ‘new string’]
> andSubmitChangesBy: [text asString allDigits]
>
> First block in this example performs text changes by cursor instance. Cursor can be fetched by "text newActiveCursor". Also text can be edited by text region instances.
> Last block is predicate which validate changes. At the time of its execution text already applied all changes from first block. So full and completed text state can be verified. If state is incorrect all changes will be cancelled. If anything ok text will accept all changes by announcing TwyTextChanged event.
> In this example changes will be cancelled and ’new string’ will be not accepted.
> There is short version of editing method without any validation:
>
> text editContentsBy: [region backspaceKey]
>
> Editing methods return announced event. It can be TwyTextChanged or TwyChangesCancelled events. This events contains all changes which happened during editing block execution. Changes are presented by first class objects subclasses of TwyImmediateChangeAnnouncement: TwyCharactersSpanIncreased, TwyElementInserted, TwyElementsGroupRemoved, TwyCursorMoved and others.
> Changes can be cancelled. Cancel should be performed inside editing block:
>
> text editContentsBy: [textChanged cancel]
>
> It is used for undo/redo implementation.
>
> Twisty implements single text morph TwyTextMorph. Different behavior should be implemented by specific class of text tool (subclasses of TwyTextTool). It can be editor tool, selection tool, cursor tool, undo/redo tool and others. Text morph contains collection of such tools. Different combination of tools supplies different behavior. For example, text morph without any tools is simple readonly text field. Text morph with selection tool allows select text region and copy it to clipboard. If cursor tool are added to morph then blinked cursor are shown for visible text navigation.
> Tools approach allows replace usual hierarchy of text morphs by composition of tool classes.
> Tools are added to text morph by:
>
> textMorph ensureTool: TwyCursorTool
>
> TwyEditorTool adds editing behavior to text morph. It subscribes on key press events from morph to accept arbitrary characters input, cut selection or insert clipboard contents. All actions are delegated to instance of TwyEditor. Editor by itself delegates execution of actions to text decorator and then It validates resulted changes by text validator.
> Text validator is responsible for text changes verification. For example validator can check that text has only digits and forbid insertion of any other characters. By default editor has TwyNullTextValidator which allowed any text.
> Text decorator is responsible for specific processing of usual editing operations. Text decorator decides how characters should be inserted or removed, how selected text region should be changed. By default editor have TwyNativeTextDecorator which inserts characters with usual logic where characters are inserted at cursor position and selection region are reset. But there is TwyMaskedTextDecorator which implements it differently. It overrides asterix characters of mask with inserted string and skips non asterix characters.
>
> You can see examples on available features in TwyTextMorph class side and in attached videos.
>
> Twisty. Text editor
> Twisty. Masked fields
> Twisty. Smart numbers
> Twisty. Smart Characters
> Twisty. Autoscrolling without scroll pane
> Twisty. PlaceHolder
> Twisty. Live tuning
>
> You can load code in Pharo 4 and 5 by:
>
> Gofer it
> smalltalkhubUser: 'dionisiy' project: 'Twisty';
> configurationOf: 'Twisty';
> loadStable
>
> Best regards,
> Denis
>
> <PharoScreenshot.9.png>

--
www.tudorgirba.com

"It's not what we do that matters most, it's how we do it."

Denis Kudriashov

Re: [ANN] Twisty, text with active state framework

In reply to this post by Nicolai Hess-3-2

Hi.

2015-11-27 8:57 GMT+01:00 Nicolai Hess <[hidden email]>:

Impressive!
How does it compare to Rubric or TxText ?

Rubric based on top of old Text objects.

I see some similarities with TxText (and you worked on TxText too?). Does it mean this is a more complete version of TxText. With similar
core and/or the same design.

Yes. Twisty was born from TxText. My contribution to It was only about editors and layouts. There was only text model at that time. And it state was not good. I realized that active text model will simplify anything. My idea was that text should announce any change. Cursor objects should subscribe on it and automatically restore state after changes. Without this logic any code which modifies text should know about any cursors and selections to restore it state.

I start refactor text model to implement my idea. And at that point Igor join project again. His idea was different. He not like active text. He was think that cursors should be immutable text positions. And any problems with it should be solved at higher level (not at text model level). Igor worked on it full time. But I had very limited free time for this. So I decided to fork this project and slowly implement my idea. It was interesting what it can provide. And now Twisty and TxText has no common parts. But structure of text model is very similar. It is kind of linked list.

There is big difference how text morphs build layouts and show it contents. Igor implemented very nice approach to layout and show only visible parts of text.

I'm not done it yet. But I implemented very optimized layout restoring algorithm where layout is not rebuilt completely after changes but only small parts of it is fixed. So no full scanning of text after changes. But for the first time morph layouts full text. And it take time for big texts.

It should not be very difficult to implement Igor approach (Twisty already know how to layout text regions). But it adds some complexity and I have no time for this .

For some cases different optimization should be done. If you want to show big text file you definitely don't want to load all this file into memory to build full text instance. Only visible part of file should be loaded as text and then you will need to show it fully. This case not requires current logic of TxText. It is different.

I know it will be better if Twisty will be based on TxText. But it is not. And I not know how difficult to implement same editors with TxText. Twisty implements active model to make it easy.

All classes are commented +1 for Twy -1 for Rubric :)

You should read it first :). I am sure comments should be improved.

What I like about rubrics textcomponents are the Text/Line decorations like in RubLipsumWithSegmentsExample (see screenshot).

Does Twy support this too?

Something can be done now. Something not :).

In Twisty you extend TwyTextMorph by implementing new kind of text tool TwyTextTool. For example look at TwySelectionTool. Text selection is actually same kind of decoration as underlines in rubric example. It shows selected region with specific background. Any tool in Twisty can provide "drawing text decoration" which can draw required text regions specifically.

Of course current hooks are not enough for particular cases. For example line numbers and icons on text margins are not supported. For that tools should be able to build margins and draw something on it.

Another absent thing: TwyTextMorph works with text instance. There is no way how to open it on text region. I saw such examples in Rubric when selected region was shown on separate panel. I want make text and text regions polymorphic to allow this case.