Support svg clip-path

kode-team · Jun 17, 2019 · ba6f842 · ba6f842
1 parent 749081b
commit ba6f842
Show file tree

Hide file tree

Showing 13 changed files with 188 additions and 103 deletions.
diff --git a/docs/bundle.css b/docs/bundle.css
@@ -4499,12 +4499,16 @@ html, body {
 .csseditor .svg-property-editor .svg-property-list .svg-property-item {
   display: block;
 }
+.csseditor .svg-property-editor .svg-property-list .svg-property-item:last-child .title {
+  border-bottom: 1px solid #cccccc;
+}
 .csseditor .svg-property-editor .svg-property-list .svg-property-item .title {
   padding: 5px 2px;
   box-sizing: border-box;
   display: grid;
-  grid-template-columns: 50px 1fr 30px;
+  grid-template-columns: 70px 1fr 30px;
   border: 1px solid #cccccc;
+  border-bottom: 0px;
   cursor: pointer;
 }
 .csseditor .svg-property-editor .svg-property-list .svg-property-item .title .type {
@@ -4518,6 +4522,11 @@ html, body {
   background-color: blue;
   color: white;
 }
+.csseditor .svg-property-editor .svg-property-list .svg-property-item .title .type[data-type=clip-path] {
+  border-radius: 5px;
+  background-color: red;
+  color: white;
+}
 .csseditor .svg-property-editor .svg-property-list .svg-property-item .title label {
   font-size: 12px;
   padding: 2px 5px;
@@ -5464,48 +5473,14 @@ html, body {
   width: 16px;
   height: 16px;
 }
-.csseditor .popup.svg-property-editor-popup .box .offset-input {
-  padding: 5px 0px;
-}
-.csseditor .popup.svg-property-editor-popup .box .offset-input input {
-  width: 104px;
-}
-.csseditor .popup.svg-property-editor-popup .box .keyframe-property-list {
-  max-height: 300px;
-  overflow: auto;
-}
-.csseditor .popup.svg-property-editor-popup .box .keyframe-property-item {
-  box-sizing: border-box;
-  padding: 4px 0px;
-  margin-top: 2px;
-}
-.csseditor .popup.svg-property-editor-popup .box .keyframe-property-item .title {
-  grid-template-columns: 1fr 30px;
-}
-.csseditor .popup.svg-property-editor-popup .box .keyframe-property-item .value-editor {
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  padding: 2px;
-}
-.csseditor .popup.svg-property-editor-popup .box .keyframe-property-item .tools button {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background-color: transparent;
-  outline: none;
-  cursor: pointer;
-  border: 0px;
-}
-.csseditor .popup.svg-property-editor-popup .box .keyframe-property-item .tools button svg {
-  width: 16px;
-  height: 16px;
-  vertical-align: middle;
-}
 .csseditor .popup.svg-property-editor-popup .box label {
   font-size: 12px;
   text-align: left;
   vertical-align: middle;
 }
-.csseditor .popup.svg-property-editor-popup .box input,
+.csseditor .popup.svg-property-editor-popup .box input[type=range],
+.csseditor .popup.svg-property-editor-popup .box input[type=number],
+.csseditor .popup.svg-property-editor-popup .box input[type=text],
 .csseditor .popup.svg-property-editor-popup .box select {
   width: 100%;
   vertical-align: middle;

diff --git a/docs/bundle.css.gz b/docs/bundle.css.gz
diff --git a/docs/main.js b/docs/main.js
diff --git a/docs/main.js.gz b/docs/main.js.gz
diff --git a/src/csseditor/ui/control/panel/property-editor/SVGClipPathEditor.js b/src/csseditor/ui/control/panel/property-editor/SVGClipPathEditor.js
@@ -0,0 +1,66 @@
+import { html } from "../../../../../util/functions/func";
+import icon from "../../../icon/icon";
+import { EMPTY_STRING } from "../../../../../util/css/types";
+import UIElement from "../../../../../util/UIElement";
+import { CHANGE, CLICK } from "../../../../../util/Event";
+
+
+export default class SVGClipPathEditor extends UIElement {
+
+  initState() {
+    return {
+      fit: !!this.props.value.fit,
+      icon: this.props.value.icon || ''
+    }
+  }
+
+  template() {
+
+    var checked = this.state.fit ? 'checked="checked"' : EMPTY_STRING
+
+    return html`
+      <div class='svg-clip-path-editor clippath-list'>
+          <div class='label' >
+              <label>${this.props.title || ''}</label>
+              <div class='tools'>
+              </div>
+          </div>
+          <div>
+            <label>Fit to size <input type='checkbox' ref='$fit' ${checked}  /> </label>
+          </div>
+          <div>
+            <select ref="$clippathSelect">
+            ${Object.keys(icon).map(iconName => {
+              var selected = this.state.icon === iconName ? 'selected' : ''; 
+              return `<option value='${iconName}' ${selected}>${iconName}</option>`;
+            }).join(EMPTY_STRING)}
+          </select>
+          </div>
+      </div>`;
+  }
+
+  updateData (data = {}) {
+    this.setState(data, false)
+
+    this.modifyClipPath()
+  }
+
+  [CLICK('$fit')] () {
+
+    this.updateData({ 
+      fit : this.refs.$fit.checked()
+    })
+  }
+
+  [CHANGE('$clippathSelect')] () {
+    this.updateData({ 
+      icon : this.refs.$clippathSelect.value
+    })
+  }
+
+  modifyClipPath () {
+    var {icon ,fit } = this.state
+    this.parent.trigger(this.props.onchange, this.props.key, {icon, fit} )
+  }
+
+}
diff --git a/src/csseditor/ui/control/panel/property-editor/SVGPropertyEditor.js b/src/csseditor/ui/control/panel/property-editor/SVGPropertyEditor.js
@@ -13,13 +13,19 @@ import UIElement, { EVENT } from "../../../../../util/UIElement";
 import RangeEditor from "./RangeEditor";
 import ColorViewEditor from "./ColorViewEditor";
 import { uuidShort } from "../../../../../util/functions/math";
+import { EMPTY_STRING } from "../../../../../util/css/types";
 
 
 var propertyList = [
-  "filter",
-  "clippath"
+  {type: "filter", title: 'FILTER' },
+  {type: "clip-path", title: 'CLIP-PATH' }
 ];
 
+var propertyTitle = {
+  'filter': 'FILTER',
+  'clip-path': 'CLIP-PATH'
+}
+
 export default class SVGPropertyEditor extends UIElement {
 
   components() {
@@ -43,7 +49,7 @@ export default class SVGPropertyEditor extends UIElement {
               <div class='tools'>
                 <select ref="$propertySelect">
                   ${propertyList.map(property => {
-                    return `<option value='${property}'>${property}</option>`;
+                    return `<option value='${property.type}'>${property.title}</option>`;
                   })}
                 </select>
                 <button type="button" ref="$add" title="add Property">${icon.add} ${this.props.title ? '' : 'Add'}</button>
@@ -57,8 +63,10 @@ export default class SVGPropertyEditor extends UIElement {
     return `
       <div class='svg-property-item' data-type='${property.type}' data-index='${index}' draggable="true">
         <div class='title'>
-          <div class='type' data-type="${property.type}">${property.type}</div>
-          <label>${property.name}</label>
+          <div class='type' data-type="${property.type}">${propertyTitle[property.type]}</div>
+          <label>${property.name}
+            ${property.type === 'clip-path' ? ' - ' + property.value : EMPTY_STRING}
+          </label>
           <div class='menu'>
             <button type="button" class='del'>${icon.remove2}</button>
           </div>
@@ -142,7 +150,9 @@ export default class SVGPropertyEditor extends UIElement {
 
     this.emit('showSVGPropertyPopup', {
       changeEvent: 'changeSVGPropertyPopup',
-      ...current
+      name: current.name, 
+      type: current.type,
+      value: current.value
     })
   }
 

diff --git a/src/csseditor/ui/control/panel/property-editor/index.js b/src/csseditor/ui/control/panel/property-editor/index.js
@@ -24,8 +24,10 @@ import SVGPropertyEditor from "./SVGPropertyEditor";
 import SVGFilterEditor from "./SVGFilterEditor";
 import TextEditor from "./TextEditor";
 import NumberRangeEditor from "./NumberRangeEditor";
+import SVGClipPathEditor from "./SVGClipPathEditor";
 
 export default {
+    SVGClipPathEditor,
     NumberRangeEditor,
     TextEditor,
     SVGFilterEditor,

diff --git a/src/csseditor/ui/control/popup/ClipPathPopup.js b/src/csseditor/ui/control/popup/ClipPathPopup.js
@@ -5,6 +5,7 @@ import { LOAD } from "../../../../util/Event";
 import { ClipPath } from "../../../../editor/css-property/ClipPath";
 import CircleEditor from "../panel/property-editor/clip-path/CircleEditor";
 import SelectEditor from "../panel/property-editor/SelectEditor";
+import { editor } from "../../../../editor/editor";
 
 export default class ClipPathPopup extends UIElement {
 
@@ -60,7 +61,16 @@ export default class ClipPathPopup extends UIElement {
     case 'path':
       return `<PathEditor ref='$path' key='path' value='${this.state.value}' onchange='changeClipPath' />`
     case 'svg':
-        return `<SvgEditor ref='$svg' key='svg' value='${this.state.value}' onchange='changeClipPath' />`
+
+        var current = editor.selection.current || {svg: []} 
+
+        var options = current.svg.filter(it => it.type === 'clip-path').map(it => it.name).join(',')
+
+        if (options.length) {
+          options = ',' + options
+        }
+
+        return `<SelectEditor ref='$svg' key='svg' value='${this.state.value}' options='${options}' onchange='changeClipPath' />`
     default: 
       return `<div class='type none'></div>`
     }

diff --git a/src/csseditor/ui/control/popup/SVGPropertyPopup.js b/src/csseditor/ui/control/popup/SVGPropertyPopup.js
@@ -3,12 +3,14 @@ import { Length } from "../../../../editor/unit/Length";
 import { CHANGE_EDITOR, CHANGE_SELECTION } from "../../../types/event";
 import { INPUT, LOAD } from "../../../../util/Event";
 import SVGFilterEditor from "../panel/property-editor/SVGFilterEditor";
+import SVGClipPathEditor from "../panel/property-editor/SVGClipPathEditor";
 
 export default class SVGPropertyPopup extends UIElement {
 
   components() {
     return {
-      SVGFilterEditor
+      SVGFilterEditor,
+      SVGClipPathEditor
     }
   }
 
@@ -45,6 +47,12 @@ export default class SVGPropertyPopup extends UIElement {
             <property name="value" type="json">${JSON.stringify(this.state.value)}</property>
           </SVGFilterEditor>
         `
+      case 'clip-path':
+        return `
+          <SVGClipPathEditor ref='$clippath' title="SVG Clip Path" key="clip-path" onchange='changeClipPathEditor'>
+            <property name="value" type='json'>${JSON.stringify(this.state.value)}</property>
+          </SVGClipPathEditor>
+        `
     }
 
     return ``
@@ -56,6 +64,12 @@ export default class SVGPropertyPopup extends UIElement {
     })
   }
 
+  [EVENT('changeClipPathEditor')] (key, value) {
+    this.updateData({
+      value
+    })
+  }  
+
   templateForName() {
     return `
       <div class='name'>
@@ -84,6 +98,7 @@ export default class SVGPropertyPopup extends UIElement {
   }
 
   [EVENT("showSVGPropertyPopup")](data) {
+    console.log(data);
     this.setState(data);
     this.refresh()
 

diff --git a/src/editor/css-property/ClipPath.js b/src/editor/css-property/ClipPath.js
@@ -24,11 +24,11 @@ export class ClipPath extends Property {
             case 'inset':
             case 'ellipse':
             case 'polygon':
-            case 'svg':
-                results = `${type}(${value})`;
-                break;
             case 'path':
-                results = `${type}('${value}')`
+                results = `${type}(${value})`;
+                break;                
+            case 'svg':
+                results = `url(#${value})`;
                 break;
             default: 
                 results = 'none';

diff --git a/src/editor/items/DomItem.js b/src/editor/items/DomItem.js
@@ -1,4 +1,4 @@
-import { NEW_LINE_2, NEW_LINE } from "../../util/css/types";
+import { NEW_LINE_2, NEW_LINE, EMPTY_STRING } from "../../util/css/types";
 import { CSS_TO_STRING, CSS_SORTING } from "../../util/css/make";
 import { Length } from "../unit/Length";
 import { Display } from "../css-property/Display";
@@ -14,6 +14,34 @@ import { Animation } from "../css-property/Animation";
 import { Transition } from "../css-property/Transition";
 import { Keyframe } from "../css-property/Keyframe";
 import { Selector } from "../css-property/Selector";
+import icon from "../../csseditor/ui/icon/icon";
+import Dom from "../../util/Dom";
+
+function filterSVGClipPath (str = '', isFit = false, maxWidth, maxHeight) {
+  var $div = new Dom('div');
+  var $svg = $div.html(str).$('svg');
+
+  if (!$svg) { 
+    return {
+      paths: '',
+      transform: ''
+    } 
+  }
+
+  var paths = $svg.html();
+  var width = Length.parse($svg.attr('width'))
+  var height = Length.parse($svg.attr('height'))
+
+  var transform = '' 
+  if (isFit) {
+    var scaleX = maxWidth.value / width.value 
+    var scaleY = maxHeight.value / height.value 
+
+    transform = `transform="scale(${scaleX} ${scaleY})"`
+  }
+
+  return { paths, transform };
+}
 
 export class DomItem extends GroupItem {
   getDefaultObject(obj = {}) {
@@ -551,10 +579,19 @@ export class DomItem extends GroupItem {
 
   toSVGString () {
     return this.json.svg.map(s => {
-      return `
-<${s.type} id='${s.name}'>
-  ${s.value.join(NEW_LINE)}
-</${s.type}>`
+
+      if (s.type === 'filter') {
+        return `
+        <${s.type} id='${s.name}'>
+          ${s.value.join(NEW_LINE)}
+        </${s.type}>`
+      } else if (s.type === 'clip-path') {
+        var obj = filterSVGClipPath(icon[s.value.icon], s.value.fit, this.json.width, this.json.height)
+        return `
+        <clipPath id='${s.name}' ${obj.transform}>
+          ${obj.paths}
+        </clipPath>`
+      }
     }).join(NEW_LINE_2)
   }