#25-Transparency by flooie · Pull Request #193 · edemaine/cocreate

flooie · 2021-09-04T14:29:39Z

PR Adds support for transparent pen, rect and ellipses.

I think this is more of a Draft than an actual PR, but I think it could be helpful to get some quick pointers.

It enables support for transparency, and while rather straightforward I do see some potential improvements, in both tool icon generation - tool color and toggling.

Fix whitespace install.md

Bug flipped if boolean to avoid dots appearing in highlights

Remove errant import

Generate opacity icons in a loop Cleanup the proof of concept into a cleaner working code

Cleanup more superflous code. Its amazing how you can see the excess on the third or fourth commit.

It just dawned on me that these variable are really not useful anymore allow25Percent allow50Percent allow75Percent

flooie · 2021-09-05T01:43:39Z

@edemaine I see you linked #25 but with a few changes this might also be able to tackle #173 ?

flooie · 2021-09-05T01:44:09Z

@edemaine -- also, I've kept changing the PR all day, but I think I have it where I'm now ready for you to tear it apart.

edemaine

Thanks for the PR, and sorry for the delay in reviewing! This is definitely on the right track, and is probably pretty close to being done. But I have a bunch of comments to do things in more Cocreate ways. If you'd rather do [some of] them, e.g. it's unclear what I mean, let me know.

edemaine · 2021-09-09T20:44:00Z

+  'opacity50':
+    '<circle cx="250" cy="250" r="200" fill-opacity="0.50"/>'
+  'opacity75':
+    '<circle cx="250" cy="250" r="200" fill-opacity="0.75"/>'


I think it would be better to draw these in the tool itself, like we do with line width.

sounds good. √

edemaine · 2021-09-09T20:44:19Z

-      click: (e) -> selectColorOrFill e, color
+      click: (e) ->
+        selectColorOrFill e, color
+        updateColorOpacity()


Should't need an explicit update call here; should use reactivity instead.

edemaine · 2021-09-09T20:50:51Z

 Tracker.autorun ->
  dom.classSet document.body, 'dark', dark.get()
+  allowTransparency.set false
+  currentOpacity.set 1.0


This is almost certainly the wrong place for this code. Tracker.autorun reruns this code whenever the dependencies (here, dark.get()) change. I don't think you want to reset these things whenever dark mode changes.

edemaine · 2021-09-09T20:51:06Z

    room.gridSnap.set not room.gridSnap.get()
+
+defineTool
+  name: 'Transparency'


Lower case for consistency

edemaine · 2021-09-09T20:53:45Z

      ,
        dataset: id: id
-    if simple
+    if simple or allowTransparency.valueCur != true


This (and test above) seems wrong: you're using simple rendering whenever the transparency tool is currently active. To see this fail, do some transparent drawing, and then reload the board: everything will be opaque. You should instead be looking at whether the object itself has transparency.

Also, should document that pressure sensitivity doesn't work with transparency mode. I think that's probably better than the messy dots along the way (until we can support actual transparency with varying line thickness, via <path> rendering).

yep ... I didn't quite understand what was going on in my first pass but I knew that the darn dots were ruining my beautiful transparent stroke.

edemaine · 2021-09-09T21:00:18Z

+
+
+# These values are chosen for no particular reason.  I saw that
+# 12.5 was a number you liked for highlighting Perhaps .25 should be 12.5


Where did you see 12.5? Ah, 0x20 in #139. That's not me, but may be useful guideline. I'll need to experiment.

I leave this to your wysdom

edemaine · 2021-09-09T21:02:44Z

+    allowTransparency.set not allowTransparency.get()
+    updateOpacity 1.0, allowTransparency.curValue
+  init: ->
+    updateOpacity 1.0, false


Calls to updateOpacity should be replaced with just setOpacity.

edemaine · 2021-09-09T21:05:34Z

+
+  buttons = document.querySelectorAll('[data-tool^="Opacity"]')
+  for button in buttons
+    button.style.display = if display then "block" else "none"


Since the move to React, we don't want to manipulate widget DOM directly like this. Instead, add to DrawApp something like:

transparency = useTracker -> allowTransparency.get() ... {if transparency <div id="opacities" className="subpalette"> <ToolCategory category="opacity" placemen="top"/> </div> }

thanks for making that easier for me

edemaine · 2021-09-09T21:07:35Z

+  allowTransparency.set display
+
+  if currentOpacity.get() == val
+    currentOpacity.set 1.0


I don't like resetting currentOpacity to 1 when toggling the mode off. I'd rather keep the same opacity when I leave and re-enter transparent mode. Similar to how fill mode works, we should have a Boolean currentOpacityOn, which should replace the current allowTransparency.

Similarly, I don't like that clicking on the transparent mode for the first time doesn't immediately turn on transparency. It (and thus currentOpacity) should start at a global default (maybe 50%?), so one of the specific buttons starts down as well.

bye bye allowTransparency. √

edemaine · 2021-09-09T21:08:28Z

          pts: [xywType]
          color: String
          width: Number
+          opacity: Number


These should probably be made optional in the same way as fill.

I think I did it right but I basically aped some other code

flooie · 2021-09-11T00:08:44Z

@edemaine I think I hit most or all of your changes. Thanks - it should be much more cocreate-y

edemaine · 2021-09-11T00:15:25Z

@flooie Please push your changes...

flooie · 2021-09-11T00:23:42Z

@edemaine lol - thats embarrassing.

… 25-add-transparency

edemaine · 2021-09-12T16:54:44Z

Thanks @flooie for working on this! I'm excited to play around with it (and we'll see whether 25, 50, 75 are the right options in practice). It'll be deployed within the next ~30 minutes.

flooie added 5 commits September 3, 2021 20:51

chore(test): white space install.md

ca70903

feat(icons): Add Highlighter svg

6f276e3

Fix whitespace install.md

feat(icons.coffee): Add opacity and highlighter icons

14fe228

feat(app): Add opacity to cocreate

7777c14

feat(renderObjects): Add opacity for rect and ellipses

882382d

edemaine linked an issue Sep 4, 2021 that may be closed by this pull request

Transparency #25

Open

5 tasks

flooie added 7 commits September 4, 2021 15:03

feat(color.coffee): Add color to opacity filters on color selection

c0b57e0

fix(RenderObjects): Use simple rendering with transparency

047d724

Bug flipped if boolean to avoid dots appearing in highlights

fix(settings): Eslint import error

ab1e7ee

Remove errant import

refactor(settings.coffee): D.R.Y.

5c7528f

Generate opacity icons in a loop Cleanup the proof of concept into a cleaner working code

docs(settings.coffee): Add comment

92901e2

refactor(settings.coffee): DRY

3bdf3e7

Cleanup more superflous code. Its amazing how you can see the excess on the third or fourth commit.

refactor(settings.coffee): Remove unneeded variables

e13ce26

It just dawned on me that these variable are really not useful anymore allow25Percent allow50Percent allow75Percent

flooie added 2 commits September 6, 2021 15:15

docs(readme.md): Add comment about transparent icon

02740d1

fix(README.md): Lint fix for README

508809c

edemaine requested changes Sep 9, 2021

View reviewed changes

flooie added 2 commits September 10, 2021 08:54

fix(settings): Name and help text

c8f4b3d

refactor(cocreate): PR requests

01c2275

flooie requested a review from edemaine September 11, 2021 00:08

edemaine and others added 6 commits September 11, 2021 12:33

Fix when to use simple mode

da46d1a

Move currentOpacityOn to AppState

2c09627

Revert unneeded change

92838f7

Correctly handle opacity off

2725ddf

Code cleanup

3943ea5

fix(settings.coffee): Lint error

b9e0dc2

edemaine added 10 commits September 11, 2021 16:50

Refactor to client/tools/opacity.coffee

48710ce

Fix opacity + dark mode

eaa386e

Enable changing opacity of selection

5fa01f6

Update opacity attribute to match selection

94470fe

Add gradient behind opacity circles

774b863

Merge branch '25-add-transparency' of github.com:flooie/cocreate into…

cca005d

… 25-add-transparency

Support opacity in text and image objects

96cbbf6

Move transparency docs

9172fe1

Rebuild doc icons

4b92314

Rewrite docs

39b3fb9

edemaine removed a link to an issue Sep 12, 2021

Transparency #25

Open

5 tasks

edemaine approved these changes Sep 12, 2021

View reviewed changes

edemaine added 2 commits September 12, 2021 12:45

Update changelog

28e472e

Small fixes

95d27ed

edemaine merged commit d0f79ad into edemaine:main Sep 12, 2021



		# These values are chosen for no particular reason. I saw that
		# 12.5 was a number you liked for highlighting Perhaps .25 should be 12.5

Conversation

flooie commented Sep 4, 2021

Uh oh!

flooie commented Sep 5, 2021

Uh oh!

flooie commented Sep 5, 2021

Uh oh!

edemaine left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

edemaine Sep 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

flooie commented Sep 11, 2021

Uh oh!

edemaine commented Sep 11, 2021

Uh oh!

flooie commented Sep 11, 2021

Uh oh!

edemaine commented Sep 12, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

edemaine Sep 9, 2021 •

edited

Loading