adobe-webplatform / css-shapes-editor Goto Github PK

Right now, ref box computation assumes box-sizing is the browser default, content-box;

This fails: polygon(0 0, 800px 400px, 0 400px)
This works: polygon(nonzero, 0 0, 800px 400px, 0 400px)

Replaces old rectangle() shape fn

all shapes

• shapefn() reference-box

circle

• circle()
• circle(r)
• circle(r at cxy)
• circle(r at cx cy)

ellipse

• ellipse (rx xy)
• ellipse (rx ry at cxy)
• ellipse (rx ry at cx cy)

// TBD
'closest-side', 'farthest-side' for shape-radius

CSSUtils.getContentBoxOf(): there’s a TODO here about not handling cases other than content-box. Will that affect anything?

Editor.setupEditorHolder(): the way it calls itself back is a bit confusing - it seems like it would be clearer to just reverse the condition (i.e. if (!this.holder), create the element, and then do the other stuff after the if).

Editor.setupShapeDecoration(): the check for whether the path isn't already an array could just be !Array.isArray(path), I think.

Editor.turnOnFreeTransform()/turnOffFreeTransform(): could just reverse the conditions

PolygonEditor/CircleEditor/EllipseEditor.setup(): it looks like the event listeners added at the end of these functions are never removed.

PolygonEditor.inferShapeFromElement(): there’s a TODO here about not dealing with non-px units - is that a potential problem (e.g. might people want to use shapes for boxes that are sized in ems/rems)?

PolygonEditor.onMouseDown(): when checking the vertex index, don’t need to parseInt() since you’ve already determined that the type is “number” (similar code you have later doesn’t do the parseInt())

EllipseEditor.parseShape(): there’s a TODO here for handling centers other than the default 50% 50% - is that something we’ll be likely to encounter?

Right now, the editor will spawn its own holder container which is 100% and maximum z-index.

Because of this we can't have 2 shapes editors active and interactive at the same time on the same page (one overlaps the other).

Currently naively assuming center in 50% 50%
Consolidate compute method into CSSUtils for use by circle()

Acceptance tests:

• ellipse(closest-side at 10% 70%)
• ellipse(closest-side farthest-side at 10% 70%)
• ellipse(farthest-side closest-side at 10% 70%)
• ellipse(closest-side closest-side at -100px -100px) // yields zero-size ellipse

Right now, border radius has no effect when computing the ref box.

See http://www.w3.org/TR/css-shapes/#shapes-from-box-values

Code assumes box-sizing: content-box. Should check for and support box-sizing: border-box.

call .draw() on turn off.

The shape editor should remain property-agnostic. A default reference box should be provided considering the property it will be will be used with.

Default reference box is margin-box, to suit match default for shape-outside
For clip-path it should be border-box
For shape-inside it is yet to be defined, currently content-box

Ever since upgrading to Brackets 1.1, I had been having issues with the Brackets Live Preview where Chrome would launch but then lose the connection. I kept getting the message “Live Preview cancelled for unknown reason {(0)}”.

After a bit of trial and error—removing all extensions and adding them back in on-by-one—it turned out to be Adobe’s CSS Shapes Editor for Brackets extension that was causing the issues. I removed that and everything works fine again.

this.holder.style['background-image'] = "-webkit-linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%,transparent 75%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1) 100%), -webkit-linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%,transparent 75%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1) 100%)";
this.holder.style['background-size'] = "10px 10px";
this.holder.style['background-position'] = "0 0, 5px 5px";

TODO: sync with a snap-to-grid behavior

What would be involved with creating an editor for the d attribute of the path tag?