Scrollable NSTextView with custom NSTextStorage for formatting - swift

I'm trying to make a text editor with formatting for Mac OS. Which I have working using an NSTextView together with a custom NSTextStorage class. Which applies attributes like bold etc to NSAttributableStrings.
This all seems to work fine as seen in screenshot one below. Which is an NSTextView with a custom NSTextStorage class attached to it. Which applies the formatting through attributes on an NSAttributeableString
However, having everything the same, but getting a scrollable NSTextView from the Apple supplied function NSTextView.scrollableTextView() it does not display any text at all. Even though you can see in the screenshot that the NStextView is actually visible. Also, moving my mouse over the editor changes the cursor to the editor cursor. But I can't select, type or do anything.
Doing the exact same thing as above, but not supplying a text container to the text view does show that it is wired up correctly, since I do get a scrollable text view then. Where the scrolling actually works, but then of course the formatting is no longer applied.
So I'm confused on what I have to do now.
This is basically my setup:
//
// TextDocumentViewController.swift
//
// Created by Matthijn on 15/02/2022.
// Based on LayoutWithTextKit2 Sample from Apple
import Foundation
import AppKit
class TextDocumentViewController: NSViewController {
// Extends NSTextStorage, applies attributes to NSAttributeAbleString for formatting
private var textStorage: TextStorage
// Not custom yet, default implementation - do I need to subclass this specifically and implement something to support the scrolling behaviour? Which seems weird to me since it does work without scrolling support
private var layoutManager: NSLayoutManager
// Also default implementation
private var textContainer: NSTextContainer
private var textDocumentView: NSTextView
private var scrollView: NSScrollView
required init(content: String) {
textStorage = TextStorage(editorAttributes: MarkdownAttributes)
layoutManager = NSLayoutManager()
textStorage.addLayoutManager(layoutManager)
textContainer = NSTextContainer()
// I'm not 100% sure if I need this on false or true or can just do defaults. No combination fixes it
// textContainer.heightTracksTextView = false
// textContainer.widthTracksTextView = true
layoutManager.addTextContainer(textContainer)
scrollView = NSTextView.scrollableTextView()
textDocumentView = (scrollView.documentView as! NSTextView)
// Basically commenting this out, stops applying my NSTextContainer, NSLayoutManager and NSTextContainer, but then of course the formatting is not applied. This one line changes it between it works without formatting, or it doesn't work at all. (Unless I have my text view not embedded in a scroll view) then it works but the scrolling of course then does not work.
textDocumentView.textContainer = textContainer
textDocumentView.string = content
textDocumentView.isVerticallyResizable = true
textDocumentView.isHorizontallyResizable = false
super.init(nibName: nil, bundle: nil)
}
override func loadView() {
view = scrollView
}
}

You can actually create the NSScrollView instance with scrollableTextView() and you can get the implicitly created documentView (NSTextView).
Finally, one can assign the existing LayoutManager of the documentView to the own TextStorage class inheriting from NSTextStorage.
In viewDidLoad you could then add the scrollView traditionally to the view using addSubview:. For AutoLayout, as always, translatesAutoresizingMaskIntoConstraints must be set to false.
With widthAnchor and a greaterThanOrEqualToConstant you can define a minimum size, so the window around it cannot be made smaller by the user. The structure also allows potential later simple extensions with additional sticky views (e.g. breadcrumb view etc).
Code
If you implement it this way, then for a small minimal test it might look something like this.
import Cocoa
class ViewController: NSViewController {
private var scrollView: NSScrollView
private var textDocumentView: NSTextView
required init(content: String) {
scrollView = NSTextView.scrollableTextView()
let textDocumentView = scrollView.documentView as! NSTextView
self.textDocumentView = textDocumentView
let textStorage = TextStorage(editorAttributes: MarkdownAttributes())
textStorage.addLayoutManager(textDocumentView.layoutManager!)
textDocumentView.string = content
super.init(nibName: nil, bundle: nil)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func viewDidLoad() {
super.viewDidLoad()
scrollView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(scrollView)
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: view.topAnchor),
scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
scrollView.widthAnchor.constraint(greaterThanOrEqualToConstant: 200.0),
scrollView.heightAnchor.constraint(greaterThanOrEqualToConstant: 200.0),
])
}
override func loadView() {
self.view = NSView()
}
}
Test
Here's a quick test showing that both display and scrolling work as expected with the setup:

Related

How to give an NSOutlineView a tiled background image that scrolls?

I have a standard NSOutlineView. I would like it to have a background image, which tiles vertically, and which scrolls together with the outline view cells.
I've somewhat achieved this using the following in my ViewController:
class ViewController: NSViewController {
#IBOutlet weak var outlineView: NSOutlineView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
if let image = NSImage(named: "tile") {
let color = NSColor.init(patternImage: image)
outlineView.backgroundColor = color
}
}
}
That works, except when you scroll past the top or bottom of the view (with the stretch provided by the containing scroll view).
I've tried putting the background image on the scroll view, but then it is static and doesn't scroll with the outline view's content.
I've also tried subclassing various objects in the view hierarchy and overriding their draw(_ dirtyRect: NSRect) method and doing:
self.wantsLayer = true
self.layer?.backgroundColor = ...etc
but got no success from that either.
Can anyone provide any suggestions?
I ended up creating a new custom NSView:
class MyView: NSView {
override func draw(_ dirtyRect: NSRect) {
if let image = NSImage(named: "Tile") {
let color = NSColor.init(patternImage: image)
color.setFill()
dirtyRect.fill()
}
super.draw(dirtyRect)
}
}
Then in my ViewController class I added an instance of the custom view, and used autolayout constraints to pin the new view to my outlineView's clip view starting 2000points above it, and ending 2000 below. This means no matter how far you over-scroll into the stretch area, you still see the tiled background.
class MyViewController: NSViewController {
#IBOutlet weak var outlineView: NSOutlineView!
override func viewDidLoad() {
super.viewDidLoad()
guard let clipView = self.outlineView.superview else { return }
let newView = MyView(frame: .zero) // Frame is set by autolayout below.
newView.translatesAutoresizingMaskIntoConstraints = false
clipView.addSubview(newView, positioned: .below, relativeTo: self.outlineView)
// Add autolayout constraints to pin the new view to the clipView.
// See https://apple.co/3c6EMcH
newView.leadingAnchor.constraint(equalTo: clipView.leadingAnchor).isActive = true
newView.widthAnchor.constraint(equalTo: clipView.widthAnchor).isActive = true
newView.topAnchor.constraint(equalTo: clipView.topAnchor, constant: -2000).isActive = true
newView.bottomAnchor.constraint(equalTo: clipView.bottomAnchor, constant: 2000).isActive = true
}
}
I've removed other code from the above so hopefully I've left everything needed to illustrate the solution.

Any way to opt out of autoresizing permanently?

I'm writing nib-less views in which I use autolayout for all my layout logic. I find myself having to turn off autoresizing with every view I instantiate. My code is littered with a lot of these:
view.translatesAutoresizingMaskIntoConstraints
Ideally I'd like to just
extension UIView/NSView {
override var translatesAutoresizingMaskIntoConstraints: Bool = false
}
and get it over with once and for all, but extensions can't override stored properties.
Is there some other simple way to switch off autoresizing for good?
Well just a suggestion since its annoying to always set that to false, just setup a function with all the shared setups for the UIView and call it every time,
its saves time and its kinda less annoying than trying and setting the values each time,
extension UIView {
func notTranslated() {
self.translatesAutoresizingMaskIntoConstraints = false
//Add any additional code.
}
}
//Usage
let view = UIView()
view.notTranslated()
You can't override this constraints properties because the UIView maybe declared in the IB
translatesAutoresizingMaskIntoConstraints according to apple.
By default, the property is set to true for any view you programmatically create. If you add views in Interface Builder, the system automatically sets this property to false.
imagine if you could override that from an extension that would lead to some conflicts if there was other UIView's that's have the opposite value True || false, so in my opinion:
Apple did this to prevent any conflicts with the views constrains, therefore if you don't like to write it every time just wrap it up in a function.
Please if anyone have additional information, don't hesitate to contribute.
UPDATE: I found this cool answer that could also work, check out the code below.
class MyNibless: UIView {
//-----------------------------------------------------------------------------------------------------
//Constructors, Initializers, and UIView lifecycle
//-----------------------------------------------------------------------------------------------------
override init(frame: CGRect) {
super.init(frame: frame)
didLoad()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
didLoad()
}
convenience init() {
self.init(frame: CGRect.zero)
}
func didLoad() {
//Place your initialization code here
//I actually create & place constraints in here, instead of in
//updateConstraints
}
override func layoutSubviews() {
super.layoutSubviews()
//Custom manually positioning layout goes here (auto-layout pass has already run first pass)
}
override func updateConstraints() {
super.updateConstraints()
//Disable this if you are adding constraints manually
//or you're going to have a 'bad time'
//self.translatesAutoresizingMaskIntoConstraints = false
translatesAutoresizingMaskIntoConstraints = false
//Add custom constraint code here
}
}
var nibless: UIView = MyNibless()
//Usage
nibless.updateConstraints()
print(nibless.translatesAutoresizingMaskIntoConstraints) //false
So simply just create MyNibless instance as UIView and this also open big door to customizations too

Custom UIView retained in memory

I am having an annoying memory issue with a custom UIView when trying to add it as a tableView footer in a VC. Here is what I do:
I declare a custom UIView class called tableViewHeader. My footer is supposed to display a logo and some text, so it has 2 global variables (a UIImage View & a TextView) and one init method to initialize this UIView class (i.e., by adding the two subViews and set some constraints).
In my VC, in the TableView's footerForSection method I declare a new tableViewFooter variable, set the sub-views (attach my PNG, etc.)
and return that view.
The code works fine to display the footer but it wrecks havoc on my memory - the moment I run my app and open the VC that contains that tableViewHeader my memory jumps by ~20MB (~ 20% jump) and doesn't get released once my VC is released (I checked, the VC itself gets correctly de-initialized but it doesn't show any drop in memory).
I tested a few things:
Without adding that footerView and opening/ closing the VC doesn't show that 20MB jump, so I am fairly sure that this is caused by this custom tableViewHeader...
I also checked to make sure the UIImage I load from my Assets is not too large but it's only 200Kb. On top the problem is more the fact that the memory doesn't get released after my VC gets released...
I've tried declaring my variables (the tableViewFooter variable and the sub-views within that new class) but that leaves my variables as nil when I try to add them as sub-views...
I am running out of ideas as to what the culprit is/ how to fix it so any help you could give me would be really highly appreciated!
My code is below - thanks in advance!
Francois
My TableFooterView class:
class MessageTableFooterView: UIView {
var shouldUpdateConstraints = true
var logoView: UIImageView!
var explanationTextView: UITextView!
var addFriendBtn: UIButton!
override init(frame: CGRect){
super.init(frame: frame)
logoView = UIImageView(frame: CGRect.zero)
logoView?.autoSetDimension(.height, toSize: 145)
logoView?.autoSetDimension(.width, toSize: 145)
self.addSubview(logoView)
explanationTextView = UITextView(frame: CGRect.zero)
explanationTextView?.isEditable = false
explanationTextView?.isSelectable = false
explanationTextView?.font = UIFont(name: "HelveticaNeue", size: 17)
explanationTextView?.textColor = .darkGray
explanationTextView?.textAlignment = .center
self.addSubview(explanationTextView)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
My tableView viewForFooter Method:
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
if MessageService.instance.savedMsgs.count > 0 {
return nil
} else {
let headerView = MessageTableFooterView(frame: CGRect.zero)
headerView.logoView.image = UIImage(named: "savedMessagesIcon")
headerView.explanationTextView?.text = "Blablabla"
return headerView
}
}

editable nstextview from interface builder

I'm unable get to edit an nstextview.
Here is the steps I tried.
From the interface builder, I dragged dropped a "Custom view" into another view. (I couldnt find a nstextview there.)
I changed the class of the Custom view form "NSView" to "NSTextView"
Next I run my project, I can see the text view getting rendered (the mouse cursor changed to text-mode on the mouse-hover of text view area)
However, I have not been able to insert/type/edit any text.
Note: I have tried setEditable, setSelectable & set firstResponder options recommended in other posts, which did not help.
The problem is that the textStorage is not set up correctly on the NSTextView when you use Interface Builder in the way described.
I too wanted to use an NSTextView, without scrollView, in InterfaceBuilder. In Xcode 10 it doesn't seem possible to put a lone NSTextView in some custom view hierarchy (earlier answers have hinted that this was possible: https://stackoverflow.com/a/2398980/978300).
It is possible to get this working with the "CustomView" method in the question - however, this will only have the simple NSView properties in the Attributes inspector (i.e. you won't be able to customise font etc). You could pass some details through using #IBInspectable on your custom class.
The Connections Inspector seems to work correctly.
Example NSTextView subclass...
class MyTextView: NSTextView
{
// init(frame: sets up a default textStorage we want to mimic in init(coder:
init() {
super.init(frame: NSRect.zero)
configure()
}
/*
It is not possible to set up a lone NSTextView in Interface Builder, however you can set it up
as a CustomView if you are happy to have all your presentation properties initialised
programatically. This initialises an NSTextView as it would be with the default init...
*/
required init(coder: NSCoder) {
super.init(coder: coder)!
let textStorage = NSTextStorage()
let layoutManager = NSLayoutManager()
textStorage.addLayoutManager(layoutManager)
// By default, NSTextContainers do not track the bounds of the NSTextview
let textContainer = NSTextContainer(containerSize: CGSize.zero)
textContainer.widthTracksTextView = true
textContainer.heightTracksTextView = true
layoutManager.addTextContainer(textContainer)
replaceTextContainer(textContainer)
configure()
}
private func configure()
{
// Customise your text here...
}
}

NSViewController story board with coded anchors collapses window

I'm having trouble mixing story boards and coded autolayout in Cocoa + Swift. It should be possible right?
I started with a NSTabViewController defined in a story board with default settings as dragged out of the toolbox. I added an NSTextField view via code. And I added anchors. Everything works as expected except the bottom anchor.
After adding the bottom anchor, the window and controller seem to collapse to the size of the NSTextField. I expected the opposite, that the text field get stretched to fill the height of the window.
What am I doing wrong? The literal Frame maybe? Or some option flag that I'm not setting?
class NSTabViewController : WSTabViewController {
var summaryView : NSTextField
required init?(coder: NSCoder) {
summaryView = NSTextField(frame: NSMakeRect(20,20,200,40))
summaryView.font = NSFont(name: "Menlo", size: 9)
super.init(coder: coder)
}
override func viewDidLoad() {
self.view.addSubview(summaryView)
summaryView.translatesAutoresizingMaskIntoConstraints = false
summaryView.topAnchor.constraintEqualToAnchor(self.view.topAnchor, constant: 5).active = true
summaryView.leftAnchor.constraintEqualToAnchor(self.view.leftAnchor, constant: 5).active = true
summaryView.rightAnchor.constraintEqualToAnchor(self.view.rightAnchor, constant: -5).active = true
summaryView.bottomAnchor.constraintEqualToAnchor(self.view.bottomAnchor, constant: -5).active = true
}
To prevent window from collapsing set lower priority for hugging:
summaryView.setContentHuggingPriority(249, forOrientation: .Vertical)
But you actually misuse tab view controller. It just manages views in common use... while you are adding text to the tab header area. There is a very good tutorial of how to use it correctly: https://www.youtube.com/watch?v=TS4H3WvIwpY