css-doodle - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

css-doodle.js

@@ -137,3 +137,3 @@ (function (global, factory) {
 
-const { cos, sin, tan, sqrt, pow, PI } = Math;
+const { cos, sin, sqrt, pow, PI } = Math;
 const DEG = PI / 180;
@@ -277,4 +277,6 @@
     return rotate(
-      x * 1.2, (y + .2) * 1.1, 180
-    )
+      x * 1.2,
+      (y + .2) * 1.1,
+      180
+    );
   });
@@ -323,3 +325,3 @@ }
       180
-    )
+    );
   });
@@ -404,2 +406,23 @@ }
 
+const reg_size = /[,，\/\s]+\s*/;
+
+var shortcuts = {
+
+  ['size'](value) {
+    var [w, h = w] = value.split(reg_size);
+    return `width: ${ w }; height: ${ h };`;
+  },
+
+  ['min-size'](value) {
+    var [w, h = w] = value.split(reg_size);
+    return `min-width: ${ w }; min-height: ${ h };`;
+  },
+
+  ['max-size'](value) {
+    var [w, h = w] = value.split(reg_size);
+    return `max-width: ${ w }; max-height: ${ h };`;
+  }
+
+};
+
 class Rules {
@@ -474,5 +497,7 @@ constructor(tokens) {
     }
-    if (property == 'size') {
-      rule = `width: ${ value }; height: ${ value };`;
+
+    if (shortcuts[property]) {
+      rule = shortcuts[property](value);
     }
+
     return rule;
@@ -828,3 +853,3 @@ }
 
-  if (value.length) {
+  if (value.length && value[0].value) {
     value[0].value = value[0].value.trimLeft();
@@ -831,0 +856,0 @@ }

css-doodle.min.js

@@ -1,1 +0,1 @@
-!function(e,n){typeof exports==='object'&&typeof module!=='undefined'?n():typeof define==='function'&&define.amd?define(n):(n())}(this,(function(){"use strict";var e={even:e=>!!(e%2),odd:e=>!(e%2)};function n(e,n,t){return e=>e==t}function t(e,n){return(t,r)=>e==t&&n==r}function r(n,t,r){return t=>/^(even|odd)$/.test(t)?e[t](n-1):t==n}function u(n,t,r){return n=>/^(even|odd)$/.test(n)?e[n](t-1):n==t}function o(n,t,r){return n=>e.even(r-1)}function c(n,t,r){return n=>e.odd(r-1)}var s=Object.freeze({nth:n,at:t,row:r,col:u,even:o,odd:c});function i(e){if(Array.isArray(e))return e;return Object.keys(e).map(n=>e[n])}function l(e,...n){return n.reduce((e,n)=>e.apply(null,i(n)),e)}function a(e){return(e||[]).join('\n')}function p(e){return Array.isArray(e)?e:[e]}function f(e,n,t){return Math.max(n,Math.min(t,e))}function h(e){return`-webkit-${e}${e}`}let m={};function d(e,n){return function(...t){let r=e+t.join('-');if(m[r])return m[r];return m[r]=n.apply(null,t)}}function y(...e){let n=e.reduce((e,n)=>e.concat(n),[]);return n[Math.floor(Math.random()*n.length)]}function g(e,n,t){let r=0,u=e=>e>0&&e<1?.1:1,o=arguments.length;o==1&&([e,n]=[u(e),e]);o<3&&(t=u(e));let c=[];while(t>0&&e<n||t<0&&e>n){c.push(e);e+=t;if(r++>=1e3)break}return c}function x(e){return function(...n){let t=w(n[0]);if(t){n=n.map(b);return _(e,t).apply(null,n)}return e.apply(null,n)}}function _(e,n){return function(...t){t=t.map(b);let r=e.apply(null,t);n&&(r=r.map(e=>e+n));return r}}function w(e){if(!e)return'';let n=/(%|cm|fr|rem|em|ex|in|mm|pc|pt|px|vh|vw|vmax|vmin|deg|ms|s)$/,t=''.trim.call(e).match(n);return t?t[0]:''}function b(e){let n=w(e);return n?+(e.replace(n,'')):e}let{cos:v,sin:z,tan:k,sqrt:L,pow:T,PI:H}=Math,M=H/180;function S(e,n){typeof arguments[0]=='function'&&(n=e,e={});n||(n=e=>[v(e),z(e)]);var t=e.split||120,r=e.scale||1,u=M*(e.start||0),o=e.deg?e.deg*M:H/(t/2),c=[];for(var s=0;s<t;++s){var i=u+o*s,[l,a]=n(i);c.push(l*50*r+50+'% '+(a*50*r+50+'%'))}return`polygon(${c.join(',')})`}function j(e,n,t){var r=M*t;return[e*v(r)-n*z(r),n*v(r)+e*z(r)]}function A(){return'circle(49%)'}function W(){return S({split:3,start:-90},e=>[v(e)*1.1,z(e)*1.1+.2])}function C(){return S({split:4})}function R(){return S({split:5,start:54})}function q(){return S({split:6,start:30})}function B(){return S({split:7,start:-90})}function E(){return S({split:8})}function O(){return S({split:5,start:54,deg:144})}function P(){return'polygon(50% 5%, 80% 50%, 50% 95%, 20% 50%)'}function D(){return"polygon(\n 5% 35%, 35% 35%, 35% 5%, 65% 5%,\n 65% 35%, 95% 35%, 95% 65%, 65% 65%,\n 65% 95%, 35% 95%, 35% 65%, 5% 65%\n )"}function F(e = 3){e=f(e,3,5);e==4&&(e=2);return S({split:240},n=>{var t=v(e*n)*v(n),r=v(e*n)*z(n);e==3&&(t-=.2);e==2&&(t/=1.1,r/=1.1);return[t,r]})}function G(e = 3){e=f(e,3,6);var n=1-e;return S({scale:1/e},t=>{var r=n*v(t)+v(n*(t-H)),u=n*z(t)+z(n*(t-H));e==3&&(r=r*1.1-.6,u*=1.1);return[r,u]})}function I(){return G(4)}function J(){return S(e=>{var n=.7*L(2)*v(e),t=T(z(e),2)+1;return[n/t,n*z(e)/t]})}function K(){return S(e=>{var n=.75*T(z(e),3),t=v(1*e)*.7222222222222222-v(2*e)*.2777777777777778-v(3*e)/18-v(4*e)/18;return j(n*1.2,(t+.2)*1.1,180)})}function N(){return S(e=>{var[n,t]=[T(z(e),3),T(v(e),3)];return j((n+t)*v(e)*1.3-.45,(n+t)*z(e)*1.3-.45,-90)})}function Q(){return S(e=>j(v(e),T(z(e),2)/(2+z(e))-.5,180))}function U(){return S(e=>[z(e),(1+z(e))*v(e)/1.4])}function V(){return S(e=>[v(e)-T(z(e),2)/L(2),z(2*e)/2])}function X(){return S({split:240},e=>{var n=3.4*(T(z(e),2)-.5)*v(e);return j(v(e)*n+.75,z(e)*n*1.2,180)})}var Y=Object.freeze({circle:A,triangle:W,rhombus:C,pentagon:R,hexgon:q,heptagon:B,octagon:E,star:O,diamond:P,cross:D,clover:F,hypocycloid:G,astroid:I,infinity:J,heart:K,bean:N,bicorn:Q,pear:U,fish:V,whale:X});function Z(e,n,t){return e=>t}function $(e,n,t){return n=>e}function ee(e,n,t){return e=>n}function ne(){return function(...e){return y.apply(null,e)}}function te(){return ne.apply(null,arguments)}function re(){return function(...e){return y(d('range',x(g)).apply(null,e))}}function ue(e,n,t){return d('shape',function(e,...n){if(e){e=e.trim();if(Y[e]){return Y[e].apply(null,n)}}})}var oe=Object.freeze({index:Z,row:$,col:ee,any:ne,pick:te,rand:re,shape:ue});class ce{constructor(e){this.tokens=e;this.rules={};this.props={};this.styles={host:'',cells:''}}add_rule(e,n){var t=this.rules[e];t||(t=this.rules[e]=[]);t.push.apply(t,p(n))}compose_selector(e,n = ''){return`.cell:nth-of-type(${e}) .shape${n}`}compose_argument(e,n){var t=e.map(e=>{if(e.type=='text'){return e.value}else if(e.type=='func'){var t=oe[e.name.substr(1)];if(t){var r=e.arguments.map(e=>{return this.compose_argument(e,n)});return l(t,n,r)}}});return t.length>2?t.join(''):t[0]}compose_value(e,n){return e.reduce((e,t)=>{switch(t.type){case 'text':{e+=t.value;break};case 'func':{var r=oe[t.name.substr(1)];if(r){var u=t.arguments.map(e=>{return this.compose_argument(e,n)});e+=l(r,n,u)}}}return e},'')}compose_rule(e,n){var t=e.property,r=this.compose_value(e.value,n);t=='transition'&&(this.props.has_transition=!0);var u=`${t}:${r};`;t=='clip-path'&&(u=h(u),u+=';overflow:hidden;');t=='size'&&(u=`width:${r};height:${r};`);return u}compose(e,n){(n||this.tokens).forEach((n,t)=>{if(n.skip)return!1;switch(n.type){case 'rule':this.add_rule(this.compose_selector(e.count),this.compose_rule(n,e));break;case 'psudo':{n.selector.startsWith(':doodle')&&(n.selector=n.selector.replace(/^\:+doodle/,':host'));var c=n.selector.startsWith(':host');c&&(n.skip=!0);var i=n.styles.map(n=>this.compose_rule(n,e)),a=c?n.selector:this.compose_selector(e.count,n.selector);this.add_rule(a,i);break};case 'cond':var o=s[n.name.substr(1)];if(o){var r=n.arguments.map(n=>{return this.compose_argument(n,e)}),u=l(o,e,r);u&&this.compose(e,n.styles)};break}})}output(){Object.keys(this.rules).forEach(e=>{var n=e.startsWith(':host');let t=n?'host':'cells';this.styles[t]+=`${e}{${a(this.rules[e])}}`});return{props:this.props,styles:this.styles}}}function se(e,n){var t=new ce(e);for(var r=1,u=0;r<=n.x;++r){for(var o=1;o<=n.y;++o)t.compose({x:r,y:o,count:++u})}return t.output()}let ie={func(e = ''){return{type:'func',name:e,arguments:[]}},argument(){return{type:'argument',value:[]}},text(e = ''){return{type:'text',value:e}},comment(e){return{type:'comment',value:e}},psudo(e = ''){return{type:'psudo',selector:e,styles:[]}},cond(e = ''){return{type:'cond',name:e,styles:[],arguments:[]}},rule(e = ''){return{type:'rule',property:e,value:[]}}},le={'(':')','[':']','{':'}'},ae={white_space(e){return /[\s\n\t]/.test(e)},open_bracket(e){return le.hasOwnProperty(e)},close_bracket_of(e){var n=le[e];return e=>e==n},number(e){return!isNaN(e)}};function pe(e){var n=0,t=1,r=1;return{curr:(t = 0)=>e[n+t],end:()=>e.length<=n,info:()=>({index:n,col:t,line:r}),next:()=>{var u=e[n++];u=='\n'?(r++, t=0):t++;return u}}}function fe(e,{col:n,line:t}){throw new Error(`(at line ${t}, column ${n}) ${e}`)}function he(e){if(e.trim().length){return ae.number(+e)?+e:e.trim()}else{return e}}function me(e){var[n,t]=[e.curr(),e.curr()],r=ae.close_bracket_of(t);e.next();while(!e.end()){if(r(t=e.curr())){n+=t;break}else ae.open_bracket(t)?(n+=me(e)):(n+=t);e.next()}return n}function de(e,n ={}){var t=ie.comment(),r=e.curr();r!='#'&&e.next();e.next();while(!e.end()){if((r=e.curr())=='*'&&e.curr(1)=='/')break;else t.value+=r;r=e.curr();if(n.inline){if(r=='\n')return t}else{if(r=='*'&&e.curr(1)=='/')break}t.value+=r;e.next()}e.next();e.next();return t}function ye(e){var n='',t;while(!e.end()){if((t=e.curr())==':')break;else /[a-zA-Z\-]/.test(t)?ae.white_space(t)||(n+=t):fe('Syntax error:Bad property name.',e.info());e.next()}return n}function ge(e,n){var t='',r;e.next();while(!e.end()){if((r=e.curr())==n){if(e.curr(-1)!=='\\')break;else t+=r}else t+=r;e.next()}return t}function xe(e){var n=[],t=[],r='',u;while(!e.end()){if(ae.open_bracket(u=e.curr()))r+=me(e);else if(/['"]/.test(u))r+=ge(e,u);else if(u=='@')t.length||(r=r.trimLeft()),r.length&&(t.push(ie.text(r)),r=''),t.push(_e(e));else if(/[,)]/.test(u)){r.length&&(t.length?(r=r.trimRight(),r.length&&t.push(ie.text(r))):t.push(ie.text(he(r))));n.push(t.slice());[t,r]=[[],''];if(u==')')break}else r+=u;e.next()}return n}function _e(e){var n=ie.func(),t='',r;while(!e.end()){if((r=e.curr())==')')break;if(r=='('){e.next();n.name=t;n.arguments=xe(e);break}else t+=r;e.next()}return n}function we(e){var n=ie.text(),t;let r=[];while(!e.end()){if((t=e.curr())=='\n'){e.next();continue}else if(/[;}]/.test(t)){n.value.length&&r.push(n);n=ie.text();break}else t=='@'?(n.value.length&&r.push(n),n=ie.text(),r.push(_e(e))):(!ae.white_space(t)||!ae.white_space(e.curr(-1)))&&(t==':'&&fe('Syntax error:Bad property name.',e.info()),n.value+=t);e.next()}n.value.length&&r.push(n);r.length&&(r[0].value=r[0].value.trimLeft());return r}function be(e){var n='',t;while(!e.end()){if((t=e.curr())=='{')break;else ae.white_space(t)||(n+=t);e.next()}return n}function ve(e){var n={name:'',arguments:[]},t;while(!e.end()){if((t=e.curr())=='(')e.next(),n.arguments=xe(e);else if(/[){]/.test(t))break;else ae.white_space(t)||(n.name+=t);e.next()}return n}function ze(e){var n=ie.psudo(),t;while(!e.end()){if((t=e.curr())=='}')break;if(ae.white_space(t)){e.next();continue}else n.selector?n.styles.push(ke(e)):(n.selector=be(e));e.next()}return n}function ke(e){var n=ie.rule(),t;while(!e.end()){if((t=e.curr())==';')break;else if(!n.property.length)n.property=ye(e);else{n.value=we(e);break}e.next()}return n}function Le(e){var n=ie.cond(),t;while(!e.end()){if((t=e.curr())=='}')break;else if(!n.name.length)Object.assign(n,ve(e));else if(t==':'){var r=ze(e);r.selector&&n.styles.push(r)}else if(t=='@')n.styles.push(Le(e));else if(!ae.white_space(t)){var u=ke(e);u.property&&n.styles.push(u)}e.next()}return n}function Te(e){let n=pe(e),t=[];while(!n.end()){var r=n.curr();if(ae.white_space(r)){n.next();continue}else if(r=='/'&&n.curr(1)=='*')t.push(de(n));else if(r=='#'||r=='/'&&n.curr(1)=='/')t.push(de(n,{inline:!0}));else if(r==':'){var u=ze(n);u.selector&&t.push(u)}else if(r=='@'){var o=Le(n);o.name.length&&t.push(o)}else if(!ae.white_space(r)){var c=ke(n);c.property&&t.push(c)}n.next()}return t}function He(e,n){return se(Te(e),n)}let Me=1,Se=16;function je(e){let[n,t]=(e+'').replace(/\s+/g,'').replace(/[,，xX]+/,'x').split('x').map(Number),r={x:f(n||Me,1,Se),y:f(t||n||Me,1,Se)};return Object.assign({},r,{count:r.x*r.y})}let Ae="\n:host{display:block;visibility:visible;width:1em;height:1em;}.container{position:relative;width:100%;height:100%\n}.container:after{content:'';display:block;clear:both;visibility:hidden\n}.cell{position:relative;float:left;line-height:0;box-sizing:border-box\n}.shape{box-sizing:border-box;line-height:0;position:absolute;width:100%;height:100%;transform-origin:center center;z-index:1;display:flex;align-items:center;justify-content:center\n}";class We extends HTMLElement{constructor(){super();this.doodle=this.attachShadow({mode:'open'})}connectedCallback(){setTimeout(()=>{if(!this.innerHTML.trim()){return!1}let e;try{e=He(this.innerHTML,this.size=je(this.getAttribute('grid')))}catch(e){this.innerHTML='';throw new Error(e)};let{has_transition:n}=e.props;this.doodle.innerHTML=`<style>${Ae}</style><style class="style-container">${this.style_size()}${e.styles.host}</style><style class="style-cells">${n?'':e.styles.cells}</style><div class="container">${this.html_cells()}</div>`;n&&setTimeout(()=>{this.set_style('.style-cells',e.styles.cells)},50)})}style_size(){return`.cell{width:${100/this.size.y+'%'};height:${100/this.size.x+'%'};}`}html_cells(){let e="\n<div class=\"cell\"><div class=\"shape\"></div></div>";return e.repeat(this.size.count)}set_style(e,n){let t=this.shadowRoot.querySelector(e);t&&(t.styleSheet?(t.styleSheet.cssText=n):(t.innerHTML=n))}update(e){if(!e){return!1}this.size||(this.size=je(this.getAttribute('grid')));let n=He(e,this.size);this.set_style('.style-container',this.style_size()+n.styles.host);this.set_style('.style-cells',n.styles.cells);this.innerHTML=e}refresh(){this.update(this.innerHTML)}get grid(){return Object.assign({},this.size)}set grid(e){this.setAttribute('grid',e);this.connectedCallback()}static get observedAttributes(){return['grid']}attributeChangedCallback(e,n,t){e=='grid'&&n&&(n!==t&&(this.grid=t))}}customElements.define('css-doodle',We)}))
+!function(e,n){typeof exports==='object'&&typeof module!=='undefined'?n():typeof define==='function'&&define.amd?define(n):(n())}(this,(function(){"use strict";var e={even:e=>!!(e%2),odd:e=>!(e%2)};function n(e,n,t){return e=>e==t}function t(e,n){return(t,r)=>e==t&&n==r}function r(n,t,r){return t=>/^(even|odd)$/.test(t)?e[t](n-1):t==n}function u(n,t,r){return n=>/^(even|odd)$/.test(n)?e[n](t-1):n==t}function o(n,t,r){return n=>e.even(r-1)}function c(n,t,r){return n=>e.odd(r-1)}var s=Object.freeze({nth:n,at:t,row:r,col:u,even:o,odd:c});function i(e){if(Array.isArray(e))return e;return Object.keys(e).map(n=>e[n])}function l(e,...n){return n.reduce((e,n)=>e.apply(null,i(n)),e)}function a(e){return(e||[]).join('\n')}function p(e){return Array.isArray(e)?e:[e]}function f(e,n,t){return Math.max(n,Math.min(t,e))}function m(e){return`-webkit-${e}${e}`}let h={};function d(e,n){return function(...t){let r=e+t.join('-');if(h[r])return h[r];return h[r]=n.apply(null,t)}}function y(...e){let n=e.reduce((e,n)=>e.concat(n),[]);return n[Math.floor(Math.random()*n.length)]}function g(e,n,t){let r=0,u=e=>e>0&&e<1?.1:1,o=arguments.length;o==1&&([e,n]=[u(e),e]);o<3&&(t=u(e));let c=[];while(t>0&&e<n||t<0&&e>n){c.push(e);e+=t;if(r++>=1e3)break}return c}function x(e){return function(...n){let t=w(n[0]);if(t){n=n.map(z);return _(e,t).apply(null,n)}return e.apply(null,n)}}function _(e,n){return function(...t){t=t.map(z);let r=e.apply(null,t);n&&(r=r.map(e=>e+n));return r}}function w(e){if(!e)return'';let n=/(%|cm|fr|rem|em|ex|in|mm|pc|pt|px|vh|vw|vmax|vmin|deg|ms|s)$/,t=''.trim.call(e).match(n);return t?t[0]:''}function z(e){let n=w(e);return n?+(e.replace(n,'')):e}let{cos:b,sin:v,sqrt:k,pow:L,PI:T}=Math,H=T/180;function M(e,n){typeof arguments[0]=='function'&&(n=e,e={});n||(n=e=>[b(e),v(e)]);var t=e.split||120,r=e.scale||1,u=H*(e.start||0),o=e.deg?e.deg*H:T/(t/2),c=[];for(var s=0;s<t;++s){var i=u+o*s,[l,a]=n(i);c.push(l*50*r+50+'% '+(a*50*r+50+'%'))}return`polygon(${c.join(',')})`}function S(e,n,t){var r=H*t;return[e*b(r)-n*v(r),n*b(r)+e*v(r)]}function j(){return'circle(49%)'}function A(){return M({split:3,start:-90},e=>[b(e)*1.1,v(e)*1.1+.2])}function W(){return M({split:4})}function C(){return M({split:5,start:54})}function R(){return M({split:6,start:30})}function q(){return M({split:7,start:-90})}function B(){return M({split:8})}function E(){return M({split:5,start:54,deg:144})}function O(){return'polygon(50% 5%, 80% 50%, 50% 95%, 20% 50%)'}function P(){return"polygon(\n 5% 35%, 35% 35%, 35% 5%, 65% 5%,\n 65% 35%, 95% 35%, 95% 65%, 65% 65%,\n 65% 95%, 35% 95%, 35% 65%, 5% 65%\n )"}function D(e = 3){e=f(e,3,5);e==4&&(e=2);return M({split:240},n=>{var t=b(e*n)*b(n),r=b(e*n)*v(n);e==3&&(t-=.2);e==2&&(t/=1.1,r/=1.1);return[t,r]})}function F(e = 3){e=f(e,3,6);var n=1-e;return M({scale:1/e},t=>{var r=n*b(t)+b(n*(t-T)),u=n*v(t)+v(n*(t-T));e==3&&(r=r*1.1-.6,u*=1.1);return[r,u]})}function G(){return F(4)}function I(){return M(e=>{var n=.7*k(2)*b(e),t=L(v(e),2)+1;return[n/t,n*v(e)/t]})}function J(){return M(e=>{var n=.75*L(v(e),3),t=b(1*e)*.7222222222222222-b(2*e)*.2777777777777778-b(3*e)/18-b(4*e)/18;return S(n*1.2,(t+.2)*1.1,180)})}function K(){return M(e=>{var[n,t]=[L(v(e),3),L(b(e),3)];return S((n+t)*b(e)*1.3-.45,(n+t)*v(e)*1.3-.45,-90)})}function N(){return M(e=>S(b(e),L(v(e),2)/(2+v(e))-.5,180))}function Q(){return M(e=>[v(e),(1+v(e))*b(e)/1.4])}function U(){return M(e=>[b(e)-L(v(e),2)/k(2),v(2*e)/2])}function V(){return M({split:240},e=>{var n=3.4*(L(v(e),2)-.5)*b(e);return S(b(e)*n+.75,v(e)*n*1.2,180)})}var X=Object.freeze({circle:j,triangle:A,rhombus:W,pentagon:C,hexgon:R,heptagon:q,octagon:B,star:E,diamond:O,cross:P,clover:D,hypocycloid:F,astroid:G,infinity:I,heart:J,bean:K,bicorn:N,pear:Q,fish:U,whale:V});function Y(e,n,t){return e=>t}function Z(e,n,t){return n=>e}function $(e,n,t){return e=>n}function ee(){return function(...e){return y.apply(null,e)}}function ne(){return ee.apply(null,arguments)}function te(){return function(...e){return y(d('range',x(g)).apply(null,e))}}function re(e,n,t){return d('shape',function(e,...n){if(e){e=e.trim();if(X[e]){return X[e].apply(null,n)}}})}var ue=Object.freeze({index:Y,row:Z,col:$,any:ee,pick:ne,rand:te,shape:re});let oe=/[,，\/\s]+\s*/;var ce={['size'](e){var[n,t = n]=e.split(oe);return`width:${n};height:${t};`},['min-size'](e){var[n,t = n]=e.split(oe);return`min-width:${n};min-height:${t};`},['max-size'](e){var[n,t = n]=e.split(oe);return`max-width:${n};max-height:${t};`}};class se{constructor(e){this.tokens=e;this.rules={};this.props={};this.styles={host:'',cells:''}}add_rule(e,n){var t=this.rules[e];t||(t=this.rules[e]=[]);t.push.apply(t,p(n))}compose_selector(e,n = ''){return`.cell:nth-of-type(${e}) .shape${n}`}compose_argument(e,n){var t=e.map(e=>{if(e.type=='text'){return e.value}else if(e.type=='func'){var t=ue[e.name.substr(1)];if(t){var r=e.arguments.map(e=>{return this.compose_argument(e,n)});return l(t,n,r)}}});return t.length>2?t.join(''):t[0]}compose_value(e,n){return e.reduce((e,t)=>{switch(t.type){case 'text':{e+=t.value;break};case 'func':{var r=ue[t.name.substr(1)];if(r){var u=t.arguments.map(e=>{return this.compose_argument(e,n)});e+=l(r,n,u)}}}return e},'')}compose_rule(e,n){var t=e.property,r=this.compose_value(e.value,n);t=='transition'&&(this.props.has_transition=!0);var u=`${t}:${r};`;t=='clip-path'&&(u=m(u),u+=';overflow:hidden;');ce[t]&&(u=ce[t](r));return u}compose(e,n){(n||this.tokens).forEach((n,t)=>{if(n.skip)return!1;switch(n.type){case 'rule':this.add_rule(this.compose_selector(e.count),this.compose_rule(n,e));break;case 'psudo':{n.selector.startsWith(':doodle')&&(n.selector=n.selector.replace(/^\:+doodle/,':host'));var c=n.selector.startsWith(':host');c&&(n.skip=!0);var i=n.styles.map(n=>this.compose_rule(n,e)),a=c?n.selector:this.compose_selector(e.count,n.selector);this.add_rule(a,i);break};case 'cond':var o=s[n.name.substr(1)];if(o){var r=n.arguments.map(n=>{return this.compose_argument(n,e)}),u=l(o,e,r);u&&this.compose(e,n.styles)};break}})}output(){Object.keys(this.rules).forEach(e=>{var n=e.startsWith(':host');let t=n?'host':'cells';this.styles[t]+=`${e}{${a(this.rules[e])}}`});return{props:this.props,styles:this.styles}}}function ie(e,n){var t=new se(e);for(var r=1,u=0;r<=n.x;++r){for(var o=1;o<=n.y;++o)t.compose({x:r,y:o,count:++u})}return t.output()}let le={func(e = ''){return{type:'func',name:e,arguments:[]}},argument(){return{type:'argument',value:[]}},text(e = ''){return{type:'text',value:e}},comment(e){return{type:'comment',value:e}},psudo(e = ''){return{type:'psudo',selector:e,styles:[]}},cond(e = ''){return{type:'cond',name:e,styles:[],arguments:[]}},rule(e = ''){return{type:'rule',property:e,value:[]}}},ae={'(':')','[':']','{':'}'},pe={white_space(e){return /[\s\n\t]/.test(e)},open_bracket(e){return ae.hasOwnProperty(e)},close_bracket_of(e){var n=ae[e];return e=>e==n},number(e){return!isNaN(e)}};function fe(e){var n=0,t=1,r=1;return{curr:(t = 0)=>e[n+t],end:()=>e.length<=n,info:()=>({index:n,col:t,line:r}),next:()=>{var u=e[n++];u=='\n'?(r++, t=0):t++;return u}}}function me(e,{col:n,line:t}){throw new Error(`(at line ${t}, column ${n}) ${e}`)}function he(e){if(e.trim().length){return pe.number(+e)?+e:e.trim()}else{return e}}function de(e){var[n,t]=[e.curr(),e.curr()],r=pe.close_bracket_of(t);e.next();while(!e.end()){if(r(t=e.curr())){n+=t;break}else pe.open_bracket(t)?(n+=de(e)):(n+=t);e.next()}return n}function ye(e,n ={}){var t=le.comment(),r=e.curr();r!='#'&&e.next();e.next();while(!e.end()){if((r=e.curr())=='*'&&e.curr(1)=='/')break;else t.value+=r;r=e.curr();if(n.inline){if(r=='\n')return t}else{if(r=='*'&&e.curr(1)=='/')break}t.value+=r;e.next()}e.next();e.next();return t}function ge(e){var n='',t;while(!e.end()){if((t=e.curr())==':')break;else /[a-zA-Z\-]/.test(t)?pe.white_space(t)||(n+=t):me('Syntax error:Bad property name.',e.info());e.next()}return n}function xe(e,n){var t='',r;e.next();while(!e.end()){if((r=e.curr())==n){if(e.curr(-1)!=='\\')break;else t+=r}else t+=r;e.next()}return t}function _e(e){var n=[],t=[],r='',u;while(!e.end()){if(pe.open_bracket(u=e.curr()))r+=de(e);else if(/['"]/.test(u))r+=xe(e,u);else if(u=='@')t.length||(r=r.trimLeft()),r.length&&(t.push(le.text(r)),r=''),t.push(we(e));else if(/[,)]/.test(u)){r.length&&(t.length?(r=r.trimRight(),r.length&&t.push(le.text(r))):t.push(le.text(he(r))));n.push(t.slice());[t,r]=[[],''];if(u==')')break}else r+=u;e.next()}return n}function we(e){var n=le.func(),t='',r;while(!e.end()){if((r=e.curr())==')')break;if(r=='('){e.next();n.name=t;n.arguments=_e(e);break}else t+=r;e.next()}return n}function ze(e){var n=le.text(),t;let r=[];while(!e.end()){if((t=e.curr())=='\n'){e.next();continue}else if(/[;}]/.test(t)){n.value.length&&r.push(n);n=le.text();break}else t=='@'?(n.value.length&&r.push(n),n=le.text(),r.push(we(e))):(!pe.white_space(t)||!pe.white_space(e.curr(-1)))&&(t==':'&&me('Syntax error:Bad property name.',e.info()),n.value+=t);e.next()}n.value.length&&r.push(n);r.length&&r[0].value&&(r[0].value=r[0].value.trimLeft());return r}function be(e){var n='',t;while(!e.end()){if((t=e.curr())=='{')break;else pe.white_space(t)||(n+=t);e.next()}return n}function ve(e){var n={name:'',arguments:[]},t;while(!e.end()){if((t=e.curr())=='(')e.next(),n.arguments=_e(e);else if(/[){]/.test(t))break;else pe.white_space(t)||(n.name+=t);e.next()}return n}function ke(e){var n=le.psudo(),t;while(!e.end()){if((t=e.curr())=='}')break;if(pe.white_space(t)){e.next();continue}else n.selector?n.styles.push(Le(e)):(n.selector=be(e));e.next()}return n}function Le(e){var n=le.rule(),t;while(!e.end()){if((t=e.curr())==';')break;else if(!n.property.length)n.property=ge(e);else{n.value=ze(e);break}e.next()}return n}function Te(e){var n=le.cond(),t;while(!e.end()){if((t=e.curr())=='}')break;else if(!n.name.length)Object.assign(n,ve(e));else if(t==':'){var r=ke(e);r.selector&&n.styles.push(r)}else if(t=='@')n.styles.push(Te(e));else if(!pe.white_space(t)){var u=Le(e);u.property&&n.styles.push(u)}e.next()}return n}function He(e){let n=fe(e),t=[];while(!n.end()){var r=n.curr();if(pe.white_space(r)){n.next();continue}else if(r=='/'&&n.curr(1)=='*')t.push(ye(n));else if(r=='#'||r=='/'&&n.curr(1)=='/')t.push(ye(n,{inline:!0}));else if(r==':'){var u=ke(n);u.selector&&t.push(u)}else if(r=='@'){var o=Te(n);o.name.length&&t.push(o)}else if(!pe.white_space(r)){var c=Le(n);c.property&&t.push(c)}n.next()}return t}function Me(e,n){return ie(He(e),n)}let Se=1,je=16;function Ae(e){let[n,t]=(e+'').replace(/\s+/g,'').replace(/[,，xX]+/,'x').split('x').map(Number),r={x:f(n||Se,1,je),y:f(t||n||Se,1,je)};return Object.assign({},r,{count:r.x*r.y})}let We="\n:host{display:block;visibility:visible;width:1em;height:1em;}.container{position:relative;width:100%;height:100%\n}.container:after{content:'';display:block;clear:both;visibility:hidden\n}.cell{position:relative;float:left;line-height:0;box-sizing:border-box\n}.shape{box-sizing:border-box;line-height:0;position:absolute;width:100%;height:100%;transform-origin:center center;z-index:1;display:flex;align-items:center;justify-content:center\n}";class Ce extends HTMLElement{constructor(){super();this.doodle=this.attachShadow({mode:'open'})}connectedCallback(){setTimeout(()=>{if(!this.innerHTML.trim()){return!1}let e;try{e=Me(this.innerHTML,this.size=Ae(this.getAttribute('grid')))}catch(e){this.innerHTML='';throw new Error(e)};let{has_transition:n}=e.props;this.doodle.innerHTML=`<style>${We}</style><style class="style-container">${this.style_size()}${e.styles.host}</style><style class="style-cells">${n?'':e.styles.cells}</style><div class="container">${this.html_cells()}</div>`;n&&setTimeout(()=>{this.set_style('.style-cells',e.styles.cells)},50)})}style_size(){return`.cell{width:${100/this.size.y+'%'};height:${100/this.size.x+'%'};}`}html_cells(){let e="\n<div class=\"cell\"><div class=\"shape\"></div></div>";return e.repeat(this.size.count)}set_style(e,n){let t=this.shadowRoot.querySelector(e);t&&(t.styleSheet?(t.styleSheet.cssText=n):(t.innerHTML=n))}update(e){if(!e){return!1}this.size||(this.size=Ae(this.getAttribute('grid')));let n=Me(e,this.size);this.set_style('.style-container',this.style_size()+n.styles.host);this.set_style('.style-cells',n.styles.cells);this.innerHTML=e}refresh(){this.update(this.innerHTML)}get grid(){return Object.assign({},this.size)}set grid(e){this.setAttribute('grid',e);this.connectedCallback()}static get observedAttributes(){return['grid']}attributeChangedCallback(e,n,t){e=='grid'&&n&&(n!==t&&(this.grid=t))}}customElements.define('css-doodle',Ce)}))

docs/lib/css-doodle.min.js

@@ -1,1 +0,1 @@
-!function(e,n){typeof exports==='object'&&typeof module!=='undefined'?n():typeof define==='function'&&define.amd?define(n):(n())}(this,(function(){"use strict";var e={even:e=>!!(e%2),odd:e=>!(e%2)};function n(e,n,t){return e=>e==t}function t(e,n){return(t,r)=>e==t&&n==r}function r(n,t,r){return t=>/^(even|odd)$/.test(t)?e[t](n-1):t==n}function u(n,t,r){return n=>/^(even|odd)$/.test(n)?e[n](t-1):n==t}function o(n,t,r){return n=>e.even(r-1)}function c(n,t,r){return n=>e.odd(r-1)}var s=Object.freeze({nth:n,at:t,row:r,col:u,even:o,odd:c});function i(e){if(Array.isArray(e))return e;return Object.keys(e).map(n=>e[n])}function l(e,...n){return n.reduce((e,n)=>e.apply(null,i(n)),e)}function a(e){return(e||[]).join('\n')}function p(e){return Array.isArray(e)?e:[e]}function f(e,n,t){return Math.max(n,Math.min(t,e))}function h(e){return`-webkit-${e}${e}`}let m={};function d(e,n){return function(...t){let r=e+t.join('-');if(m[r])return m[r];return m[r]=n.apply(null,t)}}function y(...e){let n=e.reduce((e,n)=>e.concat(n),[]);return n[Math.floor(Math.random()*n.length)]}function g(e,n,t){let r=0,u=e=>e>0&&e<1?.1:1,o=arguments.length;o==1&&([e,n]=[u(e),e]);o<3&&(t=u(e));let c=[];while(t>0&&e<n||t<0&&e>n){c.push(e);e+=t;if(r++>=1e3)break}return c}function x(e){return function(...n){let t=w(n[0]);if(t){n=n.map(b);return _(e,t).apply(null,n)}return e.apply(null,n)}}function _(e,n){return function(...t){t=t.map(b);let r=e.apply(null,t);n&&(r=r.map(e=>e+n));return r}}function w(e){if(!e)return'';let n=/(%|cm|fr|rem|em|ex|in|mm|pc|pt|px|vh|vw|vmax|vmin|deg|ms|s)$/,t=''.trim.call(e).match(n);return t?t[0]:''}function b(e){let n=w(e);return n?+(e.replace(n,'')):e}let{cos:v,sin:z,tan:k,sqrt:L,pow:T,PI:H}=Math,M=H/180;function S(e,n){typeof arguments[0]=='function'&&(n=e,e={});n||(n=e=>[v(e),z(e)]);var t=e.split||120,r=e.scale||1,u=M*(e.start||0),o=e.deg?e.deg*M:H/(t/2),c=[];for(var s=0;s<t;++s){var i=u+o*s,[l,a]=n(i);c.push(l*50*r+50+'% '+(a*50*r+50+'%'))}return`polygon(${c.join(',')})`}function j(e,n,t){var r=M*t;return[e*v(r)-n*z(r),n*v(r)+e*z(r)]}function A(){return'circle(49%)'}function W(){return S({split:3,start:-90},e=>[v(e)*1.1,z(e)*1.1+.2])}function C(){return S({split:4})}function R(){return S({split:5,start:54})}function q(){return S({split:6,start:30})}function B(){return S({split:7,start:-90})}function E(){return S({split:8})}function O(){return S({split:5,start:54,deg:144})}function P(){return'polygon(50% 5%, 80% 50%, 50% 95%, 20% 50%)'}function D(){return"polygon(\n 5% 35%, 35% 35%, 35% 5%, 65% 5%,\n 65% 35%, 95% 35%, 95% 65%, 65% 65%,\n 65% 95%, 35% 95%, 35% 65%, 5% 65%\n )"}function F(e = 3){e=f(e,3,5);e==4&&(e=2);return S({split:240},n=>{var t=v(e*n)*v(n),r=v(e*n)*z(n);e==3&&(t-=.2);e==2&&(t/=1.1,r/=1.1);return[t,r]})}function G(e = 3){e=f(e,3,6);var n=1-e;return S({scale:1/e},t=>{var r=n*v(t)+v(n*(t-H)),u=n*z(t)+z(n*(t-H));e==3&&(r=r*1.1-.6,u*=1.1);return[r,u]})}function I(){return G(4)}function J(){return S(e=>{var n=.7*L(2)*v(e),t=T(z(e),2)+1;return[n/t,n*z(e)/t]})}function K(){return S(e=>{var n=.75*T(z(e),3),t=v(1*e)*.7222222222222222-v(2*e)*.2777777777777778-v(3*e)/18-v(4*e)/18;return j(n*1.2,(t+.2)*1.1,180)})}function N(){return S(e=>{var[n,t]=[T(z(e),3),T(v(e),3)];return j((n+t)*v(e)*1.3-.45,(n+t)*z(e)*1.3-.45,-90)})}function Q(){return S(e=>j(v(e),T(z(e),2)/(2+z(e))-.5,180))}function U(){return S(e=>[z(e),(1+z(e))*v(e)/1.4])}function V(){return S(e=>[v(e)-T(z(e),2)/L(2),z(2*e)/2])}function X(){return S({split:240},e=>{var n=3.4*(T(z(e),2)-.5)*v(e);return j(v(e)*n+.75,z(e)*n*1.2,180)})}var Y=Object.freeze({circle:A,triangle:W,rhombus:C,pentagon:R,hexgon:q,heptagon:B,octagon:E,star:O,diamond:P,cross:D,clover:F,hypocycloid:G,astroid:I,infinity:J,heart:K,bean:N,bicorn:Q,pear:U,fish:V,whale:X});function Z(e,n,t){return e=>t}function $(e,n,t){return n=>e}function ee(e,n,t){return e=>n}function ne(){return function(...e){return y.apply(null,e)}}function te(){return ne.apply(null,arguments)}function re(){return function(...e){return y(d('range',x(g)).apply(null,e))}}function ue(e,n,t){return d('shape',function(e,...n){if(e){e=e.trim();if(Y[e]){return Y[e].apply(null,n)}}})}var oe=Object.freeze({index:Z,row:$,col:ee,any:ne,pick:te,rand:re,shape:ue});class ce{constructor(e){this.tokens=e;this.rules={};this.props={};this.styles={host:'',cells:''}}add_rule(e,n){var t=this.rules[e];t||(t=this.rules[e]=[]);t.push.apply(t,p(n))}compose_selector(e,n = ''){return`.cell:nth-of-type(${e}) .shape${n}`}compose_argument(e,n){var t=e.map(e=>{if(e.type=='text'){return e.value}else if(e.type=='func'){var t=oe[e.name.substr(1)];if(t){var r=e.arguments.map(e=>{return this.compose_argument(e,n)});return l(t,n,r)}}});return t.length>2?t.join(''):t[0]}compose_value(e,n){return e.reduce((e,t)=>{switch(t.type){case 'text':{e+=t.value;break};case 'func':{var r=oe[t.name.substr(1)];if(r){var u=t.arguments.map(e=>{return this.compose_argument(e,n)});e+=l(r,n,u)}}}return e},'')}compose_rule(e,n){var t=e.property,r=this.compose_value(e.value,n);t=='transition'&&(this.props.has_transition=!0);var u=`${t}:${r};`;t=='clip-path'&&(u=h(u),u+=';overflow:hidden;');t=='size'&&(u=`width:${r};height:${r};`);return u}compose(e,n){(n||this.tokens).forEach((n,t)=>{if(n.skip)return!1;switch(n.type){case 'rule':this.add_rule(this.compose_selector(e.count),this.compose_rule(n,e));break;case 'psudo':{n.selector.startsWith(':doodle')&&(n.selector=n.selector.replace(/^\:+doodle/,':host'));var c=n.selector.startsWith(':host');c&&(n.skip=!0);var i=n.styles.map(n=>this.compose_rule(n,e)),a=c?n.selector:this.compose_selector(e.count,n.selector);this.add_rule(a,i);break};case 'cond':var o=s[n.name.substr(1)];if(o){var r=n.arguments.map(n=>{return this.compose_argument(n,e)}),u=l(o,e,r);u&&this.compose(e,n.styles)};break}})}output(){Object.keys(this.rules).forEach(e=>{var n=e.startsWith(':host');let t=n?'host':'cells';this.styles[t]+=`${e}{${a(this.rules[e])}}`});return{props:this.props,styles:this.styles}}}function se(e,n){var t=new ce(e);for(var r=1,u=0;r<=n.x;++r){for(var o=1;o<=n.y;++o)t.compose({x:r,y:o,count:++u})}return t.output()}let ie={func(e = ''){return{type:'func',name:e,arguments:[]}},argument(){return{type:'argument',value:[]}},text(e = ''){return{type:'text',value:e}},comment(e){return{type:'comment',value:e}},psudo(e = ''){return{type:'psudo',selector:e,styles:[]}},cond(e = ''){return{type:'cond',name:e,styles:[],arguments:[]}},rule(e = ''){return{type:'rule',property:e,value:[]}}},le={'(':')','[':']','{':'}'},ae={white_space(e){return /[\s\n\t]/.test(e)},open_bracket(e){return le.hasOwnProperty(e)},close_bracket_of(e){var n=le[e];return e=>e==n},number(e){return!isNaN(e)}};function pe(e){var n=0,t=1,r=1;return{curr:(t = 0)=>e[n+t],end:()=>e.length<=n,info:()=>({index:n,col:t,line:r}),next:()=>{var u=e[n++];u=='\n'?(r++, t=0):t++;return u}}}function fe(e,{col:n,line:t}){throw new Error(`(at line ${t}, column ${n}) ${e}`)}function he(e){if(e.trim().length){return ae.number(+e)?+e:e.trim()}else{return e}}function me(e){var[n,t]=[e.curr(),e.curr()],r=ae.close_bracket_of(t);e.next();while(!e.end()){if(r(t=e.curr())){n+=t;break}else ae.open_bracket(t)?(n+=me(e)):(n+=t);e.next()}return n}function de(e,n ={}){var t=ie.comment(),r=e.curr();r!='#'&&e.next();e.next();while(!e.end()){if((r=e.curr())=='*'&&e.curr(1)=='/')break;else t.value+=r;r=e.curr();if(n.inline){if(r=='\n')return t}else{if(r=='*'&&e.curr(1)=='/')break}t.value+=r;e.next()}e.next();e.next();return t}function ye(e){var n='',t;while(!e.end()){if((t=e.curr())==':')break;else /[a-zA-Z\-]/.test(t)?ae.white_space(t)||(n+=t):fe('Syntax error:Bad property name.',e.info());e.next()}return n}function ge(e,n){var t='',r;e.next();while(!e.end()){if((r=e.curr())==n){if(e.curr(-1)!=='\\')break;else t+=r}else t+=r;e.next()}return t}function xe(e){var n=[],t=[],r='',u;while(!e.end()){if(ae.open_bracket(u=e.curr()))r+=me(e);else if(/['"]/.test(u))r+=ge(e,u);else if(u=='@')t.length||(r=r.trimLeft()),r.length&&(t.push(ie.text(r)),r=''),t.push(_e(e));else if(/[,)]/.test(u)){r.length&&(t.length?(r=r.trimRight(),r.length&&t.push(ie.text(r))):t.push(ie.text(he(r))));n.push(t.slice());[t,r]=[[],''];if(u==')')break}else r+=u;e.next()}return n}function _e(e){var n=ie.func(),t='',r;while(!e.end()){if((r=e.curr())==')')break;if(r=='('){e.next();n.name=t;n.arguments=xe(e);break}else t+=r;e.next()}return n}function we(e){var n=ie.text(),t;let r=[];while(!e.end()){if((t=e.curr())=='\n'){e.next();continue}else if(/[;}]/.test(t)){n.value.length&&r.push(n);n=ie.text();break}else t=='@'?(n.value.length&&r.push(n),n=ie.text(),r.push(_e(e))):(!ae.white_space(t)||!ae.white_space(e.curr(-1)))&&(t==':'&&fe('Syntax error:Bad property name.',e.info()),n.value+=t);e.next()}n.value.length&&r.push(n);r.length&&(r[0].value=r[0].value.trimLeft());return r}function be(e){var n='',t;while(!e.end()){if((t=e.curr())=='{')break;else ae.white_space(t)||(n+=t);e.next()}return n}function ve(e){var n={name:'',arguments:[]},t;while(!e.end()){if((t=e.curr())=='(')e.next(),n.arguments=xe(e);else if(/[){]/.test(t))break;else ae.white_space(t)||(n.name+=t);e.next()}return n}function ze(e){var n=ie.psudo(),t;while(!e.end()){if((t=e.curr())=='}')break;if(ae.white_space(t)){e.next();continue}else n.selector?n.styles.push(ke(e)):(n.selector=be(e));e.next()}return n}function ke(e){var n=ie.rule(),t;while(!e.end()){if((t=e.curr())==';')break;else if(!n.property.length)n.property=ye(e);else{n.value=we(e);break}e.next()}return n}function Le(e){var n=ie.cond(),t;while(!e.end()){if((t=e.curr())=='}')break;else if(!n.name.length)Object.assign(n,ve(e));else if(t==':'){var r=ze(e);r.selector&&n.styles.push(r)}else if(t=='@')n.styles.push(Le(e));else if(!ae.white_space(t)){var u=ke(e);u.property&&n.styles.push(u)}e.next()}return n}function Te(e){let n=pe(e),t=[];while(!n.end()){var r=n.curr();if(ae.white_space(r)){n.next();continue}else if(r=='/'&&n.curr(1)=='*')t.push(de(n));else if(r=='#'||r=='/'&&n.curr(1)=='/')t.push(de(n,{inline:!0}));else if(r==':'){var u=ze(n);u.selector&&t.push(u)}else if(r=='@'){var o=Le(n);o.name.length&&t.push(o)}else if(!ae.white_space(r)){var c=ke(n);c.property&&t.push(c)}n.next()}return t}function He(e,n){return se(Te(e),n)}let Me=1,Se=16;function je(e){let[n,t]=(e+'').replace(/\s+/g,'').replace(/[,，xX]+/,'x').split('x').map(Number),r={x:f(n||Me,1,Se),y:f(t||n||Me,1,Se)};return Object.assign({},r,{count:r.x*r.y})}let Ae="\n:host{display:block;visibility:visible;width:1em;height:1em;}.container{position:relative;width:100%;height:100%\n}.container:after{content:'';display:block;clear:both;visibility:hidden\n}.cell{position:relative;float:left;line-height:0;box-sizing:border-box\n}.shape{box-sizing:border-box;line-height:0;position:absolute;width:100%;height:100%;transform-origin:center center;z-index:1;display:flex;align-items:center;justify-content:center\n}";class We extends HTMLElement{constructor(){super();this.doodle=this.attachShadow({mode:'open'})}connectedCallback(){setTimeout(()=>{if(!this.innerHTML.trim()){return!1}let e;try{e=He(this.innerHTML,this.size=je(this.getAttribute('grid')))}catch(e){this.innerHTML='';throw new Error(e)};let{has_transition:n}=e.props;this.doodle.innerHTML=`<style>${Ae}</style><style class="style-container">${this.style_size()}${e.styles.host}</style><style class="style-cells">${n?'':e.styles.cells}</style><div class="container">${this.html_cells()}</div>`;n&&setTimeout(()=>{this.set_style('.style-cells',e.styles.cells)},50)})}style_size(){return`.cell{width:${100/this.size.y+'%'};height:${100/this.size.x+'%'};}`}html_cells(){let e="\n<div class=\"cell\"><div class=\"shape\"></div></div>";return e.repeat(this.size.count)}set_style(e,n){let t=this.shadowRoot.querySelector(e);t&&(t.styleSheet?(t.styleSheet.cssText=n):(t.innerHTML=n))}update(e){if(!e){return!1}this.size||(this.size=je(this.getAttribute('grid')));let n=He(e,this.size);this.set_style('.style-container',this.style_size()+n.styles.host);this.set_style('.style-cells',n.styles.cells);this.innerHTML=e}refresh(){this.update(this.innerHTML)}get grid(){return Object.assign({},this.size)}set grid(e){this.setAttribute('grid',e);this.connectedCallback()}static get observedAttributes(){return['grid']}attributeChangedCallback(e,n,t){e=='grid'&&n&&(n!==t&&(this.grid=t))}}customElements.define('css-doodle',We)}))
+!function(e,n){typeof exports==='object'&&typeof module!=='undefined'?n():typeof define==='function'&&define.amd?define(n):(n())}(this,(function(){"use strict";var e={even:e=>!!(e%2),odd:e=>!(e%2)};function n(e,n,t){return e=>e==t}function t(e,n){return(t,r)=>e==t&&n==r}function r(n,t,r){return t=>/^(even|odd)$/.test(t)?e[t](n-1):t==n}function u(n,t,r){return n=>/^(even|odd)$/.test(n)?e[n](t-1):n==t}function o(n,t,r){return n=>e.even(r-1)}function c(n,t,r){return n=>e.odd(r-1)}var s=Object.freeze({nth:n,at:t,row:r,col:u,even:o,odd:c});function i(e){if(Array.isArray(e))return e;return Object.keys(e).map(n=>e[n])}function l(e,...n){return n.reduce((e,n)=>e.apply(null,i(n)),e)}function a(e){return(e||[]).join('\n')}function p(e){return Array.isArray(e)?e:[e]}function f(e,n,t){return Math.max(n,Math.min(t,e))}function m(e){return`-webkit-${e}${e}`}let h={};function d(e,n){return function(...t){let r=e+t.join('-');if(h[r])return h[r];return h[r]=n.apply(null,t)}}function y(...e){let n=e.reduce((e,n)=>e.concat(n),[]);return n[Math.floor(Math.random()*n.length)]}function g(e,n,t){let r=0,u=e=>e>0&&e<1?.1:1,o=arguments.length;o==1&&([e,n]=[u(e),e]);o<3&&(t=u(e));let c=[];while(t>0&&e<n||t<0&&e>n){c.push(e);e+=t;if(r++>=1e3)break}return c}function x(e){return function(...n){let t=w(n[0]);if(t){n=n.map(z);return _(e,t).apply(null,n)}return e.apply(null,n)}}function _(e,n){return function(...t){t=t.map(z);let r=e.apply(null,t);n&&(r=r.map(e=>e+n));return r}}function w(e){if(!e)return'';let n=/(%|cm|fr|rem|em|ex|in|mm|pc|pt|px|vh|vw|vmax|vmin|deg|ms|s)$/,t=''.trim.call(e).match(n);return t?t[0]:''}function z(e){let n=w(e);return n?+(e.replace(n,'')):e}let{cos:b,sin:v,sqrt:k,pow:L,PI:T}=Math,H=T/180;function M(e,n){typeof arguments[0]=='function'&&(n=e,e={});n||(n=e=>[b(e),v(e)]);var t=e.split||120,r=e.scale||1,u=H*(e.start||0),o=e.deg?e.deg*H:T/(t/2),c=[];for(var s=0;s<t;++s){var i=u+o*s,[l,a]=n(i);c.push(l*50*r+50+'% '+(a*50*r+50+'%'))}return`polygon(${c.join(',')})`}function S(e,n,t){var r=H*t;return[e*b(r)-n*v(r),n*b(r)+e*v(r)]}function j(){return'circle(49%)'}function A(){return M({split:3,start:-90},e=>[b(e)*1.1,v(e)*1.1+.2])}function W(){return M({split:4})}function C(){return M({split:5,start:54})}function R(){return M({split:6,start:30})}function q(){return M({split:7,start:-90})}function B(){return M({split:8})}function E(){return M({split:5,start:54,deg:144})}function O(){return'polygon(50% 5%, 80% 50%, 50% 95%, 20% 50%)'}function P(){return"polygon(\n 5% 35%, 35% 35%, 35% 5%, 65% 5%,\n 65% 35%, 95% 35%, 95% 65%, 65% 65%,\n 65% 95%, 35% 95%, 35% 65%, 5% 65%\n )"}function D(e = 3){e=f(e,3,5);e==4&&(e=2);return M({split:240},n=>{var t=b(e*n)*b(n),r=b(e*n)*v(n);e==3&&(t-=.2);e==2&&(t/=1.1,r/=1.1);return[t,r]})}function F(e = 3){e=f(e,3,6);var n=1-e;return M({scale:1/e},t=>{var r=n*b(t)+b(n*(t-T)),u=n*v(t)+v(n*(t-T));e==3&&(r=r*1.1-.6,u*=1.1);return[r,u]})}function G(){return F(4)}function I(){return M(e=>{var n=.7*k(2)*b(e),t=L(v(e),2)+1;return[n/t,n*v(e)/t]})}function J(){return M(e=>{var n=.75*L(v(e),3),t=b(1*e)*.7222222222222222-b(2*e)*.2777777777777778-b(3*e)/18-b(4*e)/18;return S(n*1.2,(t+.2)*1.1,180)})}function K(){return M(e=>{var[n,t]=[L(v(e),3),L(b(e),3)];return S((n+t)*b(e)*1.3-.45,(n+t)*v(e)*1.3-.45,-90)})}function N(){return M(e=>S(b(e),L(v(e),2)/(2+v(e))-.5,180))}function Q(){return M(e=>[v(e),(1+v(e))*b(e)/1.4])}function U(){return M(e=>[b(e)-L(v(e),2)/k(2),v(2*e)/2])}function V(){return M({split:240},e=>{var n=3.4*(L(v(e),2)-.5)*b(e);return S(b(e)*n+.75,v(e)*n*1.2,180)})}var X=Object.freeze({circle:j,triangle:A,rhombus:W,pentagon:C,hexgon:R,heptagon:q,octagon:B,star:E,diamond:O,cross:P,clover:D,hypocycloid:F,astroid:G,infinity:I,heart:J,bean:K,bicorn:N,pear:Q,fish:U,whale:V});function Y(e,n,t){return e=>t}function Z(e,n,t){return n=>e}function $(e,n,t){return e=>n}function ee(){return function(...e){return y.apply(null,e)}}function ne(){return ee.apply(null,arguments)}function te(){return function(...e){return y(d('range',x(g)).apply(null,e))}}function re(e,n,t){return d('shape',function(e,...n){if(e){e=e.trim();if(X[e]){return X[e].apply(null,n)}}})}var ue=Object.freeze({index:Y,row:Z,col:$,any:ee,pick:ne,rand:te,shape:re});let oe=/[,，\/\s]+\s*/;var ce={['size'](e){var[n,t = n]=e.split(oe);return`width:${n};height:${t};`},['min-size'](e){var[n,t = n]=e.split(oe);return`min-width:${n};min-height:${t};`},['max-size'](e){var[n,t = n]=e.split(oe);return`max-width:${n};max-height:${t};`}};class se{constructor(e){this.tokens=e;this.rules={};this.props={};this.styles={host:'',cells:''}}add_rule(e,n){var t=this.rules[e];t||(t=this.rules[e]=[]);t.push.apply(t,p(n))}compose_selector(e,n = ''){return`.cell:nth-of-type(${e}) .shape${n}`}compose_argument(e,n){var t=e.map(e=>{if(e.type=='text'){return e.value}else if(e.type=='func'){var t=ue[e.name.substr(1)];if(t){var r=e.arguments.map(e=>{return this.compose_argument(e,n)});return l(t,n,r)}}});return t.length>2?t.join(''):t[0]}compose_value(e,n){return e.reduce((e,t)=>{switch(t.type){case 'text':{e+=t.value;break};case 'func':{var r=ue[t.name.substr(1)];if(r){var u=t.arguments.map(e=>{return this.compose_argument(e,n)});e+=l(r,n,u)}}}return e},'')}compose_rule(e,n){var t=e.property,r=this.compose_value(e.value,n);t=='transition'&&(this.props.has_transition=!0);var u=`${t}:${r};`;t=='clip-path'&&(u=m(u),u+=';overflow:hidden;');ce[t]&&(u=ce[t](r));return u}compose(e,n){(n||this.tokens).forEach((n,t)=>{if(n.skip)return!1;switch(n.type){case 'rule':this.add_rule(this.compose_selector(e.count),this.compose_rule(n,e));break;case 'psudo':{n.selector.startsWith(':doodle')&&(n.selector=n.selector.replace(/^\:+doodle/,':host'));var c=n.selector.startsWith(':host');c&&(n.skip=!0);var i=n.styles.map(n=>this.compose_rule(n,e)),a=c?n.selector:this.compose_selector(e.count,n.selector);this.add_rule(a,i);break};case 'cond':var o=s[n.name.substr(1)];if(o){var r=n.arguments.map(n=>{return this.compose_argument(n,e)}),u=l(o,e,r);u&&this.compose(e,n.styles)};break}})}output(){Object.keys(this.rules).forEach(e=>{var n=e.startsWith(':host');let t=n?'host':'cells';this.styles[t]+=`${e}{${a(this.rules[e])}}`});return{props:this.props,styles:this.styles}}}function ie(e,n){var t=new se(e);for(var r=1,u=0;r<=n.x;++r){for(var o=1;o<=n.y;++o)t.compose({x:r,y:o,count:++u})}return t.output()}let le={func(e = ''){return{type:'func',name:e,arguments:[]}},argument(){return{type:'argument',value:[]}},text(e = ''){return{type:'text',value:e}},comment(e){return{type:'comment',value:e}},psudo(e = ''){return{type:'psudo',selector:e,styles:[]}},cond(e = ''){return{type:'cond',name:e,styles:[],arguments:[]}},rule(e = ''){return{type:'rule',property:e,value:[]}}},ae={'(':')','[':']','{':'}'},pe={white_space(e){return /[\s\n\t]/.test(e)},open_bracket(e){return ae.hasOwnProperty(e)},close_bracket_of(e){var n=ae[e];return e=>e==n},number(e){return!isNaN(e)}};function fe(e){var n=0,t=1,r=1;return{curr:(t = 0)=>e[n+t],end:()=>e.length<=n,info:()=>({index:n,col:t,line:r}),next:()=>{var u=e[n++];u=='\n'?(r++, t=0):t++;return u}}}function me(e,{col:n,line:t}){throw new Error(`(at line ${t}, column ${n}) ${e}`)}function he(e){if(e.trim().length){return pe.number(+e)?+e:e.trim()}else{return e}}function de(e){var[n,t]=[e.curr(),e.curr()],r=pe.close_bracket_of(t);e.next();while(!e.end()){if(r(t=e.curr())){n+=t;break}else pe.open_bracket(t)?(n+=de(e)):(n+=t);e.next()}return n}function ye(e,n ={}){var t=le.comment(),r=e.curr();r!='#'&&e.next();e.next();while(!e.end()){if((r=e.curr())=='*'&&e.curr(1)=='/')break;else t.value+=r;r=e.curr();if(n.inline){if(r=='\n')return t}else{if(r=='*'&&e.curr(1)=='/')break}t.value+=r;e.next()}e.next();e.next();return t}function ge(e){var n='',t;while(!e.end()){if((t=e.curr())==':')break;else /[a-zA-Z\-]/.test(t)?pe.white_space(t)||(n+=t):me('Syntax error:Bad property name.',e.info());e.next()}return n}function xe(e,n){var t='',r;e.next();while(!e.end()){if((r=e.curr())==n){if(e.curr(-1)!=='\\')break;else t+=r}else t+=r;e.next()}return t}function _e(e){var n=[],t=[],r='',u;while(!e.end()){if(pe.open_bracket(u=e.curr()))r+=de(e);else if(/['"]/.test(u))r+=xe(e,u);else if(u=='@')t.length||(r=r.trimLeft()),r.length&&(t.push(le.text(r)),r=''),t.push(we(e));else if(/[,)]/.test(u)){r.length&&(t.length?(r=r.trimRight(),r.length&&t.push(le.text(r))):t.push(le.text(he(r))));n.push(t.slice());[t,r]=[[],''];if(u==')')break}else r+=u;e.next()}return n}function we(e){var n=le.func(),t='',r;while(!e.end()){if((r=e.curr())==')')break;if(r=='('){e.next();n.name=t;n.arguments=_e(e);break}else t+=r;e.next()}return n}function ze(e){var n=le.text(),t;let r=[];while(!e.end()){if((t=e.curr())=='\n'){e.next();continue}else if(/[;}]/.test(t)){n.value.length&&r.push(n);n=le.text();break}else t=='@'?(n.value.length&&r.push(n),n=le.text(),r.push(we(e))):(!pe.white_space(t)||!pe.white_space(e.curr(-1)))&&(t==':'&&me('Syntax error:Bad property name.',e.info()),n.value+=t);e.next()}n.value.length&&r.push(n);r.length&&r[0].value&&(r[0].value=r[0].value.trimLeft());return r}function be(e){var n='',t;while(!e.end()){if((t=e.curr())=='{')break;else pe.white_space(t)||(n+=t);e.next()}return n}function ve(e){var n={name:'',arguments:[]},t;while(!e.end()){if((t=e.curr())=='(')e.next(),n.arguments=_e(e);else if(/[){]/.test(t))break;else pe.white_space(t)||(n.name+=t);e.next()}return n}function ke(e){var n=le.psudo(),t;while(!e.end()){if((t=e.curr())=='}')break;if(pe.white_space(t)){e.next();continue}else n.selector?n.styles.push(Le(e)):(n.selector=be(e));e.next()}return n}function Le(e){var n=le.rule(),t;while(!e.end()){if((t=e.curr())==';')break;else if(!n.property.length)n.property=ge(e);else{n.value=ze(e);break}e.next()}return n}function Te(e){var n=le.cond(),t;while(!e.end()){if((t=e.curr())=='}')break;else if(!n.name.length)Object.assign(n,ve(e));else if(t==':'){var r=ke(e);r.selector&&n.styles.push(r)}else if(t=='@')n.styles.push(Te(e));else if(!pe.white_space(t)){var u=Le(e);u.property&&n.styles.push(u)}e.next()}return n}function He(e){let n=fe(e),t=[];while(!n.end()){var r=n.curr();if(pe.white_space(r)){n.next();continue}else if(r=='/'&&n.curr(1)=='*')t.push(ye(n));else if(r=='#'||r=='/'&&n.curr(1)=='/')t.push(ye(n,{inline:!0}));else if(r==':'){var u=ke(n);u.selector&&t.push(u)}else if(r=='@'){var o=Te(n);o.name.length&&t.push(o)}else if(!pe.white_space(r)){var c=Le(n);c.property&&t.push(c)}n.next()}return t}function Me(e,n){return ie(He(e),n)}let Se=1,je=16;function Ae(e){let[n,t]=(e+'').replace(/\s+/g,'').replace(/[,，xX]+/,'x').split('x').map(Number),r={x:f(n||Se,1,je),y:f(t||n||Se,1,je)};return Object.assign({},r,{count:r.x*r.y})}let We="\n:host{display:block;visibility:visible;width:1em;height:1em;}.container{position:relative;width:100%;height:100%\n}.container:after{content:'';display:block;clear:both;visibility:hidden\n}.cell{position:relative;float:left;line-height:0;box-sizing:border-box\n}.shape{box-sizing:border-box;line-height:0;position:absolute;width:100%;height:100%;transform-origin:center center;z-index:1;display:flex;align-items:center;justify-content:center\n}";class Ce extends HTMLElement{constructor(){super();this.doodle=this.attachShadow({mode:'open'})}connectedCallback(){setTimeout(()=>{if(!this.innerHTML.trim()){return!1}let e;try{e=Me(this.innerHTML,this.size=Ae(this.getAttribute('grid')))}catch(e){this.innerHTML='';throw new Error(e)};let{has_transition:n}=e.props;this.doodle.innerHTML=`<style>${We}</style><style class="style-container">${this.style_size()}${e.styles.host}</style><style class="style-cells">${n?'':e.styles.cells}</style><div class="container">${this.html_cells()}</div>`;n&&setTimeout(()=>{this.set_style('.style-cells',e.styles.cells)},50)})}style_size(){return`.cell{width:${100/this.size.y+'%'};height:${100/this.size.x+'%'};}`}html_cells(){let e="\n<div class=\"cell\"><div class=\"shape\"></div></div>";return e.repeat(this.size.count)}set_style(e,n){let t=this.shadowRoot.querySelector(e);t&&(t.styleSheet?(t.styleSheet.cssText=n):(t.innerHTML=n))}update(e){if(!e){return!1}this.size||(this.size=Ae(this.getAttribute('grid')));let n=Me(e,this.size);this.set_style('.style-container',this.style_size()+n.styles.host);this.set_style('.style-cells',n.styles.cells);this.innerHTML=e}refresh(){this.update(this.innerHTML)}get grid(){return Object.assign({},this.size)}set grid(e){this.setAttribute('grid',e);this.connectedCallback()}static get observedAttributes(){return['grid']}attributeChangedCallback(e,n,t){e=='grid'&&n&&(n!==t&&(this.grid=t))}}customElements.define('css-doodle',Ce)}))

docs/main.js

@@ -37,3 +37,3 @@ (function() {
       value: content,
-      readOnly: true,
+      readOnly: ('ontouchstart' in window) ? 'nocursor' : true,
       cursorBlinkRate: -1,
@@ -45,26 +45,71 @@ theme: '3024-day',
 
-  var doodleStyle = indent(`
-    :doodle {
-      clip-path: @shape(circle);
-      background-color: #f6ffed;
-    }
+  var doodles = {
+    'leaves': indent(`
+      :doodle {
+        clip-path: @shape(circle);
+        background-color: #f6ffed;
+      }
 
-    transition: .2s ease @rand(.6s);
+      transition: .2s ease @rand(.6s);
 
-    will-change: transform;
-    transform: scale(@rand(.25, 1.25));
+      will-change: transform;
+      transform: scale(@rand(.25, 1.25));
 
-    border-radius: @pick(
-      100% 0, 0 100%
-    );
+      border-radius: @pick(
+        100% 0, 0 100%
+      );
 
-    background: hsla(
-      calc(5 * @index()), 70%, 60%,@rand(.8)
-    );
-  `);
+      background: hsla(
+        calc(5 * @index()), 70%, 60%,@rand(.8)
+      );
+    `),
 
+    fish: indent(`
+      :doodle {
+        clip-path: @shape(pear);
+        transform: rotate(90deg);
+        background-image: linear-gradient(
+          to left, #03a9f4,
+          rgba(156, 39, 176, .02)
+        );
+      }
+
+      clip-path: @shape(fish);
+      transition: .24s ease;
+      background: hsla(
+        calc(190 + 2 * @index()),
+        70%, 60%,@rand(.8)
+      );
+      transform:
+        scale(@rand(.3, 2))
+        rotate(-90deg)
+        translate(
+          @rand(-50%, 50%), @rand(-50%, 50%)
+        );
+    `),
+
+    flames: indent(`
+      clip-path: @shape(bicorn);
+
+      background: hsla(
+        calc(200 + 2 * @index()),
+        70%, 60%,
+        @rand(.8)
+      );
+
+      transform:
+        rotate(@rand(360deg))
+        scale(@rand(.5, 3))
+        translate(
+          @rand(-100%, 100%),
+          @rand(-100%, 100%)
+        );
+    `)
+  }
+
   var doodle = document.createElement('css-doodle');
+  doodle.title = 'Click to update';
   doodle.grid = '7, 7';
   if (doodle.update) {
-    doodle.update(doodleStyle);
+    doodle.update(doodles.leaves);
   }
@@ -80,3 +125,5 @@
     if (!toggled() || container.hasAttribute('front')) {
-      doodle.refresh();
+      if (e.target.matches('css-doodle')) {
+        doodle.refresh();
+      }
     }
@@ -86,3 +133,3 @@ });
   var config = {
-    value: doodleStyle,
+    value: doodles.leaves,
     mode: 'css',
@@ -139,2 +186,16 @@ insertSoftTab: true,
 
+  var nav = document.querySelector('.playground .nav');
+  nav.addEventListener('click', function(e) {
+    if (e.target.matches('li[data-name]')) {
+      var name = e.target.getAttribute('data-name');
+      nav.setAttribute('data-current', name);
+      var newStyle = doodles[name];
+      if (newStyle) {
+        doodle.style.display = 'none';
+        editor.setValue(newStyle);
+        doodle.style.display = '';
+      }
+    }
+  });
+
   var shapes = [
@@ -141,0 +202,0 @@ { name: 'circle' },

package.json

 {
   "name": "css-doodle",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "A web component for drawing patterns with css.",
@@ -5,0 +5,0 @@ "main": "css-doodle.js",

README.md

@@ -8,9 +8,2 @@ # <css-doodle />
 
-## Installation
-
-```bash
-npm install css-doodle
-```
-
-
 ## Usage
@@ -17,0 +10,0 @@

src/generator.js

 import * as cond from './cond';
 import * as func from './function';
 import * as utils from './utils';
+import shortcuts from './shortcuts';
 
@@ -74,5 +75,7 @@ class Rules {
     }
-    if (property == 'size') {
-      rule = `width: ${ value }; height: ${ value };`;
+
+    if (shortcuts[property]) {
+      rule = shortcuts[property](value);
     }
+
     return rule;
@@ -79,0 +82,0 @@ }

src/tokenizer.js

@@ -270,3 +270,3 @@ const struct = {
 
-  if (value.length) {
+  if (value.length && value[0].value) {
     value[0].value = value[0].value.trimLeft();
@@ -273,0 +273,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

346310

increased by10.99%

Number of package files

26

increased by4%

Lines of code

3508

increased by2.99%

Worsened metrics

Number of lines in readme file

13

decreased by-35%

No dependency changes