css-doodle - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

css-doodle.js

@@ -73,8 +73,8 @@ (function (global, factory) {
 
+const store = {};
 function memo(prefix, fn) {
-  const memo = {};
   return function(...args) {
     let key = prefix + args.join('-');
-    if (memo[key]) return memo[key];
-    return (memo[key] = fn.apply(null, args));
+    if (store[key]) return store[key];
+    return (store[key] = fn.apply(null, args));
   }
@@ -175,3 +175,3 @@ }
 function siogon(sides = 3) {
-  return polygon({ split: minmax(sides, 3, 12) });
+  return polygon({ split: minmax(sides, 3, 8) });
 }
@@ -241,2 +241,3 @@
 function eternity() {
+  console.log('compute eterity');
   return polygon(t => {
@@ -253,2 +254,3 @@ var a = .7 * sqrt(2) * cos(t);
 function heart() {
+  console.log('compute heaert');
   return polygon(t => {
@@ -318,3 +320,3 @@ var x = .75 * pow(sin(t), 3);
 function shape(x, y, count) {
-  return function(type, ...args) {
+  return memo('shape', function(type, ...args) {
     if (type) {
@@ -326,3 +328,3 @@ type = type.trim();
     }
-  }
+  });
 }
@@ -329,0 +331,0 @@

css-doodle.min.js

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

docs/lib/css-doodle.min.js

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

package.json

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

src/function.js

@@ -35,3 +35,3 @@ import * as shapes from './shapes';
 export function shape(x, y, count) {
-  return function(type, ...args) {
+  return memo('shape', function(type, ...args) {
     if (type) {
@@ -43,3 +43,3 @@ type = type.trim();
     }
-  }
+  });
 }

src/shapes.js

@@ -1,2 +0,2 @@
-import { minmax, memo } from './utils';
+import { minmax } from './utils';
 
@@ -3,0 +3,0 @@ const { cos, sin, sqrt, pow, PI } = Math;

src/utils.js

@@ -28,8 +28,8 @@ export function values(obj) {
 
+const store = {};
 export function memo(prefix, fn) {
-  const memo = {};
   return function(...args) {
     let key = prefix + args.join('-');
-    if (memo[key]) return memo[key];
-    return (memo[key] = fn.apply(null, args));
+    if (store[key]) return store[key];
+    return (store[key] = fn.apply(null, args));
   }
@@ -36,0 +36,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

307635

increased by0.08%

Lines of code

3274

increased by0.06%

No dependency changes