adobe-webplatform / brackets-css-shapes-editor

CSS Shapes Editor extension for Brackets / Adobe Edge Code

CSS Shapes Editor for Brackets

Extension for Brackets and Adobe Edge Code.

Adds an on-screen interactive editor for CSS Shapes values when in Live Preview mode.

How to Install

Simple:

• Open Brackets, and go to File > Extension Manager
• Search for "CSS Shapes Editor for Brackets"
• Click Install

From source

1. Open Brackets, and go to File > Extension Manager
2. Click Install from URL...
3. Enter this URL:

https://github.com/adobe-webplatform/brackets-css-shapes-editor

4. Click Install
5. Reload Brackets.

How to enable CSS Shapes

UPDATE September 2014: CSS Shapes are enabled since Google Chrome 37. If you're using Chrome 37+, this section is no longer relevant.

If you're using an older version of Chrome, here's how to enable the feature manually:

Before you use the shapes editor, you need to enable support for CSS Shapes in the LivePreview browser window. You need to do this even if you have already enabled CSS Shapes in another Google Chrome browser on your system.

To enable CSS Shapes:

1. Turn on LivePreview
2. Navigate to chrome://flags
3. Find the Enable experimental Web Platform features flag
4. Click Enable
5. Reload LivePreview.

Changelog

v1.1.0

• sync with shapes editor library v0.8.0
  • fixes various bugs related to reference boxes and percentage-based coordinates;
  • adds on-screen controls for polygon edit / transform modes;
  • uses minified version of library;
• removes keyboard shortcut (T key) to toggle polygon transform mode.
• removes handling & feature detection of shape-inside (obsolete from CSS Shapes Level 1)

License

MIT-licensed -- see main.js for details.

brackets-css-shapes-editor's Issues

Shapes editor: shape-inside / -webkit-shape-inside

Originally reported by @zhorvath in adobe/brackets#7962

Hi there,
I'm getting the following console error when trying to use shapes editor:

ConsoleAgent: shape-inside is not supported by this browser.
 Perhaps it is not enabled. See html.adobe.com/webplatform/enable in :21 /LiveDevelopment/Agents/ConsoleAgent.js:55
ConsoleAgent: -webkit-shape-inside is not supported by this browser.
 Perhaps it is not enabled. See html.adobe.com/webplatform/enable in :21 

We removed shape-inside support from WebKit&Blink in March (https://lists.webkit.org/pipermail/webkit-dev/2014-March/026391.html), since it's at Shapes Level 2. I recommend to remove the warning for shape-inside, since the release browsers won't have support for it in the foreseeable future.

Shapes Editor extension breaks Live Preview

We've had a few reports recently that this extension breaks Live Preview:

• adobe/brackets#9038
• https://groups.google.com/forum/?fromgroups#!searchin/brackets-dev/shapes/brackets-dev/72uta15RmrU/nl9lXAfta3cJ
• https://groups.google.com/forum/?fromgroups#!searchin/brackets-dev/shapes/brackets-dev/FMTmKnZ0K-k/k1bv5kcIbSEJ

Is this a known issue, or are there known cases that don't work?

Multiple shapes editor show up when converting shape-inside to shape-outside.

1. Open https://gist.github.com/RaymondLim/11295241 in Brackets.
2. Start Live Preview.
3. Move </div> on line 22 to the end of line 15.
4. Set cursor inside the circle function on line 9.
5. Change shape-inside property to shape-outside.
6. Set cursor inside the circle function again.
7. Add float: left; on a new line before/after shape-inside property.
8. Set cursor inside the circle function again.
9. In browser move the shapes editor.

Result: You will see two or three of them.

Shape GUI is missing.

Shapes GUI is missing from version 38 of Canary and version 36 of Chrome.
Bracket build: sprint 42 experimental build 0.42.0-13957 (release f9fcb884f)

chrome://flags/#enable-experimental-web-platform-features
Is enabled in both the local instance and the Brackets Live Preview instance.

OS: Win 7 Pro

I have attempted to use:

<style> .shape{ width: 400px; height: 400px; background-color: red; float: left; shape-outside: polygon(); } </style>

With no GUI.

Images available if needed.