Git Product home page Git Product logo

Comments (8)

cmtonkinson avatar cmtonkinson commented on July 26, 2024

Duplicate of #8

from rulerz.

JohnMurga avatar JohnMurga commented on July 26, 2024

Not really ...
But I guess the net effect is similar : atom/atom#7204
I raised the issue on Atom also as it affects a few packages on 208 (while 207 is fine)

from rulerz.

cmtonkinson avatar cmtonkinson commented on July 26, 2024

@JohnMurga looks like you're right, these are distinct-but-related changes that happened in quick succession.

from rulerz.

cmtonkinson avatar cmtonkinson commented on July 26, 2024

Going to investigate using Markers instead of relying on manipulating layers in the editor directly.

from rulerz.

JohnMurga avatar JohnMurga commented on July 26, 2024

I got a response that may be useful ...
atom/atom#7204 (comment)

from rulerz.

cmtonkinson avatar cmtonkinson commented on July 26, 2024

Good call, @JohnMurga. Inserting into the shadowRoot gets it closer, but still having issues. First, the ruler gets thrown off horizontally by e.g. having line numbers enabled, and second, when the ruler is positioned correctly, it overlays the cursor so you don't see the blink effect.

Opacity could be a solution to the latter but it's probably not worth thinking too hard about before we figure out if adding a custom element to the shadowRoot is even the right way to move forward. Considered using Markers instead of "manual" DOM manipulation - thoughts anyone?

from rulerz.

cmtonkinson avatar cmtonkinson commented on July 26, 2024

Another idea entirely is to replace all of the JS code with a pure-CSS solution. The following is a rough draft:

atom-text-editor.is-focused::shadow {
  .cursors {
    .cursor::before {
      content: " ";
      display: block;
      height: 100%;
      width: 1px;
      transform: translateX(-0px) scaleY(1000);
      border-left: 1px solid @text-color-subtle;
      overflow: hidden;
    }
  }
}

Two problems with this approach though:

  1. The ruler blinks with the cursor (and since .cursors.blink-off uses opacity instead of rgba, I don't see a clean way around this)
  2. Using translateX(-1px) to align the ruler perfectly with the cusor, hides the cursor (even when setting a negative z-index to try to force the ruler "behind" the cursor)

from rulerz.

cmtonkinson avatar cmtonkinson commented on July 26, 2024

Instead of appending the Element to the old underlayer, it is now appended to the .lines div within the ShadowRoot of the editor. If this isn't best practice, someone holler - this editor moves too damn fast for me to keep up with standards sometimes, especially in the face of all this 1.0 deprecation ;-)

from rulerz.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.